177 lines
7.7 KiB
HTML
177 lines
7.7 KiB
HTML
|
<style>
|
||
|
|
input.gauge-color {
|
||
|
|
width: 100px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
input.gauge-color::-webkit-color-swatch {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
RED.nodes.registerType('ui_gauge',{
|
||
|
|
category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
|
||
|
|
color: 'rgb(119, 198, 204)',
|
||
|
|
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},
|
||
|
|
gtype: {value: 'gage'},
|
||
|
|
title: {value: 'gauge'},
|
||
|
|
label: {value: 'units'},
|
||
|
|
format: {value: '{{value}}'},
|
||
|
|
min: {value: 0, required: true, validate: RED.validators.number()},
|
||
|
|
max: {value: 10, required: true, validate: RED.validators.number()},
|
||
|
|
colors: {value: ["#00B500","#E6E600","#CA3838"]},
|
||
|
|
seg1: {value: ""},
|
||
|
|
seg2: {value: ""},
|
||
|
|
diff: {value: false},
|
||
|
|
className: {value: ''}
|
||
|
|
},
|
||
|
|
inputs:1,
|
||
|
|
outputs:0,
|
||
|
|
inputLabels: function() { return this.min+" - "+this.max; },
|
||
|
|
align: "right",
|
||
|
|
icon: "ui_gauge.png",
|
||
|
|
paletteLabel: 'gauge',
|
||
|
|
label: function() { return this.name || (~this.title.indexOf("{{") ? null : this.title) || ((this.gtype === "gage") ? "gauge" : this.gtype) || 'gauge'; },
|
||
|
|
labelStyle: function() { return this.name?"node_label_italic":""; },
|
||
|
|
oneditprepare: function() {
|
||
|
|
var setColour = function(id, value) {
|
||
|
|
$(id).val(value);
|
||
|
|
$(id).css("background-color", value);
|
||
|
|
var rgb = tinycolor(value).toRgb();
|
||
|
|
var level = ((rgb.r*299) + (rgb.g*587) + (rgb.b*114))/1000;
|
||
|
|
var textColor = (level >= 128) ? '#111111' : '#eeeeee';
|
||
|
|
$(id).css("color", textColor);
|
||
|
|
}
|
||
|
|
$(".gauge-color").on("change", function() {
|
||
|
|
setColour("#"+$(this).attr("id"), $(this).val());
|
||
|
|
});
|
||
|
|
|
||
|
|
var defaultColors = ['#00B500', '#E6E600', '#CA3838'];
|
||
|
|
|
||
|
|
if (this.colors) {
|
||
|
|
for (var i=0; i<this.colors.length; i++) {
|
||
|
|
var value = this.colors[i] || defaultColors[i];
|
||
|
|
setColour("#node-input-color"+(i+1), value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
for (var j=0; j<defaultColors.length; j++) {
|
||
|
|
setColour("#node-input-color"+(j+1), defaultColors[j]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.gtype === undefined) {
|
||
|
|
this.gtype = "gage";
|
||
|
|
$("#node-input-gtype").val("gage");
|
||
|
|
}
|
||
|
|
$("#node-input-size").elementSizer({
|
||
|
|
width: "#node-input-width",
|
||
|
|
height: "#node-input-height",
|
||
|
|
group: "#node-input-group"
|
||
|
|
});
|
||
|
|
$("#node-input-gtype").on("change", function() {
|
||
|
|
if (($(this).val() === "compass") || ($(this).val() === "wave")) {
|
||
|
|
$("#ui-gauge-colours").hide();
|
||
|
|
$("#ui-gauge-segments").hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$("#ui-gauge-colours").show();
|
||
|
|
$("#ui-gauge-segments").show();
|
||
|
|
}
|
||
|
|
if ($(this).val() === "gage") {
|
||
|
|
$("#ui-gauge-diff").show();
|
||
|
|
}
|
||
|
|
else { $("#ui-gauge-diff").hide(); }
|
||
|
|
});
|
||
|
|
$("#node-input-min").on("change", function() {
|
||
|
|
$("#seg-min").text($(this).val());
|
||
|
|
});
|
||
|
|
$("#node-input-max").on("change", function() {
|
||
|
|
$("#seg-max").text($(this).val());
|
||
|
|
});
|
||
|
|
},
|
||
|
|
oneditsave: function() {
|
||
|
|
this.colors = [$("#node-input-color1").val(),$("#node-input-color2").val(),$("#node-input-color3").val()];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/html" data-template-name="ui_gauge">
|
||
|
|
<div class="form-row">
|
||
|
|
<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-gtype"><i class="fa fa-list"></i> Type</label>
|
||
|
|
<select id="node-input-gtype" style="width:150px">
|
||
|
|
<option value="gage">Gauge</option>
|
||
|
|
<option value="donut">Donut</option>
|
||
|
|
<option value="compass">Compass</option>
|
||
|
|
<option value="wave">Level</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div id="ui-gauge-labels">
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-input-title"><i class="fa fa-i-cursor"></i> Label</label>
|
||
|
|
<input type="text" id="node-input-title">
|
||
|
|
</div>
|
||
|
|
<div class="form-row" id="ui-gauge-format">
|
||
|
|
<label for="node-input-format"><i class="fa fa-i-cursor"></i> Value format</label>
|
||
|
|
<input type="text" id="node-input-format" placeholder="{{value}}">
|
||
|
|
</div>
|
||
|
|
<div class="form-row" id="ui-gauge-units">
|
||
|
|
<label for="node-input-label"><i class="fa fa-i-cursor"></i> Units</label>
|
||
|
|
<input type="text" id="node-input-label" placeholder="optional sub-label">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-input-min">Range</label>
|
||
|
|
<span for="node-input-min">min</span>
|
||
|
|
<input type="text" id="node-input-min" style="width:80px">
|
||
|
|
<span for="node-input-max" style="margin-left:20px;">max</span>
|
||
|
|
<input type="text" id="node-input-max" style="width:80px">
|
||
|
|
</div>
|
||
|
|
<div class="form-row" id="ui-gauge-colours">
|
||
|
|
<label for="node-input-color1">Colour gradient</label>
|
||
|
|
<input type="color" id="node-input-color1" class="gauge-color" style="width:100px;"/>
|
||
|
|
<input type="color" id="node-input-color2" class="gauge-color" style="width:100px;"/>
|
||
|
|
<input type="color" id="node-input-color3" class="gauge-color" style="width:100px;"/>
|
||
|
|
</div>
|
||
|
|
<div class="form-row" id="ui-gauge-segments">
|
||
|
|
<label>Sectors</label>
|
||
|
|
<span id="seg-min" style="display:inline-block; width:40px;">0</span>...
|
||
|
|
<input type="text" id="node-input-seg1" style="text-align:center; width:87px;" placeholder="optional"> ...
|
||
|
|
<input type="text" id="node-input-seg2" style="text-align:center; width:87px;" placeholder="optional"> ...
|
||
|
|
<span id="seg-max" style="display:inline-block; width:40px; text-align:right">10</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-row" id="ui-gauge-diff">
|
||
|
|
<label></label> Fill gauge from centre.
|
||
|
|
<input type="checkbox" id="node-input-diff" style="display:inline-block; width:auto; vertical-align:top;">
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-input-className"><i class="fa fa-code"></i> Class</label>
|
||
|
|
<input type="text" id="node-input-className" placeholder="Optional CSS class name(s) for widget"/>
|
||
|
|
</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">
|
||
|
|
</div>
|
||
|
|
</script>
|