ESP8266:Примеры/Отображение температуры и влажности на веб-странице при помощи прошивки NodeMCU

Материал из Онлайн справочника
Перейти к навигации Перейти к поиску

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Pixel Art Mini Meow Animated.gif Черновик


Отображение температуры и влажности на веб-странице при помощи прошивки NodeMCU

В этом руководстве мы создадим при помощи ESP8266 веб-сервер, доступ к которому можно будет получить с любого устройства с браузером. Этот веб-сервер будет обслуживать страницу, показывающую текущие температуру и влажность. Для считывания этих показателей мы воспользуемся датчиком DHT11.

Необходимое оборудование

  • Плата ESP8266 - 1шт.
  • Датчик температуры и влажности DHT11 - 1шт.
  • Резистор на 4,7 кОм - 1шт.
  • Макетная плата - 1шт.
  • Провода перемычки.

Справочная информация

Основы программирования на Lua

Это скриптовый язык программирования, написанный на C. Разработка этого проекта началась в 1993 году силами Роберту Иерузалимски, Луиша Энрике де Фигейреду и Валдемара Келе, работавшими тогда в подразделении Tecgraf при Католическом университете Рио-де-Жанейро.

Более подробно об этом языке программирования можно почитать в «Википедии».

Прошивка NodeMCU для ESP8266 основана на Lua, поэтому если вы хотите писать собственные скрипты для ESP8266, вам важно знать основы этого языка.

Переменные

Переменные в языке Lua не делятся по типу данных, но делятся по области видимости. Это значит, что переменные в Lua могут быть глобальными или локальными.

  • Глобальные переменные. Все переменные по умолчанию считаются глобальными (если в коде специально не задано, что они локальные).
pin = 3
test = "It works!"
  • Локальные переменные. Если переменная задана локальной, область ее видимости будет ограничена лишь ее функцией.
local pin = 3
local test = "It works!"
  • Поля таблиц. Это особый тип переменных, в которых может храниться все, за исключением «nil» (мы это затрагивать не будем).

Примечание: Lua – это язык, чувствительный к регистру. Поэтому переменная «PIN» – это не то же самое, что «Pin» или «pin».

Типы данных (типы значений)

Lua – это язык с динамической типизацией, поэтому у переменных нет типов данных. Типы данных есть только у значений. Значения могут храниться в переменных, передаваться в виде параметров и возвращаться в виде результатов.

В таблице ниже показаны типы данных для значений в языке Lua.

Тип значения Описание
Строка (string) Массив символов
Число (number) Действительное (двойной точности с плавающей запятой) число
Булево значение (boolean) Значение «true» или «false». Как правило, используется для проверки выполнения условий
Функция (function) Функция, написанная на Lua
Неопределенное значение (nil) В такой переменной не хранится никаких данных
Таблица (table), пользовательские данные (userdata) и поток (thread) Эти три типа данных мы затрагивать не будем

Вот примеры некоторых из этих типов значений:

1 print(type("Hello world!")) - строка
2 print(type(7))              -- число
3 print(type(true))           -- булево значение
4 print(type(print))          -- функция
5 print(type(nil))            -- неопределенное значение

Примечание: Работая с ESP8266 и прошивкой NodeMCU, вы изредка будете встречать тип данных «nil». Это будет значить лишь, что такая переменная не определена. Также, если вы хотите удалить какое-то значение в какой-то переменной, просто присвойте ей значение «nil».

Комментарии

Комментарии – это просто текст, в котором программист объясняет, как работает его код. Если какой-то фрагмент кода помечен как комментарий, то ESP-модуль проигнорирует его и не будет обрабатывать. Комментарии начинаются с двух тире («--»). Вот два типа комментариев:

  • Однострочные комментарии:
print("Hello World!") - комментарий в одну строчку
  • Многострочные комментарии:
--[[
print("Hello World!") – это многострочный комментарий
--]]

Операторы

Оператор – это символ, который говорит интерпретатору выполнить определенное математическое или логическое действие. В язык Lua встроено много операторов разных типов:

  • Арифметические операторы;
  • Операторы сравнения;
  • Логические операторы;
  • Прочие операторы;

Читая таблицы и примеры ниже, представьте, что имеете дело с двумя переменными: «А», в которой хранится значение «1», и «B», в которой хранится значение «2».

1 A = 1
2 B = 2
Арифметические операторы
Оператор Пример Результат
+ A + B 3
- A - B -1
* A * B 2
/ B / A 2
% B % A 0
^ B^2 4
- -A -1
Операторы сравнения
Оператор Пример Результат
== (A == B) false
~= (A ~= B) true
> (A > B) false
< (A < B) true
>= (A >= B) false
<= (A <= B) true
Логические операторы
Оператор Пример Результат
and (и) (A and B) false
or (или) (A or B) true
not (не) !(A and B) true
Оператор конкатенации

Теперь представьте, что у нас две новые переменные:

1 a = "Hello!"
2 b = "World!"
Оператор Пример Результат
.. a..b "Hello World!"

Циклы

Цикл позволяет выполнить блок кода несколько раз, пока выполняется заданное условие. Во фрагменте кода ниже – пока значением в переменной «boolean_value» является «true».

 1 -- цикл while
 2 while boolean_value
 3 do
 4  -- код будет выполняться, пока в «boolean_value» будет «true»
 5 end
 6 
 7 -- и цикл for
 8 for min, max, increment
 9 do
10   -- код будет выполняться, пока не будет достигнуто макс. значение
11 end

Операторы if… else

Операторы if... else (т.е. «если... иначе») – один из самых важных инструментов для управления программой. Они используются следующим образом:

1 if boolean_value then
2     -- если в переменной «boolean_value» значение «true»
3 else 
4     -- если в переменной «boolean_value» значение «false»
5 end

Названия этих операторов говорят сами за себя. Если выполнено условие «boolean_value=true», то программа выполнит код, идущий после «if». Но если условием является «boolean_value=false», то программа выполнит код, идущий после «else».

Функции

Функции – отличный способ организации кода. Если вы хотите сделать в программе что-либо несколько раз, вам необязательно по несколько раз прописывать этот код. Можно просто создать отдельную функцию, содержащую этот код, а затем вызывать ее, когда вам нужно.

Ниже показано, как создать новую функцию, принимающую один параметр (температуру в градусах Кельвина) и преобразующую это значение в градусы Цельсия и Фаренгейта.

 1 function displayTemperature(kelvin)
 2   celsius = kelvin  273.15
 3   print("Temperature in Celsius is: ", celsius)
 4 
 5   fahrenheit = (celsius*9/5+32)
 6   print("Temperature in Fahrenheit is: ", fahrenheit)
 7 end
 8 
 9 k = 294 - температура в градусах Кельвина
10 
11 displayTemperature(k) - эта строчка вызывает функцию, созданную выше

Как обращаться к контактам

В таблице ниже показано, как номер контакта ESP8266 в Lua-коде соотносится с его GPIO-номером. У платы ESP-01 только два контакта: GPIO0 и GPIO2.

Номер контакта в Lua-коде GPIO-номер контакта
0 [*] GPIO16
1 GPIO5
2 GPIO4
3 GPIO0
4 GPIO2
5 GPIO14
6 GPIO12
7 GPIO13
8 GPIO15
9 GPIO3
10 GPIO1
11 GPIO9
12 GPIO10

Использование датчика температуры и влажности DHT11

Датчики DHT – это относительно недорогие датчики для измерения температуры и влажности.

Внутри этого датчика есть чип, который выполняет аналогово-цифровое преобразование данных, выдавая в итоге цифровые данные о температуре и влажности.

Эти сигналы очень легко считываются любым микроконтроллером (MCU).

Mcu to dht11 scheme.png

Характеристики DHT11

  • Абсолютная погрешность: ±5%
  • Воспроизводимость результатов: ±1%
  • Долговременность стабильность измерений: ±1% в год
  • Цена: между 1 и 5 долларами
Dht11 pins 1.jpg

Контакты

  • VCC (3.3 вольта)
  • Вывод данных
  • Не подключен
  • GND

Код для загрузки

Pixel Art Mini Meow Animated.gif Внимание! Для работы данного скрипта в вашей прошивке должен быть интегрирован модуль DHT, для работы с датчиками данного типа.


 1 -- Rui Santos
 2 -- Complete project details at http://randomnerdtutorials.com
 3 
 4 wifi.setmode(wifi.STATION)
 5 wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
 6 tmr.delay(5000)
 7 print(wifi.sta.getip())
 8 
 9 pin = 1
10 bimb = 1
11 fare = 0
12 fare_dec = 0
13 
14 --Read DHT Sensor
15 function ReadDHT11()
16     status, temp, humi, temp_dec, humi_dec = dht.read(pin)
17     if status == dht.OK then
18         print(string.format("DHT Temperature:%d.%03d;Humidity:%d.%03d\r\n",
19               math.floor(temp),
20               temp_dec,
21               math.floor(humi),
22               humi_dec
23         ))
24         fare = (9 * math.floor(temp) / 5) + 32
25         fare_dec = (9 * temp / 5) % 10
26     elseif status == dht.ERROR_CHECKSUM then
27         print( "DHT Checksum error." )
28     elseif status == dht.ERROR_TIMEOUT then
29         print( "DHT timed out." )
30     end
31 end
32 ReadDHT11()
33 
34 tmr.alarm(1,5000, 1, function() ReadDHT11() bimb=bimb+1 if bimb==5 then bimb=0 wifi.sta.connect() print("Reconnect")end end)
35 
36 srv=net.createServer(net.TCP) srv:listen(80,function(conn)
37     conn:on("receive",function(conn,payload)
38    --print(payload) -- for debugging only
39     --generates HTML web site
40     conn:send('HTTP/1.1 200 OK\r\nConnection: keep-alive\r\nCache-Control: private, no-store\r\n\r\n\
41         <!DOCTYPE HTML>\
42         <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head>\
43         <meta http-equiv="X-UA-Compatible" content="IE=edge">\
44         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">\
45         <meta http-equiv="refresh" content="6">\
46         </head><div class="container">\
47         <h1>Sensor Data</h1></br><div class="row">\
48         <div class="col-md-4"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Humidity</h3>\
49         </div><div class="panel-body">\
50         <div class="form-group form-group-lg"><input type="text" class="form-control" value="'..math.floor(humi)..'.'..humi_dec..' %">\
51         </div></div></div></div>\
52         <div class="col-md-4"><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">Temperature</h3>\
53         </div><div class="panel-body">\
54         <div class="form-group form-group-lg"><input type="text" class="form-control" value="'..math.floor(temp)..'.'..temp_dec..' deg C">\
55         <input type="text" class="form-control" value="'..fare..'.'..fare_dec..' deg F">\
56         </div></div></div></div></div></div></html>')
57     conn:on("sent",function(conn) conn:close() end)
58     end)
59 end)

Как работает этот скрипт

Код начинается с переключения ESP8266 в режим станции. Затем мы задаем SSID и пароль WiFi-сети, к которой подключаемся. Соответственно, вам нужно будет заменить параметры "YOUR_NETWORK_NAME" и "YOUR_NETWORK_PASSWORD" на собственные, чтобы ESP8266 могла подключиться к вашей WiFi-сети.

Затем при помощи функции tmr.delay(5000) задается 5-секундная пауза. Это дает ESP8266 время для подключения к сети.

В следующей строчке функция print() печатает IP-адрес ESP8266 в окне Output в IDE ESPlorer (этот IP-адрес понадобится вам, чтобы подключиться к веб-серверу).

1 wifi.setmode(wifi.STATION)
2 wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
3 tmr.delay(5000)
4 print(wifi.sta.getip())

Затем задаем контакт, к которому подключен DHT11. В данном случае это «pin = 1», что означает контакт GPIO5. Также создаем еще 3 переменные для хранения данных.

1 pin = 1
2 bimb = 1
3 fare = 0
4 fare_dec = 0

Затем создаем функцию с говорящим названием ReadDHT11(). Она считывает с датчика DHT11 данные о температуре и влажности, а затем сохраняет их в правильные переменные. Она также печатает эти данные в окно Output в IDE ESPlorer.

 1 function ReadDHT11()
 2     status, temp, humi, temp_dec, humi_dec = dht.read(pin)
 3     if status == dht.OK then
 4         print(string.format("DHT Temperature:%d.%03d;Humidity:%d.%03d\r\n",
 5               math.floor(temp),
 6               temp_dec,
 7               math.floor(humi),
 8               humi_dec
 9         ))
10         fare = (9 * math.floor(temp) / 5) + 32
11         fare_dec = (9 * temp / 5) % 10
12     elseif status == dht.ERROR_CHECKSUM then
13         print( "DHT Checksum error." ) -- "Ошибка контрольной суммы"
14     elseif status == dht.ERROR_TIMEOUT then
15         print( "DHT timed out." ) -- "Таймаут"
16     end
17 end
18 ReadDHT11()

Нам также нужно создать функцию tmr.alarm(), которая будет запускать функцию ReadDHT11() каждые 5 секунд. При каждом вызове она считывает текущие данные о температуре и влажности. Далее мы создаем объект веб-сервера на порте 80 и вызываем функцию conn:send().

 1 tmr.alarm(1,5000, 1, function() ReadDHT11() bimb=bimb+1 if bimb==5 then bimb=0 wifi.sta.connect() print("Reconnect")end end)
 2 
 3 srv=net.createServer(net.TCP) srv:listen(80,function(conn)
 4     conn:on("receive",function(conn,payload)
 5    --print(payload) – только для отладки
 6     -- генерирует HTML-страницу
 7     conn:send()
 8     conn:on("sent",function(conn) conn:close() end)
 9     end)
10 end)

Внутри функции conn:send() мы пишем данные HTML-страницы (см. код ниже). Это простая веб-страница, использующая фреймворк Bootstrap. Более подробно о Bootstrap можно почитать тут.

 1 conn:send('HTTP/1.1 200 OK\r\nConnection: keep-alive\r\nCache-Control: private, no-store\r\n\r\n\
 2         <!DOCTYPE HTML>\
 3         <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head>\
 4         <meta http-equiv="X-UA-Compatible" content="IE=edge">\
 5         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">\
 6         <meta http-equiv="refresh" content="6">\
 7         </head><div class="container">\
 8         <h1>Sensor Data</h1></br><div class="row">\
 9         <div class="col-md-4"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Humidity</h3>\
10         </div><div class="panel-body">\
11         <div class="form-group form-group-lg"><input type="text" class="form-control" value="'..math.floor(humi)..'.'..humi_dec..' %">\
12         </div></div></div></div>\
13         <div class="col-md-4"><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">Temperature</h3>\
14         </div><div class="panel-body">\
15         <div class="form-group form-group-lg"><input type="text" class="form-control" value="'..math.floor(temp)..'.'..temp_dec..' deg C">\
16         <input type="text" class="form-control" value="'..fare..'.'..fare_dec..' deg F">\
17         </div></div></div></div></div></div></html>')

Этот код создает симпатичную страницу, показывающую данные о температуре и влажности, а также способную адаптироваться под экраны мобильных устройств.

Загружаем скрипт «init.lua»

Чтобы загрузить этот Lua-скрипт на ESP8266, проделайте следующее:

  1. Подключите ESP8266 (напрямую или через FTDI-программатор) к ПК
  2. Выберите COM-порт, к которому подключен ESP8266
  3. Нажмите на кнопку «Open/Close»
  4. Выберите вкладку «NodeMCU+MicroPython»
  5. Создайте новый файл под названием «init.lua»
  6. Нажмите на кнопку «Save to ESP»

Кроме того, в окне Output будут напечатаны команды, отсылаемые ESP8266.

Esp8266 nodemcu lua file deleting.png

Примечание: Вы можете без труда удалить файл «init.lua» из ESP8266. Для этого просто впишите file.remove(“init.lua”) и нажмите на кнопку «Send» (см. скриншот выше). Если вам нужно удалить все файлы, хранящиеся на ESP8266, воспользуйтесь командой file.format().

Узнаем IP-адрес ESP8266

После того, как вы загрузите на ESP8266 веб-серверный Lua-скрипт, в окне Output в IDE ESPlorer должно появиться три IP-адреса.

Нам нужен самый первый IP-адрес. В моем случае это «192.168.1.70», но у вас, скорее всего, будет какой-то другой IP-адрес. Сохраните его где-нибудь, потому что чуть позднее он нам понадобится.

Esp8266 lua - ip address.png

Примечание: Если IP-адрес не появился в окне Output, то его можно узнать, отправив ESP8266 команду print(wifi.sta.getip()).

Собираем цепь

Загрузив скрипт на ESP8266, соберите цепь, показанную ниже. Для подключения DHT11 вам также понадобится резистор номиналом 4,7 кОм или выше, который будет служить подтягивающим резистором.

Внимание: Чтобы цепь работала, вам понадобится 3.3-вольтовый источник питания с 250 мА.

ESP8266 schematics bb ESP8266 DHT11DHT22 6.jpg

Подключаемся к веб-серверу

Чтобы подключиться к веб-серверу, проделайте следующее:

  1. Перезапустите ESP8266
  2. Откройте браузер
  3. Впишите в адресную строку браузера IP-адрес, сохраненный ранее (в моем случае это «192.168.1.70»)

В результате должна загрузиться примерно такая веб-страница:

Esp8266 lua nodemcu dht11 web server.jpg

Клево, а? Смело пробуйте модифицировать этот Lua-скрипт и добавлять в него свои идеи. И помните, что эта веб-страница будет автоматически обновляться каждые 6 секунд.

Кроме того, эта HTML-страница способна адаптироваться под любые экраны, так что она будет хорошо выглядеть в том числе и на экране мобильного устройства.

Что дальше

Плата ESP-12E оснащена лишь одним аналоговым контактом, что очень неудобно, если вы хотите подключить к своему проекту больше одного аналогового датчика/модуля...

Как можно обойти эту проблему? Есть один вариант.

Можно настроить последовательную коммуникацию между Arduino и ESP8266 и подключить к Arduino нужные датчики.

Arduino будет делать всю черную работу, считывая данные с датчиков, а затем отправляя их по последовательному порту ESP8266. Сам ESP8266, тем временем, будет получать эти данные и показывать их на веб-странице!

Впрочем, вам нужно будет немного адаптировать некоторые фрагменты этого руководства, чтобы Arduino могла считывать данные с датчиков.

См.также

Внешние ссылки