Планшет на стене + esp8266 по sse-протоколу. обходим ограничение памяти esp на web-страничку.

В сети существует множество решений для управления/мониторинга ESP8266 через локальный WEB-сервер. В подавляющем большинстве решений этот сервер реализован на борту самой ESPшки. Это накладывает ограничения на размер странички размером памяти ESP.
В определенный момент возникает естественное желание преодолеть это ограничение. Добавить красивостей CSS, сделать JS скрипты, ну вообще воспользоваться другими вкусностями HTML.
Напрашивающееся решение - перенести саму страничку в память устройства, что снимает ограничение.

Спойлер: Почему SSE

Но как получать данные с ESP? Существует несколько способов. Самый очевидный и простой - запрос-ответ. Более продвинутый это SSE. В идеале конечно использовать WebSocket, но в прошивке NodeMCU отсутствует WebSocket-сервер, поэтому остановиться решил на SSE.
Почему SSE? Для того чтобы изменения которые происходят на сервере (ESP) в реальном времени отображались на нашей странице. Если использовать механизм запрос-ответ, то тут проблема в том что большинство времени никаких изменений не происходит, и большинство запросов проходят вхолостую, если опрашивать реже, то можно пропустить какое то событие, например включился какой то прибор, а информация об этом пришла только после следующего запроса. Как вариант LongPolling, но он более громоздок в реализации. SSE лишено этих недостатков, события как только возникают сразу отправляются на страницу и обрабатываются, нет событий - нет ненужного траффика.

Итак, моё решение:
Андроид планшет с WEB-страницей в качестве интерфейса системы.
ESP8266 для сбора информации с датчиков и SSE-сервер для отправки данных клиенту.

Плюсы:
+ снимается ограничение на размер веб странички - больше возможностей кастомизации.
+ нет необходимости в специальном ПО, страничка работает в штатном браузере планшета, а редактировать её возможно любым текстовым редактором.
+ ESP занимается только опросом датчиков и отправкой короткой JSON строки, это экономия памяти ESP.
+ для меня лично постоянно включенный планшет на кухне работает ещё вместо ночника, захотел водички ночью попить - не надо включать свет.

Минусы:
- необходимо сделать дополнительные настройки роутера (единоразово).
- пригодятся некоторые познания в Lua, JS, HTML, чтобы адаптировать мой пример под Ваши нужды. Но при желании непонятки можно погуглить и разобраться.
- нет механизмов защиты, кроме пароля от WIFI.

Так как планшет решил повесить на стену, в самом посещаемом месте дома - на кухне, то на главную страничку запилил часы и температуру дома, а при прокрутке показываются остальные параметры.




Итак, приступим. Что необходимо.

Для ESP:

Спойлер

Прошивка NodeMCU (https://nodemcu-build.com) - модули кроме стандартных использовал BME280, i2c, SJSON, версия прошивки использовалась Integer.
(небольшой лайфхак. Сервис nodemcu-build.com не хочет работать при указании почты .ru сегмента. Укажите, например, почту гугла, всё придёт)
Заливаем прошивку.
Как залить прошивку и файлы .lua в плату есть куча инфы на этом же форуме, поищите. Я использую ESP8266Flasher и ESPLorer.
Далее программа.
http://forum.amperka.ru/attachments/lua-zip.25112/?temp_hash=54c8d0a66994d341d15c8036a6df4e5c
В wifi.lua указываете вашу точку доступа и пароль.
Опрос датчиков здесь описывать не буду, решения индивидуальны, их полно в интернете, для примера привёл как у меня подключен BME280. У меня остальные датчики разбросаны по дому и участку, опрашиваются по радио через NRF24L01 и данные складываются в ту же глобальную таблицу, которая передаётся по SSE переведенной в JSON строку. Дополнительно крутится MQTT сервер чтобы поглядеть показания ESP из любой точки, где есть интернет, и ещё отправляются данные в народный мониторинг. Но к данной теме это отношения не имеет, поэтому эти модули я убрал из примера. Чтобы показать только конкретное решение передачи данных по SSE.
Заливаем файлы LUA.

Настройки роутера:

Спойлер

После подключения ESP к WIFI нужно зайти в настройки вашего роутера и установить статический IP для подключенных по WIFI ESP и планшета. Хотя для планшета в данном проекте статический IP необязателен, тут по желанию. В моей системе я для удобства соединения по FTP сделал планшет тоже с постоянным IP, чтобы не вводить каждый раз новый адрес. Как это сделать, загуглите, для конкретного роутера по-разному.

Для планшета:

Спойлер

Дополнительно установил программу StayAlive, чтобы держать его постоянно включённым.
FTP - сервер для удобства заливки файлов странички с десктопного компа на планшет по WIFI.
Теперь страничка.
http://forum.amperka.ru/attachments/web-zip.25113/?temp_hash=54c8d0a66994d341d15c8036a6df4e5c
На планшете создаём отдельную папочку для WEB страницы. Кому как удобнее, я подключаюсь через FTP-сервер, чтобы не снимать приколоченный к стене планшет. В файле esp.js надо указать статический IP который вы назначили для ESP. У меня это 'http://192.168.1.110:555'. После двоеточия указывается порт 555. Его я выбрал "от фонаря", просто красивое число. Этот же порт мы слушаем на SSE сервере в ESP. Закидываем в созданную папочку файлы странички. Ярлык для index.html можно вывести для удобства на рабочий стол. Запустить на планшете index.html. После запуска страницы необходимо вручную перевести её в полноэкранный режим, нажав соответствующую кнопку. Автоматически данное действие не поддерживается браузером.

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





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

В планах:

Спойлер

Добавить управление тёплым полом и освещением. В принципе вопрос несложный, решается отправкой HTTP-запросов на ESP.
Добавить на страницу историю изменения параметров - тренды. Тут немного застрял. Планирую использовать IndexedDB. Вопрос не убьёт ли это память планшета постоянными записями? Или использовать другое решение? Пока не знаю. Времени не хватает разобраться.
Добавить на страницу видепоток с камер видеонаблюдения при нажатии кнопки. Пока моих знаний для решения этой задачи недостаточно. Да и планшет слабенький, потянет ли?.
Добавить какой то механизм защиты от неавторизованного доступа. Для себя пока не вижу надобности в этом.
Проект не без недоработок, например у меня данные отправляются только по таймеру, нужно добавить асинхронную передачу, но опять же, в данный момент конкретно мне это не нужно.
Хотелось бы исключить возню с роутером, чтобы воткнул в розетку и готово. Это уже для коммерческих проектов и вообще отдельная тема. Для себя не вижу проблемы один раз залезть в настройки роутера.

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