Another gauge.js library

It is there when I need to focus on it, but otherwise it blends away :stuck_out_tongue:

I like the look of that so to try and reproduce it (on a Raspberry Pi), I edited settings.js to give
httpStatic: '/home/pi/.node-red/node-red-static/',

mkdir ~/.node-red/node-red-static
mkdir ~/.node-red/node-red-static/Canvas-Gauges
curl https://canvas-gauges.com/download/latest/all/gauge.min.js > ~/.node-red/node-red-static/Canvas-Gauges/gauge.min.js

Viewing the dashboard from Firefox on Windows, your flow above gives me this

But after a few random injections it changes, one gauge at a time to this

Any ideas what could be going wrong?

Edit: That's on a Pi where the dashboard header is hidden (I wonder how I did that!). Lett me try on another Pi...

Nope, same problem. Linear Horizontal borks first, then Vertical. The round gauges seem more resilient, takes a while till they go wrong.

This is realy great!
It is the best gauge.js I know off.

If you install the library like above, there is the disadvantage that you can't move it as a flow from one Node-red installation to another without installing the library on the new Node-Red.

steve-ml, with another gauge.js, showed how to load the library into one template of the flow and into another templayte of the same flow the code of the gauge.

This would allow to easily share flows from one node-red installation to another one.
Do you think this would work with that library as well?

works perfectly copying the library in static folder!
Many thanks for your support!

Since one needs node-red installed somewhere stable, I see no benefit to making any libraries it uses "portable". Once done always there.

However, I see no reason it couldn't be done that way either, or even according to the documentation it seems you can also force installation (to memory or temp dir?) directly from canvas-gauges git repository...

Being it is all HTML(5)? based, I think it is just a case of the browser managing the (heavy?) data flow. I have seen strange orderings at times myself on Chrome (PC), usually right after a deploy. A browser refresh usually clears it up if it doesn't settle down on it's own. Being that the RPi is both running the code and displaying on the browser may be a contributing factor.

BTW, on the Half Round, the dark circle is controlled by the line data-color-plate="#333333"

The two screenshots were both of the page displayed by Firefox on my PC.
The first attempt was with Node-Red on a Pi Zero, the second a Pi 4B.

But whatever the problem is, the gauges work in MS Edge. The flickery needle effect is better in Edge too.
Must be something to do with Firefox, or my FF setup

I found that you are not the only one with the FF issue... gauge change position in Firefox · Issue #232 · Mikhus/canvas-gauges · GitHub

<div style="margin:auto"</div>
<script src="/Canvas-Gauges/gauge.min.js"></script>

centers a gauge in a template group

I could never get that to work (with that particular library)... but I found I can get close or spot on with the dashboard layout editor (and/or tweaking the gauge size)

showing heating temperature and time of last measurment in header

[{"id":"d3ad7313.25cae","type":"ui_template","z":"c85ea906.e6d488","group":"7738876d.520038","name":"Full Round-2","order":2,"width":"6","height":"6","format":"<div style=\"margin:auto;\"</div>\n<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n<canvas data-type=\"radial-gauge\"\n    data-width=\"300\"\n    data-height=\"300\"\n    data-units=\"°C\"\n    data-min-value=\"0\"\n    data-max-value=\"100\"\n    data-major-ticks=\"0,10,20,30,40,50,60,70,80,90,100\"\n    data-minor-ticks=\"10\"\n    data-stroke-ticks=\"true\"\n    data-highlights='[\n        {\"from\": 50, \"to\": 70, \"color\": \"rgba(255,136,0, .75)\"},    \n        {\"from\": 70, \"to\": 100, \"color\": \"rgba(200, 50, 50, .75)\"}\n    ]'\n    data-color-plate=\"#fff\"\n    data-border-shadow-width=\"0\"\n    data-borders=\"false\"\n    data-needle-type=\"arrow\"\n    data-needle-width=\"2\"\n    data-needle-circle-size=\"7\"\n    data-needle-circle-outer=\"true\"\n    data-needle-circle-inner=\"false\"\n    data-animation-duration=\"1500\"\n    data-animation-rule=\"linear\"\n    data-title = {{msg.title}}\n    data-value-Box = \"true\"\n    data-value-Int=\"2\"\n    data-value-Dec=\"2\"    \n    data-value={{msg.payload}}\n></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1110,"y":740,"wires":[[]]},{"id":"44d6eed4.3ca7c","type":"mqtt in","z":"c85ea906.e6d488","name":"Heiz VL","topic":"home/ug/Buero/unipi/1/temp/281893C00700005E","qos":"0","datatype":"auto","broker":"77bfb9d8.845088","nl":false,"rap":false,"x":590,"y":740,"wires":[["3198d2b.ceb182e"]]},{"id":"9a8c8811.beb238","type":"mqtt in","z":"c85ea906.e6d488","name":"Heiz RL","topic":"home/ug/Buero/unipi/1/temp/2892844D07000012","qos":"0","datatype":"auto","broker":"77bfb9d8.845088","nl":false,"rap":false,"x":590,"y":800,"wires":[["c1175a8c.422688"]]},{"id":"54533320.a2201c","type":"ui_template","z":"c85ea906.e6d488","group":"7738876d.520038","name":"Full Round-2","order":4,"width":"6","height":"6","format":"<div style=\"margin:auto;\"</div>\n<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n<canvas data-type=\"radial-gauge\"\n    data-width=\"300\"\n    data-height=\"300\"\n    data-units=\"°C\"\n    data-min-value=\"0\"\n    data-max-value=\"100\"\n    data-major-ticks=\"0,10,20,30,40,50,60,70,80,90,100\"\n    data-minor-ticks=\"10\"\n    data-stroke-ticks=\"true\"\n    data-highlights='[\n        {\"from\": 50, \"to\": 70, \"color\": \"rgba(255,136,0, .75)\"},    \n        {\"from\": 70, \"to\": 100, \"color\": \"rgba(200, 50, 50, .75)\"}\n    ]'\n    data-color-plate=\"#fff\"\n    data-border-shadow-width=\"0\"\n    data-borders=\"false\"\n    data-needle-type=\"arrow\"\n    data-needle-width=\"2\"\n    data-needle-circle-size=\"7\"\n    data-needle-circle-outer=\"true\"\n    data-needle-circle-inner=\"false\"\n    data-animation-duration=\"1500\"\n    data-animation-rule=\"linear\"\n    data-title = {{msg.title}}\n    data-value-Box = \"true\"\n    data-value-Int=\"2\"\n    data-value-Dec=\"2\"    \n    data-value={{msg.payload}}\n></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1110,"y":800,"wires":[[]]},{"id":"a1c8b04.051cd5","type":"inject","z":"c85ea906.e6d488","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"55","payloadType":"num","x":590,"y":680,"wires":[["3198d2b.ceb182e","c1175a8c.422688"]]},{"id":"f60e3481.570c38","type":"function","z":"c85ea906.e6d488","name":"","func":"\ndelete msg.topic;\nmsg.title = \"Heizungsvorlauf:\" + msg.time;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":960,"y":740,"wires":[["d3ad7313.25cae"]]},{"id":"3198d2b.ceb182e","type":"moment","z":"c85ea906.e6d488","name":"","topic":"","input":"","inputType":"date","inTz":"Europe/Berlin","adjAmount":0,"adjType":"days","adjDir":"add","format":"HH:mm","locale":"de-DE","output":"time","outputType":"msg","outTz":"Europe/Berlin","x":780,"y":740,"wires":[["f60e3481.570c38"]]},{"id":"e76b2e36.ecc5b","type":"function","z":"c85ea906.e6d488","name":"","func":"\ndelete msg.topic;\nmsg.title = \"Heizungsrücklauf:\" + msg.time;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":960,"y":800,"wires":[["54533320.a2201c"]]},{"id":"c1175a8c.422688","type":"moment","z":"c85ea906.e6d488","name":"","topic":"","input":"","inputType":"date","inTz":"Europe/Berlin","adjAmount":0,"adjType":"days","adjDir":"add","format":"HH:mm","locale":"de-DE","output":"time","outputType":"msg","outTz":"Europe/Berlin","x":780,"y":800,"wires":[["e76b2e36.ecc5b"]]},{"id":"7738876d.520038","type":"ui_group","name":"Group 1","tab":"72784fe1.fd9aa","order":1,"disp":false,"width":"18","collapse":false},{"id":"77bfb9d8.845088","type":"mqtt-broker","name":"","broker":"10.0.0.43","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"72784fe1.fd9aa","type":"ui_tab","name":"JU_Gauge","icon":"dashboard","order":43,"disabled":false,"hidden":false}]
3 Likes

That is a good idea!

Paul (zenofmud) asked me to completely document how to use gauges js:

  1. go to [https://canvas-gauges.com/](https://Gauge.js web site)
  2. check out the user guide which tells you all about configuration of different gauges
  3. you have to edit node-red settings.js to create a static folder. (see Gunner's post further up in this thread).
  4. install the gauge.js library in the static folder
    mkdir ~/.node-red/node-red-static
    mkdir ~/.node-red/node-red-static/Canvas-Gauges
    curl https://canvas-gauges.com/download/latest/all/gauge.min.js > ~/.node-red/node-red-static/Canvas-Gauges/gauge.min.js`
  5. go to the gauge.js samples and click on one Gauge in order to get the html code
  6. copy it into a node-red template
  7. in order to center the gauge in a node-red-Group add this line as first line:
    <div style="margin:auto">
    and this as last line in the template:
    </div>
  8. add this line as the second line to the template (must always be in the template!):
    <script src="/Canvas-Gauges/gauge.min.js"></script>
  9. add this line in the canvas part of the template to inject your data:
    data-value={{msg.payload}}
  10. you can change the size of the gauge in the html code easily.
  11. you can change any attribut of the gauge from outside, check my flow for the title
  12. now you are ready for nice gauges .
2 Likes

My sample flow to the guide lines

[{"id":"9c013dd8.c2fd4","type":"tab","label":"Gauge 2","disabled":false,"info":""},{"id":"ad0ab26c.365e6","type":"ui_template","z":"9c013dd8.c2fd4","group":"7738876d.520038","name":"Full Round-2","order":2,"width":"6","height":"6","format":"<div style=\"margin:auto\">\n<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n<canvas data-type=\"radial-gauge\"\n    data-width=\"300\"\n    data-height=\"300\"\n    data-units=\"°C\"\n    data-min-value=\"0\"\n    data-max-value=\"100\"\n    data-major-ticks=\"0,10,20,30,40,50,60,70,80,90,100\"\n    data-minor-ticks=\"10\"\n    data-stroke-ticks=\"true\"\n    data-highlights='[\n        {\"from\": 50, \"to\": 70, \"color\": \"rgba(255,136,0, .50)\"},    \n        {\"from\": 70, \"to\": 100, \"color\": \"rgba(200, 50, 50, .50)\"}\n    ]'\n    data-color-plate=\"#fff\"\n    data-border-shadow-width=\"0\"\n    data-borders=\"false\"\n    data-needle-type=\"arrow\"\n    data-needle-width=\"2\"\n    data-needle-circle-size=\"7\"\n    data-needle-circle-outer=\"true\"\n    data-needle-circle-inner=\"false\"\n    data-animation-duration=\"1500\"\n    data-animation-rule=\"linear\"\n    data-title = {{msg.title}}\n    data-value-Box = \"true\"\n    data-value-Int=\"2\"\n    data-value-Dec=\"2\"    \n    data-value={{msg.payload}}\n></canvas>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":810,"y":140,"wires":[[]]},{"id":"25bcb119.72850e","type":"inject","z":"9c013dd8.c2fd4","name":"","props":[{"p":"set","v":"true","vt":"bool"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":290,"y":120,"wires":[["18ee0d21.97a5f3"]]},{"id":"18ee0d21.97a5f3","type":"random","z":"9c013dd8.c2fd4","name":"","low":1,"high":"100","inte":"true","property":"payload","x":440,"y":120,"wires":[["6ba62e98.ca92a"]]},{"id":"3f532c04.c3c9f4","type":"ui_template","z":"9c013dd8.c2fd4","group":"7738876d.520038","name":"Full Round-2","order":4,"width":"6","height":"6","format":"<div style=\"margin:auto\">\n<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n<canvas data-type=\"radial-gauge\"\n    data-width=\"300\"\n    data-height=\"300\"\n    data-units=\"°C\"\n    data-min-value=\"0\"\n    data-max-value=\"100\"\n    data-major-ticks=\"0,10,20,30,40,50,60,70,80,90,100\"\n    data-minor-ticks=\"10\"\n    data-stroke-ticks=\"true\"\n    data-highlights='[\n        {\"from\": 50, \"to\": 70, \"color\": \"rgba(255,136,0, .75)\"},    \n        {\"from\": 70, \"to\": 100, \"color\": \"rgba(200, 50, 50, .75)\"}\n    ]'\n    data-color-plate=\"#fff\"\n    data-border-shadow-width=\"0\"\n    data-borders=\"false\"\n    data-needle-type=\"arrow\"\n    data-needle-width=\"2\"\n    data-needle-circle-size=\"7\"\n    data-needle-circle-outer=\"true\"\n    data-needle-circle-inner=\"false\"\n    data-animation-duration=\"1500\"\n    data-animation-rule=\"linear\"\n    data-title = {{msg.title}}\n    data-value-Box = \"true\"\n    data-value-Int=\"2\"\n    data-value-Dec=\"2\"    \n    data-value={{msg.payload}}\n></canvas>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":810,"y":200,"wires":[[]]},{"id":"6ba62e98.ca92a","type":"function","z":"9c013dd8.c2fd4","name":"","func":"let counter = context.get(\"counter\");\ncounter = counter + 1;\ncontext.set(\"counter\", counter);\nnode.status({text:counter});\n//----------\n\ndelete msg.topic;\nmsg.title = \"Heizungsvorlauf:\" + timeString_hms();\nreturn msg;\n\n//-----------\n\nfunction timeString_hms(){\n    let t = Date.now();\n    let date = new Date(t);    \n    let hours = (\"0\" + date.getHours()).slice(-2);\n    let minutes = (\"0\" + date.getMinutes()).slice(-2);\n    let seconds = (\"0\" + date.getSeconds()).slice(-2);    \n    let timestring = hours + ':' + minutes + ':' + seconds;\n    return timestring;\n}","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is started.\nif (context.get(\"counter\") === undefined) {\n    context.set(\"counter\", 0);\n}","finalize":"","libs":[],"x":600,"y":120,"wires":[["ad0ab26c.365e6","829625b8.f6b348"]]},{"id":"350c80c4.be43f","type":"function","z":"9c013dd8.c2fd4","name":"","func":"let counter = context.get(\"counter\");\ncounter = counter + 1;\ncontext.set(\"counter\", counter);\nnode.status({text:counter});\n\n//----------\n\ndelete msg.topic;\nmsg.title = \"Heizungsrücklauf:\" + timeString_hms();\nreturn msg;\n\n//-----------\n\nfunction timeString_hms(){\n    let t = Date.now();\n    let date = new Date(t);    \n    let hours = (\"0\" + date.getHours()).slice(-2);\n    let minutes = (\"0\" + date.getMinutes()).slice(-2);\n    let seconds = (\"0\" + date.getSeconds()).slice(-2);    \n    let timestring = hours + ':' + minutes + ':' + seconds;\n    return timestring;\n}\n","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is started.\nif (context.get(\"counter\") === undefined) {\n    context.set(\"counter\", 0);\n}","finalize":"","libs":[],"x":600,"y":200,"wires":[["3f532c04.c3c9f4"]]},{"id":"829625b8.f6b348","type":"ui_template","z":"9c013dd8.c2fd4","group":"4fa7747.2180a8c","name":"temp innen","order":0,"width":"4","height":"4","format":"<div style=\"margin:auto\">\n<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n<canvas data-type=\"radial-gauge\"\n    data-width=\"175\"\n    data-height=\"175\"\n    data-units=\"°C\"\n    data-min-value=\"0\"\n    data-max-value=\"100\"\n    data-major-ticks=\"0,10,20,30,40,50,60,70,80,90,100\"\n    data-minor-ticks=\"10\"\n    data-stroke-ticks=\"true\"\n    data-highlights='[\n        {\"from\": 50, \"to\": 70, \"color\": \"rgba(255,136,0, .50)\"},    \n        {\"from\": 70, \"to\": 100, \"color\": \"rgba(200, 50, 50, .50)\"}\n    ]'\n    data-color-plate=\"#fff\"\n    data-border-shadow-width=\"0\"\n    data-borders=\"false\"\n    data-needle-type=\"arrow\"\n    data-needle-width=\"2\"\n    data-needle-circle-size=\"7\"\n    data-needle-circle-outer=\"true\"\n    data-needle-circle-inner=\"false\"\n    data-animation-duration=\"1500\"\n    data-animation-rule=\"linear\"\n    data-title = {{msg.title}}\n    data-value-Box = \"true\"\n    data-value-Int=\"2\"\n    data-value-Dec=\"2\"    \n    data-value={{msg.payload}}\n></canvas>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":810,"y":100,"wires":[[]]},{"id":"2f2c5332.3e2eec","type":"inject","z":"9c013dd8.c2fd4","name":"","props":[{"p":"set","v":"true","vt":"bool"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"str","x":290,"y":200,"wires":[["c6ef74d6.e3b998"]]},{"id":"c6ef74d6.e3b998","type":"random","z":"9c013dd8.c2fd4","name":"","low":1,"high":"100","inte":"true","property":"payload","x":440,"y":200,"wires":[["350c80c4.be43f"]]},{"id":"7738876d.520038","type":"ui_group","name":"Heizung","tab":"72784fe1.fd9aa","order":1,"disp":false,"width":"18","collapse":false},{"id":"4fa7747.2180a8c","type":"ui_group","name":"Group 2","tab":"72784fe1.fd9aa","order":2,"disp":false,"width":"4","collapse":false},{"id":"72784fe1.fd9aa","type":"ui_tab","name":"JU_Gauge","icon":"dashboard","order":43,"disabled":false,"hidden":false}]

If you want to try the gauge without downloading the gauge.min.js and editing your settings.js file, you can use a CDN to load the file instead.

[{"id":"82ad76c1a5269e56","type":"ui_template","z":"a4801683.1c0448","group":"640b0682.bee8e8","name":"Full Round-2","order":2,"width":"6","height":"6","format":"<div style=\"margin:auto;\"</div>\n<script src=\"https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/radial/gauge.min.js\"></script>\n\n<canvas data-type=\"radial-gauge\"\n    data-width=\"300\"\n    data-height=\"300\"\n    data-units=\"°C\"\n    data-min-value=\"0\"\n    data-max-value=\"100\"\n    data-major-ticks=\"0,10,20,30,40,50,60,70,80,90,100\"\n    data-minor-ticks=\"10\"\n    data-stroke-ticks=\"true\"\n    data-highlights='[\n        {\"from\": 50, \"to\": 70, \"color\": \"rgba(255,136,0, .75)\"},    \n        {\"from\": 70, \"to\": 100, \"color\": \"rgba(200, 50, 50, .75)\"}\n    ]'\n    data-color-plate=\"#fff\"\n    data-border-shadow-width=\"0\"\n    data-borders=\"false\"\n    data-needle-type=\"arrow\"\n    data-needle-width=\"2\"\n    data-needle-circle-size=\"7\"\n    data-needle-circle-outer=\"true\"\n    data-needle-circle-inner=\"false\"\n    data-animation-duration=\"1500\"\n    data-animation-rule=\"linear\"\n    data-title = {{msg.title}}\n    data-value-Box = \"true\"\n    data-value-Int=\"2\"\n    data-value-Dec=\"2\"    \n    data-value={{msg.payload}}\n></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":480,"y":3170,"wires":[[]]},{"id":"b4f71b929b9a9fce","type":"inject","z":"a4801683.1c0448","name":"Test data","props":[{"p":"temperature","v":"$round(($random()*100),2)","vt":"jsonata"},{"p":"humidity","v":"$floor($random()*100)","vt":"jsonata"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":160,"y":3170,"wires":[["801c348c2d4bf4cb"]]},{"id":"801c348c2d4bf4cb","type":"function","z":"a4801683.1c0448","name":"","func":"msg.payload = msg.temperature\nmsg.title = \"Humidity:\" + msg.humidity + \"%\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":3170,"wires":[["82ad76c1a5269e56"]]},{"id":"640b0682.bee8e8","type":"ui_group","name":"Radial Gauges","tab":"abec7506.b42928","order":2,"disp":true,"width":"6","collapse":false},{"id":"abec7506.b42928","type":"ui_tab","name":"Widgets","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
1 Like

BTW, you have some errant triple backticks at the end of your flow, that may confuse new users trying to import it.

image

Finally figured this out... between strange ways of formatting the command in some examples (shows error but centering still worked?)
image

image

My best results was to format the div like this... fore and aft of all other code

<div style="margin:auto">

<script src="/Canvas-Gauges/gauge.min.js"></script>

<canvas data-type="radial-gauge"
    data-width="300"
.....
    data-value={{msg.payload}}
></canvas>

</div>

Meanwhile... interference from code in another other gauge example (in same tab, but different group) was stopping the above codes from working... I figured out the part that was interfering (after posting this) and am now working on eliminating the slider and incorporating payload inject (not going so well :frowning: )

image

[{"id":"7aac70aaf6e1046b","type":"ui_template","z":"8c7dfd6121113522","group":"f9a22db17d48a558","name":"Adjustable gauge with trigger points for label colour change","order":1,"width":8,"height":6,"format":"<style>\n      body{ background-color: white; }\n      #wrapper{ position:auto; }\n      canvas{ position:absolute; left:45px; top:5px;}\n      #amount{ position:absolute; left:0px; top:5px; margin-bottom:15px; width:35px; border:0; color:#000000; font-weight:bold; }\n      #slider-vertical{ position:absolute; left:13px; top:45px; width:11px; height:210px; border:0px; color:#f6931f; font-weight:bold; }\n</style>\n\n  \n<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\" />\n<script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>\n<script src=\"http://code.jquery.com/ui/1.10.3/jquery-ui.js\"></script>\n<script>\n  $(function() {\n\n      let canvas=document.getElementById(\"canvas\");\n      let ctx=canvas.getContext(\"2d\");\n\n      let PI=Math.PI;\n      let cx=180;\n      let cy=210;\n      let radius=90;\n      let min=0;\n      let max=1000;\n      let minBound=250;\n      let maxBound=750;\n      let arcWidth=40;\n      let tickWidth=4;\n      let tickValue=400;\n      let tickColor=\"black\";\n\n      $( \"#slider-vertical\" ).slider({\n        orientation: \"vertical\",\n        range: \"min\",\n        min: min,\n        max: max,\n        value:tickValue,\n        slide:function( event, ui ) {\n          $( \"#amount\" ).val(ui.value);\n          draw(ui.value);\n        }\n      });\n\n      $( \"#amount\" ).val( $( \"#slider-vertical\" ).slider( \"value\" ) );\n\n\n      draw(tickValue);\n\n      function draw(value){\n          tickValue=value;\n          tickColor=\"orange\";\n          if(tickValue<minBound){tickColor=\"green\";}\n          if(tickValue>maxBound){tickColor=\"red\";}\n          //\n          ctx.clearRect(0,0,canvas.width,canvas.height);\n          drawArc();\n          drawTick(minBound,\"gray\");\n          drawTick(maxBound,\"gray\");\n          drawTick(tickValue,tickColor,10);\n          drawLabel(minBound,\"gray\",20,18);\n          drawLabel(maxBound,\"gray\",20,18);\n          drawLabel(tickValue,tickColor,55,24);   \n      }\n\n      function drawArc(){\n          ctx.beginPath();\n          ctx.arc(cx,cy,radius,0,PI,true);\n          ctx.lineWidth=arcWidth;\n          ctx.strokeStyle=\"lightgray\";\n          ctx.stroke();\n      }\n\n      function drawTick(tickValue,color,extension){\n          let plus=extension||0;\n          let angle=PI+tickValue/(max-min)*PI;\n          let x1=cx+(radius-arcWidth/2)*Math.cos(angle);\n          let y1=cy+(radius-arcWidth/2)*Math.sin(angle);\n          let x2=cx+(radius+arcWidth/2+plus)*Math.cos(angle);\n          let y2=cy+(radius+arcWidth/2+plus)*Math.sin(angle);\n          ctx.beginPath();\n          ctx.moveTo(x1,y1);\n          ctx.lineTo(x2,y2);\n          ctx.lineWidth=tickWidth;\n          ctx.strokeStyle=color;\n          ctx.stroke();\n      }\n\n      function drawLabel(tickValue,color,extension,fontsize){\n          let angle=PI+tickValue/(max-min)*PI;\n          let x=cx+(radius+arcWidth/2+extension)*Math.cos(angle);\n          let y=cy+(radius+arcWidth/2+extension)*Math.sin(angle);\n          ctx.textAlign=\"center\";\n          ctx.fillStyle=color;\n          ctx.font=fontsize+\"px arial\";\n          ctx.fillText(tickValue,x,y);\n      }\n\n  });   // end $(function(){});\n</script>\n\n\n<body>\n    <div id=\"wrapper\">\n        <input type=\"text\" id=\"amount\" />\n        <div id=\"slider-vertical\"></div>\n        <canvas id=\"canvas\" width=372 height=250></canvas>\n    </div>\n</body>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":820,"y":560,"wires":[[]]},{"id":"f9a22db17d48a558","type":"ui_group","name":"Custom Gauge 3","tab":"2deac665c2e9da53","order":8,"disp":true,"width":8,"collapse":false},{"id":"2deac665c2e9da53","type":"ui_tab","name":"Gauges Galore","icon":"data_usage","disabled":false,"hidden":false}]

Got it...

image

[{"id":"62bd02c06586e2a6","type":"ui_template","z":"8c7dfd6121113522","group":"f9a22db17d48a558","name":"Adjustable gauge with trigger points for label colour change","order":1,"width":8,"height":"5","format":"<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\" />\n<script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>\n<script src=\"http://code.jquery.com/ui/1.10.3/jquery-ui.js\"></script>\n\n<div style=\"margin:auto\">\n\n<script>\n  $(function() {\n      \n      (function(scope) {\n          scope.$watch('msg', function(msg) {\n              if (msg) {\n                  let tickValue = msg.payload;\n                  draw(tickValue);\n              }\n          });\n      })(scope);\n      \n      let canvas=document.getElementById(\"canvas\");\n      let ctx=canvas.getContext(\"2d\");\n      let PI=Math.PI;\n      let cx=180;\n      let cy=210;\n      let radius=100;\n      let min=0;\n      let max=100;\n      let startBound=0;\n      let minBound=25;\n      let midBound=50;\n      let maxBound=75;\n      let endBound=100;\n      let arcWidth=40;\n      let tickWidth=4;\n      let tickColor=\"black\";\n      let tickValue=50;\n\n      draw(tickValue);\n\n      function draw(value){\n          tickValue=value;\n          tickColor=\"black\";\n          if(tickValue<minBound){tickColor=\"green\";}\n          if(tickValue>minBound&&tickValue<midBound){tickColor=\"yellow\";}\n          if(tickValue>midBound&&tickValue<maxBound){tickColor=\"orange\";}\n          if(tickValue>maxBound){tickColor=\"red\";}\n          //\n          ctx.clearRect(0,0,canvas.width,canvas.height);\n          drawArc();\n          drawTick(startBound,\"green\");\n          drawTick(minBound,\"yellow\");\n          drawTick(midBound,\"orange\");\n          drawTick(maxBound,\"red\");\n          drawTick(endBound,\"red\");\n          drawTick(tickValue,tickColor,10);\n          drawLabel(startBound,\"gray\",20,18);\n          drawLabel(minBound,\"gray\",20,18);\n          drawLabel(midBound,\"gray\",20,18);\n          drawLabel(maxBound,\"gray\",20,18);\n          drawLabel(endBound,\"gray\",20,18);\n          drawLabel(tickValue,tickColor,55,24);   \n      }\n\n      function drawArc(){\n          ctx.beginPath();\n          ctx.arc(cx,cy,radius,0,PI,true);\n          ctx.lineWidth=arcWidth;\n          ctx.strokeStyle=\"lightgray\";\n          ctx.stroke();\n      }\n\n      function drawTick(tickValue,color,extension){\n          let plus=extension||0;\n          let angle=PI+tickValue/(max-min)*PI;\n          let x1=cx+(radius-arcWidth/2)*Math.cos(angle);\n          let y1=cy+(radius-arcWidth/2)*Math.sin(angle);\n          let x2=cx+(radius+arcWidth/2+plus)*Math.cos(angle);\n          let y2=cy+(radius+arcWidth/2+plus)*Math.sin(angle);\n          ctx.beginPath();\n          ctx.moveTo(x1,y1);\n          ctx.lineTo(x2,y2);\n          ctx.lineWidth=tickWidth;\n          ctx.strokeStyle=color;\n          ctx.stroke();\n      }\n\n      function drawLabel(tickValue,color,extension,fontsize){\n          let angle=PI+tickValue/(max-min)*PI;\n          let x=cx+(radius+arcWidth/2+extension)*Math.cos(angle);\n          let y=cy+(radius+arcWidth/2+extension)*Math.sin(angle);\n          ctx.textAlign=\"center\";\n          ctx.fillStyle=color;\n          ctx.font=fontsize+\"px arial\";\n          ctx.fillText(tickValue,x,y);\n      }\n  });   // end $(function(){});\n</script>\n\n\n<body>\n    <div id=\"wrapper\">\n        <canvas id=\"canvas\" width=370 height=210></canvas>\n    </div>\n</body>\n\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":660,"wires":[[]]},{"id":"4250dc9e50afa42f","type":"random","z":"8c7dfd6121113522","name":"","low":"0","high":"100","inte":"true","property":"payload","x":340,"y":660,"wires":[["62bd02c06586e2a6"]]},{"id":"b6abc32d4305e190","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"payload"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":190,"y":660,"wires":[["4250dc9e50afa42f"]]},{"id":"f9a22db17d48a558","type":"ui_group","name":"Custom Gauge 3","tab":"2deac665c2e9da53","order":8,"disp":true,"width":8,"collapse":false},{"id":"2deac665c2e9da53","type":"ui_tab","name":"Gauges Galore","icon":"data_usage","disabled":false,"hidden":false}]
1 Like

I have edited my flow and the guidelines! Thanks for the tip!

I also changed the centering to what you posted above. It works ok.

Many thanks for your input!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.