Add gauge group
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
<script type="text/javascript">
|
||||
RED.nodes.registerType('ui_gauge_group', {
|
||||
category: 'dashboard',
|
||||
color: 'rgb(63, 173, 181)',
|
||||
defaults: {
|
||||
name: { value: '' },
|
||||
group: { type: 'ui_group', required: true },
|
||||
order: { value: 0 },
|
||||
width: {
|
||||
value: 0, validate: function (v) {
|
||||
var width = v || 0;
|
||||
var currentGroup = $('#node-input-group').val() || this.group;
|
||||
var groupNode = RED.nodes.node(currentGroup);
|
||||
var valid = !groupNode || +width <= +groupNode.width;
|
||||
$("#node-input-size").toggleClass("input-error", !valid);
|
||||
return valid;
|
||||
}
|
||||
},
|
||||
height: { value: 0 },
|
||||
gaugewidth: {
|
||||
value: 0, validate: function (v) {
|
||||
var btnWidth = Number(v || 0);
|
||||
var valid = btnWidth <= Number(this.width) && btnWidth > 0;
|
||||
console.log(`valid: ${valid}; btnWidth: ${btnWidth}; this.width: ${this.width}; v: ${v}`);
|
||||
$("#node-input-gaugewidth").toggleClass("input-error", !valid);
|
||||
return valid;
|
||||
}
|
||||
},
|
||||
gaugeheight: {
|
||||
value: 0, validate: function (v) {
|
||||
var btnHeight = Number(v || 0);
|
||||
var valid = btnHeight <= Number(this.height) && btnHeight > 0;
|
||||
$("#node-input-gaugeheight").toggleClass("input-error", !valid);
|
||||
return valid;
|
||||
},
|
||||
},
|
||||
},
|
||||
inputs: 1,
|
||||
outputs: 0,
|
||||
icon: 'font-awesome/fa-circle-o-notch',
|
||||
paletteLabel: 'gauge group',
|
||||
label: function () {
|
||||
return this.name || 'Gauges';
|
||||
},
|
||||
oneditprepare: function () {
|
||||
$("#node-input-size").elementSizer({
|
||||
width: "#node-input-width",
|
||||
height: "#node-input-height",
|
||||
group: "#node-input-group"
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/html" data-template-name="ui_gauge_group">
|
||||
<div class='form-row' id='template-row-group'>
|
||||
<label for='node-input-group'><i class='fa fa-table'></i> Group</label>
|
||||
<input type='text' id='node-input-group'>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label><i class="fa fa-object-group"></i> Size</label>
|
||||
<input type="hidden" id="node-input-width">
|
||||
<input type="hidden" id="node-input-height">
|
||||
<button class="editor-button" id="node-input-size"></button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="node-input-gaugewidth"><i class="fa fa-tag"></i> Gauge Width</label>
|
||||
<input type="number" id="node-input-gaugewidth" placeholder="1">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="node-input-gaugeheight"><i class="fa fa-tag"></i> Gauge Height</label>
|
||||
<input type="number" id="node-input-gaugeheight" placeholder="1">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
||||
<input type="text" id="node-input-name" placeholder="Name">
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" data-help-name="ui_gauge_group">
|
||||
<p>A simple gauge group node</p>
|
||||
<p>
|
||||
To add gauges, input an array with one of the following objects per gauge as msg.payload:
|
||||
```json
|
||||
{
|
||||
"label": "Dashboard Button Name",
|
||||
"value": 123,
|
||||
"max" : 500,
|
||||
"smoothColors": [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]],
|
||||
}
|
||||
```
|
||||
</p>
|
||||
</script>
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
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)
|
||||
});
|
||||
}
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
+2
-1
@@ -10,7 +10,8 @@
|
||||
"license": "ISC",
|
||||
"node-red": {
|
||||
"nodes": {
|
||||
"ui_button_group": "button-group.js"
|
||||
"ui_button_group": "button-group.js",
|
||||
"ui_gauge_group": "gauge-group.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user