Arduino dht22 web

Содержание

Урок 2. Подключаем DHT11, DHT22 к ESP32, ESP8266. Показание на веб-странице.

Вы когда-нибудь хотели, чтобы датчики, разбросанные по всей квартире или дому, регулярно отправляли данные температуры и влажности на веб-сервер, и их можно будет посмотреть в любое время? Тогда этот урок ESP32 может стать для вас отправной точкой! В этом уроке ESP32 используется в качестве устройства управления, которое легко подключается к существующей сети Wi-Fi и создает веб-сервер. Когда любое подключенное устройство обращается к этому веб-серверу, ESP32 считывает температуру и относительную влажность с датчиков DHT11, DHT22 и отображает их в веб-браузере этого устройства. Вас заинтересовало, как это реализовать? Тогда давайте начнем!

Это может показаться устрашающим, но есть несколько уроков, с которыми вам следует ознакомиться, прежде чем приступать к этому уроку:

Схема подключения датчика DHT11, DHT22 к ESP32.

Подключить датчик DHT11, DHT22 к ESP32 довольно просто. Начните с размещения ESP32 на макетной плате.

Теперь поместите датчик на макетную плату рядом с ESP32. Подключите вывод VCC на датчике к выводу 3,3 В на ESP32, и соедините контакты GND платы и датчика. Также подключите контакт данных датчика к контакту 4 на ESP32.

Когда вы закончите, у вас должно получиться что-то похожее на изображение, показанное ниже.

Установка библиотеки датчиков DHT.

Взаимодействие с датчиками DHT11, DHT22— это достаточно сложно, поскольку у них есть собственный однопроводной протокол для передачи данных. И этот протокол требует точного времени. К счастью, нам не нужно сильно об этом беспокоиться, потому что мы собираемся использовать библиотеку DHT от Adafruit, которая позаботится почти обо всем. Библиотека работает как на архитектуре Arduino, так и на ESP.

Чтобы установить библиотеку, перейдите в Скетч> Подключить библиотеку> Управлять библиотеками . Подождите, пока диспетчер библиотек загрузит индекс библиотек и обновит список установленных библиотек.

Отфильтруйте результаты поиска, набрав «DHT». Должна быть пара записей. Ищите библиотеку датчиков DHT от Adafruit. Щелкните эту запись и выберите «Установить».

Библиотека датчиков DHT использует серверную часть поддержки Adafruit Sensor. Итак, найдите в диспетчере еще одну библиотеку «Adafruit Unified Sensor» и установите её тоже.

Создание веб-сервера ESP32 в режиме WiFi станции (STA).

Как следует из заголовка, мы собираемся настроить ESP32 в режим станции (STA) и создать веб-сервер для отображения веб-страницы для любого подключенного клиента в существующей сети.

Прежде чем вы отправитесь загружать скетч, вам нужно внести одно изменение, чтобы у вас все работало. Вам необходимо изменить следующие две переменные, указав ваши сетевые учетные данные, чтобы ESP32 смог установить соединение с существующей сетью.

После чего загрузите код, а затем мы разберем его более подробно.

Доступ к веб-серверу.

После загрузки скетча откройте Serial Monitor со скоростью 115200 бод, и нажмите кнопку RESET на ESP32. Если все в порядке, он выведет динамический IP-адрес, полученный от вашего маршрутизатора, и покажет сообщение о запуске HTTP-сервера.

Затем загрузите браузер и укажите ему IP-адрес, отображаемый в последовательном мониторе порта. ESP32 должен отдать веб-страницу, показывающую температуру и относительную влажность.

Подробное объяснение кода.

Скетч начинается с подключения библиотеки WiFi.h. Эта библиотека предоставляет специальные методы WiFi для ESP32, которые мы вызываем для подключения к сети. После этого мы также подключаем библиотеку WebServer.h, в которой есть несколько доступных методов, которые помогут нам настроить сервер и обрабатывать входящие HTTP-запросы, не беспокоясь о реализации на низком уровне. Наконец, мы подключаем библиотеку DHT.h.

Далее нам нужно определить тип используемого датчика DHT. Раскомментируйте одну из строк ниже! В моем примере я использую датчик DHT11.

Поскольку мы настраиваем ESP32 в режиме станции (STA), он подключится к существующей сети Wi-Fi. Следовательно, вам необходимо указать ему SSID и пароль вашей сети. Что и сделали перед загрузкой кода в ESP32.

Затем, объявляем объект библиотеки WebServer, чтобы получить доступ к его функциям. Конструктор этого объекта принимает порт (который сервер будет слушать) в качестве параметра. Поскольку 80 — порт по умолчанию для HTTP, мы будем использовать это значение. Теперь вы можете получить доступ к серверу без необходимости указывать порт в URL-адресе.

Затем нам нужно определить номер контакта ESP32, к которому подключен контакт Data нашего датчика, и создать объект DHT. Таким образом, мы можем получить доступ к специальным функциям, связанным с библиотекой DHT.

Создаем две переменные с плавающей запятой. Для температуры и влажности.

Функция Setup ().

Мы настраиваем свой HTTP-сервер перед его запуском. Затем, мы открываем последовательное соединение для отладки и устанавливаем GPIO на INPUT. Нам также необходимо инициализировать объект DHT с помощью begin() функции.

Теперь нам нужно подключиться к сети Wi-Fi с помощью WiFi.begin() функции. Функция принимает в качестве параметра SSID (сетевое имя) и пароль.

Пока ESP32 пытается подключиться к сети, мы можем проверить статус подключения с помощью функции WiFi.status () .

Как только ESP32 подключится к сети, скетч выведет IP-адрес в последовательный монитор порта, назначенный ESP32, за что отвечает функция WiFi.localIP.

Чтобы обрабатывать входящие HTTP-запросы, нам нужно указать, какой код выполнять при вызове конкретного URL. Для этого мы используем метод on . Этот метод принимает два параметра. Первый — это URL-путь, а второй — имя функции, которую мы хотим выполнить при переходе по этому URL-адресу.

Приведенный ниже код указывает, что когда сервер получает HTTP-запрос по корневому пути ( / ), он запускает handle_OnConnect функцию. Обратите внимание, что указанный URL-адрес является относительным путем.

Мы не указали, что должен делать сервер, если клиент запрашивает любой URL-адрес, отличный от указанного в server.on(). Он должен ответить HTTP-статусом 404 (Not Found) и сообщением для пользователя. Мы также помещаем в функцию и используем server.onNotFound(), чтобы сообщить, что она должна выполнить ее, когда получит запрос на URI, который не был указан в server.on.

Теперь, чтобы запустить наш сервер, мы вызываем метод begin объекта server.

Основной цикл Loop().

Чтобы обрабатывать входящие HTTP-запросы, нам нужно вызвать handleClient() метод объекта сервера.

Затем, нам нужно создать функцию, которую мы прикрепили к корневому (/) URL с помощью server.on. Помните? В начале этой функции мы получаем значения температуры и влажности с датчика. Чтобы ответить на HTTP-запрос, мы используем метод send . Хотя метод может быть вызван с другим набором аргументов, его простейшая форма состоит из кода ответа HTTP.

В нашем случае, мы отправляем код 200 (один из кодов состояния HTTP), который соответствует ответу OK — ответ получен. Затем, мы указываем тип содержимого как «текст / html» и, наконец, вызываем пользовательскую функцию SendHTML (), которая создает динамическую HTML-страницу, содержащую значения температуры и влажности.

Точно так же нам нужно создать функцию для обработки страницы ошибки 404.

Отображение веб-страницы HTML.

SendHTML() Функция отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP32 получает запрос от веб-клиента. Он просто объединяет HTML-код в большую строку и возвращает server.send() функцию, которую мы обсуждали ранее. Функция принимает значения температуры и влажности в качестве параметров для динамической генерации содержимого HTML.

Первый текст, который вы всегда должны отправить , указывающий на то, что мы посылаем HTML код.

Затем элемент viewport заставляет веб-страницу загружаться в любом браузере. В то время как тег title устанавливает заголовок страницы.

Стилизация веб-страницы.

Затем у нас есть CSS для стилизации внешнего вида веб-страницы. Мы выбираем шрифт Helvetica, определяем контент, который будет отображаться, в виде встроенного блока, и выравниваться по центру.

Установка заголовка веб-страницы.

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

Отображение температуры и влажности на веб-странице.

Чтобы динамически отображать значения температуры и влажности, мы помещаем эти значения в тег абзаца «p». Эти значения преобразуются в целые числа путем приведения типа переменной (int). Для отображения символа градуса мы используем HTML-объект & deg;

Стилизация веб-страницы, чтобы выглядело более профессионально.

Программисты часто пугаются дизайна, но немного усилий может сделать вашу веб-страницу более привлекательной и профессиональной. Скриншот ниже даст вам общее представление о том, что мы собираемся делать.

Давайте применим некоторый стиль к предыдущей HTML-странице. Для начала скопируйте и вставьте код ниже, полностью заменим SendHTML() функцию. Попробуйте новый код, а затем мы его детально разберем.

Мы уже знаем, что объявление сообщает браузеру, что мы отправляем HTML-код, а элемент области просмотра заставляет веб-страницу реагировать. Единственное дополнение — мы собираемся использовать шрифты Google . У Google есть сотни веб-шрифтов, которые бесплатны для коммерческого и личного использования.

Для нашей веб-страницы мы будем использовать Google веб-шрифт Open Sans. Шрифт Google встроен с помощью тега ссылки в вашего HTML-документа. Для нашей страницы мы выбрали 300 (светлый), 400 (обычный) и 600 (жирный) шрифт. Вы можете выбрать столько, сколько хотите, но имейте в виду, что выбор неиспользуемого шрифта увеличивает время загрузки страницы. Вы также можете добавить курсив, просто добавив символ «i» в конце веса шрифта, например: «400i» будет отображать курсив.

Обратите внимание, что вы не увидите шрифт Google без активного подключения к Интернету на устройстве, на котором вы собирайтесь получить доступ к этой странице. Шрифты Google загружаются на лету.

Затем, мы собираемся применить шрифт Open Sans для всего нашего HTML. Нам также необходимо указать sans-serif в качестве резервного шрифта, чтобы обеспечить максимальную совместимость между браузерами / операционными системами. Если браузер не поддерживает первый шрифт, он пробует следующий шрифт.

Далее мы выводим показание температуры с помощью значка.

Значок температуры, на самом деле, представляет собой масштабируемую векторную графику (SVG), определенную в теге . Создание SVG не требует особых навыков программирования. Вы можете использовать Google SVG Editor для создания графики для своей страницы. После значка мы собираемся показать фактическое значение температуры с датчика.

Далее мы выведем показания влажности с помощью этойиконки.

Опять же, это SVG. После вывода значения влажности закроем все открытые теги, такие как body и html.

Улучшение кода — автоматическое обновление страницы.

Одно из улучшений, которое можно сделать — это автоматическое обновление страницы для обновления значения датчика.

Добавив один метатег в HTML-документ, можно указать браузеру автоматически перезагружать страницу с заданным интервалом.

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

Динамическая загрузка данных датчика с помощью AJAX.

Обновление веб-страницы не слишком практично, если у вас тяжелая веб-страница. Лучшим методом является использованиеJavascript и Xml ( AJAX ), чтобы мы могли запрашивать данные с сервера асинхронно (в фоновом режиме) без обновления страницы.

Объект XMLHttpRequest в JavaScript обычно используется для выполнения AJAX на веб-страницах. Он выполняет тихий запрос GET на сервере и обновляет элемент на странице. AJAX — это не новая технология или другой язык, это просто существующие технологии, используемые по-новому. Помимо этого, AJAX также позволяет:

  • Запросить данные с сервера после загрузки страницы
  • Получать данные с сервера после загрузки страницы
  • Отправка данных на сервер в фоновом режиме

Вот сценарий AJAX, который мы будем использовать. Поместите этот скрипт непосредственно перед закрытием тега .

Скрипт начинается с тега \n»; ptr +=» \n»; ptr +=» \n»; ptr +=»

ESP8266. Информация о температуре в помещении:

ESP32. Информация о температуре в помещении:

Источник

Взаимодействие ESP8266 NodeMCU с датчиками температуры и влажности DHT11 и DHT22 и вывод показаний, используя веб-сервер

Вы когда-нибудь хотели, чтобы датчики были разбросаны по всему вашему дому и саду, регулярно сообщая о своей температуре центральному серверу? Тогда этот IoT проект может стать для вас хорошей отправной точкой! Данный проект использует ESP8266 NodeMCU в качестве управляющего устройства, которое легко подключается к существующей сети Wi-Fi и создает веб-сервер. Когда какое-либо подключенное устройство получает доступ к этому веб-серверу, ESP8266 NodeMCU считывает температуру и относительную влажность с датчика DHT11, DHT22/AM2302 и отправляет его в красивом виде в веб-браузер этого устройства. Интересно? Давайте начнем!

Взаимодействие ESP8266 NodeMCU с датчиками температуры и влажности DHT11 и DHT22 и вывод показаний, используя веб-сервер

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

Подключение датчика DHT11, DHT22/AM2302 к плате ESP8266 NodeMCU

Подключить датчик DHT11/DHT22/AM2302 к ESP8266 NodeMCU довольно просто. Начните с установки NodeMCU на макетную плату, чтобы каждая сторона платы NodeMCU была на отдельной стороне макетной платы.

Теперь установите датчик на макетную плату, в стороне от NodeMCU. Подключите вывод VCC датчика к выводу 3,3V на NodeMCU и соедините выводы земли датчика и платы. Также подключите вывод данных датчика к выводу D8 платы ESP8266 NodeMCU. Наконец, нам нужно установить подтягивающий резистор 10 кОм между линией VCC и линией данных, чтобы на ней поддерживался высокий логический уровень для корректной связи между датчиком и NodeMCU. Если у вас датчик установлен на отдельную плату, возможно, вам не нужно добавлять какие-либо внешние подтягивающие резисторы. В этом случае датчик поставляется уже со встроенным подтягивающим резистором.

Когда вы закончите, у вас должно получиться что-то похожее на рисунок ниже.

Рисунок 1 – Подключение DHT11, датчика температуры и влажности, к ESP8266 NodeMCU Рисунок 2 – Подключение DHT22, датчика температуры и влажности, к ESP8266 NodeMCU

Установка библиотеки датчиков DHT

Связь с датчиками DHT11, с датчиками DHT22/AM2302 – это сложная задача, поскольку для передачи данных они используют собственный однопроводный протокол. Этот протокол требует точной синхронизации. К счастью, нам не нужно беспокоиться об этом, потому что мы собираемся использовать библиотеку DHT от Adafruit, которая позаботится почти обо всем. Эта библиотека настолько мощна, что работает как на архитектуре Arduino, так и на архитектуре ESP.

Чтобы установить библиотеку, перейдите в меню Скетч (Sketch) → Подключить библиотеку (Include Library) → Управлять библиотеками… (Manage Libraries. ). Подождите, пока менеджер библиотек загрузит индекс библиотек и обновит список установленных библиотек.

Рисунок 3 – Установка библиотеки Arduino – выбор управления библиотеками в Arduino IDE

Отфильтруйте результаты поиска, введя « DHT sensor ». Должна остаться пара записей. Найдите DHT sensor library by Adafruit. Нажмите на эту запись, а затем выберите Установить (Install).

Рисунок 4 – Установка библиотеки Adafruit DHT

Библиотека датчиков DHT использует Adafruit Sensor support backend. Поэтому поищите в менеджере библиотек Adafruit Unified Sensor и установите его тоже (возможно, придется немного прокрутить).

Создание веб-сервера NodeMCU ESP8266, используя Wi-Fi режим Station (STA)

Теперь перейдем к более интересному!

Как следует из заголовка, мы собираемся настроить наш ESP8266 NodeMCU в режим Station (STA) и создать веб-сервер для выдачи веб-страниц любому подключенному к существующей сети клиенту.

Прежде чем приступить к загрузке скетча, чтобы он у вас заработал, необходимо внести одно изменение. Чтобы ESP8266 NodeMCU мог установить соединение с существующей сетью, вам необходимо изменить следующие две переменные в соответствии с учетными данными вашей сети.

Как только вы это сделаете, попробуйте загрузить скетч, и мы рассмотрим его подробнее.

Доступ к веб-серверу

После загрузки скетча откройте монитор последовательного порта со скоростью 115200 бит/с и нажмите кнопку RESET на NodeMCU. Если всё в порядке, он выведет динамический IP адрес, полученный от вашего маршрутизатора, и покажет сообщение о том, что HTTP сервер запущен.

Рисунок 5 – Монитор последовательного порта – сервер запущен

Затем загрузите браузер и введите IP адрес, указанный в мониторе последовательного порта. ESP8266 NodeMCU должен выдать веб-страницу, показывающую температуру и относительную влажность.

Рисунок 6 – Веб-страница с температурой и влажностью с датчика DHT11/DHT22/AM2302 на веб-сервере ESP8266 (без CSS)

Подробное объяснение кода

Скетч начинается с включения библиотеки ESP8266WiFi.h. Эта библиотека предоставляет специальные методы ESP8266 NodeMCU для работы с Wi-Fi, которые мы вызываем для подключения к сети. После этого мы также включили библиотеку ESP8266WebServer.h, в которой есть несколько методов, которые помогут нам настроить сервер и обрабатывать входящие HTTP запросы, не беспокоясь о деталях низкоуровневой реализации. И, наконец, мы включаем библиотеку DHT.h.

Далее нам нужно определить тип используемого датчика DHT. Раскомментируйте одну из строк ниже!

Поскольку мы настраиваем ESP8266 NodeMCU в режиме станции (STA), он подключится к существующей сети Wi-Fi. Следовательно, нам необходимо предоставить SSID и пароль вашей сети.

Далее мы объявляем объект библиотеки ESP8266WebServer , чтобы получить доступ к ее функциям. Конструктор этого объекта в качестве параметра принимает номер порта (который сервер будет прослушивать). Так как 80 – это порт по умолчанию для HTTP, мы будем использовать это значение. Теперь вы можете получить доступ к серверу, не указывая порт в URL.

Затем нам нужно определить номер вывода ESP8266 NodeMCU, к которому подключен вывод данных датчика, и создать объект DHT, чтобы было можно получить доступ к специальным функциям, связанным с библиотекой DHT.

Две переменные типа float , а именно Temperature и Humidity объявляются для хранения значений соответственно температуры и влажности.

Внутренности функции setup()

Перед запуском настраиваем HTTP сервер. Прежде всего, для отладки открываем последовательное соединение и устанавливаем порты GPIO на вход. Также нам нужно инициализировать объект DHT с помощью функции begin() .

Теперь нам нужно подключиться к сети Wi-Fi с помощью функции WiFi.begin() . Данная функция принимает в качестве параметров SSID (имя сети) и пароль.

Пока ESP8266 пытается подключиться к сети, мы проверяем состояние подключения с помощью функции WiFi.status() .

Как только ESP8266 будет подключен к сети, скетч печатает IP адрес, присвоенный для ESP8266, отображая значение WiFi.localIP() в мониторе последовательного порта.

Чтобы обрабатывать входящие HTTP запросы, нам нужно указать, какой код выполнять при введении определенного URL. Для этого мы используем метод on() . Этот метод принимает два параметра. Первый – это URL путь, а второй – имя функции, которую мы хотим выполнить при входе на этот URL.

Приведенный ниже код указывает, что когда сервер получает HTTP запрос по корневому пути (/), он запускает функцию handle_OnConnect() . Обратите внимание, что указанный URL адрес представляет собой относительный путь.

Мы не указали, что должен делать сервер, если клиент запрашивает какой-либо URL, отличающийся от указанных в server.on() . Он должен выдать ответ с HTTP статусом 404 (Not Found, «страница не найдена») и сообщением для пользователя. Помещаем эти действия в отдельную функцию и используем метод server.onNotFound() , чтобы указать серверу, что он должен выполнить, когда получит запрос на URI, который не был задан с помощью server.on() .

Теперь, чтобы запустить сервер, вызываем метод begin() для объекта server .

Внутренности функции loop()

Чтобы обработать реальные входящие HTTP запросы, нам нужно вызвать метод handleClient() объекта server .

Далее нам нужно создать функцию, которую мы прикрепили к корневому ( / ) URL с помощью server.on() . Помните? В начале этой функции мы получаем от датчика значения температуры и влажности. Чтобы ответить на HTTP запрос, используем метод send() . Хотя этот метод можно вызывать с другим набором аргументов, его самая простая форма состоит из HTTP кода ответа, типа контента и самого контента.

В нашем случае мы отправляем код 200 (один из кодов состояния HTTP), который соответствует ответу OK. Затем мы указываем тип контента как » text/html «, и, наконец, мы вызываем пользовательскую функцию SendHTML() , которая создает динамическую HTML страницу, содержащую значения температуры и влажности.

Точно так же нам нужно создать функцию для обработки страницы ошибки 404.

Отображение веб-страницы HTML

Функция SendHTML() отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP8266 получает запрос от веб-клиента. Она просто объединяет HTML код в большую строку и возвращает ее в функцию server.send() , которую мы обсуждали ранее. Данная функция в качестве параметров для динамического генерирования HTML контента принимает значения температуры и влажности.

Первый текст, который вы всегда должны отправлять, — это объявление , которое указывает, что мы отправляем HTML код.

Затем элемент viewport делает веб-страницу адаптивной в любом веб-браузере. Далее тег title устанавливает заголовок страницы.

Стилизация веб-страницы

Далее идет немного CSS кода для стилизации внешнего вида веб-страницы. Мы выбираем шрифт Helvetica, определяем контент, который будет отображаться в виде inline-block и выровнен по центру.

Установка заголовка веб-страницы

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

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

Чтобы динамически отображать значения температуры и влажности, мы помещаем эти значения в тег параграфа. Эти значения преобразуются в целое число с помощью приведения типов. Для отображения символа градуса мы используем HTML сущность ° .

Стилизация веб-страницы, чтобы она выглядела более профессионально

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

Рисунок 7 – Профессиональный внешний вид веб-страницы с сервера ESP8266 с температурой и влажностью от DHT11/DHT22/AM2302

Довольно красиво, правда? Давайте без лишних слов, применим стиль к нашей предыдущей HTML странице. Для начала скопируйте и вставьте приведенный ниже код, чтобы заменить в приведенном выше скетче функцию SendHTML() . Попробуйте новый скетч, а затем мы выполним его детальный разбор.

Мы уже знаем, что объявление сообщает браузеру, что мы отправляем HTML код, а элемент viewport делает веб-страницу адаптивной. Единственное дополнение здесь заключается в том, что мы будем использовать шрифты google. Google имеет сотни веб-шрифтов и бесплатен для коммерческого и личного использования. Прекрасно!

На нашей веб-странице мы будем использовать шрифт Open Sans. Шрифт Google встраивается с помощью тега link в блоке HTML документа. Для нашей страницы мы выбрали следующие веса (толщину) шрифта: 300 (легкий), 400 (обычный) и 600 (жирный). Вы можете выбрать столько, сколько захотите, но имейте в виду, что выбор ненужных весов шрифтов затрудняет загрузку страницы. Вы также можете добавить курсивный стиль, просто добавив символ i в конце веса шрифта, например, 400i встроит курсивный стиль.

Обратите внимание, что вы не можете видеть шрифт Google, без активного подключения к интернету на устройстве, с которого вы собираетесь получить доступ к странице. Шрифты Google загружаются на лету.

Далее мы собираемся применить шрифт «Open Sans» для всего нашего HTML кода. Мы также должны указать sans-serif в качестве нашего резервного шрифта, чтобы обеспечить максимальную совместимость между браузерами/операционными системами. Если браузер не поддерживает первый шрифт, он попытается использовать следующий шрифт.

Затем мы покажем показания температуры с помощью этого красивого маленького значка

Значок температуры на самом деле является масштабируемой векторной графикой (SVG), определенной в теге . Создание SVG не требует каких-либо специальных навыков программирования. Для создания графики для вашей страницы вы можете использовать любой редактор SVG. После этой иконки мы собираемся показать фактическое значение температуры датчика.

Далее мы покажем показания влажности с помощью этого значка

Опять же это SVG. После печати значений влажности мы закрываем все открытые теги, такие как body и html .

Улучшение кода – автоматическое обновление страницы

Одно из улучшений, которое вы можете сделать с нашим кодом, – это автоматическое обновление страницы для обновления показаний датчика.

Добавив один мета-тег в ваш HTML документ, вы можете дать браузеру команду автоматически перезагружать страницу с заданным интервалом.

Поместите этот код в тег вашего документа, и этот мета-тег укажет браузеру обновлять страницу каждые две секунды. Довольно изящно!

Динамическая загрузка данных датчика с помощью AJAX

Если ваша веб-страница много весит, то полное ее обновление не слишком практично. Лучше использовать асинхронный Javascript и Xml (AJAX), чтобы мы могли запрашивать данные с сервера асинхронно (в фоновом режиме), не обновляя страницу.

Для выполнения AJAX на веб-страницах в JavaScript обычно используется объект XMLHttpRequest . Он тихо выполняет GET запрос на сервер и обновляет элемент на странице. AJAX – это не новая технология или другой язык, а просто существующие технологии, используемые по-новому. Кроме того, AJAX также позволяет:

  • запрашивать данные с сервера после загрузки страницы;
  • получать данные с сервера после загрузки страницы;
  • отправлять данные на сервер в фоновом режиме.

Ниже приведен скрипт AJAX, который мы будем использовать. Поместите этот скрипт непосредственно перед закрывающим тегом .

Скрипт начинается с тега

На сайте работает сервис комментирования DISQUS, который позволяет вам оставлять комментарии на множестве сайтов, имея лишь один аккаунт на Disqus.com.

В случае комментирования в качестве гостя (без регистрации на disqus.com) для публикации комментария требуется время на премодерацию.

Сделал все как было сказано в статье, все подключил, все проверил, ошибок в скетче нет, но после загрузки скетча на плату в мониторе порта не выводится никакая информация даже после перезагрузки платы, в чем может быть проблема?

Источник

Adblock
detector