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

Отправляем данные из 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) от датчика:

Результат

Чтобы открыть сайт, лучше всего отсканировать QR-код, доступный после нажатия index.html -> получить произвольную ссылку -> «зеленый значок QR-кода» (index.html -> get anymous link -> “green QR code icon”). Это позволит нам открыть и автоматически войти в учетную запись.

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

Программирование ESP8266 в среде Arduino > Поиск

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

11 мыслей о “Шаг №5 – Передача данных на Web страницу”

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

// Перезагрузка модуля по запросу вида http://192.168.0.101/restart?device=ok
void handle_Restart() <
String restart = HTTP.arg(“device”);
if (restart == “ok”)
HTTP.send(200, “text/plain”, “OK”);
ESP.restart();
>

Полезное замечание!
Тогда уж так:
void handle_Restart() <
String restart = HTTP.arg(“device”); // Получаем значение device из запроса
if (restart == “ok”) < // Если значение равно Ок
HTTP.send(200, “text / plain”, “Reset OK”); // Отправляем ответ Reset OK
ESP.restart(); // перезагружаем модуль
>
else < // иначе
HTTP.send(200, “text / plain”, “No Reset”); // Отправляем ответ No Reset
>
>

Да, так будет более полно.

А можно вместо:
String НашаСтрока = “много-много всего”;
…набиваем всё в НашаСтрока…

HTTP.send(200, «text / plain», НашаСтрока); //сразу вся страница рисуется

А можно выводить на страницу несколькими командами, типа как в сериал порт.

А то похоже ОЗУ не хватает, если много сгружать в НашаСтрока…

Если в этом конкретном скетче, то памяти точно хватит на все.

в этом скетче да, в моем не помещается в строчную переменную, удобнее было бы “сбрасывать” данные кусками, не загружая всю страницу в строку.
нашел такое, но для Эзернета:
void setup()
<
Ethernet.begin(mac, ip);
server.begin();
>

а потом сброс по кусочкам:
client.print(out);
client.print(” 100,”);
….
client.stop(); //в конце (как я понял)

а для вайфая не соображу как… но вроде можно тоже?
(сорри за длинноту)

Не понял о чем этот шаг((
Где, собственно, “передача данных на web-страницу”? Взяли значения переменных присвоенные в скетче в лоб и просто вывели их в json-формате. В данном случае никакой разницы с plain/text из первого шага.
Не-е-т, батенька, так не пойдет. Вы давайте-ка, получите данные введенные непосредственно в поля вэб-морды. Я подозреваю, здесь без запроса к БД уже никак не обойтись. Или, на худой конец, пошлого парсинга файла (txt? xml? csv?) с данными.

Да, да! Ответ на этот вот вопрос был бы гораздо полезнее.

Использую отладочную плату NodeMCU. Ваш проект выкачал непосредственно с этой страницы (http://esp8266-arduinoide.ru/step5-datapages/) и вгрузил в ESP8266 без изменений. При корневом подключении (в поисковой строке Google Chrome – 192.168.4.1) web-страница загружается, но значения всех полей остаются дефолтными:
<>, <>, <> и т.д.

При просмотре JSON – запроса (в поисковой строке Google Chrome – 192.168.4.1/configs.json) всё нормально:

В чём может быть ошибка? Почему данные не передаются на web-страницу?

это пуcтой файл json
зайдите на веб страницу с настройками и укажите ваши значения, сохраните их тем самым заполните файл config.json

Здравствуйте,Михаил. У меня в точности такая же проблема. 192.168.4.1/configs.json выдает нужные значения, но они на страницу не попадают. Я правильно понял что при таком запросе должен создаться файл configs.json с заполненными данными?
Не совсем понял что значит заполнить его данными. Какой формат у этого файла должен быть?

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

WEB интерфейс и конфигурационный файл для ESP8266 и ESP32

Используйте мой код как шаблон для своих проектов на esp8266 и esp32.

Фреймворк поможет вам использовать конфигурационный файл и веб интерфейс.

В качестве среды разработки я настоятельно рекомендую использовать PlatformIO, но можно использовать Arduino IDE

Для начала работы необходимо создать параметры, которые в последующем будут настраиваться с помощью веб интерфейса. Параметр на самом деле представляет из себя json объект. Следующие манипуляции производятся в файле ‘html.h’

Создать новый параметр:

create_param( String Name , String Value )

Веб интерфейс создается с помощью простых методов:

input_text( String id , String name , String type , String placeholder , String title )

‘id‘, ‘name‘, ‘type‘, ‘placeholder‘, ‘title‘ – аналогичны тем, что вы использовали бы в HTML

‘text‘ – ввод текста

‘numbet‘ – ввод только цифр

‘date‘ – ввод даты

‘time‘ – ввод времени

в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param

input_range( String id , String name , int min , int max , String title )

‘min‘ и ‘max‘ – минимальное и максимальное значение ползунка

в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param

select_elements( String value , String title )

создает элемент выпадающего списка.

input_select( String id , String name , bool refresh , String title)

‘refresh‘ – если true, страница будет обновлена сразу после выбора элемента

в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param

button_save( String title , int color )

Создает кнопку отправки данных формы

‘color‘ – цвет кнопки, соответствует цветам Bootstrap

button_reboot( String title , int color )

Создает кнопку перезагрузки устройства (иногда это нужно, чтобы настройки вступили в силу)

alert( int color , String strong , String text , bool close )

Создает элемент, соответствующий ‘alert‘ HTML

‘strong‘ – Текст с выделением

‘close‘ – если true – буде возможность закрыть элемент

border( String title )

начинает и заканчивает границу.

Чтобы начать границу ‘title‘ должен быть не пустым,

Чтобы закончить границу ‘title‘ должен быть = “”.

Скачать можно на GitHub

Дубликаты не найдены

Не понимаю, нахрена такие сложности.

плюсую, почему просто bootstrap не подключить и накидать свой интерфейс? Зачем вобще этот JeeUI?

Подскажите, пожалуйста, как подключить bootstrap, чтобы сайт работал офлайн.

Толи лыжи не едут, толи еще чего. Но под ESP32 компилится, а под 8266 нет.

Дополняю = справился – из последнего видео, там кнопку кликнуть (про файловую систему какуюто) и потом все заработало

у меня проблема= после заливки в чип ESP32 на плате ttgo-lora32-v1 ребутиться все время и вон че пишет ===

ets Jun 8 2016 00:22:57

rst:0xc (SW_CPU_RESET),boot:0x17 (SPI_FAST_FLASH_BOOT)

configsip: 0, SPIWP:0xee

mode:DIO, clock div:2

Failed to open config file

Load default Config

JSON config loaded

Backtrace: 0x4008c7e0:0x3ffb1d90 0x4008ca11:0x3ffb1db0 0x4008937d:0x3ffb1dd0 0x4010ea0a:0x3ffb1e10 0x4010ece6:0x3ffb1e30 0x400fede4:0x3ffb1e50 0x400fee4d:0x3ffb1e70 0x40101a8c:0x3ffb1e90 0x40101b78:0x3ffb1ec0 0x4012c3db:0x3ffb1ee0 0x400d9e1e:0x3ffb1f30 0x400d4ef7:0x3ffb1f50 0x400d4f26:0x3ffb1f80 0x400dba73:0x3ffb1fb0 0x4008877d:0x3ffb1fd0

че с этим делать?

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

Сохранил это полезно. Спасибо.

О сообществе

Arduino – одна из самых распространенных платформ для обучения программированию и создания прототипов электронных устройств.

Raspberry Pi – это миниатюрный компьютер «на ладони». Его размеры – всего лишь с кредитную карту, при этом возможности его применения ограничены практически только фантазией пользователя.

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

У нас всегда приветствуется активное участие в жизни сообщества и помощь соратникам 😉

В нашем сообществе запрещается:

• Добавлять посты не относящиеся к тематике сообщества, либо не несущие какой-либо полезной нагрузки (флуд)

• Задавать очевидные вопросы в виде постов, не воспользовавшись перед этим поиском

Файловая система SPIFFS в ESP8266 и ESP32

У микроконтроллеров ESP8266 и ESP32 есть своя файловая система SPIFFS (Serial Peripheral Interface Flash File System). Из названия понятно, что она работает по шине SPI.

SPIFFS аналогична файловой системе компьютера , но имеет ряд ограничений. Она позволяет создавать, редактировать файлы в тестовых форматах.
Загрузить можно файлы в формате: “txt”, “htm”, “html”, “js”, “json”, “c”, “h”, “cpp”, “css”, “xml” и другие текстовые документы. Данные документы можно без труда отредактировать удалить. Также можно загрузить графические элементы в формате: “png”, “jpg”, “gif”, “ico” и пр. Что позволяет реализовать веб-интерфейс для управления ESP8266 или ESP32.
В интернет источниках не раз встречал информацию о том, что нельзя создавать директории в файловой системе SPIFFS. Но в уроках Сергея Третьякова по созданию web-интерфейса, используются и папки. Возможно, что ситуация изменилась и создания директорий доработали.
Кстати у Сергея достаточно понятные и доступные видео уроки по созданию web-интерфейся для управления проектом на ESP8266. При желании можно доработать данные примеры и реализовать, что-то подобное на ESP32.

Создать текстовый документ можно напрямую в коде. Но вот для загрузки картинки понадобиться специальный плагин, который устанавливается в Arduino IDE. Для каждой версии ESP свой плагин.

Для установки в папке программы Arduino создайте папку tools. Если ее нет и скопируйте туда содержимое вот из этого архива.
Должно получиться вот так.

Одна папка для работы с файловой системой ESP32, вторая с ESP8266 .
Затем необходимо перезагружаем Arduino IDE.

После чего перейдем в пункт меню Инструменты. И у нас должны появиться еще 2 пункта меню. Если у вас нет данных пунктов в меню, попробуйте обновить Arduino IDE до более новой версии.

Чтобы загрузить файлы, необходимо в папке со скетчем создать папку data. И поместить туда нужные файлы.
Я бы порекомендовал взять пример для проверки вот от сюда. Здесь реализована работа с файловой системой и плюс визуальный редактор.
Причем скетч адоптирован для обоих плат и для 32 и для 8266.

Скачиваем архив. Заходим в папку FSBrowser. Открываем файл FSBrowser.ino. Ставим все необходимые библиотеки. Они ставятся из менеджера библиотек.
Прошиваем плату и загружаем файлы для этого наживаем на загрузчик.

Внимание! При прошивке и загрузке файлов на некоторых версиях ESP32 нужно нажимать кнопку boot, которая расположена на плате. Это нужно сделать когда начинается прошивка. Удерживаем ее около 3 сек. После чего побегут проценты загрузки.

После удачной загрузки заходим в монитор порта и смотри наш Ip адрес.

В браузере переходим по адресу http:// /edit И видим редактор и список всех загруженных файлов.

Ссылка http://esp8266fs.local/edit не работает. Понятно что проблема с DNS, но пока не проверял по какой причине. Если есть предложения как решить данную задачу пишите, буду благодарен.
В данном редакторе можно создавать и редактировать текстовые документы. Загружать напрямую на ESP32 или ESP8266 файлы .

Возможности данного редактора можно расширить. Если кому интересно пишите на форум. Подскажу или напишу статью, что нужно для этого сделать.

Визуальный редактор неоглядно показывает роботу файловой системы. И упрощает работу с ними.

Не забывайте подписываться на канал Youtube и вступайте в группы в Вконтакте и Facebook.

Всем Пока-Пока. И до встречи в следующем проекте.

Понравилась статья? Поделитесь ею с друзьями:

Источники:

http://esp8266-arduinoide.ru/step5-datapages/

http://pikabu.ru/story/web_interfeys_i_konfiguratsionnyiy_fayl_dlya_esp8266_i_esp32_6505692

http://portal-pk.ru/news/211-failovaya-sistema-spiffs-v-esp8266-i-esp32.html

http://www.radiokot.ru/circuit/digital/game/27/

Ссылка на основную публикацию