132 lines
6.0 KiB
JavaScript
132 lines
6.0 KiB
JavaScript
var path = require('path');
|
|
|
|
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 sizes = ui.getSizes();
|
|
|
|
var widthPx = (config.gaugewidth * sizes.sx) - (sizes.gx * 2);
|
|
|
|
var heightPx = (config.gaugeheight * sizes.sy) - (sizes.gy * 2);
|
|
|
|
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>
|
|
`;
|
|
|
|
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: widthPx, height: heightPx, marginX: sizes.gx, marginY: sizes.gy, gauges: value, socketid: msg.socketid } };
|
|
},
|
|
initController: function ($scope, events) {
|
|
let gauges = [];
|
|
const 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: undefined,
|
|
};
|
|
|
|
$scope.$watch('msg', function (msg) {
|
|
if (!msg) {
|
|
return;
|
|
}
|
|
var target = $(`#gauge-${msg.iid}`);
|
|
|
|
if (gauges.length < msg.gauges.length) {
|
|
const difference = msg.gauges.length - gauges.length;
|
|
for (let i = 0; i < difference; i++) {
|
|
const obj = {
|
|
canvas: undefined,
|
|
gauge: undefined,
|
|
label: undefined
|
|
}
|
|
const canvasId = `gauge-${msg.iid}-${i}-canvas`;
|
|
const labelId = `gauge-${msg.iid}-${i}-label`;
|
|
target.append(`
|
|
<div style="width:${msg.width}px; height:${msg.height}px; margin: ${msg.marginX}px ${msg.marginY}px; display:flex; align-items:center; flex-wrap:wrap">
|
|
<div id="${labelId}" style="width:100%; text-align: center; font-weight: bold"></div>
|
|
<canvas id="${canvasId}" style="width:100%"></canvas>
|
|
</div>
|
|
`);
|
|
|
|
obj.canvas = $(`#${canvasId}`)[0];
|
|
obj.label = $(`#${labelId}`)[0];
|
|
|
|
let modifiedOpts = Object.assign({}, opts);
|
|
|
|
modifiedOpts.percentColors = msg.gauges[i].smoothColors;
|
|
|
|
obj.gauge = new Gauge(obj.canvas).setOptions(modifiedOpts);
|
|
obj.gauge.setMinValue(0);
|
|
|
|
gauges.push(obj);
|
|
}
|
|
} else if (gauges.length > msg.gauges.length) {
|
|
const difference = gauges.length - msg.gauges.length;
|
|
for (let i = 0; i < difference; i++) {
|
|
const obj = gauges.pop();
|
|
obj.canvas.remove();
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < gauges.length; i++) {
|
|
gauges[i].gauge.maxValue = msg.gauges[i].max;
|
|
gauges[i].gauge.set(msg.gauges[i].value);
|
|
gauges[i].label.innerHTML = msg.gauges[i].label;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
node.on('close', done);
|
|
}
|
|
RED.nodes.registerType("ui_gauge_group", ButtonGroupNode);
|
|
|
|
var uipath = 'ui';
|
|
if (RED.settings.ui) { uipath = RED.settings.ui.path; }
|
|
var fullPath = path.join('/', uipath, '/ui-gauge-group/*').replace(/\\/g, '/');
|
|
RED.httpNode.get(fullPath, function (req, res) {
|
|
var options = {
|
|
root: __dirname + '/lib/',
|
|
dotfiles: 'deny'
|
|
};
|
|
res.sendFile(req.params[0], options)
|
|
});
|
|
} |