Очень часто появляется необходимость отобразить что-либо на веб-странице с вашего устройства 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”). Это позволит нам открыть и автоматически войти в учетную запись.
В этой статье был показан самый простой способ отображения измерений на веб-сайте, конечно, переменных может быть больше, и мы можем отображать их на разных компонентах и даже добавлять свои собственные.