wt/mongoose
1
0
Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2026-10-01 05:52:32 +07:00
Code Issues Packages Projects Releases Wiki Activity

Add device-dashboard

Browse Source
This commit is contained in:
cpq
2026-04-18 13:07:08 +01:00
parent 5e01ae0c93
commit e304a27b0d
23 changed files with 1208 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tutorials/device-dashboard
-1
View File
@@ -1 +0,0 @@
http/device-dashboard
tutorials/device-dashboard/full-dashboard/Makefile
+32
View File
@@ -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/full-dashboard/server.c
+41
View File
@@ -0,0 +1,41 @@
// 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 bool s_led;
static void get_led(union mg_val *val) {
val->b = s_led;
}
static void set_led(const union mg_val *val) {
s_led = val->b;
}
// Modify this. This represents device's state to the dashboard
static struct mg_field fields[] = {
{"led", MG_VAL_BOOL, get_led, set_led},
{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/full-dashboard/web_root/index.html
+140
View File
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<!-- Mongoose device dashboard -->
<script src="https://cdn.jsdelivr.net/gh/cesanta/mongoose@master/resources/dashboard.js"></script>
<script>
Dashboard.init({
debug: true,
data: {
temperature: 25,
humidity: 60,
voltage: 12.5,
current: 4.2,
power: 52.5,
speed: 100,
},
});
</script>
<script src="main.js" defer></script>
<title>My Dashboard Toolbar</title>
</head>
<body>
<div class="header">
<div class="header-container">
<div class="header-left">
<nav class="nav-tabs" role="tablist" aria-label="Primary tabs">
<img src="logo.svg" alt="Logo" class="logo" />
<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="#events" id="tab-events" class="nav-link" role="tab" aria-controls="events" aria-selected="false" tabindex="-1">
<svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
<path d="M8 7h8" />
<path d="M8 12h8" />
<path d="M8 17h5" />
<rect x="4" y="4" width="16" height="16" rx="3" />
</svg>
Events
</a>
</nav>
</div>
<div class="header-actions">
<div class="connection-badge" aria-label="connection active">
<span class="connection-label">live</span>
<span class="connection-dot" aria-hidden="true"></span>
</div>
<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="Electrical overview">
<article class="metric-tile">
<div class="metric-tile-top">
<div class="metric-label">VOLTAGE</div>
<span class="metric-chip">
<svg viewBox="0 0 24 24" class="metric-icon" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M13 2 6 14h5l-1 8 7-12h-5z" />
</svg>
</span>
</div>
<div class="metric-value">
<span class="metric-number">12.5</span>
<span class="metric-unit">V</span>
</div>
</article>
<article class="metric-tile">
<div class="metric-tile-top">
<div class="metric-label">CURRENT</div>
<span class="metric-chip">
<svg viewBox="0 0 24 24" class="metric-icon" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M4 12h4l2-6 4 12 2-6h4" />
</svg>
</span>
</div>
<div class="metric-value">
<span class="metric-number">4.2</span>
<span class="metric-unit">A</span>
</div>
</article>
<article class="metric-tile">
<div class="metric-tile-top">
<div class="metric-label">POWER</div>
<span class="metric-chip">
<svg viewBox="0 0 24 24" class="metric-icon" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 3v8" />
<path d="M7 8h10" />
<rect x="5" y="11" width="14" height="8" rx="2" />
</svg>
</span>
</div>
<div class="metric-value">
<span class="metric-number">52.5</span>
<span class="metric-unit">W</span>
</div>
</article>
</div>
</section>
<section id="settings" class="tab-panel" role="tabpanel" aria-labelledby="tab-settings" hidden></section>
<section id="firmware" class="tab-panel" role="tabpanel" aria-labelledby="tab-firmware" hidden></section>
<section id="events" class="tab-panel" role="tabpanel" aria-labelledby="tab-events" hidden></section>
</main>
</body>
</html>
tutorials/device-dashboard/full-dashboard/web_root/logo.svg
+23
View File
@@ -0,0 +1,23 @@
<svg 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>
<!-- icon: two rounded rectangles -->
<g fill="none" stroke="url(#g)" stroke-width="40" stroke-linecap="round" stroke-linejoin="round">
<rect x="140" y="160" width="260" height="260" rx="70"/>
<rect x="260" y="80" width="260" height="260" rx="70"/>
</g>
<!-- text -->
<text x="560" y="330"
font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="160"
font-weight="600"
fill="#6b7280">
my logo
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 773 B

tutorials/device-dashboard/full-dashboard/web_root/main.js
+34
View File
@@ -0,0 +1,34 @@
document.addEventListener("DOMContentLoaded", () => {
const tabs = Array.from(document.querySelectorAll(".header-left .nav-link[href^='#']"));
const panels = Array.from(document.querySelectorAll(".tab-panel"));
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;
});
};
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);
});
tutorials/device-dashboard/full-dashboard/web_root/style.css
+237
View File
@@ -0,0 +1,237 @@
/* Custom CSS for Dashboard */
: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;
}
* {
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);
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
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-2) var(--spacing-3);
}
.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;
color: rgb(4, 120, 87);
border: 1px solid rgb(167, 243, 208);
background: rgb(236, 253, 245);
padding: 4px 14px;
border-radius: 14px;
font-weight: 600;
}
.connection-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgb(16, 185, 129);
flex-shrink: 0;
}
.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: calc(var(--spacing-1) + 2px);
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;
}
.nav-link-active {
color: rgb(3, 105, 161);
background: #fff;
border: 1px solid rgb(186, 230, 253);
}
.nav-link:hover {
}
.nav-icon {
height: 1rem;
width: 1rem;
flex-shrink: 0;
}
.tab-stage {
max-width: var(--max-width);
margin: 0 auto;
padding: 5.5rem var(--spacing-3) var(--spacing-3);
}
.tab-panel {
min-height: calc(100vh - 6rem);
/* border-radius: .5rem; */
/* background-color: #eee; */
/* border: 1px solid rgba(216, 224, 234, 0.78); */
/* padding: var(--spacing-4); */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 18px 40px rgba(148, 163, 184, 0.1);
}
.overview-grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0.45rem;
}
.metric-tile {
flex: 0 0 auto;
width: 8.75rem;
min-height: 0;
padding: 0.5rem 0.6rem 0.55rem;
border-radius: 0.7rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 253, 0.92) 100%);
border: 1px solid rgba(203, 213, 225, 0.8);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 4px 10px rgba(148, 163, 184, 0.08);
}
.metric-tile-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.3rem;
}
.metric-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.3rem;
height: 1.3rem;
border-radius: 0.42rem;
color: #4f6f93;
background: linear-gradient(180deg, rgba(232, 239, 245, 0.98) 0%, rgba(219, 229, 239, 0.92) 100%);
border: 1px solid rgba(191, 204, 219, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.84),
0 2px 6px rgba(148, 163, 184, 0.08);
}
.metric-icon {
width: 0.68rem;
height: 0.68rem;
}
.metric-label {
color: #5d7088;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.metric-value {
display: flex;
align-items: baseline;
gap: 0.16rem;
color: #18314f;
}
.metric-number {
font-size: 1.18rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1;
}
.metric-unit {
color: var(--color-text-muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.tab-panel[hidden] {
display: none;
}
@media (max-width: 840px) {
.overview-grid {
grid-template-columns: 1fr;
}
}
tutorials/device-dashboard/led-control/Makefile
+32
View File
@@ -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
+46
View File
@@ -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
+30
View File
@@ -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
+48
View File
@@ -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;
}
tutorials/device-dashboard/realtime-graph/Makefile
+32
View File
@@ -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/realtime-graph/server.c
+72
View File
@@ -0,0 +1,72 @@
// SPDX-FileCopyrightText: 2026 Cesanta Software Limited
// SPDX-License-Identifier: GPL-2.0-only or commercial
#include "math.h"
#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
#define NUM_POINTS 512 // How many data points to send
#define INTERVAL_MS 200 // How often, in milliseconds
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.
};
// This function prints a JSON array of plot points
size_t print_points(void (*fn)(char, void *), void *arg, va_list *ap) {
size_t i, n = 0;
const char *comma = "";
(void) ap;
n += mg_xprintf(fn, arg, "[");
for (i = 0; i < NUM_POINTS; i++) {
struct point p;
p.x = (uint16_t) i;
// rand() - 0.5 + sin(x * 0.00002) * 40 + sin(x * 0.001) * 5 + sin(x * 0.1)
// * 2;
p.y1 = 100 + 50 * sin(i * 0.1) + rand() % 21;
p.y2 = 70 + 30 * sin(i * 0.03) + rand() % 17;
n += mg_xprintf(fn, arg, "%s[%hu,%hu,%hu]", comma, p.x, p.y1, p.y2);
comma = ",";
}
n += mg_xprintf(fn, arg, "]");
return n;
}
static void get_points(union mg_val *val) {
val->fn = (void (*)(void)) print_points;
}
// Modify this. This represents device's state to the dashboard
static struct mg_field fields[] = {
{"points", MG_VAL_FN, get_points, 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://0.0.0.0:8000", mg_dash_ev_handler, &dash);
uint64_t timer = 0;
for (;;) {
mg_mgr_poll(&mgr, 10);
// Send WS change notifications periodically
if (mg_timer_expired(&timer, INTERVAL_MS, mg_now())) {
mg_dash_send_change(&mgr, mg_dash_find_field(fields, mg_str("points")));
}
}
}
int main(void) {
run_mongoose();
return 0;
}
tutorials/device-dashboard/realtime-graph/web_root/index.html
+50
View File
@@ -0,0 +1,50 @@
<!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: false,
data: {
points: '',
},
});
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="uplot.min.css" />
<script src="uPlot.iife.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="main">
<h1>
Graph example
</h1>
<div class="panel" style="margin: 1rem 0;">
<div class="panel-title">Graph</div>
<div class="panel-row">
<div id="graph" style="height: 10rem; width: 100%;">
</div>
</div>
</div>
<div style="font-size:80%;color: #000000a0">
<p>In server.c, we generate "change" notifications periodically,
reporting 512 data points:
<code>{"method":"change","params":{"points":[[0,83],[1,99],...</code>
</p>
<p>In main.js, we create a uPlot chart instance bound to the div
inside the panel</p>
<p>In main.js, we call <code>Dashboard.on('change', function() {...})</code> to intercept all change notifications, get the points, and then calling chart.setData() to plot received values.</p>
</div>
</div>
</body>
</html>
tutorials/device-dashboard/realtime-graph/web_root/main.js
+36
View File
@@ -0,0 +1,36 @@
document.addEventListener("DOMContentLoaded", function() {
const el = document.getElementById("graph");
const rect = el.getBoundingClientRect();
const options = {
width: rect.width,
height: rect.height,
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') },
],
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)'},
],
};
// Create chart instance
const chart = new uPlot(options, [], el);
// Intercept change notifications
Dashboard.on('change', function(args) {
const data = [
args.points.map(x => x[0]),
args.points.map(x => x[1]),
args.points.map(x => x[2]),
];
//console.log(123, args.points);
chart.setData(data);
});
});
tutorials/device-dashboard/realtime-graph/web_root/style.css
+108
View File
@@ -0,0 +1,108 @@
:root {
--btn-color: white;
--btn-disabled-color: #d1d5db;
--bg-color: '#d8dcdf';
}
*, *::before, *::after {
box-sizing: border-box; margin: 0; padding: 0;
font-family: Arial, sans-serif;
}
body { background: #0004;}
h1 {font-size: 1.25rem;}
.main {
margin: 2rem auto; width: 640px; padding: 1em 2em;
border-radius:0.3rem; background: #fff5;
}
.panel {
display: flex; flex-direction: column; gap: 0.5rem;
background: #fffe;
border: 1px solid #0002;
border-radius: 0.3rem;
overflow: hidden;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.panel-title {
margin: -0.5rem -0.75rem 0 -0.75rem;
padding: 0.5rem 0.75rem 0.3rem 0.75rem;
border-bottom: 1px solid #0003;
border-radius: 0.25rem 0.25rem 0 0;
background: #0001;
font-weight: 600;
color: #000c;
}
.input, .dropdown {
display:inline-flex;
border-radius: 5px;
background: #fff;
color: #475569;
border: 1px solid #ccc;
border-width: 1px;
outline: none;
box-sizing: border-box;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin:0;
font-size: 14px;
font-weight: normal;
transition: all .2s ease;
}
.button {
padding: 0.25rem 1rem;
border: 1px solid transparent;
border-radius: 4px;
background: #2563eb;
color: var(--btn-color);
font-weight: 600;
cursor: pointer;
position: relative;
transition: all .2s ease;
}
.button:hover {
background: #3b82f6;
}
.button.loading {
color: transparent;
text-shadow: none;
}
.button:disabled,.button:hover:disabled,.button.disabled,.button:hover.disabled {
background: var(--btn-disabled-color) !important;
border-color: var(--btn-disabled-color);
cursor: not-allowed;
}
.input {
padding: 0.25rem 0.5rem;
}
.panel-row {
display:flex;
align-items:center;
justify-content:space-between;
gap: 0.5rem;
}
.input:disabled,.select:disabled,.input.disabled,.select.disabled,.slider.disabled {
background: var(--bg-color) !important;
cursor: not-allowed;
}
.input.edited, .select.edited, .slider.edited>* {
border-color: #50500040;
background: #ffff0020;
}
.input.error, .select.error, .slider.error>* {
border-color: #50000040;
background: #ff000020;
}
tutorials/device-dashboard/realtime-graph/web_root/uPlot.iife.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
tutorials/device-dashboard/realtime-graph/web_root/uplot.min.css
Vendored
+1
View File
@@ -0,0 +1 @@
.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
tutorials/device-dashboard/settings-panel/Makefile
+32
View File
@@ -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/settings-panel/server.c
+49
View File
@@ -0,0 +1,49 @@
// 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 int s_threshold = 17;
static char s_location[20] = "Galway";
static void location_get(union mg_val *val) {
val->s = mg_str(s_location);
}
static void location_set(const union mg_val *val) {
mg_json_unescape(val->s, s_location, sizeof(s_location));
}
static void threshold_get(union mg_val *val) {
val->i = s_threshold;
}
static void threshold_set(const union mg_val *val) {
s_threshold = val->i;
}
// Modify this. This represents device's state to the dashboard
static struct mg_field fields[] = {
{"location", MG_VAL_STR, location_get, location_set},
{"threshold", MG_VAL_INT, threshold_get, threshold_set},
{0, 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/settings-panel/web_root/index.html
+53
View File
@@ -0,0 +1,53 @@
<!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: {
location: 'Dublin',
threshold: 42,
firmware_version: '1.0.0',
},
});
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<h1>
Settings panel example
</h1>
<div class="panel" style="margin: 1rem 0;">
<div class="panel-title">Settings panel</div>
<div class="panel-row">
<span>Location:</span>
<input class="input" data-bind='location' data-autosave="1" />
</div>
<div class="panel-row">
<span>Noise threshold:</span>
<input class="input" data-bind="threshold" />
</div>
<div class="panel-row" style="justify-content: end;">
<button class="button" data-cancel="loc.*|threshold">cancel</button>
<button class="button" data-save="loc.*|threshold">save</button>
</div>
</div>
<div style="font-size:80%;color: #000000a0">
When a field is edited, a local copy is created. For as long as that
copy is different from the device's value, the field is added an
"edited" CSS class. Bad values (e.g. non-numeric value for the field
that is bound to a numeric data) give a "error" CSS class.
<p style="margin-top: .5rem;">The Location field has autosave flag set, so it is saved automatically
as the user type text<//>
</div>
</div>
</body>
</html>
tutorials/device-dashboard/settings-panel/web_root/style.css
+108
View File
@@ -0,0 +1,108 @@
:root {
--btn-color: white;
--btn-disabled-color: #d1d5db;
--bg-color: '#d8dcdf';
}
*, *::before, *::after {
box-sizing: border-box; margin: 0; padding: 0;
font-family: Arial, sans-serif;
}
body { background: #0004;}
h1 {font-size: 1.25rem;}
.main {
margin: 2rem auto; width: 380px; padding: 1em 2em;
border-radius:0.3rem; background: #fff5;
}
.panel {
display: flex; flex-direction: column; gap: 0.5rem;
background: #fffe;
border: 1px solid #0002;
border-radius: 0.3rem;
overflow: hidden;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.panel-title {
margin: -0.5rem -0.75rem 0 -0.75rem;
padding: 0.5rem 0.75rem 0.3rem 0.75rem;
border-bottom: 1px solid #0003;
border-radius: 0.25rem 0.25rem 0 0;
background: #0001;
font-weight: 600;
color: #000c;
}
.input, .dropdown {
display:inline-flex;
border-radius: 5px;
background: #fff;
color: #475569;
border: 1px solid #ccc;
border-width: 1px;
outline: none;
box-sizing: border-box;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin:0;
font-size: 14px;
font-weight: normal;
transition: all .2s ease;
}
.button {
padding: 0.25rem 1rem;
border: 1px solid transparent;
border-radius: 4px;
background: #2563eb;
color: var(--btn-color);
font-weight: 600;
cursor: pointer;
position: relative;
transition: all .2s ease;
}
.button:hover {
background: #3b82f6;
}
.button.loading {
color: transparent;
text-shadow: none;
}
.button:disabled,.button:hover:disabled,.button.disabled,.button:hover.disabled {
background: var(--btn-disabled-color) !important;
border-color: var(--btn-disabled-color);
cursor: not-allowed;
}
.input {
padding: 0.25rem 0.5rem;
}
.panel-row {
display:flex;
align-items:center;
justify-content:space-between;
gap: 0.5rem;
}
.input:disabled,.select:disabled,.input.disabled,.select.disabled,.slider.disabled {
background: var(--bg-color) !important;
cursor: not-allowed;
}
.input.edited, .select.edited, .slider.edited>* {
border-color: #50500040;
background: #ffff0020;
}
.input.error, .select.error, .slider.error>* {
border-color: #50000040;
background: #ff000020;
}