Align content of multi group at the start

button-group.js

@@ -1,5 +1,8 @@
 module.exports = function (RED) {
+    var counter = 0;
+
     function ButtonGroupNode(config) {
+        const iid = ++counter;
         var ui = undefined;
         try {
             var node = this;
@@ -8,15 +11,9 @@ module.exports = function (RED) {
             }
             RED.nodes.createNode(this, config);
 
-            var sizes = ui.getSizes();
+            var html = `
-
+            <div id="buttons-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center;"></div>
-            var widthPx = config.buttonwidth * sizes.sx - sizes.gx;
+            `;
-
-            var heightPx = config.buttonheight * sizes.sy - sizes.gy;
-
-            var html = `<div style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center;">
-                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px; background-color: {{button.color}}; white-space: pre-wrap; word-break: break-word;" ng-click="buttonClick($event)" ng-mousedown="buttonDown($event)" ng-mouseup="buttonUp($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
-                </div>`;
 
             var done = ui.addWidget({
                 node: node,
@@ -33,7 +30,7 @@ module.exports = function (RED) {
                     return value;
                 },
                 beforeEmit: function (msg, value) {
-                    return { msg: { buttons: value, socketid: msg.socketid } };
+                    return { msg: { iid: iid, width: config.buttonwidth, height: config.buttonheight, sizes: ui.getSizes(), buttons: value, socketid: msg.socketid } };
                 },
                 beforeSend: function (msg, orig) {
                     if (orig) {
@@ -42,27 +39,53 @@ module.exports = function (RED) {
                     }
                 },
                 initController: function ($scope, events) {
-                    $scope.buttonClick = function (e) {
+                    $scope.$watch('msg', function (msg) {
-                        e.preventDefault();
+                        if (!msg) {
-                        var buttonId = e.target.id;
+                            return;
-                        if ($scope.msg.buttons[buttonId].click) {
-                            $scope.send($scope.msg.buttons[buttonId].click);
                         }
-                    };
+                        const iid = msg.iid;
-                    $scope.buttonDown = function (e) {
+
-                        e.preventDefault();
+
-                        var buttonId = e.target.id;
+                        var root = $(`#buttons-${iid}`);
-                        if ($scope.msg.buttons[buttonId].down) {
+
-                            $scope.send($scope.msg.buttons[buttonId].down);
+                        root.children().remove();
+
+                        const widthPx = (msg.width * msg.sizes.sx) - (msg.sizes.gx * 2);
+                        const heightPx = (msg.height * msg.sizes.sy) - (msg.sizes.gy * 2);
+
+                        console.log(root, widthPx, heightPx);
+
+                        for (const button of msg.buttons) {
+                            const buttonElement = $(`<button class="md-raised md-button md-ink-ripple" type="button" style="white-space: pre-wrap; word-break: break-word;"></button>`);
+
+                            buttonElement.css("width", `${widthPx}px`);
+                            buttonElement.css("height", `${heightPx}px`);
+                            buttonElement.css("margin", `${sizes.gx}px ${sizes.gy}px`);
+                            buttonElement.css("background-color", button.color ? button.color : "");
+
+                            buttonElement.text(button.label);
+
+                            if (button.click) {
+                                buttonElement.on('click', function (e) {
+                                    $scope.send(button.click);
+                                });
+                            }
+
+                            if (button.down) {
+                                buttonElement.on('touchstart mousedown', function (e) {
+                                    $scope.send(button.down);
+                                });
+                            }
+
+                            if (button.up) {
+                                buttonElement.on('touchend mouseup', function (e) {
+                                    $scope.send(button.up);
+                                });
+                            }
+
+                            root.append(buttonElement);
                         }
-                    };
+                    });
-                    $scope.buttonUp = function (e) {
-                        e.preventDefault();
-                        var buttonId = e.target.id;
-                        if ($scope.msg.buttons[buttonId].up) {
-                            $scope.send($scope.msg.buttons[buttonId].up);
-                        }
-                    };
                 }
             });
         } catch (e) {

gauge-group.js

@@ -20,7 +20,7 @@ module.exports = function (RED) {
 
             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>
+                <div id="gauge-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center;"></div>
                 `;
 
             var done = ui.addWidget({

multi-group.js

@@ -15,7 +15,7 @@ module.exports = function (RED) {
 
             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>
+            <div id="multi-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;"></div>
             `;
 
             var done = ui.addWidget({
@@ -173,7 +173,7 @@ module.exports = function (RED) {
                         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" />`);
+                        const container = $(`<div id=${containerId} style="display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;" />`);
 
                         container.css("width", `${widthPx}px`);
                         container.css("height", `${heightPx}px`);