Finally, I found the time to try your gauge for my dashboard v2 migration at home.
Excellent work, Colin! 
I like your approach regarding its configuration!
Makes it super flexible that way for various use cases I have in mind. 
It should be 'Dashboard 2' and not 'Dashboard 2.0', as the latter almost suggests semantic versioning, and which of course could apply to version 2.0 of Dashboard 1.
But back on topic... 
1 Like
CORRECT!
(Does that make you feel better?) 
I have a working system and don't read EVERY POST HERE.
Do you?
I felt fine already, thanks.
No, but I look at all the subject lines and read those that look interesting or where I think I may be able to help.
1 Like
This is moving off topic gentlemen!
Can I politely suggest moving it to DM's if you wish to continue, so the topic remains in focus.
4 Likes
I have released version 1.1.0 which includes Dynamic Updates of some properties. In particular
- The sector colours and layouts can be changed by sending the required layout in
msg.ui_update.sectors. (@arturv2000). For example[{ "start": 0, "color": "green"}, { "start": 5, "color": "skyblue"}] - The text to show in the
measurementandunitsfield can be updated by sending the required text inmsg.ui_update.measurementandmsg.ui_update.units. - Previously, by default, the value of the first needle is automatically displayed as text in the Gauge. However, if a string is provided in
msg.formattedValuethen this will be shown instead. This allows the value to be formatted as desired.
An example of what can be achieved is the following, showing a temperature value, setpoint and power for a temperature control system.
An example flow for that:
[{"id":"81c59272ffe8392d","type":"group","z":"95da4f71825bb1fc","name":"Three Needle Gauge using formattedValue to show PV Setpoint and Power Example","style":{"label":true},"nodes":["9056ddfab4da441c","b9c4203bda10d364","154e4a4e46c6439f","bf64dcf64d98cf9c","a98e6acb7c4116fc","b24a28e497aac97f","9a72c7bc1f6754fa","a0c99db44598432a","64b86dd3a1c40150","a188a5823a9d3906","cf10dc7b39054bb1"],"x":54,"y":1619,"w":872,"h":362},{"id":"9056ddfab4da441c","type":"ui-gauge-classic","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"Formatted Value example","group":"c4074b104a5595b8","order":0,"width":"3","height":"3","min":"5","max":"30","sectors":[{"start":"5","color":"lightgray"}],"major_division":"5","minor_division":"1","value_decimal_places":1,"scale_decimal_places":0,"label":"","measurement":"","units":"","needles":[{"topic":"pv","color":"brown","lengthPercent":"100"},{"topic":"setpoint","color":"black","lengthPercent":"67"},{"topic":"power","color":"darkgray","lengthPercent":"50"}],"sweep_angle":250,"myclass":"","x":790,"y":1780,"wires":[]},{"id":"b9c4203bda10d364","type":"inject","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"pv","payload":"12.5","payloadType":"num","x":150,"y":1660,"wires":[["b24a28e497aac97f"]]},{"id":"154e4a4e46c6439f","type":"inject","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"pv","payload":"27","payloadType":"num","x":150,"y":1700,"wires":[["b24a28e497aac97f"]]},{"id":"bf64dcf64d98cf9c","type":"inject","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"setpoint","payload":"8","payloadType":"num","x":160,"y":1760,"wires":[["9a72c7bc1f6754fa"]]},{"id":"a98e6acb7c4116fc","type":"inject","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"setpoint","payload":"23","payloadType":"num","x":160,"y":1800,"wires":[["9a72c7bc1f6754fa"]]},{"id":"b24a28e497aac97f","type":"function","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"Build formattedValue for pv","func":"// formats value to show in Value field,\n// keeping numeric value in payload\nmsg.formattedValue = `${msg.payload.toFixed(1)}°C`\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":380,"y":1680,"wires":[["9056ddfab4da441c"]]},{"id":"9a72c7bc1f6754fa","type":"function","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"Build text for setpoint","func":"// build text for setpoint in measurement field\n// keeping numeric value in payload\nmsg.ui_update = {measurement: `sp ${msg.payload.toFixed(1)}°C`}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":1780,"wires":[["9056ddfab4da441c"]]},{"id":"a0c99db44598432a","type":"inject","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"power","payload":"0","payloadType":"num","x":150,"y":1860,"wires":[["a188a5823a9d3906"]]},{"id":"64b86dd3a1c40150","type":"inject","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"power","payload":"0.5","payloadType":"num","x":160,"y":1900,"wires":[["a188a5823a9d3906"]]},{"id":"a188a5823a9d3906","type":"function","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"Scale power and build display value","func":"// scales needle value and formats value to show in units field,\n// keeping numeric value in payload\nmsg.ui_update = {units: `pwr ${(100*msg.payload).toFixed(0)}%`}\n// power must be scaled to 5:30\nmsg.payload = msg.payload*25 + 5\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":400,"y":1880,"wires":[["9056ddfab4da441c"]]},{"id":"cf10dc7b39054bb1","type":"inject","z":"95da4f71825bb1fc","g":"81c59272ffe8392d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"power","payload":"0.75","payloadType":"num","x":160,"y":1940,"wires":[["a188a5823a9d3906"]]},{"id":"c4074b104a5595b8","type":"ui-group","name":"Gauge Examples","page":"a56426f48846598a","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"a56426f48846598a","type":"ui-page","name":"Gauge Examples","ui":"ID-BASE-1","path":"/examples","icon":"home","layout":"grid","theme":"b6221fc08b602ea9","order":2,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"]},{"id":"b6221fc08b602ea9","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
and for dynamic control of sectors
[{"id":"c38b69a561f290af","type":"group","z":"95da4f71825bb1fc","name":"Dynamic Sectors Gauge Example","style":{"label":true},"nodes":["e8706e924dcd39c0","63a34f5d3475d0ac","4152aceb8ec9cf2f","2326475a330d282a","a329e530e4797b56","1137f227768652a9","fd722e9fe9c9448e"],"x":54,"y":939,"w":752,"h":302},{"id":"e8706e924dcd39c0","type":"ui-gauge-classic","z":"95da4f71825bb1fc","g":"c38b69a561f290af","name":"Dynamic Sectors example","group":"c4074b104a5595b8","order":0,"width":"3","height":"3","min":"5","max":"30","sectors":[],"major_division":"5","minor_division":"1","value_decimal_places":1,"scale_decimal_places":0,"label":"","measurement":"Temperature","units":"°C","needles":[{"topic":"","color":"black","lengthPercent":"100"}],"sweep_angle":250,"myclass":"","x":670,"y":1080,"wires":[]},{"id":"63a34f5d3475d0ac","type":"inject","z":"95da4f71825bb1fc","g":"c38b69a561f290af","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"22.5","payloadType":"num","x":270,"y":1060,"wires":[["e8706e924dcd39c0"]]},{"id":"4152aceb8ec9cf2f","type":"inject","z":"95da4f71825bb1fc","g":"c38b69a561f290af","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"27","payloadType":"num","x":270,"y":1100,"wires":[["e8706e924dcd39c0"]]},{"id":"2326475a330d282a","type":"inject","z":"95da4f71825bb1fc","g":"c38b69a561f290af","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":270,"y":980,"wires":[["e8706e924dcd39c0"]]},{"id":"a329e530e4797b56","type":"inject","z":"95da4f71825bb1fc","g":"c38b69a561f290af","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"10","payloadType":"num","x":270,"y":1020,"wires":[["e8706e924dcd39c0"]]},{"id":"1137f227768652a9","type":"inject","z":"95da4f71825bb1fc","g":"c38b69a561f290af","name":"No value change, Sectors 0,12,25 yellow, green, grey","props":[{"p":"ui_update","v":"{\"sectors\":[{\"start\":0,\"color\":\"orange\"},{\"start\":12,\"color\":\"green\"},{\"start\":25,\"color\":\"#BDBDBD\"}]}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":300,"y":1200,"wires":[["e8706e924dcd39c0"]]},{"id":"fd722e9fe9c9448e","type":"inject","z":"95da4f71825bb1fc","g":"c38b69a561f290af","name":"Value: 17.5, Sectors 0,25, orange, red","props":[{"p":"ui_update","v":"{\"sectors\":[{\"start\":0,\"color\":\"orange\"},{\"start\":25,\"color\":\"red\"}]}","vt":"json"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"17.5","payloadType":"num","x":250,"y":1160,"wires":[["e8706e924dcd39c0"]]},{"id":"c4074b104a5595b8","type":"ui-group","name":"Gauge Examples","page":"a56426f48846598a","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"a56426f48846598a","type":"ui-page","name":"Gauge Examples","ui":"ID-BASE-1","path":"/examples","icon":"home","layout":"grid","theme":"b6221fc08b602ea9","order":2,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"]},{"id":"b6221fc08b602ea9","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Update the node before trying these, obviously.
7 Likes
Ok, now you've gotten a really useful gauge with those changes.
1 Like
Great work, Thanks...
playing around with your latest example flow and I don't get the same three labels. Perhaps an example of that as well? Other than that seems to work great.
[edit] so, what should be the first thing to do? update node, did I ? No. !!#%%!# works greater now
Playing with the dynamic sector thingie and the question is can you set the maximum value dynamically?
No, I have not provided that feature.
Have been playing with your gauge for a while and it works nice and I plan to use it a lot. If I may be so bold as to suggest a few things. I measure temp and humidity a lot in a lot of places. The temp and humidity are usually quite far apart in measurement, temp of 20C and humidity of 80% for example. If I put both measurements on the same scale then the temp is quite low on the scale. It would be nice to be able to have two scales on the same gauge, either one below the other or have one scale in the upper half and the other scale in the lower half. Also it would be nice to be able to set maximum scale dynamically. Not to be picky and I'm sure you have better things to do but in your spare time maybe think about it.
Looks nice at first sight but is actually a really poor UX as you look closer. 
2 horizontal bars would give a clearer view by far.
Digital world overruled the art heavily. Of course it is dedicated design. It does that one thing only. But does it with elegance not just with arbitrary green shape trying to convince you that condition is considered to be human friendly.
3 Likes
Actually, I meant what I said, it is a really poor design. I serves neither the detail nor the general meaning well because it forces the sight and the brain to process in two opposing directions causing a level of cognitive dissonance that distracts from either meaning and from the two different measures.
Form follows function generally, not the other way around.
Sorry, too much engineering coupled with too much UX design in my head. 
I'd happily own something like that for its craftsmanship but I could never consider it a "good design".
Isn't the idea that the crossover point is the key indicator, so it reduces the two different measures down to one?
Kinda missing the point gentlemen. Remote reporting
Do you mean two separate gauges? You can already do this
Can you describe the use case for that?
Comfort is combination of temperature and humidity. Not only but those are major. The analysis of relationship is clear if you see the reference. That's the cleverness of this design. I can't agree with @TotallyInformation that it is bad design. I haven't seen any digital design which talks as much with that little of elements.
3 Likes
