Author Topic: "Gauge" drawing in Plugins  (Read 2283 times)

Offline vletroye

  • Hero Member
  • *****
  • Posts: 714
  • Karma: +7/-0
    • View Profile
"Gauge" drawing in Plugins
« on: March 27, 2014, 05:40:13 am »
Within Chrome (latest version) I often experience weird issues with the drawing of the gauge:



Anyone else? Any idea what's the issue ?

V.

Offline Brahim

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8,547
  • Karma: +204/-16
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #1 on: March 27, 2014, 07:31:31 am »
Hum.... never seen that myself. Curious to know who else might be seen that.

Offline RyC

  • Newbie
  • *
  • Posts: 23
  • Karma: +0/-0
    • View Profile
"Gauge" drawing in Plugins
« Reply #2 on: March 29, 2014, 01:01:16 am »
I've seen it too (I believe in Chrome too) when the window wasn't extended horizontally enough

Offline terrastrife

  • Full Member
  • ***
  • Posts: 235
  • Karma: +7/-0
  • 38TB FlexRAID
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #3 on: March 29, 2014, 03:03:07 am »
You should be using IE if you want the UI rendered correctly.

Offline Brahim

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8,547
  • Karma: +204/-16
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #4 on: March 29, 2014, 04:28:44 am »
You should be using IE if you want the UI rendered correctly.

Actually, Chrome is preferred over IE.
Chrome > Firefox > IE.

@OP
What happens when you hit refresh one that portlet?

Offline vletroye

  • Hero Member
  • *****
  • Posts: 714
  • Karma: +7/-0
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #5 on: March 29, 2014, 06:06:41 am »
The refresh does not fix it. I have also this issue with the default browser of android (both on my mobile and on my tablets).

With chrome, I have the problem both on my tablets or mobile and on my various PC.

V.

Offline Brahim

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8,547
  • Karma: +204/-16
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #6 on: March 29, 2014, 06:41:57 am »
I just tested in Chrome Version 33.0.1750.154 m, and it is working just fine.

However, I was able to replicate the issue on my mobile phone. It is a screen real estate issue.
With both the RAID-F redesign and tRAID port to Linux taking place, this is something for much later.

The plugin is clear html and JavaScript. So, someone can feel free to look at the source code to see what might be going on.
Maybe the Gauge library just needs to be updated.

Offline vletroye

  • Hero Member
  • *****
  • Posts: 714
  • Karma: +7/-0
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #7 on: March 29, 2014, 07:42:32 am »
It works fine on my laptop if I colapse the "Host Explorer" pane.

My Laptop is a 15" (1280x800).
So the problem is with the width of the dashoard. There is a minimal width required by the plugins IMO.

(You can reproduce the problem on a PC by reducing the size of the browser window... I presume that you test with it maximized..)

I will try to have a look on the js and html of those monitoring plugin and see what can be fine tuned...

V.

Offline Brahim

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8,547
  • Karma: +204/-16
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #8 on: March 29, 2014, 09:06:48 am »
Yeah, you are correct. It seems to be minimize size related. I had a reduced size window but with the explorer pane collapsed. Expanding the explorer and squeezing things created the issue.

In the plugins I compute the dimensions as follow:
Code: [Select]
   if(pHeight !== '' && pWidth !== ''){
    if(pHeight != 0 && pWidth != 0){
    pWidth = pWidth > 60 ? pWidth - 60 : 40;
    pHeight = pHeight > 60 ? pHeight - 60 : 40;
    } else {
    if(pWidth != 0){
    pWidth = pWidth > 60 ? pWidth - 60 : 40;
    pHeight = ((pWidth * 3)/4);
} else {
pHeight = pHeight > 60 ? pHeight - 60 : 40;
pWidth = ((pHeight * 4)/3);
}
    }
     var chartElement = document.getElementById("cpuLoadId");
     chartElement.style.height = pHeight + "px";
     chartElement.style.width = pWidth + "px";
  }
Obviously, the logic is flawed for small sizes.

Offline terrastrife

  • Full Member
  • ***
  • Posts: 235
  • Karma: +7/-0
  • 38TB FlexRAID
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #9 on: March 30, 2014, 05:26:40 am »
I've found the darker themes easier to read in IE as the text sizing and blocks of colours are probably "how it was intended" (more of a problem with the background colours not right) over Chrome so that's what I use. The graphing and stuff has never looked wrong either.

Offline vletroye

  • Hero Member
  • *****
  • Posts: 714
  • Karma: +7/-0
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #10 on: September 24, 2014, 05:12:40 pm »
I know this is a very old post... But I didn't take time to investigate that issue before  :-[

The problem occurs when resizing the browser or when changing the height of the frame in such a way that the height of the gauge is > 80% of its width.

Here is my fix to get a perfectly displayed gauge in any case: just add this BEFORE the line var chartElement = document.getElementById("cpuLoadId");

Code: [Select]
if (pHeight > ((80 * pWidth)/100))
    pHeight = ((80 * pWidth)/100);

So now, if one resizes e.g. the height of the frame, the height of the gauge will never be more than 80% of the width.

See here:
- CPU Gauge has NOT been fixed
- Memory Gauge has been fixed



Brahim, if you validate this, can you include the fix in the next release of those addins ?

Offline Brahim

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8,547
  • Karma: +204/-16
    • View Profile
Re: "Gauge" drawing in Plugins
« Reply #11 on: September 24, 2014, 06:52:05 pm »
Thanks Valery.
I updated the code for both the CPU and Memory gauge widgets.
I could never figure out what the issue really was. So, big thanks to you. :)