Add gauge group

2023-08-26 01:08:43 +02:00
parent d7c17ce066
commit ec5c58467b
4 changed files with 228 additions and 1 deletions
@@ -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)
+    });
+}