Hi all,
I’m using the LED widget to show if a feed is valid or not (external script triggers a 1 or a 0 to an input) but the LED widget is quite large (resizing doesn’t work for it) and I’m interested if there is an alternative or better way to show a group of them (4-5) indicating if a feed is operational or not.
Any suggestions please?
You can try my easy fix for this and replace your led_render.js with the code below:
/*
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 led_widgetlist()
{
var widgets = {
"led":
{
"offsetx":-40,"offsety":-40,"width":80,"height":80,
"menu":"Widgets",
"options":["feedid", "size"],
"optionstype":["feedid", "value"],
"optionsname":[_Tr("Feed"),_Tr("Size")],
"optionshint":[_Tr("Feed value")]
}
}
return widgets;
}
function led_init()
{
setup_widget_canvas('led');
}
function led_draw() {
$('.led').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 id = "can-"+$(this).attr("id");
if (browserVersion < 9)
draw_led_ie8(widgetcanvas[id], val,$(this).attr("size"));
else
draw_led(widgetcanvas[id], val,$(this).attr("size"));
});
}
function led_slowupdate() {
led_draw();
}
function led_fastupdate() {}
function draw_led(circle,status,size){
if (!circle) return;
circle.clearRect(0,0,80,80);
var radgrad = circle.createRadialGradient(40,40,0,40,40,size);
if (status==0) { // red
radgrad.addColorStop(0, '#F75D59');
radgrad.addColorStop(0.9, '#C11B17');
} else if (status>0 && status <=1) { // green
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
} else if (status>1 && status <=2) { // grey
radgrad.addColorStop(0, '#736F6E');
radgrad.addColorStop(0.9, '#4A4344');
} else if (status>2 && status <=3) { //Blue
radgrad.addColorStop(0, '#00C9FF');
radgrad.addColorStop(0.9, '#00B5E2');
} else if (status>3 && status <=4) { // Purple
radgrad.addColorStop(0, '#FF5F98');
radgrad.addColorStop(0.9, '#FF0188');
} else if (status>4 && status <=5) { // yellow
radgrad.addColorStop(0, '#F4F201');
radgrad.addColorStop(0.9, '#E4C700');
} 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(20,20,60,60);
}
function draw_led_ie8(circle,status){
if (!circle) return;
if (status==0) { // red
circle.fillStyle = "#C11B17";
} else if (status==1) { // green
circle.fillStyle = "#019F62";
} else if (status==2) { // grey
circle.fillStyle = "#4A4344";
} else if (status==3) { //Blue
circle.fillStyle = "#00B5E2";
} else if (status ==4) { // Purple
circle.fillStyle = "#FF0188";
} else if (status==5) { // yellow
circle.fillStyle = "#E4C700";
} else { // Black
circle.fillStyle = "#000000";
}
circle.beginPath();
circle.arc(25,25,20, 0,Math.PI * 2,false);
circle.closePath();
circle.fill()
}
function draw_binary_led(circle,status){
if (!circle) return;
circle.clearRect(0,0,80,80);
var radgrad = circle.createRadialGradient(40,40,0,40,40,20);
if (status==0) { // red
radgrad.addColorStop(0, '#F75D59');
radgrad.addColorStop(0.9, '#C11B17');
} else { // green
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
}
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
// draw shapes
circle.fillStyle = radgrad;
circle.fillRect(20,20,60,60);
}
function draw_binary_led_ie8(circle,status){
if (!circle) return;
if (status==0) { // red
circle.fillStyle = "#C11B17";
} else { // green
circle.fillStyle = "#019F62";
}
circle.beginPath();
circle.arc(25,25,20, 0,Math.PI * 2,false);
circle.closePath();
circle.fill()
}
It’s simply adding the option for a size to the widget 
Try 10 or 15 instead of the default 20 value and it will render smaller. Works for me like this but be warned it will break all existing LED widgets on dashboards. Otherwise create a led2_render.js but then you have to update the stuff in the code to reflect that
Hope this helps
Perfect!
Yes that’s what I was after, very neat way of solving it, thank you
Glad it helped…
Once I have more time I maybe will rewrite it as it takes sometimes ages to load the widgets. All the fancy other widgets are there and showing data and 5-6s later they appear. Maybe drawing a normal circle with fill is more easy to render.