Очень часто появляется необходимость отобразить что-либо на веб-странице с вашего устройства ESP. Есть несколько способов сделать это. В этом уроке мы покажем самый простой способ для передачи данных от ESP микроконтроллера на веб-страницу от HC-SR04.
Описание
Потребуется 10 минут вашего времени, чтобы вывести ваши измерения на веб-страницу.
В уроке использовался проект remoteMe.org. Также была использована версия WEMOS D1 pro, но это будет также работать для других типов ESP. Данные будут собираться от ультразвукового датчика расстояния, а результаты измерений будут отображаться на веб-сайте.
Мы будем использовать механизм переменных. Целочисленная переменная будет установлена ESP и эта же переменная будет отображаться на сайте в виде датчика. Мы можем отобразить страницу на веб-сайте, открытом в мобильном браузере, отсканировав QR-код.
Схема соединения
Соединяем всё следующим образом:
- VCC - 5 В
- GND - GND
- Trig - через преобразователь уровня или набор резисторов - D3
- Echo - через преобразователь уровня или набор резисторов - D2
Добавление переменных
Вам необходимо зарегистрироваться на https://app.remoteme.org на странице регистрации. Вы можете бесплатно создать свою учетную запись.
После создания учетной записи, перейдите на вкладку Variables (Переменные) и справа вверху нажать «Add» (Добавить) и заполните все как на картинке выше.
После этого шага у нас есть переменная в системе, которая будет обновляться ESP и отображаться на веб-странице.
Добавление сайта
Добавим теперь сайт. Перейдите на вкладку «Устройства» (Devices), «Новое устройство» (New Device), а затем «Новая веб-страница» (New Web Page) и заполните, как на картинке выше.
Добавляем датчик
Теперь мы добавим компонент для отображения переменной. Откройте панель веб-страницы, нажмите на index.html, затем «Редактировать с помощью мастера» (Edit With wizard) и «Вставить компонент» (Insert Component). Заполнить как на рисунке выше.
Выбирая лупу (цифра «1» на рисунке), выбираем нашу переменную «расстояние» (distance) - потому что мы хотим, чтобы статус этой переменной отображал наш компонент. И нажимаем "вставить" (insert).
Проверяем сайт
Мы можем открыть наш веб-сайт в новой вкладке (index.html открыть в новой вкладке). Конечно, датчик показывает "0" (ноль) - значение переменной по умолчанию. Чтобы датчик показывал значения, мы должны изменить нашу переменную с помощью кода ESP.
Добавляем устройство ESP
Перед загрузкой эскиза убедитесь, что вы установили все необходимые библиотеки: https://remoteme.org/network-devices/.
Для начала нам нужно добавить наше устройство в RemoteMe: перейдите на вкладку «Устройства» (Devices), «Новое устройство» (New Device), а затем «Новое сетевое устройство» (New Network device). Заполните как на картинке выше.
Создаем скетч Ардуино
Пришло время сгенерировать код для Arduino, нажмите «Меню» (цифра "1" на картинке) и «Мастер генератора кода» (Code generator wizard).
На первом этапе мы отмечаем нашу переменную, на втором - параметры нашей сети Wi-Fi, на следующих этапах мы ничего не меняем. На последнем шаге нажмите «View», чтобы отобразить наш код, который необходимо вставить в Arduino IDE.
Изменяем код
После вставки кода время его изменить, чтобы прочитать расстояние (Distance) от датчика:
#define WIFI_NAME "ania24" #define WIFI_PASSWORD "xxxxxx" #define DEVICE_ID 11 #define DEVICE_NAME "esp" #define TOKEN "~155_D49LDj@aBFhdffK." #include <RemoteMe.h> #include <RemoteMeSocketConnector.h> #include <ESP8266WiFi.h> #define TRIGGER D3 //added #define ECHO D2 //added RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID); inline void setDistance(int32_t i) {remoteMe.getVariables()->setInteger("distance", i); } void setup() { WiFi.begin(WIFI_NAME, WIFI_PASSWORD); while (WiFi.status() != WL_CONNECTED) { delay(100); } remoteMe.setConnector(new RemoteMeSocketConnector()); remoteMe.sendRegisterDeviceMessage(DEVICE_NAME); pinMode(TRIGGER, OUTPUT); //added pinMode(ECHO, INPUT); //added } void loop() { remoteMe.loop(); //added static long time=millis(); if (time+700<millis()){//cannot send more frequent since it will be block time=millis(); setDistance(getDistance()); } // END added } int32_t getDistance(){ digitalWrite(TRIGGER, LOW); delayMicroseconds(2); digitalWrite(TRIGGER, HIGH); delayMicroseconds(10); digitalWrite(TRIGGER, LOW); long duration = pulseIn(ECHO, HIGH); return (duration/2) / 29.09; }
Результат
Чтобы открыть сайт, лучше всего отсканировать QR-код, доступный после нажатия index.html -> получить произвольную ссылку -> «зеленый значок QR-кода» (index.html -> get anymous link -> “green QR code icon”). Это позволит нам открыть и автоматически войти в учетную запись.
В этой статье был показан самый простой способ отображения измерений на веб-сайте, конечно, переменных может быть больше, и мы можем отображать их на разных компонентах и даже добавлять свои собственные.