Change device dashboard to use MQTT

examples/device-dashboard/Makefile

@@ -1,5 +1,5 @@
 PROG ?= example
-SOURCES ?= ../../mongoose.c main.c web.c packed_fs.c
+SOURCES ?= ../../mongoose.c main.c net.c packed_fs.c
 CFLAGS ?= -I../.. -DMG_ENABLE_PACKED_FS=1 $(EXTRA)
 FILES_TO_EMBED ?= $(wildcard web_root/*)
 ROOT ?= $(realpath $(CURDIR)/../../..)

examples/device-dashboard/net.c

@@ -3,6 +3,10 @@
 
 #include "mongoose.h"
 
+#define MQTT_SERVER "mqtt://broker.hivemq.com:1883"
+#define MQTT_PUBLISH_TOPIC "mg/my_device"
+#define MQTT_SUBSCRIBE_TOPIC "mg/#"
+
 // Authenticated user.
 // A user can be authenticated by:
 //   - a name:pass pair
@@ -17,25 +21,18 @@ struct user {
 
 // This is a configuration structure we're going to show on a dashboard
 static struct config {
-  int value1;
-  char *value2;
-} s_config = {123, NULL};
+  char *url, *pub, *sub;  // MQTT settings
+} s_config;
 
-// Update config structure. Return true if changed, false otherwise
-static bool update_config(struct mg_http_message *hm, struct config *cfg) {
-  bool changed = false;
+static struct mg_connection *s_mqtt = NULL;  // MQTT connection
+
+// Try to update a single configuration value
+static void update_config(struct mg_str *body, const char *name, char **value) {
   char buf[256];
-  if (mg_http_get_var(&hm->body, "value1", buf, sizeof(buf)) > 0) {
-    cfg->value1 = atoi(buf);
-    changed = true;
+  if (mg_http_get_var(body, name, buf, sizeof(buf)) > 0) {
+    free(*value);
+    *value = strdup(buf);
   }
-  if (mg_http_get_var(&hm->body, "value2", buf, sizeof(buf)) > 0) {
-    free(cfg->value2);
-    cfg->value2 = malloc(strlen(buf) + 1);
-    strcpy(cfg->value2, buf);
-    changed = true;
-  }
-  return changed;
 }
 
 // Parse HTTP requests, return authenticated user or NULL
@@ -75,7 +72,7 @@ static void send_notification(struct mg_mgr *mgr, const char *name,
 }
 
 // Send simulated metrics data to the dashboard, for chart rendering
-static void timer_func(void *param) {
+static void timer_metrics_fn(void *param) {
   char buf[50];
   mg_snprintf(buf, sizeof(buf), "[ %lu, %d ]", (unsigned long) time(NULL),
               10 + (int) ((double) rand() * 10 / RAND_MAX));
@@ -83,11 +80,41 @@ static void timer_func(void *param) {
   send_notification(param, "metrics", buf);
 }
 
+// MQTT event handler function
+static void mqtt_fn(struct mg_connection *c, int ev, void *evd, void *fnd) {
+  if (ev == MG_EV_MQTT_OPEN) {
+    struct mg_str topic = mg_str(s_config.pub);
+    mg_mqtt_sub(s_mqtt, &topic, 1);
+  } else if (ev == MG_EV_MQTT_MSG) {
+    struct mg_mqtt_message *mm = evd;
+    char buf[256];
+    snprintf(buf, sizeof(buf), "{\"topic\":\"%.*s\",\"data\":\"%.*s\"}",
+             (int) mm->topic.len, mm->topic.ptr, (int) mm->data.len,
+             mm->data.ptr);
+    send_notification(param, "message", buf);
+  } else if (ev == MG_EV_CLOSE) {
+    s_mqtt = NULL;
+  }
+}
+
+// Keep MQTT connection open - reconnect if closed
+static void timer_metrics_fn(void *param) {
+  struct mg_mgr *mgr = (struct mg_mgr *) param;
+  if (s_mqtt == NULL) {
+    struct mg_mqtt_opts opts = {};
+    s_mqtt = mg_mqtt_connect(mgr, s_config.rl, &opts, mqtt_fn, NULL);
+  }
+}
+
 // HTTP request handler function
 void device_dashboard_fn(struct mg_connection *c, int ev, void *ev_data,
                          void *fn_data) {
   if (ev == MG_EV_OPEN && c->is_listening) {
-    mg_timer_add(c->mgr, 1000, MG_TIMER_REPEAT, timer_func, c->mgr);
+    mg_timer_add(c->mgr, 1000, MG_TIMER_REPEAT, timer_metrics_fn, c->mgr);
+    mg_timer_add(c->mgr, 1000, MG_TIMER_REPEAT, timer_mqtt_fn, c->mgr);
+    s_config.url = strdup(MQTT_SERVER);
+    s_config.pub = strdup(MQTT_PUBLISH_TOPIC);
+    s_config.sub = strdup(MQTT_SUBSCRIBE_TOPIC);
   } else if (ev == MG_EV_HTTP_MSG) {
     struct mg_http_message *hm = (struct mg_http_message *) ev_data;
     struct user *u = getuser(hm);
@@ -100,14 +127,16 @@ void device_dashboard_fn(struct mg_connection *c, int ev, void *ev_data,
       mg_printf(c, "%s", "HTTP/1.1 403 Denied\r\nContent-Length: 0\r\n\r\n");
     } else if (mg_http_match_uri(hm, "/api/config/get")) {
       mg_printf(c, "HTTP/1.1 200 OK\r\nTransfer-Encoding: chunked\r\n\r\n");
-      mg_http_printf_chunk(c, "{\"%s\":%d,\"%s\":\"%s\"}", "value1",
-                           s_config.value1, "value2", s_config.value2);
+      mg_http_printf_chunk(c, "{\"url\":\"%s\",\"pub\":\"%s\",\"sub\":\"%s\"}",
+                           s_config.url, s_config.pub, s_config.sub);
       mg_http_printf_chunk(c, "");
     } else if (mg_http_match_uri(hm, "/api/config/set")) {
       // Admins only
       if (strcmp(u->name, "admin") == 0) {
-        if (update_config(hm, &s_config))
-          send_notification(fn_data, "config", "null");
+        update_config(&hm->body, "url", &s_config.url);
+        update_config(&hm->body, "pub", &s_config.pub);
+        update_config(&hm->body, "sub", &s_config.sub);
+        send_notification(fn_data, "config", "null");
         mg_printf(c, "HTTP/1.1 200 OK\r\nContent-Length: 0\r\n\r\n");
       } else {
         mg_printf(c, "%s", "HTTP/1.1 403 Denied\r\nContent-Length: 0\r\n\r\n");

examples/device-dashboard/web_root/chartist.min.css

@@ -1 +0,0 @@
-.ct-double-octave:after,.ct-golden-section:after,.ct-major-eleventh:after,.ct-major-second:after,.ct-major-seventh:after,.ct-major-sixth:after,.ct-major-tenth:after,.ct-major-third:after,.ct-major-twelfth:after,.ct-minor-second:after,.ct-minor-seventh:after,.ct-minor-sixth:after,.ct-minor-third:after,.ct-octave:after,.ct-perfect-fifth:after,.ct-perfect-fourth:after,.ct-square:after{content:"";clear:both}.ct-label{fill:rgba(0,0,0,.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-chart-bar .ct-label,.ct-chart-line .ct-label{display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ct-chart-donut .ct-label,.ct-chart-pie .ct-label{dominant-baseline:central}.ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-vertical.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-label.ct-vertical.ct-end{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:end}.ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-grid-background{fill:none}.ct-point{stroke-width:10px;stroke-linecap:round}.ct-line{fill:none;stroke-width:4px}.ct-area{stroke:none;fill-opacity:.1}.ct-bar{fill:none;stroke-width:10px}.ct-slice-donut{fill:none;stroke-width:60px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#d70206}.ct-series-a .ct-area,.ct-series-a .ct-slice-donut-solid,.ct-series-a .ct-slice-pie{fill:#d70206}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#f05b4f}.ct-series-b .ct-area,.ct-series-b .ct-slice-donut-solid,.ct-series-b .ct-slice-pie{fill:#f05b4f}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#f4c63d}.ct-series-c .ct-area,.ct-series-c .ct-slice-donut-solid,.ct-series-c .ct-slice-pie{fill:#f4c63d}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#d17905}.ct-series-d .ct-area,.ct-series-d .ct-slice-donut-solid,.ct-series-d .ct-slice-pie{fill:#d17905}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#453d3f}.ct-series-e .ct-area,.ct-series-e .ct-slice-donut-solid,.ct-series-e .ct-slice-pie{fill:#453d3f}.ct-series-fLine truncated

examples/device-dashboard/web_root/chartist.min.js

@@ -1,10 +0,0 @@
-/* Chartist.js 0.11.4
- * Copyright © 2019 Gion Kunz
- * Free to use under either the WTFPL license or the MIT license.
- * https://raw.githubusercontent.com/gionkunz/chartist-js/master/LICENSE-WTFPL
- * https://raw.githubusercontent.com/gionkunz/chartist-js/master/LICENSE-MIT
- */
-
-!function(a,b){"function"==typeof define&&define.amd?define("Chartist",[],function(){return a.Chartist=b()}):"object"==typeof module&&module.exports?module.exports=b():a.Chartist=b()}(this,function(){var a={version:"0.11.4"};return function(a,b){"use strict";var c=a.window,d=a.document;b.namespaces={svg:"http://www.w3.org/2000/svg",xmlns:"http://www.w3.org/2000/xmlns/",xhtml:"http://www.w3.org/1999/xhtml",xlink:"http://www.w3.org/1999/xlink",ct:"http://gionkunz.github.com/chartist-js/ct"},b.noop=function(a){return a},b.alphaNumerate=function(a){return String.fromCharCode(97+a%26)},b.extend=function(a){var c,d,e;for(a=a||{},c=1;c<arguments.length;c++){d=arguments[c];for(var f in d)e=d[f],"object"!=typeof e||null===e||e instanceof Array?a[f]=e:a[f]=b.extend(a[f],e)}return a},b.replaceAll=function(a,b,c){return a.replace(new RegExp(b,"g"),c)},b.ensureUnit=function(a,b){return"number"==typeof a&&(a+=b),a},b.quantity=function(a){if("string"==typeof a){var b=/^(\d+)\s*(.*)$/g.exec(a);return{value:+b[1],unit:b[2]||void 0}}return{value:a}},b.querySelector=function(a){return a instanceof Node?a:d.querySelector(a)},b.times=function(a){return Array.apply(null,new Array(a))},b.sum=function(a,b){return a+(b?b:0)},b.mapMultiply=function(a){return function(b){return b*a}},b.mapAdd=function(a){return function(b){return b+a}},b.serialMap=function(a,c){var d=[],e=Math.max.apply(null,a.map(function(a){return a.length}));return b.times(e).forEach(function(b,e){var f=a.map(function(a){return a[e]});d[e]=c.apply(null,f)}),d},b.roundWithPrecision=function(a,c){var d=Math.pow(10,c||b.precision);return Math.round(a*d)/d},b.precision=8,b.escapingMap={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"},b.serialize=function(a){return null===a||void 0===a?a:("number"==typeof a?a=""+a:"object"==typeof a&&(a=JSON.stringify({data:a})),Object.keys(b.escapingMap).reduce(function(a,c){return b.replaceAll(a,c,b.escapingMap[c])},a))},b.deserialize=function(a){if("string"!=typeof a)return a;a=Object.keys(b.escapingMap).reduce(function(a,c){return b.replaceAll(a,b.escapingMap[c],c)},a);try{a=JSON.parse(a),a=void 0!==a.data?a.data:a}catch(c){}return a},b.createSvg=function(a,c,d,e){var f;return c=c||"100%",d=d||"100%",Array.prototype.slice.call(a.querySelectorAll("svg")).filter(function(a){return a.getAttributeNS(b.namespaces.xmlns,"ct")}).forEach(function(b){a.removeChild(b)}),f=new b.Svg("svg").attr({width:c,height:d}).addClass(e),f._node.style.width=c,f._node.style.height=d,a.appendChild(f._node),f},b.normalizeData=function(a,c,d){var e,f={raw:a,normalized:{}};return f.normalized.series=b.getDataArray({series:a.series||[]},c,d),e=f.normalized.series.every(function(a){return a instanceof Array})?Math.max.apply(null,f.normalized.series.map(function(a){return a.length})):f.normalized.series.length,f.normalized.labels=(a.labels||[]).slice(),Array.prototype.push.apply(f.normalized.labels,b.times(Math.max(0,e-f.normalized.labels.length)).map(function(){return""})),c&&b.reverseData(f.normalized),f},b.safeHasProperty=function(a,b){return null!==a&&"object"==typeof a&&a.hasOwnProperty(b)},b.isDataHoleValue=function(a){return null===a||void 0===a||"number"==typeof a&&isNaN(a)},b.reverseData=function(a){a.labels.reverse(),a.series.reverse();for(var b=0;b<a.series.length;b++)"object"==typeof a.series[b]&&void 0!==a.series[b].data?a.series[b].data.reverse():a.series[b]instanceof Array&&a.series[b].reverse()},b.getDataArray=function(a,c,d){function e(a){if(b.safeHasProperty(a,"value"))return e(a.value);if(b.safeHasProperty(a,"data"))return e(a.data);if(a instanceof Array)return a.map(e);if(!b.isDataHoleValue(a)){if(d){var c={};return"string"==typeof d?c[d]=b.getNumberOrUndefined(a):c.y=b.getNumberOrUndefined(a),c.x=a.hasOwnProperty("x")?b.getNumberOrUndefined(a.x):c.x,c.y=a.hasOwnProperty("y")?b.getNumberOrUndefined(a.y):c.y,c}return b.getNumberOrUndefined(a)}}return a.series.map(e)},b.normalizePadding=function(a,b){return b=b||0,"number"==typeof a?{top:a,right:a,bottom:a,left:a}:{top:"number"==typeof a.top?a.top:b,right:"number"==typeof a.right?a.right:b,bottom:"number"==typeof a.bottom?a.bottom:b,left:"number"==typeof a.left?a.left:b}},b.getMetaData=function(a,b){var c=a.data?a.data[b]:a[b];return c?c.meta:void 0},b.orderOfMagnitude=function(a){return Math.floor(Math.log(Math.abs(a))/Math.LN10)},b.projectLength=function(a,b,c){return b/c.range*a},b.getAvailableHeight=function(a,c){return Math.max((b.quantity(c.height).value||a.height())-(c.chartPadding.top+c.chartPadding.bottom)-c.axisX.offset,0)},b.getHighLow=function(a,c,d){function e(a){if(void 0!==a)if(a instanceof Array)for(var b=0;b<a.length;b++)e(a[b]);else{var c=d?+a[d]:+a;g&&c>f.high&&(f.high=c),h&&c<f.low&&(f.low=c)}}c=b.extend({},c,d?c["axis"+d.toUpperCase()]:{});var f={high:void 0===c.high?-Number.MAX_VALUE:+c.high,low:void 0===c.low?Number.MAX_VALUE:+c.low},g=void 0===c.high,h=void 0===c.low;return(g||h)&&e(a),(c.referenceValue||0===c.referenceValue)&&(f.high=Math.max(c.referenceValLine truncated
-if(a.stackBars&&0!==c.normalized.series.length){var i=b.serialMap(c.normalized.series,function(){return Array.prototype.slice.call(arguments).map(function(a){return a}).reduce(function(a,b){return{x:a.x+(b&&b.x)||0,y:a.y+(b&&b.y)||0}},{x:0,y:0})});d=b.getHighLow([i],a,a.horizontalBars?"x":"y")}else d=b.getHighLow(c.normalized.series,a,a.horizontalBars?"x":"y");d.high=+a.high||(0===a.high?0:d.high),d.low=+a.low||(0===a.low?0:d.low);var j,k,l,m,n,o=b.createChartRect(this.svg,a,e.padding);k=a.distributeSeries&&a.stackBars?c.normalized.labels.slice(0,1):c.normalized.labels,a.horizontalBars?(j=m=void 0===a.axisX.type?new b.AutoScaleAxis(b.Axis.units.x,c.normalized.series,o,b.extend({},a.axisX,{highLow:d,referenceValue:0})):a.axisX.type.call(b,b.Axis.units.x,c.normalized.series,o,b.extend({},a.axisX,{highLow:d,referenceValue:0})),l=n=void 0===a.axisY.type?new b.StepAxis(b.Axis.units.y,c.normalized.series,o,{ticks:k}):a.axisY.type.call(b,b.Axis.units.y,c.normalized.series,o,a.axisY)):(l=m=void 0===a.axisX.type?new b.StepAxis(b.Axis.units.x,c.normalized.series,o,{ticks:k}):a.axisX.type.call(b,b.Axis.units.x,c.normalized.series,o,a.axisX),j=n=void 0===a.axisY.type?new b.AutoScaleAxis(b.Axis.units.y,c.normalized.series,o,b.extend({},a.axisY,{highLow:d,referenceValue:0})):a.axisY.type.call(b,b.Axis.units.y,c.normalized.series,o,b.extend({},a.axisY,{highLow:d,referenceValue:0})));var p=a.horizontalBars?o.x1+j.projectValue(0):o.y1-j.projectValue(0),q=[];l.createGridAndLabels(f,h,this.supportsForeignObject,a,this.eventEmitter),j.createGridAndLabels(f,h,this.supportsForeignObject,a,this.eventEmitter),a.showGridBackground&&b.createGridBackground(f,o,a.classNames.gridBackground,this.eventEmitter),c.raw.series.forEach(function(d,e){var f,h,i=e-(c.raw.series.length-1)/2;f=a.distributeSeries&&!a.stackBars?l.axisLength/c.normalized.series.length/2:a.distributeSeries&&a.stackBars?l.axisLength/2:l.axisLength/c.normalized.series[e].length/2,h=g.elem("g"),h.attr({"ct:series-name":d.name,"ct:meta":b.serialize(d.meta)}),h.addClass([a.classNames.series,d.className||a.classNames.series+"-"+b.alphaNumerate(e)].join(" ")),c.normalized.series[e].forEach(function(g,k){var r,s,t,u;if(u=a.distributeSeries&&!a.stackBars?e:a.distributeSeries&&a.stackBars?0:k,r=a.horizontalBars?{x:o.x1+j.projectValue(g&&g.x?g.x:0,k,c.normalized.series[e]),y:o.y1-l.projectValue(g&&g.y?g.y:0,u,c.normalized.series[e])}:{x:o.x1+l.projectValue(g&&g.x?g.x:0,u,c.normalized.series[e]),y:o.y1-j.projectValue(g&&g.y?g.y:0,k,c.normalized.series[e])},l instanceof b.StepAxis&&(l.options.stretch||(r[l.units.pos]+=f*(a.horizontalBars?-1:1)),r[l.units.pos]+=a.stackBars||a.distributeSeries?0:i*a.seriesBarDistance*(a.horizontalBars?-1:1)),t=q[k]||p,q[k]=t-(p-r[l.counterUnits.pos]),void 0!==g){var v={};v[l.units.pos+"1"]=r[l.units.pos],v[l.units.pos+"2"]=r[l.units.pos],!a.stackBars||"accumulate"!==a.stackMode&&a.stackMode?(v[l.counterUnits.pos+"1"]=p,v[l.counterUnits.pos+"2"]=r[l.counterUnits.pos]):(v[l.counterUnits.pos+"1"]=t,v[l.counterUnits.pos+"2"]=q[k]),v.x1=Math.min(Math.max(v.x1,o.x1),o.x2),v.x2=Math.min(Math.max(v.x2,o.x1),o.x2),v.y1=Math.min(Math.max(v.y1,o.y2),o.y1),v.y2=Math.min(Math.max(v.y2,o.y2),o.y1);var w=b.getMetaData(d,k);s=h.elem("line",v,a.classNames.bar).attr({"ct:value":[g.x,g.y].filter(b.isNumeric).join(","),"ct:meta":b.serialize(w)}),this.eventEmitter.emit("draw",b.extend({type:"bar",value:g,index:k,meta:w,series:d,seriesIndex:e,axisX:m,axisY:n,chartRect:o,group:h,element:s},v))}}.bind(this))}.bind(this)),this.eventEmitter.emit("created",{bounds:j.bounds,chartRect:o,axisX:m,axisY:n,svg:this.svg,options:a})}function d(a,c,d,f){b.Bar["super"].constructor.call(this,a,c,e,b.extend({},e,d),f)}var e=(a.window,a.document,{axisX:{offset:30,position:"end",labelOffset:{x:0,y:0},showLabel:!0,showGrid:!0,labelInterpolationFnc:b.noop,scaleMinSpace:30,onlyInteger:!1},axisY:{offset:40,position:"start",labelOffset:{x:0,y:0},showLabel:!0,showGrid:!0,labelInterpolationFnc:b.noop,scaleMinSpace:20,onlyInteger:!1},width:void 0,height:void 0,high:void 0,low:void 0,referenceValue:0,chartPadding:{top:15,right:15,bottom:5,left:10},seriesBarDistance:15,stackBars:!1,stackMode:"accumulate",horizontalBars:!1,distributeSeries:!1,reverseData:!1,showGridBackground:!1,classNames:{chart:"ct-chart-bar",horizontalBars:"ct-horizontal-bars",label:"ct-label",labelGroup:"ct-labels",series:"ct-series",bar:"ct-bar",grid:"ct-grid",gridGroup:"ct-grids",gridBackground:"ct-grid-background",vertical:"ct-vertical",horizontal:"ct-horizontal",start:"ct-start",end:"ct-end"}});b.Bar=b.Base.extend({constructor:d,createChart:c})}(this||global,a),function(a,b){"use strict";function c(a,b,c){var d=b.x>a.x;return d&&"explode"===c||!d&&"implode"===c?"start":d&&"implode"===c||!d&&"explode"===c?"end":"middle"}function d(a){var d,e,g,h,i,j=b.normalizeData(this.data),k=[],l=a.startAngle;this.svg=b.createSvg(this.container,a.width,a.height,a.donut?a.classNames.chartDonut:a.classNames.chartPie),e=b.createChartRect(thisLine truncated
-//# sourceMappingURL=chartist.min.js.map

examples/device-dashboard/web_root/index.html

@@ -5,10 +5,8 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="chartist.min.css" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body></body>
-  <script src="chartist.min.js"></script>
   <script type="module" src="main.js"></script>
 </html>

examples/device-dashboard/web_root/main.js

@@ -1,6 +1,8 @@
 'use strict';
 import {Component, h, html, render, useEffect, useState, useRef} from './preact.min.js';
 
+const MaxMetricsDataPoints = 50;
+
 const Nav = props => html`
 <div style="background: #333; padding: 0.5em; color: #fff;">
   <div class="container d-flex">
@@ -28,93 +30,77 @@ const Hero = props => html`
 <div style="margin-top: 1em; background: #eee; padding: 1em; border-radius: 0.5em; color: #777; ">
   <h1 style="margin: 0.2em 0;">Interactive Device Dashboard</h1>
 
+  <p>
   This device dashboard is developed with modern and compact Preact framework,
   in order to fit on a very small devices. This is
   a <a href="https://mongoose.ws/tutorials/http-server/">hybrid server</a> which
   provides both static and dynamic content.  Static files, like CSS/JS/HTML
-  or images, are compiled into the server binary. Dynamic content is
-  served via the REST API. 
+  or images, are compiled into the server binary.
 
-  This dashboard shows values kept in server memory. Many clients can open
-  this page.  The JS code that watches state changes, reconnects on network
-  failures.  That means if server restarts, dashboard on all connected clients
-  refresh automatically.
-
-  NOTE: administrators can change settings values, whilst users cannot.
-
-  <p>
-  This UI uses the REST API implemented by the server, which you can examine
+  This UI uses the REST API implemented by the device, which you can examine
   using  <code>curl</code> command-line utility:
   </p>
 
   <div><code>curl localhost:8000/api/config/get</code> - get current device configuration</div>
   <div><code>curl localhost:8000/api/config/set -d 'value1=7&value2=hello'</code> - set device configuration</div>
-  <div><code>curl localhost:8000/api/message/send -d 'msg=hello'</code> - send chat message</div>
-  <div><code>curl localhost:8000/api/watch</code> - get notifications: chat, config, metrics</div>
+  <div><code>curl localhost:8000/api/message/send -d 'msg=hello'</code> - send MQTT message</div>
+  <div><code>curl localhost:8000/api/watch</code> - get notifications: MQTT messages, configuration, sensor data</div>
 
 </div>`;
 
-const ShowSettings = function(props) {
-  return html`
-<div style="margin: 0 0.3em;">
-  <h3 style="background: #59d; color: #fff;padding: 0.4em;">Device configuration</h3>
-  <div style="margin: 0.5em 0;">
-    <span class="addon">value1:</span>
-    <input disabled type="text" class="smooth"
-      value=${(props.config || {}).value1 || ''} />
-  </div>
-  <div style="margin: 0.5em 0;">
-    <span class="addon">value2:</span>
-    <input disabled type="text" class="smooth" 
-      value=${(props.config || {}).value2 || ''} />
-  </div>
-  <div class="msg">
-    Server's corresponding runtime configuration structure:
-    <pre>
-struct config {
-  int value1;
-  char *value2;
-} s_config;
-    </pre>
-  </div>
-</div>`;
-};
 
-const ChangeSettings = function(props) {
-  const [value1, setValue1] = useState('');
-  const [value2, setValue2] = useState('');
+const Configuration = function(props) {
+  const [url, setUrl] = useState('');
+  const [pub, setPub] = useState('');
+  const [sub, setSub] = useState('');
   useEffect(() => {
-    setValue1(props.config.value1);
-    setValue2(props.config.value2);
-  }, [props.config.value1, props.config.value2])
+    setUrl(props.config.url);
+    setPub(props.config.pub);
+    setSub(props.config.sub);
+  }, [props.config.url, props.config.pub, props.config.sub])
   const update = (name, val) => fetch('/api/config/set', {
                                   method: 'post',
                                   body: `${name}=${encodeURIComponent(val)}`
                                 }).catch(err => err);
-  const updatevalue1 = ev => update('value1', value1);
-  const updatevalue2 = ev => update('value2', value2);
+  const updateurl = ev => update('url', url);
+  const updatepub = ev => update('pub', pub);
+  const updatesub = ev => update('sub', sub);
   return html`
 <div style="margin: 0 0.3em;">
   <h3 style="background: #c03434; color: #fff; padding: 0.4em;">
-    Change configuration</h3>
-  <div style="margin: 0.5em 0;">
-    <span class="addon">value1:</span>
-    <input type="text" value=${value1} onchange=${updatevalue1}
-          oninput=${ev => setValue1(ev.target.value)} />
-    <button class="btn" disabled=${!value1} onclick=${updatevalue1}
+    Device Configuration</h3>
+  <div style="margin: 0.5em 0; display: flex;">
+    <span class="addon nowrap">MQTT server:</span>
+    <input type="text" style="flex: 1 100%;"
+          value=${url} onchange=${updateurl}
+          oninput=${ev => setUrl(ev.target.value)} />
+    <button class="btn" disabled=${!url} onclick=${updateurl}
       style="margin-left: 1em; background: #8aa;">Update</button>
   </div>
-  <div style="margin: 0.5em 0;">
-    <span class="addon">value2:</span>
-    <input type="text" value=${value2} onchange=${updatevalue2}
-          oninput=${ev => setValue2(ev.target.value)} />
-    <button class="btn" disabled=${!value2} onclick=${updatevalue2}
+  <div style="margin: 0.5em 0; display: flex; ">
+    <span class="addon nowrap">Subscribe topic:</span>
+    <input type="text" style="flex: 1 100%;"
+        value=${sub} onchange=${updatesub}
+        oninput=${ev => setSub(ev.target.value)} />
+    <button class="btn" disabled=${!sub} onclick=${updatesub}
+      style="margin-left: 1em; background: #8aa;">Update</button>
+  </div>
+  <div style="margin: 0.5em 0; display: flex;">
+    <span class="addon nowrap">Publish topic:</span>
+    <input type="text" style="flex: 1 100%;"
+          value=${pub} onchange=${updatepub}
+          oninput=${ev => setPub(ev.target.value)} />
+    <button class="btn" disabled=${!pub} onclick=${updatepub}
       style="margin-left: 1em; background: #8aa;">Update</button>
   </div>
   <div class="msg">
-    As soon as administrator updates configuration, 
-    server iterates over all connected clients and sends update
-    notifications to all of them - so they update automatically.
+    Device keeps a persistent connection to the configured MQTT server.
+    Changes to this configuration are propagated to all dashboards: try
+    changing them in this dashboard and observe changes in the other opened
+    dashboard.
+  </div><div class="msg">
+    Note: administrators can see this section and can change device
+    configuration, whilst users cannot.
   </div>
 </div>`;
 };
@@ -155,7 +141,7 @@ const Login = function(props) {
 
 const Message = text => html`<div style="margin: 0.5em 0;">${text}</div>`;
 
-const Chat = function(props) {
+const Messages = function(props) {
   const [message, setMessage] = useState('');
   const sendmessage = ev => fetch('/api/message/send', {
                               method: 'post',
@@ -166,40 +152,105 @@ const Chat = function(props) {
       text => html`<div style="margin: 0.5em 0;">${text}</div>`);
   return html`
 <div style="margin: 0 0.3em;">
-  <h3 style="background: #30c040; color: #fff; padding: 0.4em;">User chat</h3>
+  <h3 style="background: #30c040; color: #fff; padding: 0.4em;">MQTT messages</h3>
   <div style="height: 10em; overflow: auto; padding: 0.5em; " class="border">
     ${messages}
   </div>
-  <div style="margin: 0.5em 0;">
-    <input placeholder="type message..." style="width: 100%" value=${message}
-      onchange=${sendmessage}
+  <div style="margin: 0.5em 0; display: flex">
+    <span class="addon nowrap">Publish message:</span>
+    <input placeholder="type and press enter..." style="flex: 1 100%;"
+      value=${message} onchange=${sendmessage}
       oninput=${ev => setMessage(ev.target.value)} />
   </div>
   <div class="msg">
-    Chat demonsrates
-    real-time bidirectional data exchange between many clients and a server.
+    Message gets passed to the device via REST. Then a device sends it to
+    the MQTT server over MQTT. All MQTT messages on a subscribed topic
+    received by a device, are propagated to this dashboard via the
+    /api/watch.
   </div>
 </div>`;
 };
 
-const datefmt = unix => (new Date(unix * 1000)).toISOString().substr(14, 5);
+// Expected arguments:
+// data: timeseries, e.g. [ [1654361352, 19], [1654361353, 18], ... ]
+// width, height, yticks, xticks, ymin, ymax, xmin, xmax
+const SVG = function(props) {
+  //            w
+  //   +---------------------+
+  //   |        h1           |
+  //   |    +-----------+    |
+  //   |    |           |    |  h
+  //   | w1 |           | w2 |
+  //   |    +-----------+    |
+  //   |         h2          |
+  //   +---------------------+
+  //
+  let w = props.width, h = props.height, w1 = 30, w2 = 0, h1 = 8, h2 = 18;
+  let yticks = props.yticks || 4, xticks = props.xticks || 5;
+  let data = props.data || [];
+  let ymin = props.ymin || 0;
+  let ymax = props.ymax || Math.max.apply(null, data.map(p => p[1]));
+  let xmin = props.xmin || Math.min.apply(null, data.map(p => p[0]));
+  let xmax = props.xmax || Math.max.apply(null, data.map(p => p[0]));
+
+  // Y-axis tick lines and labels
+  let yta = (new Array(yticks + 1)).fill(0).map((_, i) => i);  // indices
+  let yti = i => h - h2 - (h - h1 - h2) * i / yticks;          // index's Y
+  let ytv = i => (ymax - ymin) * i / yticks;
+  let ytl = y => html`<line x1=${w1} y1=${y} x2=${w} y2=${y} class="tick"/>`;
+  let ytt = (y, v) => html`<text x=0 y=${y + 5} class="label">${v}</text>`;
+
+  // X-axis tick lines and labels
+  let datefmt = unix => (new Date(unix * 1000)).toISOString().substr(14, 5);
+  let xta = (new Array(xticks + 1)).fill(0).map((_, i) => i);  // indices
+  let xti = i => w1 + (w - w1 - w2) * i / xticks;              // index's X
+  let xtv = i => datefmt(xmin + (xmax - xmin) * i / xticks);
+  let xtl = x => html`<path d="M ${x},${h1} L ${x},${h - h2}" class="tick"/>`;
+  let xtt = (x, v) =>
+      html`<text x=${x - 15} y=${h - 2} class="label">${v}</text>`;
+
+  // Transform data points array into coordinate
+  let dx = v => w1 + (v - xmin) / ((xmax - xmin) || 1) * (w - w1 - w2);
+  let dy = v => h - h2 - (v - ymin) / ((ymax - ymin) || 1) * (h - h1 - h2);
+  let dd = data.map(p => [Math.round(dx(p[0])), Math.round(dy(p[1]))]);
+  let ddl = dd.length;
+  // And plot the data as <path> element
+  let begin0 = ddl ? `M ${dd[0][0]},${dd[0][1]}` : `M 0,0`;
+  let begin = `M ${w1},${h - h2}`;  // Initial point
+  let end = ddl ? `L ${dd[ddl - 1][0]},${h - h2}` : `L ${w1},${h - h2}`;
+  let series = ddl ? dd.map(p => `L ${p[0]} ${p[1]}`) : [];
+
+  return html`
+<svg viewBox="0 0 ${w} ${h}">
+  <style>
+    .axis { stroke: #aaa; fill: none; }
+    .label { stroke: #aaa; font-size: 13px; }
+    .tick { stroke: #ccc; fill: none; stroke-dasharray: 5; }
+    .seriesbg { stroke: none; fill: rgba(200,225,255, 0.25)}
+    .series { stroke: #25a; fill: none; }
+  </style>
+  ${yta.map(i => ytl(yti(i)))}
+  ${yta.map(i => ytt(yti(i), ytv(i)))}
+  ${xta.map(i => xtl(xti(i)))}
+  ${data.length ? xta.map(i => xtt(xti(i), xtv(i))) : ''}
+  <path d="${begin} ${series.join(' ')} ${end}" class="seriesbg" />
+  <path d="${begin0} ${series.join(' ')}" class="series" />
+</svg>`;
+};
+
 
 const Chart = function(props) {
-  const chartdiv = useRef(null);
-  const refresh = () => {
-    const labels = props.metrics.map(el => datefmt(el[0]));
-    const series = props.metrics.map(el => el[1]);
-    const options = {low: 0, high: 20, showArea: true};
-    // console.log([labels, [series]]);
-    new Chartist.Line(chartdiv.current, {labels, series: [series]}, options);
-  };
-  useEffect(() => {chartdiv && refresh()}, [props.metrics]);
-
+  let xmax = 0, missing = MaxMetricsDataPoints - props.metrics.length;
+  if (missing > 0) xmax = Math.round(Date.now() / 1000) + missing;
   return html`
 <div style="margin: 0 0.3em;">
   <h3 style="background: #ec3; color: #fff; padding: 0.4em;">Data Chart</h3>
-  <div style="height: 14em; overflow: auto; padding: 0.5em; " class="border">
-    <div ref=${chartdiv} style="height: 100%;" />
+  <div style="overflow: auto; padding: 0.5em;" class="">
+    <${SVG} height=240 width=600 ymin=0 ymax=20
+      xmax=${xmax} data=${props.metrics} />
+  </div>
+  <div class="msg">
+    This chart plots live sensor data, sent by a device via /api/watch.
   </div>
 </div>`;
 };
@@ -235,7 +286,7 @@ const App = function(props) {
         } else if (msg.name == 'message') {
           setMessages(m => m.concat([msg.data]));
         } else if (msg.name == 'metrics') {
-          setMetrics(m => m.concat([msg.data]).splice(-10));
+          setMetrics(m => m.concat([msg.data]).splice(-MaxMetricsDataPoints));
         }
         // console.log(msg);
         if (!result.done) return f(reader);
@@ -258,16 +309,15 @@ const App = function(props) {
 
   if (!user) return html`<${Login} login=${login} />`;
   const admin = user == 'admin';
-  const cs = admin ? html`<${ChangeSettings} config=${config} />` : '';
+  const cs = admin ? html`<${Configuration} config=${config} />` : '';
   return html`
 <${Nav} user=${user} logout=${logout} />
 <div class="container">
   <${Hero} />
   <div class="row">
     <div class="col c6"><${Chart} metrics=${metrics} /></div>
-    <div class="col c6"><${ShowSettings} config=${config} /></div>
-    <div class="col c6"><${Chat} messages=${messages} /></div>
     <div class="col c6">${cs}</div>
+    <div class="col c6"><${Messages} messages=${messages} /></div>
   </div>
   <${Footer} />
 </div>`;

examples/device-dashboard/web_root/style.css

@@ -4,7 +4,7 @@ select, input, label::before, textarea { outline: none; box-shadow:none !importa
 code, pre { color: #373; font-family: monospace; font-weight: bolder; font-size: smaller; background: #ddd; padding: 0.1em 0.3em; border-radius: 0.2em; }
 textarea, input, .addon { font-size: 15px; border: 1px solid #ccc; padding: 0.5em; }
 a, a:visited, a:active { color: #55f; }
-.addon { background: #eee; }
+.addon { background: #eee;  min-width: 9em;}
 .btn {
   background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer;
   display: inline-block; padding: 0.6em 2em; font-weight: bolder;
@@ -16,6 +16,7 @@ a, a:visited, a:active { color: #55f; }
 .d-none { display: none; }
 .border { border: 1px solid #ddd; }
 .rounded { border-radius: 0.5em; }
+.nowrap { white-space: nowrap; }
 .msg { background: #def; border-left: 5px solid #59d; padding: 1em; margin: 1em 0; }
 .row { margin: 1% 0; overflow: auto; }
 .col { float: left; }