Живой веб-интерфейс прямо с чипа

Почему старая HTML-страница из строк — тупик

Классический скетч собирает страницу, склеивая HTML в гигантский String и отдавая его на каждый запрос. Для одной стрелки работает, дальше — рассыпается: никакой реактивности (любое изменение — полная перезагрузка), никаких компонентов, а разметка живёт нечитаемым «строковым супом» в прошивке. Как только захочешь второй график или управление с обратной связью — ты это перерос.

Собери настоящий SPA — и упакуй во флеш

Современный ход — собрать фронтенд как обычное веб-приложение (Vue, Svelte, React или просто современный vanilla) сборщиком (Vite), который выдаёт крошечный минифицированный index.html плюс JS/CSS. Эти файлы кладёшь во флеш-ФС ESP (LittleFS или SPIFFS) и отдаёшь как статику. Чип не крутит фреймворк — он лишь раздаёт готовые файлы, так что Svelte-приложение и «голое» стоят ему одинаково.

Живые данные по WebSocket, а не поллинг

Реактивность — в транспорте. Вместо того чтобы браузер спрашивал «есть новости?» по таймеру, открой WebSocket (через ESPAsyncWebServer) и дай устройству пушить в момент изменения значения:

loop():   читаем сенсор   →   ws push {temp: 24.1}     // шлём, а не ждём опроса
браузер:  ws.onmessage    →   gauge.value = 24.1        // меняем на месте, без перезагрузки

Один сокет несёт данные всех виджетов маленькими JSON-кадрами; страница меняется на месте. Именно это превращает отданный дашборд в приложение, а не документ — и ровно так же вживую реагирует лицо агента.

Следи за RAM — отдавай из флеша, gzip, стримь

Ловушка — держать большое в RAM. Собранный SPA — это десятки килобайт, не читай его в String. Храни ассеты сжатыми gzip во флеше и стримь с заголовком Content-Encoding: gzip — так малы и хранение, и передача. Большие константы держи в PROGMEM, шли кусками, освобождай буферы рано — см. как устроена память ESP32. Сделано правильно — богатый UI почти не трогает кучу.

Или не пиши это руками вовсе

Всё вышеперечисленное — сборщик, заливка в ФС, протокол WebSocket, дисциплина RAM — реальная работа, которую можно пропустить. RisalDash генерирует весь фронтенд (HTML, CSS, JS и обвязку WebSocket) из пары строк C++: описываешь виджеты, привязываешь переменные — и реактивный дашборд отдаётся сам. Его Zero-Waste UI ещё и вырезает неиспользуемые виджеты, так что платишь только за то, что на экране.

Решение за 30 секунд

Правило: одно значение → строковая страница сойдёт; кастомный продуктовый UI → собирай SPA и владей им; реальный дашборд без возни → пусть генерируется сам.