Add multi group

button-group.html

@@ -79,4 +79,15 @@
 
 <script type="text/html" data-help-name="ui_button_group">
     <p>A simple button group node</p>
+    <p>
+        To add buttons, input an array with one of the following objects per button as msg.payload:
+        ```json
+        {
+            "label": "Dashboard Button Name",
+            "payload": {/*The payload that is send when the button is clicked*/},
+            "active": true, // Optional
+            "color": "#123456" // Optional
+        }
+        ```
+    </p>
 </script>

button-group.js

@@ -15,7 +15,7 @@ module.exports = function (RED) {
             var heightPx = config.buttonheight * sizes.sy - sizes.gy;
 
             var html = `<div style="width=100%; height=100%">
-                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px;" ng-click="buttonClick($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
+                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px; background-color: {{button.color}};" ng-click="buttonClick($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
                 </div>`;
 
             var done = ui.addWidget({
@@ -45,7 +45,9 @@ module.exports = function (RED) {
                     $scope.buttonClick = function (e) {
                         e.preventDefault();
                         var buttonId = e.target.id;
-                        $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
+                        if ($scope.msg.buttons[buttonId].payload) {
+                            $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
+                        }
                     };
                 }
             });

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)
+    });
+}

multi-group.html

@@ -0,0 +1,88 @@
+<script type="text/javascript">
+    RED.nodes.registerType('ui_multi_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 },
+        },
+        inputs: 1,
+        outputs: 1,
+        icon: 'font-awesome/fa-th',
+        paletteLabel: 'multi group',
+        label: function () {
+            return this.name || 'Multi Group';
+        },
+        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_multi_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-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_multi_group">
+    <p>A simple multi group node</p>
+    <p>
+        To add items, input an array with one of the following objects per item as msg.payload:
+        ```json
+        [
+        {
+            "type": "gauge",
+            "width": 2,
+            "height": 2,
+            "label": "Dashboard Button Name",
+            "value": 123,
+            "max" : 500,
+            "smoothColors": [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]],
+        },
+        {
+            "type": "button",
+            "width": 1,
+            "height": 1,
+            "label": "Dashboard Button Name",
+            "payload": {/*The payload that is send when the button is clicked*/},
+            "disabled": false, // Optional
+            "color": "#123456" // Optional
+        },
+        {
+            "type": "container",
+            "width": 2,
+            "height": 2,
+            "items": [/* Array of Gauges, Buttons... */]
+        }
+        ]
+        ```
+    </p>
+</script>

multi-group.js

@@ -0,0 +1,384 @@
+const { create } = require('domain');
+var path = require('path');
+
+module.exports = function (RED) {
+    var counter = 0;
+
+    function MultiGroupNode(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 html = `
+            <script type='text/javascript' src='ui-gauge-group/gauge.min.js'></script>
+            <div id="multi-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center;"></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: config.width, height: config.height, sizes: ui.getSizes(), items: value, socketid: msg.socketid }
+                    };
+                },
+                beforeSend: function (msg, orig) {
+                    if (orig) {
+                        orig.msg.topic = config.topic;
+                        return orig.msg;
+                    }
+                },
+                initController: function ($scope, events) {
+                    let sizes;
+                    let lastIid = -1;
+                    let superStorage = {};
+
+
+                    function isSameObject(obj1, obj2) {
+                        for (var p in obj1) {
+                            if (p === 'action' || p === 'internal') {
+                                continue;
+                            }
+
+                            if (obj1.hasOwnProperty(p) !== obj2.hasOwnProperty(p)) {
+                                return false;
+                            }
+
+                            switch (typeof (obj1[p])) {
+                                // Deep compare objects
+                                case 'object':
+                                    if (!isSameObject(obj1[p], obj2[p])) {
+                                        return false;
+                                    }
+                                    break;
+                                // Compare function code
+                                case 'function':
+                                    if (typeof (obj2[p]) == 'undefined' || (obj1[p].toString() != obj2[p].toString())) {
+                                        return false;
+                                    }
+                                    break;
+                                // Compare array elements
+                                case 'array':
+                                    if (typeof (obj2[p]) == 'undefined' || obj1[p].length != obj2[p].length) {
+                                        return false;
+                                    }
+                                    for (let i = 0; i < obj1[p].length; i++) {
+                                        if (!isSameObject(obj1[p][i], obj2[p][i])) {
+                                            return false;
+                                        }
+                                    }
+                                // Compare values
+                                default:
+                                    if (obj1[p] != obj2[p]) {
+                                        return false;
+                                    }
+                            }
+                        }
+
+                        // Check object 2 for any extra properties
+                        for (var p in obj2) {
+                            if (typeof (obj1[p]) == 'undefined') {
+                                return false;
+                            }
+                        }
+
+                        return true;
+                    }
+
+                    function widthToPx(width, includeMargin = true) {
+                        let widthPx = (width * sizes.sx);
+
+                        if (includeMargin) {
+                            widthPx = widthPx - (sizes.gx * 2);
+                        }
+
+                        return widthPx;
+                    }
+
+                    function heightToPx(height, includeMargin = true) {
+                        let heightPx = (height * sizes.sy);
+
+                        if (includeMargin) {
+                            heightPx = heightPx - (sizes.gy * 2);
+                        }
+
+                        return heightPx;
+                    }
+
+
+
+                    function checkIntegrity(items, parentId) {
+                        let id = 0;
+
+                        // Check if parentId ends with a number (It is the root node then and does not need to be checked)
+                        if (!(/\d$/.test(parentId))) {
+                            const parentFromStorage = superStorage[parentId];
+
+                            if (!parentFromStorage) {
+                                return false;
+                            }
+
+                            if (items.length !== parentFromStorage.items.length) {
+                                return false;
+                            }
+                        }
+
+                        for (const item of items) {
+                            id = id + 1;
+                            const itemId = `${parentId}-${id}-${item.type}`;
+                            const itemFromStorage = superStorage[itemId];
+
+                            if (!itemFromStorage) {
+                                return false;
+                            }
+
+                            if (item.width !== itemFromStorage.width || item.height !== itemFromStorage.height) {
+                                return false;
+                            }
+
+                            if (isSameObject(item, itemFromStorage)) {
+                                item.action = 'skip';
+                            } else {
+                                item.action = 'update';
+                            }
+
+                            if (item.type === 'container') {
+                                if (!checkIntegrity(item.items, itemId)) {
+                                    return false;
+                                }
+                                item.action = 'update';
+                            }
+                        }
+
+                        return true;
+                    }
+
+                    function createContainer(parent, config, containerId, includeMargin = false) {
+
+                        const widthPx = widthToPx(config.width, includeMargin);
+                        const heightPx = heightToPx(config.height, includeMargin);
+
+                        const container = $(`<div id=${containerId} style="display: flex; flex-wrap: wrap; justify-content: center" />`);
+
+                        container.css("width", `${widthPx}px`);
+                        container.css("height", `${heightPx}px`);
+                        if (includeMargin) {
+                            container.css("margin", `${sizes.gx}px ${sizes.gy}px`);
+                        } else {
+                            container.css("margin", `0px 0px`);
+                        }
+
+                        parent.append(container);
+
+                        updateContainer(container, config);
+                    }
+
+                    function updateContainer(container, config) {
+                        let id = 0;
+                        for (const item of config.items) {
+                            id = id + 1;
+                            switch (item.action) {
+                                case 'skip':
+                                    break;
+                                case 'update':
+                                    switch (item.type) {
+                                        case 'container':
+                                            const containerId = `${container.attr('id')}-${id}-container`;
+                                            updateContainer(container.children(`#${containerId}`), item);
+                                            break;
+                                        case 'button':
+                                            const buttonId = `${container.attr('id')}-${id}-button`;
+                                            updateButton(container.children(`#${buttonId}`), item);
+                                            break;
+                                        case 'gauge':
+                                            const gaugeId = `${container.attr('id')}-${id}-gauge`;
+                                            updateGauge(container.children(`#${gaugeId}`), item);
+                                            break;
+                                    }
+                                    break;
+                                default:
+                                    switch (item.type) {
+                                        case 'container':
+                                            const containerId = `${container.attr('id')}-${id}-container`;
+                                            createContainer(container, item, containerId);
+                                            break;
+                                        case 'button':
+                                            const buttonId = `${container.attr('id')}-${id}-button`;
+                                            createButton(container, item, buttonId);
+                                            break;
+                                        case 'gauge':
+                                            const gaugeId = `${container.attr('id')}-${id}-gauge`;
+                                            createGauge(container, item, gaugeId);
+                                            break;
+                                        default:
+                                            console.log(`Unknown msg.items[i] type: ${msg.items[i].type}`);
+                                            break;
+                                    }
+                                    break;
+                            }
+                        }
+
+                        superStorage[container.attr('id')] = config;
+                    }
+
+                    function createButton(parent, config, buttonId) {
+
+                        const widthPx = widthToPx(config.width);
+                        const heightPx = heightToPx(config.height);
+
+                        const button = $(`
+                            <button id="${buttonId}" class="md-button md-ink-ripple" type="button""></button>
+                        `);
+
+                        button.css("width", `${widthPx}px`);
+                        button.css("height", `${heightPx}px`);
+                        button.css("margin", `${sizes.gx}px ${sizes.gy}px`);
+
+                        button.click(function (e) {
+                            if (config.payload) {
+                                $scope.send({ "payload": config.payload });
+                            }
+                        });
+
+                        parent.append(button);
+
+                        updateButton(button, config);
+                    }
+
+                    function updateButton(button, config) {
+                        button.text(config.label);
+                        button.css("background-color", config.color ? config.color : "");
+                        button.attr("disabled", config.disabled || false);
+
+                        superStorage[button.attr('id')] = config;
+                    }
+
+                    function createGauge(parent, config, gaugeId) {
+                        const canvasId = `${gaugeId}-canvas`;
+                        const labelId = `${gaugeId}-label`;
+
+                        const widthPx = widthToPx(config.width);
+                        const heightPx = heightToPx(config.height);
+
+                        const gaugeContainer = $(`<div id=${gaugeId} style="display: flex; align-items: center; flex-wrap: wrap" />`);
+
+                        gaugeContainer.css("width", `${widthPx}px`);
+                        gaugeContainer.css("height", `${heightPx}px`);
+                        // gaugeContainer.css("margin", `${sizes.gx}px ${sizes.gy}px`);
+
+                        const gaugeLabel = $(`<div id="${labelId}" style="width:100%; text-align: center; font-weight: bold"></div>`);
+                        gaugeContainer.append(gaugeLabel);
+
+                        const gaugeCanvas = $(`<canvas id="${canvasId}" style="width:100%"></canvas>`);
+                        gaugeContainer.append(gaugeCanvas);
+
+                        parent.append(gaugeContainer);
+
+                        let 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: config.smoothColors,
+                        };
+
+                        const gauge = new Gauge(gaugeCanvas[0]).setOptions(opts);
+                        gauge.setMinValue(0);
+
+                        superStorage[`${gaugeId}-internal`] = gauge;
+
+                        updateGauge(gaugeContainer, config)
+                    }
+
+                    function updateGauge(gauge, config) {
+                        const gaugeId = gauge.attr('id');
+                        const gaugeLabel = $(`#${gaugeId}-label`);
+                        const gaugeObj = superStorage[`${gaugeId}-internal`];
+                        gaugeObj.maxValue = config.max;
+                        gaugeObj.set(config.value);
+                        gaugeLabel.html(config.label);
+
+                        superStorage[gaugeId] = config;
+                    }
+
+                    $scope.$watch('msg', function (msg) {
+                        if (!msg) {
+                            return;
+                        }
+                        const iid = msg.iid;
+                        sizes = msg.sizes;
+
+                        var root = $(`#multi-${iid}`);
+
+                        const rootItems = [{ type: "container", width: msg.width, height: msg.height, items: msg.items }];
+
+                        if (!checkIntegrity(rootItems, `${root.attr('id')}`) || lastIid !== iid) {
+                            // Clear data
+                            root.children().remove();
+                            superStorage = {};
+
+                            // Set new iid
+                            lastIid = iid;
+
+                            // Reinitialize
+                            root = $(`#multi-${iid}`);
+                            checkIntegrity(rootItems, `${root.attr('id')}`);
+
+                            if (!root.length) {
+                                return;
+                            }
+
+                            const rootContainerId = `${root.attr('id')}-1-container`;
+                            createContainer(root, rootItems[0], rootContainerId);
+                        } else {
+                            updateContainer(root.children(), rootItems[0]);
+                        }
+                    });
+                }
+            });
+        } catch (e) {
+            console.log(e)
+        }
+        node.on('close', done);
+    }
+
+    RED.nodes.registerType("ui_multi_group", MultiGroupNode);
+
+    var uipath = 'ui';
+    if (RED.settings.ui) { uipath = RED.settings.ui.path; }
+    var fullPath = path.join('/', uipath, '/ui-multi-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,9 @@
   "license": "ISC",
   "node-red": {
     "nodes": {
-      "ui_button_group": "button-group.js"
+      "ui_button_group": "button-group.js",
+      "ui_gauge_group": "gauge-group.js",
+      "ui_multi_group": "multi-group.js"
     }
   }
 }