Jgauge (dashboard widget) loading fix

Emoncms
,
1

There’s a minor bug in dashboard widgets which load images to be drawn.
jgauge, jgauge2 etc use the .src property without waiting for it to load.
Sometimes the background images are not drawn until the value changes.
For example:

// Load the jgauge image
img = new Image();
img.src = path+‘Modules/dashboard/widget/jgauge/jgauge.png’;

I’ve had success with adding an onload function:

// Load the jgauge image
img = new Image();
img.onload = function() {
redraw = 1;
};
img.src = path+‘Modules/dashboard/widget/jgauge/jgauge.png’;

There are other widgets which are affected, how do I get this into the Github source?
Thanks
Mike

2

Oh dear
Spoke too soon
I presumed init was only called once but this seems not to be true
I seem to be getting multiple image loads
Still investigating…

3

Hello @EskEnergy
Good point that the images are loaded twice, maybe something like this could improve things:

function jgauge2_init()
{
  setup_widget_canvas('jgauge2');

  // Load the needle image
  if (needle_jgauge2==null) {
    needle_jgauge2 = new Image();
    needle_jgauge2.src = path+'Modules/dashboard/widget/jgauge2/needle2.png';
  }
  
  if (needle2_jgauge2==null) {
    needle2_jgauge2 = new Image();
    needle2_jgauge2.src = path+'Modules/dashboard/widget/jgauge2/needle.png';
  }

  // Load the jgauge2 image
  if (img_jgauge2==null) {
    img_jgauge2 = new Image();
    img_jgauge2.src = path+'Modules/dashboard/widget/jgauge2/jgauge2.png';
  }
}

that doesnt address the onload part but would avoid the second… or third reload of the images?

4

I’ve pushed this up here dont reload jguage images multiple times · emoncms/dashboard@c9b8652 · GitHub

5

Hi
I think I’m getting to the bottom of this.
We do have to have an onload function as the images never get drawn if the load is sluggish and the feed does not change (e.g. 0)
What’s held me up was trying to use a function called imagedLoaded.
unfortunately there must already be one and it threw me!

Init is definitely called twice so null checking will cure that.

My code now is

  // Load the needle image
  if (!jgaugeNeedle) {
      jgaugeNeedle = new Image();
      jgaugeNeedle.onload = function() {
          redraw = 1;
      };
      jgaugeNeedle.src = path+'Modules/dashboard/widget/testwidget/needle2.png';
 }
  // Load the jgauge image
  if (!jgaugeBackground) {
  jgaugeBackground = new Image();
  jgaugeBackground.onload = function() {
     redraw = 1;
  };
  jgaugeBackground.src = path+'Modules/dashboard/widget/testwidget/jgauge.png';
 }

It seems setting redraw = 1 works because it causes init to be recalled and the main drawing function is then called even if the value hasn’t changed.

This applies to jgauge, jgauge and windrose (at least)

Are there any docs on widgets as to what gets called when?

Great project BTW :grinning:

1 Like
6

Ah - sorry I missed your commit.

While you’re at it I’ve been hiy by the Firefox bug which crashes these widgets which use context drawing if the iframe is invisible.
Sounds unlikely but some of our dashboards are embedded in a Wordpress site which hides them under certain circumstances.

I got around this by putting a try-catch around the whole draw_jgauge function (and jgauge2 etc)

function draw_jgauge(ctx,x,y,width,height,value,max,min,units,errorCode,errorMessage)
{
try {
if (!max) max = 1000;
…
} catch (err) {

}

}

7

For those watching this, things I’ve learned about creating widgets are:

  • all global variables and functions must be unique to your widget. Best to prefix them with the widget name
  • Setting redraw=1 will result in a subsequent call to _init so be careful when you set redraw
  • syntax errors in your widget affect all widgets as every render.js is loaded when any/every dashboard is used

Good fun though :grinning: