RisalDash GitHub Get started Widget reference
The full widget set — usage code you can paste into a sketch, live renders, and the S/M/L cell sizes. Build a gadget UI in minutes.
Every card fits the cell grid at one of three sizes; each type has a sensible default you can override with .size(). Big widgets (a chart, gauge) belong at L.
A single value or control — metric, badge, toggle, LED. Packs four across on mobile.
dash.metric("Temp", &t) Needs a bit of width — slider, progress, select, text.
dash.slider("PWM", &v, 0, 255) Full width, taller — a chart, gauge, map, log or table. Give big data a big card.
dash.chart("Temp", &t).size(RSIZE_L) One codebase runs on every ESP. And with the built-in fake sensors you can build the whole UI before any board arrives.
live render — every widget, in the device UI
The library localizes its own chrome; dash.translate() localizes the strings you write — widget titles, page names, select options. Pick a language and the titles follow (Arabic flips to RTL):
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");
}Same hook, every author string: widget titles, page/group/tab names, button labels and select options. Zero cost until you call dash.translate().
On the LCD panel the same idea applies with one honest limit: the stock display font is Latin-only, so the screen shows en / uz natively and falls back to English for ru / ar — while this web dashboard serves all four in full.
Copy the one line for the widget you need. The chip shows its default cell size (S/M/L).
dash.metric("CPU", &cpu, "%") A big number + bar. The basic value readout.
in ESPUIdash.gauge("Voltage", &v, 0, 14, "V") A circular gauge with zones. (not in ESPUI)
RisalDash onlydash.chart("Temp", &t, "°C").history(60) A time-series chart. (not in ESPUI)
RisalDash onlydash.badge("State", &st) A colour status: ok/warn/bad, online/offline. (not in ESPUI)
RisalDash onlydash.label("Status", &statusStr) A text status line (may contain HTML).
in ESPUIdash.led("Link", &linkUp) An on/off indicator dot. (not in ESPUI)
RisalDash onlydash.face("Mood", &mood) Animated robot eyes: 10 emotions + blinking, reacting to a variable or an AI agent. (not in ESPUI)
RisalDash onlydash.cube("Orientation", &pitch, &roll, &yaw) A 3D cube that rotates with IMU angles (MPU6050/9250) - orientation at a glance. (not in ESPUI)
RisalDash onlydash.heatmap("Thermal", 32, 24) A heatmap (canvas, jet colormap) - MLX90640 32x24 or any 2D field. (not in ESPUI)
RisalDash onlydash.progress("Upload", &pct) Operation progress, 0-100%. (not in ESPUI)
RisalDash onlydash.table("System").row("uptime",&up) Key-value pairs: system info. (not in ESPUI)
RisalDash onlydash.log("Events", 5).print("...") A scrolling event log. (not in ESPUI)
RisalDash onlydash.image("Cam", "/snapshot.jpg") An image / camera snapshot by URL.
in ESPUIdash.ai("Light turns off at 23:00") An AI-agent hint card. (a RisalDash touch)
RisalDash onlydash.map("Track", &lat, &lon) A live map (Leaflet, dark theme) with a marker and track. GPS trackers, routes. (not in ESPUI)
RisalDash onlydash.toggle("Pump", &pump, [](bool v){...}) On/off a relay, pump or light. The core automation control.
in ESPUIdash.button("Restart", [](){ ESP.restart(); }) A one-shot action: restart, calibrate, reset a counter.
in ESPUIdash.slider("Brightness", &pwm, 0, 255) A smooth value: brightness, speed, threshold.
in ESPUIdash.number("Setpoint", &target, 0, 100) Precise numeric input with min/max and a step.
in ESPUIdash.text("SSID", &ssid) A string: network name, MQTT topic, device label.
in ESPUIdash.textarea("Notes", ¬es) Multi-line text: notes, a JSON blob, a small config. (not in ESPUI)
RisalDash onlydash.password("WiFi pass", &pass) Masked input for passwords/tokens. (not in ESPUI)
RisalDash onlydash.select("Mode", &mode, {"Auto","Manual","Off"}) Pick one of several options — a mode.
in ESPUIdash.radio("Fan", &lvl, {"Low","Mid","High"}) A mutually-exclusive choice as buttons. (not in ESPUI)
RisalDash onlydash.color("LED color", &rgb) A colour picker for RGB strips/lighting. (not in ESPUI)
RisalDash onlydash.time("Alarm", &alarmTime) Set a time/date: alarm, schedule.
in ESPUIdash.pad("Drive", [](int dir){...}) A D-pad controller: robot, camera, car.
in ESPUIdash.joystick("Move", [](int x,int y){...}) Analog 2D X/Y input. (a Pad extension)
RisalDash onlydash.stepper("Count", &n, 1) Increment/decrement with -/+ buttons. (not in ESPUI)
RisalDash onlydash.ota("Firmware") Upload a file/firmware from the browser. (not in ESPUI)
RisalDash onlydash.terminal("Shell", handleCmd) A console: output + a command input over WebSocket. Debug/control from the dashboard. (not in ESPUI)
RisalDash onlydash.radioBrowser("Stations", &listText, [](const String& v){ playFirst(v); }) An editable internet-radio station list — drag to reorder, edit name/URL inline, add/remove. Value is "Name | URL | Meta" per line; pairs with the ES8311 codec player. (not in ESPUI)
RisalDash onlydash.group("Power") A section that visually groups widgets.
in ESPUIdash.tab("Sensors") A tab to split a large dashboard.
in ESPUIdash.separator("Settings") A labelled divider between blocks.
in ESPUIwidget.span(2) Stretch a card across N grid columns. (not in ESPUI)
RisalDash only