Insert Canvas Gauge in a ScadaBR View


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
    the web site is 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 :


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

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.