ESP8266: графический термометр и графики данных для странички.

Тема в разделе "Глядите, что я сделал", создана пользователем ИгорьК, 12 мар 2015.

Метки:
Страница 1 из 3
  1. ИгорьК

    ИгорьК Гуру

    Вам нравится термометр, типа как здесь, в правом верхнем углу?
    А давайте повторим. Две штуки для тренировки. Вот так:
    twotermo.jpg
    Что для этого нужно? Нужны два датчика DS18b20 и модуль ESP8266 с таким кодом:
    Код (Lua):
    require('ds18b20')
    ds18b20.setup(4)
    addres=ds18b20.addrs()
    function sendData()
    local addres = addres
    t=ds18b20.read(addres[1])
    t1=ds18b20.read(addres[2])
    print("Temp0:"..t.." C\n")
    print("Temp1:"..t1.." C\n")

    conn=net.createConnection(net.TCP, 0)

    conn:on("receive", function(conn, payload) print(payload) end)

    conn:connect(80,'your.domane.ru')

    conn:on("connection", function(sck) sck:send("GET /termometer.php?t="..t.."&t1="..t1.." HTTP/1.1\r\nHost: www.nodemcu.com\r\nConnection: keep-alive\r\nAccept: */*\r\n\r\n") end )

    conn:on("sent",function(conn)
      print("Closing connection")
      conn:close()
      end)

      conn:on("disconnection", function(conn)
      print("Got disconnection...")
      end)
    end
    sendData()
    tmr.alarm(0, 600000, 1, function() sendData() end )
     
    Нужна php страничка, с таким кодом:
    Код (PHP):
    <html lang="ru-RU">
      <head><meta charset="UTF-8">
        <title>Градусник</title>
    </head>
    <body>
    <?php
    if (isset($_GET["t"]))  { $t=$_GET["t"]; }
    if (isset($_GET["t1"]))  { $t1=$_GET["t1"]; }

    if (isset($t)) {
    $t = $t*100;
    $t=(int)$t;
    $t = (float)$t;
    $t = $t/100;

    $t1 = $t1*100;
    $t1=(int)$t1;
    $t1 = (float)$t1;
    $t1 = $t1/100;

    $ti = 48-$t; //

    $image = imageCreateFromPng("termometer.png");
      if(is_resource($image)) {
        $font_file = './arial.ttf';
        imagefttext($image, 20, 0, 55, 55, $black, $font_file, $t."°C");
        $red = imagecolorallocate($image, 255, 0, 0);
        imageline($image, 32, 90, 32, $ti, $red);
        imageline($image, 33, 90, 33, $ti, $red);
        imageline($image, 34, 90, 34, $ti, $red);
        $im = date("H:i d.m");
        imagettftext ($image, 10, 0, 63, 103, $white, "/arial.ttf", $im);
        imagepng($image,"thermometer.png");
      }

    $ti1 = 48-$t1;
    $image = imageCreateFromPng("termometer.png");
      if(is_resource($image)) {
        $font_file = './arial.ttf';
        imagefttext($image, 20, 0, 55, 55, $black, $font_file, $t1."°C");
        $red = imagecolorallocate($image, 255, 0, 0);
        imageline($image, 32, 90, 32, $ti1, $red);
        imageline($image, 33, 90, 33, $ti1, $red);
        imageline($image, 34, 90, 34, $ti1, $red);
        $im = date("H:i d.m");
        imagettftext ($image, 10, 0, 63, 103, $white, "/arial.ttf", $im);
        imagepng($image,"thermometer1.png");
      }
    }
    ?>
    <br>
    <img src=thermometer1.png?t=<?php echo rand(1,1000) ?> >
    <img src=thermometer.png?t=<?php echo rand(1,1000)  ?> >
    </body>
    </html>
     
    И еще пару файлов к ней. Все в приложении.
    UPD 15.03.2015. Прикладываю библиотеку, которая знает об отрицательных температурах. Проверено в кухонном холодильнике.
     

    Вложения:

    • end.zip
      Размер файла:
      401,1 КБ
      Просмотров:
      1.711
    • CorrectMinusds18b20.zip
      Размер файла:
      1,1 КБ
      Просмотров:
      1.192
    Последнее редактирование: 16 мар 2015
    ИгорьК, 12 мар 2015
    #1
    sys, vvr, Geedeon и 6 другим нравится это.
  2. NE_XT

    NE_XT Гик

    дядя ИгорьК,
    мануальчик к этому чуду напишите
    с esp8266 попродробней...

    Исправил пост , нашел ошибку.
     
    Последнее редактирование: 2 апр 2015
    NE_XT, 2 апр 2015
    #2
  3. ИгорьК

    ИгорьК Гуру

    А вот по ссылке такой перейдите: http://dxb.esy.es/teplota/index.php?t=33
    Что увидите? Увидите, что термометр появился. Только на нем нет никаких данных. Вопрос - а установлена ли у провайдера библиотека GD2? Узнать это можно, читая лог php файла - он там обязательно скажет об ошибке.
    Пример оформления для затравки:
    123412324.jpg
     
    Последнее редактирование: 2 апр 2015
    ИгорьК, 2 апр 2015
    #3
  4. NE_XT

    NE_XT Гик

    Холодновато у вас что-то :)
    С хостингом разобрался , на выходных esp8266 мучить буду.
    Спасибо.
     
    NE_XT, 2 апр 2015
    #4
  5. ИгорьК

    ИгорьК Гуру

    На неделе автоматика сбрасывает температуру до 18 градусов, а в пятницу начинает нагревать до 23. :)
     
    ИгорьК, 2 апр 2015
    #5
  6. ИгорьК

    ИгорьК Гуру

    Ну что, к термометру пора добавить график. Вот такой:
    55329.jpg
    Для этого в папке на веб сервере создадим три файла:
    getdata.php :
    Код (PHP):
    <?php
    $now = new DateTime();
    parse_str( html_entity_decode( $_SERVER['QUERY_STRING']) , $out);

    // html_entity_decode --  Преобразует HTML сущности в соответствующие символы


    if ( array_key_exists( 'data01' , $out )) {

    echo "\n\r\n\rData is: " . $out['data01'];
    $handle = fopen("gotdata.csv", "a");

    fwrite( $handle , $now->format('Y-m-d H:i:s') . " , " . $out['data01'] . "\n" );
    fclose ( $handle ) ;

    }
    ?>
    index.html
    Код (HTML5):
    <html>
    <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js"></script>
    </head>
    <body>
    <div id="graphdiv2"
    style="width:700px; height:400px;"></div>
    <script type="text/javascript">
    g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "gotdata.csv", // path to CSV file
    {
        legend: 'always',
        title: 'My chart',
        showRoller: true,
        //rollPeriod: 14,
        //customBars: true,
        //ylabel: 'Temperature (C)',
        //xlabel: 'Time',
        animatedZooms: true,
    }          // options
    );

    </script>

    </body>
    </html>
    gotdata.csv:
    Код (Text):
    Date, D_01
     
    Последний файл необходимо сделать доступным для записи.
    Также необходимо добавить, что эта конструкция не слишком защищена от кулхацкеров. Поэтому выводить в открытый доступ в Интернет ее не рекомендуется.
    Зато работает, собирает данные и очень неплохо отображает ;)
    А можно и так:
    234635.jpg
     
    Последнее редактирование: 28 апр 2015
    ИгорьК, 28 апр 2015
    #6
  7. Cadil

    Cadil Нерд

    Попытался повторить ваш термометр для странички. Проблемы с php-скриптом. Загрузил php-скрипт и остальные необходимые файлы на удаленный сервер. Скрипт работает, но криво: изображения termometer.png, termometer1.png не отображаются. Если контекстным меню пытаться открыть картинку, то - The requested URL /thermometer.png was not found on this server, хотя картинки на сервере есть.
    Во вложении - скрин с локального сервера Apache, на удаленном - аналогичная ситуация.
    В чем проблема?
    term_site.jpg
     
    Cadil, 20 апр 2016
    #7
  8. ИгорьК

    ИгорьК Гуру

    Понятия не имею.
    Начните разбирательство с помещения странички не в корень, а в какую-нибудь директорию.
    Потом напишите простую страничку на php, которая включает в себя картинку.
    И лишь потом - эту страничку, когда начнет отражать картинки.
    Возможно проблемы в настройках Apache, но я не специалист в нем. Надо было решить задачу - решил. И уже забыл об этом :)
     
    ИгорьК, 20 апр 2016
    #8
  9. ИгорьК

    ИгорьК Гуру

    Вспоминаю, что чтобы сервер рисовал картинки, в нем что-то должно быть включено, что не всегда включают. Почитайте темы про рисование на PHP.
    .
     
    ИгорьК, 20 апр 2016
    #9
    Cadil нравится это.
  10. Cadil

    Cadil Нерд

    Спасибо! С картинками разобрался. Теперь проблемы с информацией на картинках - у провайдера не установлена библиотека для обработки изображений.
    Помогите написать команду в вашем скрипте termometer.php, чтобы температура выводилась не на поле рисунка, а в текстовом виде, по образцу - Температура: <переменная> С.
     
    Cadil, 23 апр 2016
    #10
  11. ИгорьК

    ИгорьК Гуру

    Дело в том, что я не Web программист и php не знаю. Надо было решение - я его нашёл. Посмотрите мою тему про Arduino Yun. Там есть cпособ... который я уже тоже не помню. Но там я выводил на страничке четыре значения температуры. Делалось это с участием MySql. Можете повторить. Однако, знаю, есть и более простые решения. Для этого надо покурить руководство по php. И кто из нас с Вами этим займётся? :)
     
    ИгорьК, 24 апр 2016
    #11
  12. Cadil

    Cadil Нерд

    Логично. Так и сделал. Удач!
     
    Cadil, 24 апр 2016
    #12
  13. Ser8191

    Ser8191 Нерд

    ИгорьК, будьте добры, помогите:
    Залил Ваш файл ds18b20.lua

    Код (C++):
    require('ds18b20')
    ds18b20.setup(3)
    addres=ds18b20.addrs()
    function sendData()
    local addres = addres
    t=ds18b20.read(addres[1])
    t1=ds18b20.read(addres[2])
    print("Temp0:"..t.." C\n")
    print("Temp1:"..t1.." C\n")
    end
    sendData()
    tmr.alarm(0, 600000, 1, function() sendData() end )
     
    Получаю:
    main.lua:8: attempt to concatenate global 't' (a nil value)
     
    Ser8191, 27 июн 2017
    #13
  14. ИгорьК

    ИгорьК Гуру

    "Переменная t равна nil поэтому со стрингом ее не спарить".
    Если Вы залили файл ds18b20.lua и появилась это сообщение то либо:
    - неправильно соединены датчики,
    - неисправный датчик
    - нет модуля one wire в прошивке.
     
    ИгорьК, 27 июн 2017
    #14
  15. Ser8191

    Ser8191 Нерд

    Ser8191, 28 июн 2017
    #15
  16. ИгорьК

    ИгорьК Гуру

    ИгорьК, 28 июн 2017
    #16
  17. Ser8191

    Ser8191 Нерд

    Спасибо, собрал.
    Безымянный.png
    Заливаю ds18b20.lua
    upload_2017-6-28_10-43-14.png
    upload_2017-6-28_10-46-31.png
     
    Ser8191, 28 июн 2017
    #17
  18. Ser8191

    Ser8191 Нерд

    Ser8191, 28 июн 2017
    #18
  19. ИгорьК

    ИгорьК Гуру

    ИгорьК, 28 июн 2017
    #19
  20. ИгорьК

    ИгорьК Гуру

    Все работает.
    У меня только один датчик сейчас, поэтому убрал ссылки на второй, а так - все повторил в точности:
    1234567.jpg
     
    ИгорьК, 28 июн 2017
    #20
Страница 1 из 3