Введение
Программа Arduino Web Serial UI — это готовый веб-интерфейс, который автоматически строит элементы управления на основе простых текстовых команд, приходящих из Serial-порта.
Всё, что нужно — открыть HTML-файл в Chrome или Edge, подключиться к Arduino через Web Serial API и отправлять строки вида 1;TXT;Температура: 24.5°C. Интерфейс сам создаст карточку с нужным элементом.
Что умеет программа
1. Автоматическое построение интерфейса
Программа поддерживает шесть типов виджетов, каждый из которых задаётся коротким кодом:
Например, чтобы показать температуру и влажность, Arduino отправляет:
1;TXT;Температура: 24.5°C
2;PRG;65;Влажность;0;100
Интерфейс немедленно отобразит текстовую карточку и прогресс-бар с подписью.
2. Обновление существующих элементов
Если элемент с таким id уже создан, повторная команда не создаст дубликат, а обновит его. Более того, существует короткая форма — достаточно отправить id;новое_значение, и программа поймёт, что нужно обновить значение элемента.
3. Управление элементами
Кнопки, переключатели, поля ввода и слайдеры отправляют данные обратно в Arduino в формате переменная=значение. Например, нажатие кнопки с varName = "led" отправит строку led=1. Слайдер при отпускании отправит brightness=128. Именно это значение вам нужно распарсить в скетче.
5. Встроенный эмулятор
Панель «Эмуляция» внизу экрана позволяет тестировать интерфейс без реального Arduino — просто введите команду вручную и нажмите OK.
6. Журналы RX/TX
Две отдельные панели показывают всё, что приходит от Arduino и что отправляется ему. Отлично при отладке.
Архитектура и ключевые решения
Единый протокол на основе точек с запятой
Формат команд выбран максимально простым для парсинга на стороне микроконтроллера. В скетче Arduino достаточно использовать Serial.readStringUntil('\n') и разбить строку по ;. Никакого JSON, никаких библиотек.
Буферизация чтения
Чтение из порта асинхронное, с накоплением буфера и разбиением по \n. Это защищает от ситуаций, когда одна команда приходит частями, а также корректно обрабатывает \r\n.
Ограничения
Интерфейс спроектирован под тачскрины:
Что увидит пользователь
Быстрая отладка. Подключили новый датчик — отправили 1;TXT; + показание, и оно уже на экране.
Демонстрации и стенды. Интерфейс можно открыть на планшете или телефоне и показывать работу устройства.
Прототипирование. Не нужно каждый раз переписывать HTML — добавление нового элемента управления сводится к одной строке Serial.print.
Обучение. Простой протокол легко объяснить, а визуальная обратная связь помогает понять, как работает обмен данными.
Ограничения и что стоит учитывать
Программа Arduino Web Serial UI — это готовый веб-интерфейс, который автоматически строит элементы управления на основе простых текстовых команд, приходящих из Serial-порта.
Всё, что нужно — открыть HTML-файл в Chrome или Edge, подключиться к Arduino через Web Serial API и отправлять строки вида 1;TXT;Температура: 24.5°C. Интерфейс сам создаст карточку с нужным элементом.
Что умеет программа
1. Автоматическое построение интерфейса
Программа поддерживает шесть типов виджетов, каждый из которых задаётся коротким кодом:
| Код | Назначение | Формат команды |
|---|---|---|
| TXT | Текстовая метка | id;TXT;значение |
| PRG | Прогресс-бар | id;PRG;значение;подпись;min;max |
| BTN | Кнопка | id;BTN;значение;переменная;подпись |
| TGL | Переключатель вкл/выкл | id;TGL;значение;переменная;подпись |
| INP | Поле ввода | id;INP;значение;переменная;подпись |
| SLD | Слайдер | id;SLD;значение;переменная;подпись;min;max;step |
Например, чтобы показать температуру и влажность, Arduino отправляет:
1;TXT;Температура: 24.5°C
2;PRG;65;Влажность;0;100
Интерфейс немедленно отобразит текстовую карточку и прогресс-бар с подписью.
2. Обновление существующих элементов
Если элемент с таким id уже создан, повторная команда не создаст дубликат, а обновит его. Более того, существует короткая форма — достаточно отправить id;новое_значение, и программа поймёт, что нужно обновить значение элемента.
3. Управление элементами
- CLR — полностью очищает интерфейс
- DEL;id — удаляет конкретный элемент
Кнопки, переключатели, поля ввода и слайдеры отправляют данные обратно в Arduino в формате переменная=значение. Например, нажатие кнопки с varName = "led" отправит строку led=1. Слайдер при отпускании отправит brightness=128. Именно это значение вам нужно распарсить в скетче.
5. Встроенный эмулятор
Панель «Эмуляция» внизу экрана позволяет тестировать интерфейс без реального Arduino — просто введите команду вручную и нажмите OK.
6. Журналы RX/TX
Две отдельные панели показывают всё, что приходит от Arduino и что отправляется ему. Отлично при отладке.
Архитектура и ключевые решения
Единый протокол на основе точек с запятой
Формат команд выбран максимально простым для парсинга на стороне микроконтроллера. В скетче Arduino достаточно использовать Serial.readStringUntil('\n') и разбить строку по ;. Никакого JSON, никаких библиотек.
Буферизация чтения
Чтение из порта асинхронное, с накоплением буфера и разбиением по \n. Это защищает от ситуаций, когда одна команда приходит частями, а также корректно обрабатывает \r\n.
Ограничения
- Не более 50 элементов в интерфейсе — защита от переполнения
- Не более 50 строк в каждом логе — чтобы не росла память
- Автоматическая сортировка карточек по возрастанию id
Интерфейс спроектирован под тачскрины:
- Минимальная высота интерактивных элементов — 44px
- Карточки автоматически перестраиваются в одну колонку на узких экранах
C++:
const int LED_PIN = 13;
String input = "";
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
}
void loop() {
while (Serial.available()) {
char c = Serial.read();
if (c == '\n') {
handleCommand(input);
input = "";
} else {
input += c;
}
}
// Отправляем состояние раз в секунду
static unsigned long last = 0;
if (millis() - last > 1000) {
last = millis();
int state = digitalRead(LED_PIN);
Serial.print("1;TGL;");
Serial.print(state);
Serial.print(";led;Светодиод\n");
}
}
void handleCommand(String cmd) {
if (cmd.startsWith("led=")) {
int val = cmd.substring(4).toInt();
digitalWrite(LED_PIN, val ? HIGH : LOW);
}
}- Открывает HTML-файл, нажимает «Подключиться», выбирает порт Arduino
- В интерфейсе появляется карточка с id 1 — переключатель «Светодиод»
- Тап по переключателю меняет состояние и сразу отправляет led=1 или led=0
- Через секунду Arduino присылает актуальное состояние, и интерфейс синхронизируется
Быстрая отладка. Подключили новый датчик — отправили 1;TXT; + показание, и оно уже на экране.
Демонстрации и стенды. Интерфейс можно открыть на планшете или телефоне и показывать работу устройства.
Прототипирование. Не нужно каждый раз переписывать HTML — добавление нового элемента управления сводится к одной строке Serial.print.
Обучение. Простой протокол легко объяснить, а визуальная обратная связь помогает понять, как работает обмен данными.
Ограничения и что стоит учитывать
- Только Chrome/Edge. Web Serial API пока не во всех браузерах.
- Нет сохранения состояния. При перезагрузке страницы интерфейс пуст — Arduino должна заново отправить команды. Впрочем, для этого достаточно добавить в setup() серию Serial.println с описанием всех элементов.
- 9600 бод по умолчанию. Скорость можно изменить в коде, но она задана константой.
