Device dashboard refactoring

tutorials/device-dashboard/full/Makefile

@@ -0,0 +1,31 @@
+# Environment setup: https://mongoose.ws/docs/getting-started/build-environment/
+
+PROG ?= example
+TOP ?= ../../..
+SOURCES = main.c dashboard.c file_data.c $(TOP)/mongoose.c
+CFLAGS ?= -W -Wall -Wextra -Werror -Wundef -Wshadow -O0
+PFLAGS = -I$(TOP) -DMG_DATA_SIZE=64 -DMG_TLS=MG_TLS_BUILTIN -DMG_ENABLE_LINES=1
+AFLAGS ?= -fsanitize=signed-integer-overflow,address,undefined,alignment
+
+all: $(PROG)
+	./$(PROG)
+
+# Rebuild the program
+$(PROG): $(SOURCES) $(TOP)/mongoose.h
+	$(CC) $(SOURCES) $(CFLAGS) $(PFLAGS) $(AFLAGS) -o $@
+
+# Create an embedded filesystem containing compressed dashboard.html
+file_data.c: dashboard.html
+	node $(TOP)/resources/inline.js dashboard.html -o out.html
+	node $(TOP)/resources/pack.js out.html:dashboard.html:gzip > file_data.c
+	@echo "On-flash size: `grep -oE '[0-9]+' file_data.c | wc -l`"
+
+purge:
+	curl -s https://purge.jsdelivr.net/gh/cesanta/mongoose@master/resources/dashboard.js
+
+# For development: rebuild and restart if any of the sources change
+watch:
+	node $(TOP)/resources/watch.js -w main.c -w dashboard.c -w $(TOP)/mongoose.h -w dashboard.html -- make
+
+clean:
+	rm -rf $(PROG) *.exe *.obj *.dSYM mongoose out.* file_data.c

tutorials/device-dashboard/full/dashboard.c

@@ -0,0 +1,144 @@
+// SPDX-FileCopyrightText: 2026 Cesanta Software Limited
+// SPDX-License-Identifier: GPL-2.0-only or commercial
+
+#include "mongoose.h"
+
+// Control panel
+// s_led1, s_led2, s_led3 are used to communicate LED status
+static bool s_led1, s_led2, s_led3;
+
+static struct mg_field fields_leds[] = {
+    {"led1", MG_VAL_BOOL, &s_led1, sizeof(s_led1)},
+    {"led2", MG_VAL_BOOL, &s_led2, sizeof(s_led2)},
+    {"led3", MG_VAL_BOOL, &s_led3, sizeof(s_led3)},
+    {NULL, 0, NULL, 0},
+};
+
+static void write_leds(void) {
+  // gpio_write(LED1_PIN, s_led1);
+  // gpio_write(LED2_PIN, s_led2);
+  // gpio_write(LED3_PIN, s_led3);
+}
+
+static void read_leds(void) {
+  // s_led1 = gpio_read(LED1_PIN);
+  // s_led2 = gpio_read(LED2_PIN);
+  // s_led3 = gpio_read(LED3_PIN);
+}
+
+// Read-only device Metrics
+static int s_ram = 32, s_cpu = 7;
+static double s_temperature = 24.8;
+
+static struct mg_field fields_metrics[] = {
+    {"ram", MG_VAL_INT, &s_ram, sizeof(s_ram)},
+    {"cpu", MG_VAL_INT, &s_cpu, sizeof(s_cpu)},
+    {"temperature", MG_VAL_DBL, &s_temperature, sizeof(s_temperature)},
+    {NULL, 0, NULL, 0},
+};
+
+static void read_metrics(void) {
+  s_ram = 25 + (rand() % 16);  // Sumulate metric change
+  s_cpu = 7 + (rand() % 21);
+  s_temperature = 14.8 + ((double) rand() / RAND_MAX) * 20.0;
+}
+
+// Read-write device settings
+static double s_volume = 17.2;
+static int s_log_level = MG_LL_DEBUG;
+static char s_name[20] = "Dublin";
+
+static struct mg_field fields_settings[] = {
+    {"volume", MG_VAL_DBL, &s_volume, sizeof(s_volume)},
+    {"name", MG_VAL_STR, &s_name, sizeof(s_name)},
+    {"log_level", MG_VAL_INT, &s_log_level, sizeof(s_log_level)},
+    {NULL, 0, NULL, 0},
+};
+
+static void write_settings(void) {
+  mg_log_level = s_log_level;
+}
+
+static void read_settings(void) {
+  s_log_level = mg_log_level;
+}
+
+#define NUM_POINTS 7  // How many data points to send
+
+struct point {
+  uint16_t x;   // X coordinate of the data point, usually this is time
+  uint16_t y1;  // We can plot multiple values per graph,
+  uint16_t y2;  // let's plot 2 values: y1 and y2.
+};
+
+// Serialise chart data into a string: [[x,y1,y2],[x,y1,y2],...]
+// One uint16_t takes 5 character max, so one entry is 19 bytes max.
+// We could be more efficient by storing hex or base64-encoded data, but
+// let's keep it simple. However if we do, update data parsing logic in
+// the web_root/main.js
+#define POINT_SIZE 19
+static char s_chart1_data[NUM_POINTS * POINT_SIZE + 2 + 1];
+
+static struct mg_field fields_chart1[] = {
+    {"data", MG_VAL_RAW, s_chart1_data, sizeof(s_chart1_data)},
+    {NULL, 0, NULL, 0},
+};
+
+// Randomly generate graph points and serialise them into a string
+void read_chart1(void) {
+  size_t i, len = 0;
+  len += mg_snprintf(s_chart1_data + len, sizeof(s_chart1_data) - len, "[");
+  for (i = 0; i < NUM_POINTS; i++) {
+    struct point p;
+    p.x = (uint16_t) i;
+    p.y1 = 85 - (uint16_t) ((49 * i) / NUM_POINTS) + (rand() % 9);
+    p.y2 = 20 + (uint16_t) ((69 * i) / NUM_POINTS) + (rand() % 5);
+    len += mg_snprintf(s_chart1_data + len, sizeof(s_chart1_data) - len,
+                       "%s[%hu,%hu,%hu]", i > 0 ? "," : "", p.x, p.y1, p.y2);
+  }
+  len += mg_snprintf(s_chart1_data + len, sizeof(s_chart1_data) - len, "]");
+}
+
+// Files array: [{"name": "foo.txt", "size": 1234}]
+static char s_files[1024];
+static struct mg_field fields_files[] = {
+    {"data", MG_VAL_RAW, s_files, sizeof(s_files)},
+    {NULL, 0, NULL, 0},
+};
+static struct mg_dash s_dashboard;
+static void read_files(void) {
+  size_t len = 0;
+  struct mg_dash_file *f;
+  len += mg_snprintf(s_files + len, sizeof(s_files) - len, "[");
+  for (f = s_dashboard.files; f; f = f->next) {
+    len += mg_snprintf(s_files + len, sizeof(s_files) - len, "%s{%m:%m,%m:%u}",
+                       len > 1 ? "," : "", MG_ESC("name"), MG_ESC(f->name),
+                       MG_ESC("size"), f->size);
+  }
+  len += mg_snprintf(s_files + len, sizeof(s_files) - len, "]");
+}
+
+// Each field set exports REST HTTP API /api/NAME
+static struct mg_field_set field_sets[] = {
+    {"leds", fields_leds, read_leds, write_leds, 0, 0},
+    {"metrics", fields_metrics, read_metrics, NULL, 0, 0},
+    {"settings", fields_settings, read_settings, write_settings, 0, 0},
+    {"chart1", fields_chart1, read_chart1, NULL, 0, 0},
+    {"files", fields_files, read_files, NULL, 0, 0},
+    {0, 0, NULL, NULL, 0, 0},
+};
+static struct mg_dash s_dashboard = {field_sets, NULL, NULL};
+
+void mg_dash_init(struct mg_mgr *mgr) {
+  mg_dash_file_add(&s_dashboard, mg_str("device-config.json"), 1234);
+  mg_dash_file_add(&s_dashboard, mg_str("device-log-2026-04-25.txt"), 1327854);
+  mg_http_listen(mgr, MG_HTTP_ADDR, mg_dash_ev_handler, &s_dashboard);
+}
+
+void mg_dash_poll(struct mg_mgr *mgr) {
+  // Send metrics change periodically
+  static uint64_t timer = 0;
+  if (mg_timer_expired(&timer, 30000, mg_now())) {
+    mg_dash_send_change(mgr, &s_dashboard, "metrics");
+  }
+}

tutorials/device-dashboard/full/dashboard.html

@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>My Dashboard</title>
+
+    <!-- Mongoose device dashboard -->
+    <script src="https://cdn.jsdelivr.net/gh/cesanta/mongoose@master/resources/dashboard.js"></script>
+    <script>
+      Dashboard.init({
+        debug: true,
+        data: {
+          chart1: {data: []},
+          leds: { led1: true, led2: false, led3: false },
+          settings: { volume: 12, log_level: 3, name: 'Galway' },
+          metrics: { temperature: 1.2, cpu: 4, ram: 5 },
+          files: {data: [{name: 'device-log-2026-04-25.txt', size: 8625563}]},
+        },
+      });
+    </script>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const tabs = Array.from(document.querySelectorAll(".header-left .nav-link[href^='#']"));
+        const panels = Array.from(document.querySelectorAll(".tab-panel"));
+
+        let chart = null;
+
+        const activateTab = targetId => {
+          const targetPanel = document.getElementById(targetId);
+          if (!targetPanel) return;
+
+          tabs.forEach(tab => {
+            const isActive = tab.getAttribute("href") === `#${targetId}`;
+            tab.classList.toggle("nav-link-active", isActive);
+            tab.setAttribute("aria-selected", String(isActive));
+            tab.setAttribute("tabindex", isActive ? "0" : "-1");
+          });
+
+          panels.forEach(panel => {
+            const isActive = panel.id === targetId;
+            panel.classList.toggle("tab-panel-active", isActive);
+            panel.hidden = !isActive;
+          });
+
+          requestAnimationFrame(() => {
+            const rect = el.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0) rect.height = rect.width = 10;
+
+            if (!chart) {
+              options.width = rect.width;
+              options.height = rect.height;
+              chart = new uPlot(options, [], el);
+            } else {
+              chart.setSize({ width: rect.width, height: rect.height });
+            }
+          });
+        };
+
+        tabs.forEach(tab => {
+          tab.addEventListener("click", event => {
+            event.preventDefault();
+            const targetId = tab.getAttribute("href").slice(1);
+            activateTab(targetId);
+            window.history.replaceState(null, "", `#${targetId}`);
+          });
+        });
+
+        const initialId = window.location.hash.slice(1) || "overview";
+        activateTab(initialId);
+
+
+        const el = document.getElementById("chart");
+
+        const options = {
+          width: 100,
+          height: 100,
+          tzDate: (ts) => uPlot.tzDate(new Date(ts * 1e3), "Europe/London"),
+          plugins: [],
+          legend: { show: false },
+          axes: [
+            { values: "{MMM} {DD}", size: 25 },
+            { size: 50, xvalues: (u, vals, space) => vals.map(v => (+v / 1000).toFixed(1) + 'k') },
+          ],
+          scales: {
+            x: { time: true },
+            y: { range: [0, 100] },
+          },
+          series: [
+            {},
+            {stroke: 'rgba(5, 141, 199, 1)', fill: 'rgba(5, 141, 199, 0.1)'},
+            {stroke: 'rgba(237, 126, 23, 1)', fill: 'rgba(237, 126, 23, 0.1)'},
+          ],
+        };
+
+        function updateGraphPoints(data) {
+          if (!data) return;
+          // const parsed = JSON.parse(data);
+          const parsed = data || [];
+          const uplot_data = [
+            parsed.map(x => x[0]),
+            parsed.map(x => x[1]),
+            parsed.map(x => x[2]),
+          ];
+          chart.setData(uplot_data);
+        };
+
+        // Intercept change notifications
+        Dashboard.on('change', args => updateGraphPoints(args?.chart1?.data));
+        Dashboard.call('get', 'chart1').then(resp => updateGraphPoints(resp?.data));
+      });
+    </script>
+    <style>
+:root { --color-surface-sunken: #e9eff5; --color-border-default: #d8e0ea; --color-text-toolbar: rgb(71, 85, 105); --color-text-strong: #24364d; --color-accent-border: #bae6fd; --color-accent-text: #0369a1; --color-surface-elevated: #ffffff; --font-size-body: 14px; --font-size-toolbar: 1rem; --max-width: 80rem; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: var(--font-size-body); line-height: 1.5; min-height: 100vh; color: var(--color-text-strong); }
+a, a:visited, a:link { text-decoration: none; }
+.header { z-index: 50; }
+.header-container { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-3) var(--spacing-6); }
+.header-left { display: flex; align-items: center; gap: var(--spacing-4); }
+.header-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--spacing-3); flex-wrap: wrap; }
+.logo { height: 2.8rem; margin-right: 1rem; width: auto; }
+.connection-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 4px 14px; border-radius: 14px; font-weight: 600; }
+.connection-badge-online { color: rgb(4, 120, 87); border: 1px solid rgb(167, 243, 208); background: rgb(236, 253, 245); }
+.connection-badge-offline { color: rgb(120, 44, 57); border: 1px solid rgb(243, 177, 208); background: rgb(253, 246, 245); }
+.connection-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
+.connection-dot-online { background: rgb(16, 185, 129); }
+.connection-dot-offline { background: rgb(185, 96, 109); }
+.nav-tabs { display: inline-flex; align-items: center; gap: var(--spacing-2); background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); padding: var(--spacing-1) var(--spacing-2); border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset; }
+.nav-link { display: inline-flex; align-items: center; border-radius: 0.75rem; border: 1px solid transparent; padding: var(--spacing-2) var(--spacing-4); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-toolbar); background-color: transparent; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); gap: var(--spacing-2); text-decoration: none; white-space: nowrap; }
+.nav-link-active { color: rgb(3, 105, 161); background: #fff; border: 1px solid rgb(186, 230, 253); }
+.nav-icon { height: 1rem; width: 1rem; flex-shrink: 0; }
+.tab-stage { max-width: var(--max-width); margin: 0 auto; padding: 0.5rem var(--spacing-6) var(--spacing-4); }
+.tab-panel { min-height: calc(100vh - 6rem); }
+.overview-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
+.metric-tile { padding: 0.75rem 1.5rem 0.75rem; border-radius: 1rem; background: #ffffff; border: 1px solid rgba(203, 213, 225, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 6px rgba(148, 163, 184, 0.1), 0 8px 24px rgba(148, 163, 184, 0.08); display: flex; flex-direction: column; gap: 0.35rem; transition: box-shadow 0.15s ease, transform 0.15s ease; }
+.metric-tile:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 12px rgba(148, 163, 184, 0.18), 0 12px 32px rgba(148, 163, 184, 0.12); transform: translateY(-1px); }
+.metric-label { color: #94a3b8; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
+.metric-value-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+.metric-value { display: flex; align-items: baseline; gap: 0.2rem; color: #475569; }
+.metric-number { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
+.metric-unit { font-size: 1rem; font-weight: 600; color: #cbd5e1; letter-spacing: -0.01em; }
+.metric-status { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.18rem 0.52rem; border-radius: 0.4rem; border: 1px solid transparent; white-space: nowrap; }
+.metric-status-good { color: #166534; background: #dcfce7; border-color: #86efac; }
+.metric-status-warn { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
+.metric-status-alert { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
+.tab-panel[hidden] { display: none; }
+.panel-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; flex: 1; }
+.panel-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 0.75rem 1.25rem; border-top: 1px solid #e2e8f0; }
+.field { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.75rem; }
+.field-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; flex-shrink: 0; white-space: nowrap; min-width: 6rem; }
+.field-input { flex: 1; min-width: 0; padding: 0.45rem 0.75rem; font-size: 0.88rem; font-family: inherit; color: #334155; border: 1px solid #e2e8f0; border-radius: 0.55rem; outline: none; transition: border-color 0.15s ease; }
+.field-input.edited { border-color: #00500040 !important; background: #00ff0020; }
+.field-input.error { border-color: #50000040; background: #ff000020; }
+.field-input::placeholder { color: #cbd5e1; }
+.field-input:hover { border-color: #cbd5e1; }
+.field-input:focus { border-color: #7dd3fc; }
+.field-input:disabled, .field-input.disabled { color: #cbd5e1; border-color: #e2e8f0; cursor: not-allowed; pointer-events: none; }
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2rem; padding: 0.3rem 1rem; font-size: 0.85rem; font-family: inherit; font-weight: 600; border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
+.btn-secondary { color: #64748b; background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(148, 163, 184, 0.1); }
+.btn-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
+.btn-primary { color: #ffffff; background: linear-gradient(160deg, #38bdf8, #0ea5e9); border-color: #0284c7; box-shadow: 0 1px 3px rgba(14, 165, 233, 0.3), 0 4px 10px rgba(14, 165, 233, 0.15); }
+.btn-primary:hover { background: linear-gradient(160deg, #0ea5e9, #0284c7); box-shadow: 0 1px 3px rgba(14, 165, 233, 0.4), 0 6px 14px rgba(14, 165, 233, 0.2); }
+.btn-primary:active, .btn-secondary:active { transform: translateY(0); }
+.btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }
+.note { color: #075985; background: #e0f2fe; border: 1px solid #7dd3fc; border-radius: 0.5rem; padding: 0.75rem 0.9rem; font-size: 0.86rem; line-height: 1.55; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); display: flex; flex-direction: column; gap: 0.5rem; }
+.row { display: flex; flex-wrap: wrap; gap: 1rem; }
+#files .row { align-items: stretch; flex-wrap: nowrap; }
+#files .panel { flex: 0 0 40rem; width: 40rem; }
+#files .note { flex: 1 1 0; min-width: 0; }
+.detail-row { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; margin-top: 1rem; align-items: stretch; }
+.panel { background: #ffffff; border: 1px solid rgba(203, 213, 225, 0.75); border-radius: 0.75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 6px rgba(148, 163, 184, 0.1), 0 8px 24px rgba(148, 163, 184, 0.08); overflow: hidden; display: flex; flex-direction: column; }
+.panel-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.95rem; font-weight: 700; color: #334155; padding: 0 1rem; min-height: 3rem; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; }
+.file-list { display: flex; flex-direction: column; }
+.file-list:empty::before { content: "No Files"; color: #888; }
+.file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: 0.82rem 0; border-top: 1px solid #edf2f7; }
+.file-row:first-child { border-top: none; }
+.file-info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
+.file-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: #0369a1; background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 0.65rem; flex-shrink: 0; }
+.file-icon svg { width: 1.15rem; height: 1.15rem; }
+.file-name { min-width: 0; color: #334155; font-size: 0.9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-size { color: #94a3b8; font-size: 0.8rem; font-weight: 700; text-align: right; white-space: nowrap; }
+.file-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; }
+#chart { width: 100%; height: 12rem; }
+.chart-legend { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
+.legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: #5d7088; font-weight: 600; }
+.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.legend-dot-color2 { background: rgba(237, 126, 23, 1); }
+.legend-dot-color1 { background: rgba(5, 141, 199, 1); }
+.toggle { position: relative; width: 2.75rem; height: 1.6rem; margin: 0; vertical-align: top; border: 1px solid transparent; background: #d1d5db; border-radius: 0.75rem; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
+.toggle::after { content: ""; position: absolute; left: 1px; top: 1px; width: 1.35rem; height: 1.35rem; background: #fff; border-radius: 50%; transition: all 0.3s; }
+.toggle:checked { background: #d1d5db; }
+.toggle:checked::after { transform: translateX(calc(100% - 3px)); }
+.toggle:disabled, .toggle.disabled { background: #d1d5db; cursor: not-allowed; }
+.toggle.edited { border-color: #0fe; }
+@media (max-width: 900px) { .detail-row { grid-template-columns: 1fr; } #files .row { flex-direction: column; flex-wrap: nowrap; } #files .panel, #files .note { flex: 1 1 auto; width: 100%; } }
+@media (max-width: 900px) { .overview-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 480px) { .overview-grid { grid-template-columns: 1fr; } .file-row { grid-template-columns: 1fr; } .file-actions { justify-content: flex-start; } .file-row { gap: 0.65rem; } .file-size { text-align: left; } }
+    </style>
+
+    <!-- uPlot graph library -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uplot@1.6.32/dist/uPlot.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/uplot@1.6.32/dist/uPlot.iife.min.js" defer></script>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div class="header">
+      <div class="header-container">
+        <div class="header-left">
+          <nav class="nav-tabs" role="tablist" aria-label="Primary tabs">
+            <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600">
+              <defs>
+                <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+                  <stop offset="0%" stop-color="#2dd4bf"/>
+                  <stop offset="100%" stop-color="#0f766e"/>
+                </linearGradient>
+              </defs>
+              <g fill="none" stroke="url(#g)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="160" y="60" width="300" height="300" rx="70"/>
+                <rect x="20" y="200" width="300" height="300" rx="70"/>
+              </g>
+              <text x="560" y="360"
+                    font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
+                    font-size="180"
+                    font-weight="600"
+                    fill="#6b7280">
+                MyLogo
+              </text>
+            </svg>
+            <a href="#overview" id="tab-overview" class="nav-link nav-link-active" role="tab" aria-controls="overview" aria-selected="true">
+              <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 11.5 12 4l9 7.5" />
+                <path d="M5 10.5V20h14v-9.5" />
+              </svg>
+              Overview
+            </a>
+            <a href="#settings" id="tab-settings" class="nav-link" role="tab" aria-controls="settings" aria-selected="false" tabindex="-1">
+              <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="3" />
+                <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-.4-1.1 1.7 1.7 0 0 0-1-.6 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H2.8a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.1-.4 1.7 1.7 0 0 0 .6-1 1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6c.38-.16.72-.4 1-.7.26-.3.4-.69.4-1.1V2.8a2 2 0 1 1 4 0v.1c0 .41.14.8.4 1.1.28.3.62.54 1 .7a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.16.38.4.72.7 1 .3.26.69.4 1.1.4h.1a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.1.4 1.7 1.7 0 0 0-.7 1z" />
+              </svg>
+              Settings
+            </a>
+            <a href="#firmware" id="tab-firmware" class="nav-link" role="tab" aria-controls="firmware" aria-selected="false" tabindex="-1">
+              <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 3v10" />
+                <path d="m8 9 4 4 4-4" />
+                <rect x="4" y="17" width="16" height="4" rx="2" />
+              </svg>
+              Firmware Update
+            </a>
+            <a href="#files" id="tab-files" class="nav-link" role="tab" aria-controls="files" aria-selected="false" tabindex="-1">
+              <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M4 7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v2H4Z" />
+                <path d="M4 11h16v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z" />
+                <path d="M8 15h8" />
+              </svg>
+              File Manager
+            </a>
+          </nav>
+          <div class="connection-badge connection-badge-${__status.online ? 'online' : 'offline'}" aria-label="connection active">
+            <span class="connection-label">${__status.online ? 'live' : 'offline'}</span>
+            <span class="connection-dot connection-dot-${__status.online ? 'online' : 'offline'}" aria-hidden="true"></span>
+          </div>
+        </div>
+        <div class="header-actions">
+          <nav class="nav-tabs">
+            <div class="nav-link">
+              <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+              <span>admin</span>
+              <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                <path d="M16 17l5-5-5-5" />
+                <path d="M21 12H9" />
+              </svg>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>
+    <main class="tab-stage">
+      <section id="overview" class="tab-panel tab-panel-active" role="tabpanel" aria-labelledby="tab-overview">
+        <div class="overview-grid" aria-label="Device metrics overview">
+          <article class="metric-tile">
+            <div class="metric-label">Temperature</div>
+            <div class="metric-value-row">
+              <div class="metric-value">
+                <span class="metric-number" data-bind="metrics.temperature">24.8</span>
+                <span class="metric-unit">°C</span>
+              </div>
+              <span class="metric-status metric-status-good">ok</span>
+            </div>
+          </article>
+          <article class="metric-tile metric-tile-warning">
+            <div class="metric-label">CPU Load</div>
+            <div class="metric-value-row">
+              <div class="metric-value">
+                <span class="metric-number" data-bind="metrics.cpu">37</span>
+                <span class="metric-unit">%</span>
+              </div>
+              <span class="metric-status metric-status-warn">moderate</span>
+            </div>
+          </article>
+          <article class="metric-tile metric-tile-alert">
+            <div class="metric-label">Free Memory</div>
+            <div class="metric-value-row">
+              <div class="metric-value">
+                <span class="metric-number">${metrics.ram}</span>
+                <span class="metric-unit">KB</span>
+              </div>
+              <span class="metric-status metric-status-alert" style="${metrics.ram <= 30 ? '': 'display:none;'}">low</span>
+              <span class="metric-status metric-status-warn" style="${metrics.ram <= 50 && metrics.ram > 30 ? '': 'display:none;'}">ok-ish</span>
+            </div>
+          </article>
+          <article class="metric-tile">
+            <div class="metric-label">Volume</div>
+            <div class="metric-value-row">
+              <div class="metric-value">
+                <span class="metric-number" data-bind="settings.volume">18.7</span>
+                <span class="metric-unit">dB</span>
+              </div>
+              <span class="metric-status metric-status-good">ok</span>
+            </div>
+          </article>
+          <article class="metric-tile note" style="min-width: 15rem;">
+            <div>
+              This dashboard source code is <a href="https://github.com/cesanta/mongoose/tree/master/tutorials/device-dashboard" target="_blank">here</a>.
+              To tailor it to your firmware, follow
+              <a target="_blank" href="https://mongoose.ws/docs/guides/web-dashboard-guide/#dashboard-example">this guide</a>
+            </div>
+          </article>
+        </div>
+
+        <div class="detail-row">
+
+          <!-- Sensor History Chart -->
+          <div class="panel chart-panel">
+            <div class="panel-title">
+              <span>Sensor History</span>
+              <div class="chart-legend">
+                <div class="legend-item"><span class="legend-dot legend-dot-color1"></span>Temperature</div>
+                <div class="legend-item"><span class="legend-dot legend-dot-color2"></span>Humidity</div>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div id="chart"></div>
+            </div>
+          </div>
+
+          <!-- Controls Panel -->
+          <div class="panel">
+            <div class="panel-title">LED Control</div>
+            <div class="panel-body">
+              <div class="field">
+                <div class="field-label">LED1</div>
+                <input type="checkbox" data-bind="leds.led1" data-autosave="1" class="toggle" />
+              </div>
+              <div class="field">
+                <div class="field-label">LED2</div>
+                <input type="checkbox" data-bind="leds.led2" data-autosave="1" class="toggle" />
+              </div>
+              <div class="field">
+                <div class="field-label">LED3</div>
+                <input type="checkbox" data-bind="leds.led3" data-autosave="1" class="toggle" />
+              </div>
+
+              <div class="note">
+                To attach these LED controls to your hardware,
+                modify mongoose_dashboard.c :: sync_leds() function.
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+
+      </section>
+      <section id="settings" class="tab-panel" role="tabpanel" aria-labelledby="tab-settings" hidden>
+        <div class="row">
+
+          <div class="panel">
+            <div class="panel-title">Device settings</div>
+            <div class="panel-body">
+              <div class="field">
+                <label class="field-label">Name</label>
+                <input class="field-input"type="text" data-bind="settings.name" data-autosave="1" />
+              </div>
+              <div class="field">
+                <label class="field-label">Volume</label>
+                <input class="field-input" type="text" data-bind="settings.volume" />
+              </div>
+              <div class="field">
+                <label class="field-label">Log Level</label>
+                <select class="field-input" data-bind="settings.log_level">
+                  <option value="0">Disable logs</option>
+                  <option value="1">Error</option>
+                  <option value="2">Info</option>
+                  <option value="3">Debug</option>
+                  <option value="4">Verbose (very noisy)</option>
+                </select>
+              </div>
+            </div>
+            <div class="panel-footer">
+              <button class="btn btn-secondary" type="button" data-cancel="settings">
+                <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+                Cancel
+              </button>
+              <button class="btn btn-primary" type="button" data-save="settings">
+                <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" />
+                  <path d="M17 21v-8H7v8" />
+                  <path d="M7 3v5h8" />
+                </svg>
+                Save
+              </button>
+            </div>
+          </div>
+
+        <div class="note" style="width: 44rem;">
+          <p>This settings panel is backed by the "settings" dashboard object
+            see Dashboard.init call at the top of index.html - and, consequently,
+            by the "settings" fieldset in mongoose_dashboard.c. </p>
+          <p>Fields are bound to the dashboard object via the data-bind attribute,
+            e.g. data-bind="setttings.name"</p>
+          <p>When you save changed fields, the changes are saved to the device.</p>
+          <p> The "NAME" field
+          has data-autosave="1", so it is autosaved when user types text.</p>
+          <p>The other fields are not auto-saved, so when they are changed,
+            dashboard.js automatically applies CSS class "edited" to them to
+            indicate they were changed but not saved.</p>
+          <p>The cancel and save buttons are attached to the settings object
+            via the data-cancel and data-save attributes. Those buttons
+            get automatically enabled or disabled based on editing status.</p>
+        </div>
+
+      </div>
+      </section>
+      <section id="firmware" class="tab-panel" role="tabpanel" aria-labelledby="tab-firmware" hidden></section>
+      <section id="files" class="tab-panel" role="tabpanel" aria-labelledby="tab-files" hidden>
+        <div class="row">
+          <div class="panel">
+            <div class="panel-title">
+              <span>
+                <span>File Manager</span>
+                <span class="metric-status">${files.data.length} Files</span>
+              </span>
+              <div class="header-actions">
+                <label class="btn btn-primary">
+                  <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 3v12" />
+                    <path d="m7 8 5-5 5 5" />
+                    <path d="M5 21h14" />
+                  </svg>
+                  Upload
+                  <input type="file" hidden data-upload="1" />
+                </label>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div class="file-list" data-repeat="files.data" data-iterator="f">
+                <div class="file-row">
+                  <div class="file-info">
+                    <span class="file-icon" aria-hidden="true">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z" />
+                        <path d="M14 2v5h5" />
+                      </svg>
+                    </span>
+                    <div class="file-name">${f.name}</div>
+                  </div>
+                  <div class="file-size">${f.size}</div>
+                  <div class="file-actions">
+                    <a href="files/${encodeURIComponent(f.name)}" target="_blank" class="btn btn-secondary">
+                      <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 3v12" />
+                        <path d="m7 10 5 5 5-5" />
+                        <path d="M5 21h14" />
+                      </svg>
+                    </a>
+                    <button onclick="fetch('files/${encodeURIComponent(f.name)}?action=delete'); return false;" class="btn btn-secondary">
+                      <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 6h18" />
+                        <path d="M8 6V4h8v2" />
+                        <path d="M19 6l-1 14H6L5 6" />
+                        <path d="M10 11v5" />
+                        <path d="M14 11v5" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="note">
+            <p>The two default files are fake - you can delete them</p>
+            <p>However the manager works - you can upload new files. They
+              are uploaded to /tmp/ directory on the device.
+              This requires stdio (fopen/fread/...) implemeneted.</p>
+            <p>The easiest way to implement it is to use a filesystem like
+              LittleFS on your internal or external flash
+              and retarget the standard library to use it.</p>
+            <p>See <a href="https://github.com/cpq/bare-metal-programming-guide/tree/main/templates/lfs/nucleo-h563zi">this example</a> on how LittleFS can be implemented on
+              Nucleo-H563ZI internal flash partition.</p>
+          </div>
+
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

tutorials/device-dashboard/full/main.c

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2026 Cesanta Software Limited
+// SPDX-License-Identifier: GPL-2.0-only or commercial
+
+#include "mongoose.h"
+
+int main(void) {
+  struct mg_mgr mgr;
+
+  mg_mgr_init(&mgr);
+  mg_dash_init(&mgr);
+
+  for (;;) {
+    mg_mgr_poll(&mgr, 10);
+    mg_dash_poll(&mgr);
+  }
+
+  return 0;
+}