Community
OpenEnergyMonitor

Community

Smaller / Alternative LED Widget

Tags: #<Tag:0x00007f6e0f7e02a0> #<Tag:0x00007f6e0f7e0020> #<Tag:0x00007f6e0f7efd18>

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 :slight_smile: 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 :slight_smile:

Hope this helps

1 Like

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.