97 lines
3.9 KiB
JavaScript
97 lines
3.9 KiB
JavaScript
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 html = `
|
|
<div id="buttons-${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.buttonwidth, height: config.buttonheight, sizes: ui.getSizes(), buttons: value, socketid: msg.socketid } };
|
|
},
|
|
beforeSend: function (msg, orig) {
|
|
if (orig) {
|
|
orig.msg.topic = config.topic;
|
|
return orig.msg;
|
|
}
|
|
},
|
|
initController: function ($scope, events) {
|
|
$scope.$watch('msg', function (msg) {
|
|
if (!msg) {
|
|
return;
|
|
}
|
|
const iid = msg.iid;
|
|
|
|
|
|
var root = $(`#buttons-${iid}`);
|
|
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
node.on('close', done);
|
|
}
|
|
RED.nodes.registerType("ui_button_group", ButtonGroupNode);
|
|
} |