I’ve made a Dashboard Widget based on Trystan’s “Led” Widget that allows one to have an “On/Off” indicator on their dashboard. If a feed is above a certain value the light comes on and if the feed is equal or less than that value the light goes off. I don’t know (or really want to know) how to contribute this via git, but here it is in case anyone wants to use it. Put it in emoncms/Modules/dashboard/widget/led_on_off/led_on_off.js, then refresh.
/*
All emon_widgets code is released under the GNU General Public License v3.
See COPYRIGHT.txt and LICENSE.txt.
---------------------------------------------------------------------
Part of the OpenEnergyMonitor project:
http://openenergymonitor.org
Author: Trystan Lea: [email protected]
If you have any questions please get in touch, try the forums here:
http://openenergymonitor.org/emon/forum
*/
function addOption(widget, optionKey, optionType, optionName, optionHint, optionData)
{
widget["options" ].push(optionKey);
widget["optionstype"].push(optionType);
widget["optionsname"].push(optionName);
widget["optionshint"].push(optionHint);
widget["optionsdata"].push(optionData);
}
var StyleOptions = [
[1, "With colour gradients"],
[0, "Without colour gradients"]
];
var ColorOptions = [
[1, "Red"],
[2, "Green"],
[3, "Gray"],
[4, "Blue"],
[5, "Purple"],
[6, "Yellow"]
];
function led_on_off_widgetlist()
{
var widgets = {
"led_on_off":
{
"offsetx":-40,"offsety":-40,"width":80,"height":80,
"menu":"Widgets",
"options": [],
"optionstype":[],
"optionsname":[],
"optionshint":[],
"optionsdata":[]
}
};
addOption(widgets["led_on_off"], "feedid", "feedid", _Tr("Feed"), _Tr("Feed value"), []);
addOption(widgets["led_on_off"], "ledstyle", "dropbox", _Tr("Style"), _Tr("Display style"), StyleOptions);
addOption(widgets["led_on_off"], "colour_on", "dropbox", _Tr("Colour On"), _Tr("Colour of led while On"), ColorOptions);
addOption(widgets["led_on_off"], "value_on", "value", _Tr("Value On"), _Tr("Values above this number are On"), []);
return widgets;
}
function draw_led(circle,value,ledstyle,colour_on,value_on){
if (!circle) return;
var width = circle.canvas.width;
var height = circle.canvas.height;
var borderx = Math.min(40, Math.floor(width/2));
var bordery = Math.min(40, Math.floor(height/2));
var dimension = Math.max(10, Math.min(width-borderx, height-bordery));
var offsetx = Math.floor((width - dimension) / 2.0);
var offsety = Math.floor((height - dimension) / 2.0);
circle.clearRect(0,0,width,height);
if (ledstyle ==="1"){
var radgrad = circle.createRadialGradient(width/2,height/2,0,width/2,height/2,dimension/2);
if (colour_on==="1" && value > value_on) { // red
radgrad.addColorStop(0, "#F75D59");
radgrad.addColorStop(0.9, "#C11B17");
} else if (colour_on==="2" && value > value_on) { // green
radgrad.addColorStop(0, "#A7D30C");
radgrad.addColorStop(0.9, "#019F62");
} else if (colour_on==="3" && value > value_on) { // grey
radgrad.addColorStop(0, "#736F6E");
radgrad.addColorStop(0.9, "#4A4344");
} else if (colour_on==="4" && value > value_on) { //Blue
radgrad.addColorStop(0, "#00C9FF");
radgrad.addColorStop(0.9, "#00B5E2");
} else if (colour_on==="5" && value > value_on) { // Purple
radgrad.addColorStop(0, "#FF5F98");
radgrad.addColorStop(0.9, "#FF0188");
} else if (colour_on==="6" && value > value_on) { // yellow
radgrad.addColorStop(0, "#F4F201");
radgrad.addColorStop(0.9, "#E4C700");
} else if (colour_on==="1" && value <= value_on) { // dark red (off)
radgrad.addColorStop(0, "#501817");
radgrad.addColorStop(0.9, "#300707");
} else if (colour_on==="2" && value <= value_on) { // dark green (off)
radgrad.addColorStop(0, "#2F3B04");
radgrad.addColorStop(0.9, "#003621");
} else if (colour_on==="3" && value <= value_on) { // dark gray (off)
radgrad.addColorStop(0, "#3A3737");
radgrad.addColorStop(0.9, "#1C1919");
} else if (colour_on==="4" && value <= value_on) { // dark blue (off)
radgrad.addColorStop(0, "#003544");
radgrad.addColorStop(0.9, "#00191F");
} else if (colour_on==="5" && value <= value_on) { // dark purple (off)
radgrad.addColorStop(0, "#5C2236");
radgrad.addColorStop(0.9, "#53002C");
} else if (colour_on==="6" && value <= value_on) { // dark yellow (off)
radgrad.addColorStop(0, "#424200");
radgrad.addColorStop(0.9, "#2B2600");
} else { // Black
radgrad.addColorStop(0, "#000000");
radgrad.addColorStop(0.9, "#000000");
}
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
// draw shapes
circle.fillStyle = radgrad;
circle.fillRect(offsetx,offsety,dimension,dimension);
}
if (ledstyle ==="0"){
if (colour_on==="1" && value > value_on) { // red
circle.fillStyle = "#C11B17";
} else if (colour_on==="2" && value > value_on) { // green
circle.fillStyle = "#019F62";
} else if (colour_on==="3" && value > value_on) { // grey
circle.fillStyle = "#4A4344";
} else if (colour_on==="4" && value > value_on) { //Blue
circle.fillStyle = "#00B5E2";
} else if (colour_on==="5" && value > value_on) { // Purple
circle.fillStyle = "#FF0188";
} else if (colour_on==="6" && value > value_on) { // yellow
circle.fillStyle = "#E4C700";
} else { // Black
circle.fillStyle = "#000000";
}
circle.beginPath();
circle.arc(width/2,height/2,dimension/2, 0,Math.PI * 2);
circle.closePath();
circle.fill()
}
}
function led_on_off_draw() {
$(".led_on_off").each(function(index)
{
var feedid = $(this).attr("feedid");
if (associd[feedid] === undefined) { console.log("Review config for feed id of " + $(this).attr("class")); return; }
var val = associd[feedid]["value"] * 1;
var ledstyle = $(this).attr("ledstyle")|| "1";
var id = "can-"+$(this).attr("id");
var colour_on = $(this).attr("colour_on") || "1";
var value_on = $(this).attr("value_on") || "10";
draw_led(widgetcanvas[id],val,ledstyle,colour_on,value_on);
}
);
}
function led_on_off_init()
{
setup_widget_canvas("led_on_off");
}
function led_on_off_slowupdate() {
led_on_off_draw();
}
function led_on_off_fastupdate() {}