Graph fixes

tutorials/device-dashboard/full-dashboard/server.c

@@ -59,7 +59,6 @@ static void get_metrics(union mg_val *val) {
   val->fn = (void (*)(void)) print_metrics;
 }
 
-static bool s_motor = false;
 static double s_volume = 17.2;
 static char s_name[20] = "Dublin";
 // This function prints a JSON object with read-only metrics
@@ -68,11 +67,14 @@ size_t print_settings(void (*fn)(char, void *), void *arg, va_list *ap) {
   (void) ap;
   n += mg_xprintf(fn, arg, "{");
   n += mg_xprintf(fn, arg, "%s%m:%g", " ", MG_ESC("volume"), s_volume);
-  n += mg_xprintf(fn, arg, "%s%m:%s", ",", MG_ESC("motor"), s_motor ? "true" : "false");
   n += mg_xprintf(fn, arg, "%s%m:%m", ",", MG_ESC("name"), MG_ESC(s_name));
   n += mg_xprintf(fn, arg, "}");
   return n;
 }
+static void set_settings(const union mg_val *val) {
+  mg_json_unescape(val->s, "$.name", s_name, sizeof(s_name));
+  mg_json_get_num(val->s, "$.volume", &s_volume);
+}
 static void get_settings(union mg_val *val) {
   val->fn = (void (*)(void)) print_settings;
 }
@@ -100,7 +102,7 @@ static void get_controls(union mg_val *val) {
 // Modify this. This represents device's state to the dashboard
 static struct mg_field fields[] = {
     {"controls", MG_VAL_FN, get_controls, set_controls},
-    {"settings", MG_VAL_FN, get_settings, NULL},
+    {"settings", MG_VAL_FN, get_settings, set_settings},
     {"metrics", MG_VAL_FN, get_metrics, NULL},
     {"points", MG_VAL_FN, get_points, NULL},
     {NULL, 0, 0, 0},

tutorials/device-dashboard/full-dashboard/web_root/index.html

@@ -205,7 +205,7 @@
             <div class="settings-fields">
               <div class="field">
                 <label class="field-label" for="setting-name">Name</label>
-                <input class="field-input" id="setting-name" type="text" data-bind="settings.name" />
+                <input class="field-input" id="setting-name" type="text" data-bind="settings.name" data-autosave="1" />
               </div>
               <div class="field">
                 <label class="field-label" for="setting-volume">Volume</label>

tutorials/device-dashboard/full-dashboard/web_root/main.js

@@ -2,6 +2,8 @@ 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;
@@ -18,6 +20,19 @@ document.addEventListener("DOMContentLoaded", () => {
       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 => {
@@ -34,11 +49,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
   const el = document.getElementById("chart");
-  const rect = el.getBoundingClientRect();
 
   const options = {
-    width: rect.width,
-    height: rect.height,
+    width: 100,
+    height: 100,
     tzDate: (ts) => uPlot.tzDate(new Date(ts * 1e3), "Europe/London"),
     plugins: [],
     legend: { show: false },
@@ -53,17 +67,13 @@ document.addEventListener("DOMContentLoaded", () => {
     ],
   };
 
-  // Create chart instance
-  const chart = new uPlot(options, [], el);
-
   function updateGraphPoints(args) {
-    if (!args.points) return;
+    if (!args.points || !chart) return;
     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/full-dashboard/web_root/style.css

@@ -114,6 +114,7 @@ body {
   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 {