Отправляем данные из ESP на веб-страницу с минимальными усилиями

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

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

2 января 2019 в 01:32 | Обновлено 13 июля 2020 в 13:40 (редакция)
Опубликовано:
Уроки, ,

Добавить комментарий

Ваш E-mail не будет никому виден. Обязательные поля отмечены *