Add multi group
This commit is contained in:
+384
@@ -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)
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user