Add device-dashboard

tutorials/device-dashboard/led-control/Makefile

@@ -0,0 +1,32 @@
+# Environment setup: https://mongoose.ws/docs/getting-started/build-environment/
+
+PROG ?= server
+MGDIR ?= ../../..
+SOURCES = server.c dashboard.html.c $(MGDIR)/mongoose.c
+CFLAGS ?= -W -Wall -Wextra -Werror -Wundef -Wshadow -g3 -O0
+PFLAGS = -I$(MGDIR) -DMG_DATA_SIZE=64 -DMG_TLS=MG_TLS_BUILTIN
+AFLAGS ?= -fsanitize=signed-integer-overflow,address,undefined,alignment
+
+all: $(PROG)
+	./$(PROG)
+
+# Rebuild the program
+$(PROG): $(SOURCES)
+	$(CC) $(SOURCES) $(CFLAGS) $(PFLAGS) $(AFLAGS) -o $@
+
+# Generate a single, self-contained dashboard.html from the UI in web_root/
+dashboard.html: $(wildcard web_root/*)
+	curl https://purge.jsdelivr.net/gh/cesanta/mongoose@master/resources/dashboard.js -s -o /dev/null
+	monolith web_root/index.html > $@
+
+# Create an embedded filesystem containing compressed dashboard.html
+dashboard.html.c: dashboard.html
+	node $(MGDIR)/resources/pack.js dashboard.html::gzip > $@
+	@echo "On-flash size: `grep -oE '[0-9]+' $@ | wc -l`"
+
+# For development: rebuild and restart if any of the sources change
+run: $(SOURCES)
+	watchexec -r -w server.c -w web_root -w ../../glue -e c,h,html,css,js -- make
+
+clean:
+	rm -rf $(PROG) *.exe *.obj *.dSYM mongoose dashboard.*

tutorials/device-dashboard/led-control/server.c

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: 2026 Cesanta Software Limited
+// SPDX-License-Identifier: GPL-2.0-only or commercial
+
+#include "mongoose.h"
+
+#if MG_ARCH == MG_ARCH_UNIX || MG_ARCH == MG_ARCH_WIN32
+#define HTTP_ADDR "http://0.0.0.0:8000"
+#else
+#define HTTP_ADDR "http://0.0.0.0:80"
+#endif
+
+static const char *s_version = "1.2.3";
+static bool s_led1 = true;  // Mock LED
+
+static void led1_get(union mg_val *val) {
+  val->b = s_led1;
+}
+static void led1_set(const union mg_val *val) {
+  s_led1 = val->b;
+}
+
+static void firmware_version_get(union mg_val *val) {
+  val->s = mg_str(s_version);
+}
+
+// Modify this. This represents device's state to the dashboard
+static struct mg_field fields[] = {
+    {"led1", MG_VAL_BOOL, led1_get, led1_set},
+    {"firmware_version", MG_VAL_STR, firmware_version_get, NULL},
+    {NULL, 0, 0, 0},
+};
+
+void run_mongoose(void) {
+  struct mg_mgr mgr;
+  struct mg_dash dash = {fields};
+  mg_mgr_init(&mgr);
+  mg_http_listen(&mgr, HTTP_ADDR, mg_dash_ev_handler, &dash);
+  for (;;) {
+    mg_mgr_poll(&mgr, 10);
+  }
+}
+
+int main(void) {
+  run_mongoose();
+  return 0;
+}

tutorials/device-dashboard/led-control/web_root/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Mongoose device dashboard -->
+  <script src="https://cdn.jsdelivr.net/gh/cesanta/mongoose@master/resources/dashboard.js"></script>
+  <script>
+    Dashboard.init({
+      debug: true,
+      data: {
+        led1: true,
+        volume: 42,
+        firmware_version: '1.0.0',
+      },
+    });
+  </script>
+
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div style="margin: 2rem auto; width: 480px; padding: 1rem 2rem; background: #0001; border-radius:.3rem;">
+    <h1 style="font-size: 1.25rem;">
+      My Device, version <span data-set-html="Dashboard.data.firmware_version"></span>
+    </h1>
+    <div style="margin: 1rem 0;">
+      <span>LED status:</span>
+      <input type="checkbox" class="toggle" data-bind="led1" data-autosave="1" />
+    </div>
+  </div>
+</body>
+</html>

tutorials/device-dashboard/led-control/web_root/style.css

@@ -0,0 +1,48 @@
+:root {
+}
+
+*, *::before, *::after {
+  box-sizing: border-box; margin: 0; padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+.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: #ee0;
+}