Another gauge.js library

How can I use this gauge.js library in Node-Red.
thaks to steve-ml I learned to know how to integrate a Gauge.js.
Unfortunately that is not the one I actually used in a former project.
The one I want to integrate in Node-Red is this one:

You can find it on Github: https://github.com/Mikhus/canvas-gauges

Should I copy the library into one template
and then in the second template the options etc. ?
How should the code look like in the second template to set the value of the gauge?

Nice feature of this library is, that you can get radial and linear gauges.
With linear gauges you get more information on one screen.
Please see examples below

[Examples ]

2 Likes

Looks like you can either install it or...

force installation directly from canvas-gauges git repository

Then try loading an example into a template...

Using
There are 2 ways of using gauges on the page.
First one is declarative by simply defining a gauge components in HTML, like...

And hopefully get results similar to this...

1 Like

Ok, you mean I have to install the library for example per npm.
Should I put it into the node-red-directory? What is the best place for the library?

In the node-red-template I will copy one example code and change the path to this directory and then, hopefully, it should work?

One template per gauge, and whatever feeds in the data. That's it.

As I had mentioned in that other topic about gauges, I found it best to create a subfolder (I called mine Canvas-Gauges for this library) in my node-red-static folder, then downloaded the library zip and extract it into that subfolder.

Then I just add this at the top of each template (the first part of the path is what is in node-red's setting.js)

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

Followed by whatever settings for the type of gauge I want.

<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
        data-width="350"
        data-height........... and so on.......


></canvas>

For example...

I like how simple it is to insert the data data-value={{msg.payload}} although I don't like how the half round still assumes a full circle as far as the card is concerned... wasted space and looks odd. I have tried a few tricks and settings that seems to work in other canvas libraries, but the only thing that worked visually was to color the circle the same as the background (I run dark mode, so the example may look different on your system)

No apparent way to center to the card either... as in the Linear Gauges

[{"id":"15f672db96ac9474","type":"ui_template","z":"8c7dfd6121113522","group":"fbf3ac92fc202dfe","name":"Linear Vertical","order":1,"width":4,"height":12,"format":"<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n    \n<!-- Injecting linear gauge -->\n<canvas data-type=\"linear-gauge\"\n        data-width=\"160\"\n        data-height=\"600\"\n        data-border-radius=\"20\"\n        data-borders=\"0\"\n        data-bar-stroke-width=\"5\"\n        data-minor-ticks=\"10\"\n        data-major-ticks=\"0,10,20,30,40,50,60,70,80,90,100\"\n        data-value={{msg.payload}}\n        data-units=\"°C\"\n        data-color-Bar-Progress=\"rgba(255,0,0,.25)\"\n        data-color-value-box-shadow=\"false\"\n></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":560,"y":440,"wires":[[]]},{"id":"01183e3a5d78bff9","type":"random","z":"8c7dfd6121113522","name":"","low":1,"high":"100","inte":"true","property":"payload","x":360,"y":440,"wires":[["15f672db96ac9474"]]},{"id":"44bdd6f629c2cd11","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"set","v":"true","vt":"bool"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":190,"y":440,"wires":[["01183e3a5d78bff9"]]},{"id":"2fd33d1202e5eb98","type":"ui_template","z":"8c7dfd6121113522","group":"3a12888e4343653b","name":"Full Round","order":1,"width":0,"height":0,"format":"<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n    \n<!-- Injecting radial gauge -->\n<canvas data-type=\"radial-gauge\"\n        data-width=\"350\"\n        data-height=\"350\"\n        data-units=\"Km/h\"\n        data-title=\"false\"\n        data-value={{msg.payload}}\n        data-min-value=\"0\"\n        data-max-value=\"100\"\n        data-major-ticks=\"0,20,40,60,80,100\"\n        data-minor-ticks=\"6\"\n        data-stroke-ticks=\"false\"\n        data-highlights='[\n            { \"from\": 0, \"to\": 60, \"color\": \"rgba(0,255,0)\" },\n            { \"from\": 60, \"to\": 80, \"color\": \"rgba(255,255,0)\" },\n            { \"from\": 80, \"to\": 100, \"color\": \"rgba(255,0,0)\" }\n        ]'\n        data-color-plate=\"#808080\"\n        data-color-major-ticks=\"#000000\"\n        data-color-minor-ticks=\"#808080\"\n        data-color-title=\"#fff\"\n        data-color-units=\"#ccc\"\n        data-color-numbers=\"#eee\"\n        data-color-needle-start=\"rgba(240, 128, 128, 5)\"\n        data-color-needle-end=\"rgba(255, 160, 122, 1)\"\n        data-animation-rule=\"elastic\"\n        data-animation-duration=\"500\"\n        data-value-box=\"true\"\n        data-font-value=\"Led\"\n        data-animated-value=\"true\"\n></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":550,"y":500,"wires":[[]]},{"id":"3309ec3494dbae53","type":"random","z":"8c7dfd6121113522","name":"","low":1,"high":"100","inte":"true","property":"payload","x":360,"y":500,"wires":[["2fd33d1202e5eb98"]]},{"id":"3c77e7c32429e0a5","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"set","v":"true","vt":"bool"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":190,"y":500,"wires":[["3309ec3494dbae53"]]},{"id":"6614d5b174cacc9b","type":"ui_template","z":"8c7dfd6121113522","group":"d34a1a5499b12501","name":"Half Round","order":1,"width":0,"height":0,"format":"<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n\n<!-- Injecting radial gauge -->\n<canvas data-type=\"radial-gauge\"\n        data-width=\"350\"\n        data-height=\"350\"\n        data-start-angle=\"90\"\n        data-ticks-angle=\"180\"\n        data-units=\"°C\"\n        data-title=\"false\"\n        data-value={{msg.payload}}\n        data-min-value=\"0\"\n        data-max-value=\"40\"\n        data-major-ticks=\"0,5,10,15,20,25,30,35,40\"\n        data-minor-ticks=\"5\"\n        data-stroke-ticks=\"false\"\n        data-borders=\"false\"\n        data-highlights='[\n            { \"from\": 0, \"to\": 10, \"color\": \"rgba(0,0,128)\" },\n            { \"from\": 10, \"to\": 15, \"color\": \"rgba(0,0,255)\" },\n            { \"from\": 15, \"to\": 20, \"color\": \"rgba(0,128,0)\" },\n            { \"from\": 20, \"to\": 25, \"color\": \"rgba(0,255,0)\" },\n            { \"from\": 25, \"to\": 30, \"color\": \"rgba(255,255,0)\" },\n            { \"from\": 30, \"to\": 40, \"color\": \"rgba(255,0,0)\" }\n        ]'\n        data-color-plate=\"#333333\"\n        data-border-shadow-width=\"0\"\n        data-color-major-ticks=\"#000000\"\n        data-color-minor-ticks=\"#808080\"\n        data-color-units=\"#ccc\"\n        data-color-numbers=\"#eee\"\n        data-color-needle-start=\"rgba(240, 128, 128, 5)\"\n        data-color-needle-end=\"rgba(255, 160, 122, 1)\"\n        data-needle-circle-inner=\"false\"\n        data-needle-circle-outer=\"true\"\n        data-animation-rule=\"elastic\"\n        data-animation-duration=\"500\"\n        data-value-box=\"false\"\n\n></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":550,"y":560,"wires":[[]]},{"id":"5d6c7e51cc1523bf","type":"random","z":"8c7dfd6121113522","name":"","low":"0","high":"40","inte":"true","property":"payload","x":360,"y":560,"wires":[["6614d5b174cacc9b"]]},{"id":"bc67b26442ecff86","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"set","v":"true","vt":"bool"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":190,"y":560,"wires":[["5d6c7e51cc1523bf"]]},{"id":"64f819caa152f1b9","type":"ui_template","z":"8c7dfd6121113522","group":"4392c40833e9f6ba","name":"Linear Horizontal","order":1,"width":15,"height":3,"format":"<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n    \n<!-- Injecting linear gauge -->\n<canvas data-type=\"linear-gauge\"\n    data-value={{msg.payload}}\n    data-width=\"750\"\n    data-height=\"100\"\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-color-plate=\"#fff\"\n    data-border-shadow-width=\"0\"\n    data-borders=\"false\"\n    data-bar-begin-circle=\"false\"\n    data-tick-side=\"left\"\n    data-number-side=\"left\"\n    data-needle-side=\"left\"\n    data-needle-type=\"line\"\n    data-needle-width=\"3\"\n    data-color-needle=\"#00FF00\"\n    data-color-needle-end=\"#00FF00\"\n    data-animation-duration=\"1500\"\n    data-animation-rule=\"linear\"\n    data-animation-target=\"plate\"\n    data-bar-width=\"10\"\n    data-ticks-width=\"50\"\n    data-ticks-width-minor=\"15\"\n></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":570,"y":620,"wires":[[]]},{"id":"0c8a61b04dc5fd5a","type":"random","z":"8c7dfd6121113522","name":"","low":1,"high":"100","inte":"true","property":"payload","x":360,"y":620,"wires":[["64f819caa152f1b9"]]},{"id":"8c9b3338cb3156fb","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"set","v":"true","vt":"bool"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":190,"y":620,"wires":[["0c8a61b04dc5fd5a"]]},{"id":"fbf3ac92fc202dfe","type":"ui_group","name":"Linear Vertical","tab":"32f743da73ff5571","order":1,"disp":true,"width":"4","collapse":false},{"id":"3a12888e4343653b","type":"ui_group","name":"Full Round","tab":"32f743da73ff5571","order":2,"disp":true,"width":"7","collapse":false},{"id":"d34a1a5499b12501","type":"ui_group","name":"Half Round","tab":"32f743da73ff5571","order":3,"disp":true,"width":7,"collapse":false},{"id":"4392c40833e9f6ba","type":"ui_group","name":"Linear Horizontal","tab":"32f743da73ff5571","order":7,"disp":true,"width":15,"collapse":false},{"id":"32f743da73ff5571","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

image

4 Likes

Gunner, nice work! The gauges look great.

I have one question though: How do you read the purple text on the dark background?

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}]
2 Likes