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