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

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="";

s+=" “;
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’> ";


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.