Insert Canvas Gauge in a ScadaBR View

In English
1

I describe a method for inserting a gauge canvas into a graphical view.
This method is not perfect code but to be perfected, but even so it works well.

First One

  • download gauge.min.js from https://github.com/Mikhus/canvas-gauges
    the web site is https://canvas-gauges.com/ you can download al gauge type linear or circular and other.

Second One

- Put the `gauge.min.js` into` /resoruces ScadaBR folder`

After, Open ScadaBR View and add an html object with this code :

image

it will remain hidden. This component is required and only needs to be called once.

After create a Script Server Side object with this code:

/**********************************************************************************************************/
/* Error! Template file not found. */
var highlights = '[{ "from": 0, "to": 20, "color": "rgba(242, 0, 0, 1)" },{ "from": 20, "to": 50, "color": "rgba(23,255,106,1)" }, { "from": 50, "to": 100, "color": "rgba(23,255,106,1)" }]';
var s="<!-- Gauge from Paul -->";
    s+=" <head></head><body> ";
    s+=" <canvas data-type='radial-gauge' data-width='150' data-height='150' ";
    s+=" data-units='OXIGEN' data-title='%'  data-value='"+value+"' ";
    s+="data-min-value='0' data-max-value='100' ";
    s+="data-major-ticks='0,10,20,30,40,50,60,70,80,90,100' ";
    s+="data-minor-ticks='2' data-stroke-ticks='false' ";
    s+="data-highlights='"+highlights+"'";
    s+="  data-color-plate='#222' data-color-major-ticks='#f5f5f5' ";
    s+=" data-color-minor-ticks='#ddd' data-color-title='#fff' ";
    s+="  data-color-units='#ccc' data-color-numbers='#eee' ";
    s+="  data-color-needle-start='rgba(240, 128, 128, 1)' ";
    s+="  data-color-needle-end='rgba(255, 160, 122, 9)' ";
    s+="  data-value-box='true' data-animation-rule='linear' ";
    s+="  data-animation-duration='500' data-font-value='Led' ";
    s+="  data-animated-value='true'></canvas> ";
    /*s+=" <p>teste</p></body>";*/
     return s;
    /**********************************************************************************************************/

You can change limit , colour , size and other.

This is the result

image
image845×496 67.1 KB

Unfortunately some parameter are ignored from ScadaBR as pointer acceleration but this adapting must be improved.

Someone better than me will find the right integration.

Good Work for All.

Paul

2 curtidas