Add gauge group

gauge-group.html

@@ -0,0 +1,93 @@
+<script type="text/javascript">
+    RED.nodes.registerType('ui_gauge_group', {
+        category: 'dashboard',
+        color: 'rgb(63, 173, 181)',
+        defaults: {
+            name: { value: '' },
+            group: { type: 'ui_group', required: true },
+            order: { value: 0 },
+            width: {
+                value: 0, validate: function (v) {
+                    var width = v || 0;
+                    var currentGroup = $('#node-input-group').val() || this.group;
+                    var groupNode = RED.nodes.node(currentGroup);
+                    var valid = !groupNode || +width <= +groupNode.width;
+                    $("#node-input-size").toggleClass("input-error", !valid);
+                    return valid;
+                }
+            },
+            height: { value: 0 },
+            gaugewidth: {
+                value: 0, validate: function (v) {
+                    var btnWidth = Number(v || 0);
+                    var valid = btnWidth <= Number(this.width) && btnWidth > 0;
+                    console.log(`valid: ${valid}; btnWidth: ${btnWidth}; this.width: ${this.width}; v: ${v}`);
+                    $("#node-input-gaugewidth").toggleClass("input-error", !valid);
+                    return valid;
+                }
+            },
+            gaugeheight: {
+                value: 0, validate: function (v) {
+                    var btnHeight = Number(v || 0);
+                    var valid = btnHeight <= Number(this.height) && btnHeight > 0;
+                    $("#node-input-gaugeheight").toggleClass("input-error", !valid);
+                    return valid;
+                },
+            },
+        },
+        inputs: 1,
+        outputs: 0,
+        icon: 'font-awesome/fa-circle-o-notch',
+        paletteLabel: 'gauge group',
+        label: function () {
+            return this.name || 'Gauges';
+        },
+        oneditprepare: function () {
+            $("#node-input-size").elementSizer({
+                width: "#node-input-width",
+                height: "#node-input-height",
+                group: "#node-input-group"
+            });
+        }
+    });
+</script>
+
+<script type="text/html" data-template-name="ui_gauge_group">
+    <div class='form-row' id='template-row-group'>
+        <label for='node-input-group'><i class='fa fa-table'></i> Group</label>
+        <input type='text' id='node-input-group'>
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-object-group"></i> Size</label>
+        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-input-height">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row">
+        <label for="node-input-gaugewidth"><i class="fa fa-tag"></i> Gauge Width</label>
+        <input type="number" id="node-input-gaugewidth" placeholder="1">
+    </div>
+    <div class="form-row">
+        <label for="node-input-gaugeheight"><i class="fa fa-tag"></i> Gauge Height</label>
+        <input type="number" id="node-input-gaugeheight" placeholder="1">
+    </div>
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="Name">
+    </div>
+</script>
+
+<script type="text/html" data-help-name="ui_gauge_group">
+    <p>A simple gauge group node</p>
+    <p>
+        To add gauges, input an array with one of the following objects per gauge as msg.payload:
+        ```json
+        {
+            "label": "Dashboard Button Name",
+            "value": 123,
+            "max" : 500,
+            "smoothColors": [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]],
+        }
+        ```
+    </p>
+</script>

gauge-group.js

@@ -0,0 +1,132 @@
+var path = require('path');
+
+module.exports = function (RED) {
+    var counter = 0;
+    function ButtonGroupNode(config) {
+        const iid = ++counter;
+        var ui = undefined;
+        try {
+            var node = this;
+            if (ui === undefined) {
+                ui = RED.require("node-red-dashboard")(RED);
+            }
+            RED.nodes.createNode(this, config);
+
+            var sizes = ui.getSizes();
+
+            var widthPx = (config.gaugewidth * sizes.sx) - (sizes.gx * 2);
+
+            var heightPx = (config.gaugeheight * sizes.sy) - (sizes.gy * 2);
+
+            var html = `
+                <script type='text/javascript' src='ui-gauge-group/gauge.min.js'></script>
+                <div id="gauge-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap"></div>
+                `;
+
+            var done = ui.addWidget({
+                node: node,
+                order: config.order,
+                group: config.group,
+                width: config.width,
+                height: config.height,
+                format: html,
+                templateScope: 'local',
+                emitOnlyNewValues: false,
+                forwardInputMessages: false,
+                storeFrontEndInputAsState: false,
+                convertBack: function (value) {
+                    return value;
+                },
+                beforeEmit: function (msg, value) {
+                    return { msg: { iid: iid, width: widthPx, height: heightPx, marginX: sizes.gx, marginY: sizes.gy, gauges: value, socketid: msg.socketid } };
+                },
+                initController: function ($scope, events) {
+                    let gauges = [];
+                    const opts = {
+                        angle: 0, // The span of the gauge arc
+                        lineWidth: 0.4, // The line thickness
+                        radiusScale: 1, // Relative radius
+                        pointer: {
+                            length: 0.6, // // Relative to gauge radius
+                            strokeWidth: 0.07, // The thickness
+                            color: '#000000' // Fill color
+                        },
+                        limitMax: true,     // If false, max value increases automatically if value > maxValue
+                        limitMin: true,     // If true, the min value of the gauge will be fixed
+                        colorStart: '#6FADCF',   // Colors
+                        colorStop: '#8FC0DA',    // just experiment with them
+                        strokeColor: '#E0E0E0',  // to see which ones work best for you
+                        generateGradient: true,
+                        highDpiSupport: true,     // High resolution support
+                        percentColors: undefined,
+                    };
+
+                    $scope.$watch('msg', function (msg) {
+                        if (!msg) {
+                            return;
+                        }
+                        var target = $(`#gauge-${msg.iid}`);
+
+                        if (gauges.length < msg.gauges.length) {
+                            const difference = msg.gauges.length - gauges.length;
+                            for (let i = 0; i < difference; i++) {
+                                const obj = {
+                                    canvas: undefined,
+                                    gauge: undefined,
+                                    label: undefined
+                                }
+                                const canvasId = `gauge-${msg.iid}-${i}-canvas`;
+                                const labelId = `gauge-${msg.iid}-${i}-label`;
+                                target.append(`
+                                <div style="width:${msg.width}px; height:${msg.height}px; margin: ${msg.marginX}px ${msg.marginY}px; display:flex; align-items:center; flex-wrap:wrap">
+                                    <div id="${labelId}" style="width:100%; text-align: center; font-weight: bold"></div>
+                                    <canvas id="${canvasId}" style="width:100%"></canvas>
+                                </div>
+                                `);
+
+                                obj.canvas = $(`#${canvasId}`)[0];
+                                obj.label = $(`#${labelId}`)[0];
+
+                                let modifiedOpts = Object.assign({}, opts);
+
+                                modifiedOpts.percentColors = msg.gauges[i].smoothColors;
+
+                                obj.gauge = new Gauge(obj.canvas).setOptions(modifiedOpts);
+                                obj.gauge.setMinValue(0);
+
+                                gauges.push(obj);
+                            }
+                        } else if (gauges.length > msg.gauges.length) {
+                            const difference = gauges.length - msg.gauges.length;
+                            for (let i = 0; i < difference; i++) {
+                                const obj = gauges.pop();
+                                obj.canvas.remove();
+                            }
+                        }
+
+                        for (let i = 0; i < gauges.length; i++) {
+                            gauges[i].gauge.maxValue = msg.gauges[i].max;
+                            gauges[i].gauge.set(msg.gauges[i].value);
+                            gauges[i].label.innerHTML = msg.gauges[i].label;
+                        }
+                    });
+                }
+            });
+        } catch (e) {
+            console.log(e)
+        }
+        node.on('close', done);
+    }
+    RED.nodes.registerType("ui_gauge_group", ButtonGroupNode);
+
+    var uipath = 'ui';
+    if (RED.settings.ui) { uipath = RED.settings.ui.path; }
+    var fullPath = path.join('/', uipath, '/ui-gauge-group/*').replace(/\\/g, '/');
+    RED.httpNode.get(fullPath, function (req, res) {
+        var options = {
+            root: __dirname + '/lib/',
+            dotfiles: 'deny'
+        };
+        res.sendFile(req.params[0], options)
+    });
+}

package.json

@@ -10,7 +10,8 @@
   "license": "ISC",
   "node-red": {
     "nodes": {
-      "ui_button_group": "button-group.js"
+      "ui_button_group": "button-group.js",
+      "ui_gauge_group": "gauge-group.js"
     }
   }
 }