383 lines
17 KiB
JavaScript
383 lines
17 KiB
JavaScript
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)
|
|
});
|
|
} |