Add button group ui node

2023-08-25 07:56:24 +02:00
commit 43347936b3
3 changed files with 156 additions and 0 deletions
@@ -0,0 +1,58 @@
+module.exports = function (RED) {
+    function ButtonGroupNode(config) {
+        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.buttonwidth * sizes.sx - sizes.gx;
+
+            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>
+                </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: { buttons: value, socketid: msg.socketid } };
+                },
+                beforeSend: function (msg, orig) {
+                    if (orig) {
+                        orig.msg.topic = config.topic;
+                        return orig.msg;
+                    }
+                },
+                initController: function ($scope, events) {
+                    $scope.buttonClick = function (e) {
+                        e.preventDefault();
+                        var buttonId = e.target.id;
+                        $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
+                    };
+                }
+            });
+        } catch (e) {
+            console.log(e)
+        }
+        node.on('close', done);
+    }
+    RED.nodes.registerType("ui_button_group", ButtonGroupNode);
+}