Справочник виджетов

Все виджеты, все размеры

Полный набор виджетов — код использования для копипаста в скетч, живой рендер и размеры ячеек S/M/L. UI для поделки за минуты.

Три размера

Каждая карточка на сетке — один из трёх размеров; у типа есть дефолт, переопределяется .size(). Большие виджеты (график, gauge) — на L.

SМалый · ¼

Одно значение или контрол — metric, badge, toggle, LED. По 4 в ряд на мобильном.

dash.metric("Temp", &t)

MСредний · ½

Нужна ширина — slider, progress, select, text.

dash.slider("PWM", &v, 0, 255)

LБольшой · вся ширина

На всю ширину, выше — график, gauge, карта, лог, таблица. Большим данным — большая карточка.

dash.chart("Temp", &t).size(RSIZE_L)

Поддержка плат

Один код — на любой ESP. А со встроенными фейк-датчиками весь UI можно собрать до того, как приедет плата.

ESP32 Xtensa · dual-core

ESP32-S3 dual-core · USB · PSRAM

ESP32-C3 RISC-V · single-core

ESP32-C6 RISC-V · Wi-Fi 6 · Zigbee

ESP8266 single-core · verified

Живая галерея

живой рендер — все виджеты в UI устройства

Один дашборд — четыре языка

Свой «хром» либа переводит сама; dash.translate() переводит твои строки — заголовки виджетов, имена страниц, опции селектов. Выбери язык — и заголовки тоже переключатся (арабский разворачивается в RTL):

9:41

RisalDash

Overview

System

CPU

42%

RAM

61%

Temperature

24.4°C

Mode

Auto

Heater

http://192.168.4.1/?lang=en

// Your strings, localized at render time. English is the source.
struct Row { const char *en, *ru, *uz, *ar; };
static const Row DICT[] = {
  {"Temperature", "Температура", "Harorat", "الحرارة"},
  {"System",      "Система",     "Tizim",   "النظام"},
  /* …one row per author string… */
};

const char *tr(const char *s, const char *lang) {
  int col = lang[0]=='r'?1 : (lang[0]=='u'&&lang[1]=='z')?2
          : lang[0]=='a'?3 : 0;
  if (col == 0) return s;              // English → as written
  for (auto &r : DICT)
    if (!strcmp(r.en, s)) return col==1?r.ru:col==2?r.uz:r.ar;
  return s;                            // unmapped → leave it
}

void setup() {
  dash.translate(tr);                  // register once — that's it
  dash.gauge("Temperature", &t, 0, 50, "C");
}

Один хук на все авторские строки: заголовки виджетов, имена страниц/групп/вкладок, подписи кнопок и опции селектов. Ноль накладных расходов, пока не вызван dash.translate().

На LCD-панели тот же принцип с одним честным ограничением: штатный шрифт — только латиница, поэтому экран показывает en / uz нативно и откатывается на английский для ru / ar — тогда как этот веб-дашборд отдаёт все четыре.

Все виджеты + usage

Скопируй одну строку нужного виджета. Чип показывает дефолтный размер ячейки (S/M/L).

Отображение

📊 Metric / Value S

dash.metric("CPU", &cpu, "%")

Большое число + бар. Базовый показ величины.

in ESPUI

🎯 Gauge L

dash.gauge("Voltage", &v, 0, 14, "V")

Круговой индикатор с зонами. (нет в ESPUI)

RisalDash only

📈 Chart / Sparkline L

dash.chart("Temp", &t, "°C").history(60)

График временного ряда. (нет в ESPUI)

RisalDash only

🏷️ Status badge S

dash.badge("State", &st)

Цветной статус: ok/warn/bad, online/offline. (нет в ESPUI)

RisalDash only

🔖 Label S

dash.label("Status", &statusStr)

Текстовая строка состояния (может содержать HTML).

in ESPUI

💡 LED indicator S

dash.led("Link", &linkUp)

Точка-индикатор вкл/выкл. (нет в ESPUI)

RisalDash only

🤖 Robot face S

dash.face("Mood", &mood)

Анимированные глаза робота: 10 эмоций + моргание, реагируют на переменную/AI-агента. (нет в ESPUI)

RisalDash only

🧊 3D orientation cube S

dash.cube("Orientation", &pitch, &roll, &yaw)

3D-куб вращается по углам IMU (MPU6050/9250) — наглядная ориентация. (нет в ESPUI)

RisalDash only

🌡️ Heatmap / thermal L

dash.heatmap("Thermal", 32, 24)

Тепловая карта (canvas, jet-colormap) — MLX90640 32×24 или любое 2D-поле. (нет в ESPUI)

RisalDash only

📶 Progress bar M

dash.progress("Upload", &pct)

Прогресс операции 0–100%. (нет в ESPUI)

RisalDash only

🗂️ Key-Value table L

dash.table("System").row("uptime",&up)

Пары ключ-значение: системная инфа. (нет в ESPUI)

RisalDash only

📜 Log / Console L

dash.log("Events", 5).print("...")

Прокручиваемый журнал событий. (нет в ESPUI)

RisalDash only

🖼️ Image L

dash.image("Cam", "/snapshot.jpg")

Картинка/снимок с камеры по URL.

in ESPUI

🤖 AI hint L

dash.ai("Light turns off at 23:00")

Плашка подсказки от AI-агента. (фишка RisalDash)

RisalDash only

🗺️ Mini-map / GPS L

dash.map("Track", &lat, &lon)

Живая карта (Leaflet, тёмная тема) с маркером и треком. GPS-трекеры, маршруты. (нет в ESPUI)

RisalDash only

Контролы

🔘 Toggle / Switcher S

dash.toggle("Pump", &pump, [](bool v){...})

Вкл/выкл реле, насос, свет. Главный контрол автоматизации.

in ESPUI

🔲 Button M

dash.button("Restart", [](){ ESP.restart(); })

Разовое действие: рестарт, калибровка, сброс счётчика.

in ESPUI

🎚️ Slider M

dash.slider("Brightness", &pwm, 0, 255)

Плавная величина: яркость, скорость, порог.

in ESPUI

🔢 Number S

dash.number("Setpoint", &target, 0, 100)

Точный числовой ввод с min/max и шагом.

in ESPUI

⌨️ Text Input M

dash.text("SSID", &ssid)

Строка: имя сети, MQTT-топик, метка устройства.

in ESPUI

📝 Text Area M

dash.textarea("Notes", &notes)

Многострочный текст: заметки, JSON, небольшой конфиг. (нет в ESPUI)

RisalDash only

🔑 Password M

dash.password("WiFi pass", &pass)

Скрытый ввод для паролей/токенов. (нет в ESPUI)

RisalDash only

📋 Select / Dropdown M

dash.select("Mode", &mode, {"Auto","Manual","Off"})

Выбор одного из вариантов: режим работы.

in ESPUI

🔘 Radio group M

dash.radio("Fan", &lvl, {"Low","Mid","High"})

Взаимоисключающий выбор кнопками. (нет в ESPUI)

RisalDash only

🎨 Color picker S

dash.color("LED color", &rgb)

Выбор цвета для RGB-лент/подсветки. (нет в ESPUI)

RisalDash only

🕐 Time / Date M

dash.time("Alarm", &alarmTime)

Установка времени/даты: будильник, расписание.

in ESPUI

🎮 D-Pad M

dash.pad("Drive", [](int dir){...})

Крестовина управления: робот, камера, машинка.

in ESPUI

🕹️ Joystick M

dash.joystick("Move", [](int x,int y){...})

Аналоговый 2D-ввод X/Y. (расширение Pad)

RisalDash only

➕ Stepper +/- M

dash.stepper("Count", &n, 1)

Инкремент/декремент кнопками −/+. (нет в ESPUI)

RisalDash only

📤 File / OTA upload M

dash.ota("Firmware")

Загрузка файла/прошивки через браузер. (нет в ESPUI)

RisalDash only

⌨️ Terminal / console M

dash.terminal("Shell", handleCmd)

Консоль: вывод + ввод команд по WebSocket. Отладка/управление с дашборда. (нет в ESPUI)

RisalDash only

📻 Radio station browser M

dash.radioBrowser("Stations", &listText, [](const String& v){ playFirst(v); })

Редактируемый список интернет-радиостанций — перетаскивание для сортировки, инлайн-правка имени/URL, добавление/удаление. Значение — «Name | URL | Meta» построчно; работает с плеером на кодеке ES8311. (нет в ESPUI)

RisalDash only

Разметка

🧩 Group / Panel

dash.group("Power")

Секция, объединяющая виджеты визуально.

in ESPUI

📑 Tab

dash.tab("Sensors")

Вкладка для разделения большого дашборда.

in ESPUI

➖ Separator

dash.separator("Settings")

Разделитель с подписью между блоками.

in ESPUI

↔️ Span / Width

widget.span(2)

Растянуть карточку на N колонок сетки. (нет в ESPUI)

RisalDash only