wt/mongoose
1
0 Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2026-10-28 12:30:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance cube package

Browse Source
This commit is contained in:
cpq committed 2026-05-10 12:48:00 +01:00
1 parent 91715b380d
commit 961a6f0a46
16 files changed
+378 -138
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

tutorials/device-dashboard/full/Makefile
+4 -5
View File
@@ -2,10 +2,10 @@
PROG ?= example
TOP ?= ../../..
SOURCES = main.c dashboard.c file_data.c $(TOP)/mongoose.c
SOURCES = dashboard.c file_data.c $(TOP)/mongoose.c
CFLAGS_EXTRA ?= -DMG_TLS=MG_TLS_BUILTIN
CFLAGS ?= -W -Wall -Wextra -Werror -Wundef -Wshadow -O0 $(CFLAGS_EXTRA)
PFLAGS = -I$(TOP) -DMG_DATA_SIZE=64 -DMG_ENABLE_LINES=1
PFLAGS = -I$(TOP) -DMG_DATA_SIZE=64 -DMG_ENABLE_LINES=1 -DMAIN
AFLAGS ?= -fsanitize=signed-integer-overflow,address,undefined,alignment
all: $(PROG)
@@ -17,13 +17,12 @@ $(PROG): $(SOURCES) $(TOP)/mongoose.h
# 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
node $(TOP)/resources/html2c.js dashboard.html -o file_data.c
@echo "On-flash size: `grep -oE '[0-9]+' file_data.c | wc -l`"
# 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
node $(TOP)/resources/watch.js -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/ai.spec.md
-32
View File
@@ -1,32 +0,0 @@
# Device dashboard
This is the AI specification file for the Web device dashboard.
## General rules
Your goal is to produce a dashboard.c and dashboard.html files
Fetch the initial implementation of these two files from:
https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/full/dashboard.c
https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/full/dashboard.html
The C API for dashboard.c is described at https://mongoose.ws/docs/api/dash/
The C API header file is at https://github.com/cesanta/mongoose/blob/master/src/dash.h
The minimal reference project is at https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/minimal/
The full reference project is at https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/full/
For editing dashboard.html, use only Mongoose `data-bind` and `${...}` template syntax
No vanilla JS event listeners, no fetch calls, no custom reactive logic.
## dashboard.html
Change theme to dark
## dashboard.c
Don't touch it
tutorials/device-dashboard/full/dashboard.c
+18
View File
@@ -216,3 +216,21 @@ void mg_dash_poll(struct mg_mgr *mgr) {
mg_dash_send_change(mgr, &set_actions);
}
}
// On desktop, build with -DMAIN flag to include main().
// On embedded system, run this code in your main() function
#ifdef MAIN
int main(void) {
struct mg_mgr mgr;
mg_mgr_init(&mgr);
mg_dash_init(&mgr);
for (;;) {
mg_mgr_poll(&mgr, 1);
mg_dash_poll(&mgr);
}
return 0;
}
#endif
tutorials/device-dashboard/full/dashboard.html
+10 -14
View File
@@ -114,14 +114,6 @@
Dashboard.login().catch(err => showLogin(true));
// GRAPHS
// {stroke: '#14B8A6FF', fill: '#14B8A61A'}, // teal
// {stroke: '#F59E0BFF', fill: '#F59E0B1A'}, // amber
// {stroke: '#22C55EFF', fill: '#22C55E1A'}, // green
// {stroke: '#EF4444FF', fill: '#EF44441A'}, // red
// {stroke: '#8B5CF6FF', fill: '#8B5CF61A'}, // purple
// {stroke: '#058DC7FF', fill: '#058DC71A'}, // azure
// {stroke: '#ED7E17FF', fill: '#ED7E171A'}, // tangerine
const graphs = {
graph1: {
el: document.getElementById("graph1"),
@@ -207,7 +199,6 @@ a, a:visited, a:link { text-decoration: none; }
.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); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 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; }
@@ -271,9 +262,8 @@ a, a:visited, a:link { text-decoration: none; }
.toggle.edited { border-color: #0fe; }
.u-under { top: 0 !important; }
.hidden { display: none; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr !important; } #files .row { flex-direction: column; flex-wrap: nowrap; } #files .panel, #files .note { flex: 1 1 auto; width: 100%; } }
@media (max-width: 900px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .metrics-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; } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr) !important; } #files .row { flex-direction: column; flex-wrap: nowrap; } #files .panel, #files .note { flex: 1 1 auto; width: 100%; } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr !important; } .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 -->
@@ -389,7 +379,7 @@ a, a:visited, a:link { text-decoration: none; }
</div>
<main class="tab-stage">
<section id="overview" class="tab-panel tab-panel-active" role="tabpanel" aria-labelledby="tab-overview">
<div class="metrics-grid" aria-label="Device metrics overview">
<div class="grid" style="grid-template-columns: repeat(5, 1fr); gap: 1rem;">
<article class="metric-tile">
<div class="metric-label">Temperature</div>
<div class="metric-value-row">
@@ -431,6 +421,12 @@ a, a:visited, a:link { text-decoration: none; }
<span class="metric-status metric-status-good">ok</span>
</div>
</article>
<article class="metric-tile note">
<div>
To customize this dashboard, follow
<a target="_blank" href="https://mongoose.ws/docs/guides/web-dashboard-guide/">https://mongoose.ws/docs/guides/web-dashboard-guide/</a>
</div>
</article>
</div>
<div class="grid" style="grid-template-columns: 1fr 1fr;">
@@ -635,7 +631,7 @@ a, a:visited, a:link { text-decoration: none; }
Mongoose includes built-in firmware update support for many
architectures, such as STM32, RP2040, and ESP32. See
<a target="_blank" href="https://github.com/cesanta/mongoose/blob/master/src/ota.h">ota.h</a>
<a target="_blank" href="https://github.com/cesanta/mongoose/blob/master/src/ota.h">ota.h</a>
for the full list of supported MCUs.
If you are using STM32, it works out of the box with no additional setup.
tutorials/device-dashboard/full/main.c
-18
View File
@@ -1,18 +0,0 @@
// 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;
}
tutorials/device-dashboard/minimal/Makefile
+5 -6
View File
@@ -2,10 +2,10 @@
PROG ?= example
TOP ?= ../../..
SOURCES = main.c dashboard.c file_data.c $(TOP)/mongoose.c
SOURCES = dashboard.c file_data.c $(TOP)/mongoose.c
CFLAGS_EXTRA ?= -DMG_TLS=MG_TLS_BUILTIN
CFLAGS ?= -W -Wall -Wextra -Werror -Wundef -Wshadow -O0 $(CFLAGS_EXTRA)
PFLAGS = -I$(TOP) -DMG_DATA_SIZE=64 -DMG_ENABLE_LINES=1
PFLAGS = -I$(TOP) -DMG_DATA_SIZE=64 -DMG_ENABLE_LINES=1 -DMAIN
AFLAGS ?= -fsanitize=signed-integer-overflow,address,undefined,alignment
all: $(PROG)
@@ -17,13 +17,12 @@ $(PROG): $(SOURCES) $(TOP)/mongoose.h
# 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
node $(TOP)/resources/html2c.js dashboard.html -o file_data.c
@echo "On-flash size: `grep -oE '[0-9]+' file_data.c | wc -l`"
# 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
node $(TOP)/resources/watch.js -w dashboard.c -w $(TOP)/mongoose.h -w dashboard.html -- make
clean:
rm -rf $(PROG) *.exe *.obj *.dSYM mongoose out.* file_data.c
rm -rf $(PROG) *.exe *.obj *.dSYM mongoose file_data.c
tutorials/device-dashboard/minimal/ai.spec.md
-36
View File
@@ -1,36 +0,0 @@
# Device dashboard
This is the AI specification file for the Web device dashboard.
## General rules
Your goal is to produce a dashboard.c and dashboard.html files
Fetch the initial implementation of these two files from:
https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/minimal/dashboard.c
https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/minimal/dashboard.html
The C API for dashboard.c is described at https://mongoose.ws/docs/api/dash/
The C API header file is at https://github.com/cesanta/mongoose/blob/master/src/dash.h
The minimal reference project is at https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/minimal/
The full reference project is at https://github.com/cesanta/mongoose/blob/master/tutorials/device-dashboard/full/
For editing dashboard.html, use only Mongoose `data-bind` and `${...}` template syntax
No vanilla JS event listeners, no fetch calls, no custom reactive logic.
## dashboard.html
On a page, create single control panel titled "LED control"
On that control, add 3 LED toggles: LED1, LED2, LED3
Update Dashboard.init call accordingly. Update dashboard.c accordingly - have 3 LEDs in the "leds" data set.
## dashboard.c
Don't touch it
tutorials/device-dashboard/minimal/dashboard.c
+18
View File
@@ -45,3 +45,21 @@ void mg_dash_init(struct mg_mgr *mgr) {
void mg_dash_poll(struct mg_mgr *mgr) {
(void) mgr;
}
// On desktop, build with -DMAIN flag to include main().
// On embedded system, run this code in your main() function
#ifdef MAIN
int main(void) {
struct mg_mgr mgr;
mg_mgr_init(&mgr);
mg_dash_init(&mgr);
for (;;) {
mg_mgr_poll(&mgr, 1);
mg_dash_poll(&mgr);
}
return 0;
}
#endif
tutorials/device-dashboard/minimal/dashboard.html
+5
View File
@@ -54,6 +54,11 @@
Open this page in two or more browser windows and see how the dashboards
stay synchronised when changes are made in any of them.
</div>
<div style="text-align: left; margin-top: 6px;">
To customize this dashboard, follow
<a target="_blank" href="https://mongoose.ws/docs/guides/web-dashboard-guide/">https://mongoose.ws/docs/guides/web-dashboard-guide/</a>
</div>
</div>
</div>
tutorials/device-dashboard/minimal/main.c
-18
View File
@@ -1,18 +0,0 @@
// 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;
}