what do you mean on client pc?
my laptop or the raspberry pi?
Do you already have NR and mosquitto mqtt broker installed on your pi ?
mqtt-explorer is a windows app (so laptop) its not needed but can be helpfull to monitor MQTT traffic. So you can see topic names and payloads for fault finding etc,
yes i do.
i get this message in node red whats the best way of splitting this up?
{"sn":{"Time":"2022-04-09T08:10:54","DS18B20-1":{"Id":"3C01D607442F","Temperature":20.9},"DS18B20-2":{"Id":"3C01D607551B","Temperature":21.1},"DS18B20-3":{"Id":"3C01D6075AAA","Temperature":19.3},"DS18B20-4":{"Id":"3C01D607B382","Temperature":80.8},"DS18B20-5":{"Id":"3C01D607ECB7","Temperature":21.2},"DS18B20-6":{"Id":"3C01D607FD9D","Temperature":2.8},"DS18B20-7":{"Id":"3C01F096D7D9","Temperature":-15.1},"TempUnit":"C"},"ver":1}
can you share the flow that gave you that ? is just an mqtt in and debug ?
It depends on what you need to do - eg to show on dashboard you can just reference the correct msg property - eg payload.sn["DS18B20-1"].Temperature
[{"id":"6f1cbaec97840718","type":"inject","z":"32bc1133.9bf706","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"sn\":{\"Time\":\"2022-04-09T08:10:54\",\"DS18B20-1\":{\"Id\":\"3C01D607442F\",\"Temperature\":20.9},\"DS18B20-2\":{\"Id\":\"3C01D607551B\",\"Temperature\":21.1},\"DS18B20-3\":{\"Id\":\"3C01D6075AAA\",\"Temperature\":19.3},\"DS18B20-4\":{\"Id\":\"3C01D607B382\",\"Temperature\":80.8},\"DS18B20-5\":{\"Id\":\"3C01D607ECB7\",\"Temperature\":21.2},\"DS18B20-6\":{\"Id\":\"3C01D607FD9D\",\"Temperature\":2.8},\"DS18B20-7\":{\"Id\":\"3C01F096D7D9\",\"Temperature\":-15.1},\"TempUnit\":\"C\"},\"ver\":1}","payloadType":"json","x":1010,"y":360,"wires":[["a717948f4f972067","0da74e1afe41029c","1876ca87b0be109a","c8bd4f4a1bf7255f"]]},{"id":"a717948f4f972067","type":"ui_gauge","z":"32bc1133.9bf706","name":"","group":"","order":6,"width":0,"height":0,"gtype":"gage","title":"DS18B20-1","label":"units","format":"{{payload.sn[\"DS18B20-1\"].Temperature}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":1230,"y":300,"wires":[]},{"id":"0da74e1afe41029c","type":"ui_gauge","z":"32bc1133.9bf706","name":"","group":"","order":6,"width":0,"height":0,"gtype":"gage","title":"DS18B20-2","label":"units","format":"{{payload.sn[\"DS18B20-2\"].Temperature}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":1230,"y":340,"wires":[]},{"id":"c8bd4f4a1bf7255f","type":"debug","z":"32bc1133.9bf706","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1210,"y":440,"wires":[]},{"id":"1876ca87b0be109a","type":"ui_gauge","z":"32bc1133.9bf706","name":"","group":"","order":6,"width":0,"height":0,"gtype":"gage","title":"DS18B20-3","label":"units","format":"{{payload.sn[\"DS18B20-3\"].Temperature}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":1230,"y":380,"wires":[]}]
Connect this to the MQTT in node and set the tab and group in gauge nodes.....
[{"id":"a83eb32ba827c55d","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"b656262f.9f4ee8","type":"comment","z":"a83eb32ba827c55d","name":"TmpSen-Checks ----->","info":"","x":1397.0086669921875,"y":317.0017395019531,"wires":[]},{"id":"1a32f115.43a18f","type":"change","z":"a83eb32ba827c55d","name":"Boil Kettle","rules":[{"t":"set","p":"topic","pt":"msg","to":"BoilKettle","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":877.0086669921875,"y":297.0017395019531,"wires":[["c8d06b2e7b02e048"]]},{"id":"1abb841e.5a146c","type":"switch","z":"a83eb32ba827c55d","name":"If = 442F Boil","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"DS18B20-1","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":647.0086669921875,"y":297.0017395019531,"wires":[["1a32f115.43a18f"],["b619ce5b.8681a"]]},{"id":"b619ce5b.8681a","type":"switch","z":"a83eb32ba827c55d","name":"If =551B Wferm","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"3C01D607551B","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":657.0086669921875,"y":337.0017395019531,"wires":[["d0e0c004.6fd2a"],["3e0ebc54.8d7ee4"]]},{"id":"d0e0c004.6fd2a","type":"change","z":"a83eb32ba827c55d","name":"WestFermenter","rules":[{"t":"set","p":"topic","pt":"msg","to":"WestFermenter","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":897.0086669921875,"y":337.0017395019531,"wires":[[]]},{"id":"3e0ebc54.8d7ee4","type":"switch","z":"a83eb32ba827c55d","name":"If = 5AAA CFerm","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"3C01D6075AAA","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":667.0086669921875,"y":377.0017395019531,"wires":[["12701796.dd9258"],["8dc831b7.4b3a5"]]},{"id":"12701796.dd9258","type":"change","z":"a83eb32ba827c55d","name":"Center Fermenter","rules":[{"t":"set","p":"topic","pt":"msg","to":"CenterFermenter","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":907.0086669921875,"y":377.0017395019531,"wires":[[]]},{"id":"8dc831b7.4b3a5","type":"switch","z":"a83eb32ba827c55d","name":"If = B382 HLT","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"3C01D607B382","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":657.0086669921875,"y":417.0017395019531,"wires":[["9c0c8a20.b71128"],["c9cc70a.b54399"]]},{"id":"9c0c8a20.b71128","type":"change","z":"a83eb32ba827c55d","name":"HLT","rules":[{"t":"set","p":"topic","pt":"msg","to":"HLT","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":867.0086669921875,"y":417.0017395019531,"wires":[[]]},{"id":"c9cc70a.b54399","type":"switch","z":"a83eb32ba827c55d","name":"If = ECB7 Mash","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"3C01D607ECB7","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":657.0086669921875,"y":457.0017395019531,"wires":[["9c20d488.d080b8"],["a738605e.324f3"]]},{"id":"9c20d488.d080b8","type":"change","z":"a83eb32ba827c55d","name":"Mash","rules":[{"t":"set","p":"topic","pt":"msg","to":"Mash","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":867.0086669921875,"y":457.0017395019531,"wires":[[]]},{"id":"a738605e.324f3","type":"switch","z":"a83eb32ba827c55d","name":"If = FD9D Eferm","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"3C01D607FD9D","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":657.0086669921875,"y":497.0017395019531,"wires":[["8ccbe599.592bb8"],["1f08a207.0316be"]]},{"id":"8ccbe599.592bb8","type":"change","z":"a83eb32ba827c55d","name":"EastFermenter","rules":[{"t":"set","p":"topic","pt":"msg","to":"EastFermenter","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":897.0086669921875,"y":497.0017395019531,"wires":[[]]},{"id":"1f08a207.0316be","type":"switch","z":"a83eb32ba827c55d","name":"If =D7D9 Glycol","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"3C01F096D7D9","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":657.0086669921875,"y":537.0017395019531,"wires":[["7dd0da09.27a764"],[]]},{"id":"7dd0da09.27a764","type":"change","z":"a83eb32ba827c55d","name":"Glycol","rules":[{"t":"set","p":"topic","pt":"msg","to":"Glycol","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":867.0086669921875,"y":537.0017395019531,"wires":[[]]},{"id":"b63ec7e2eb7e8742","type":"mqtt in","z":"a83eb32ba827c55d","name":"","topic":"tasmota/discovery/483FDA182C52/sensors","qos":"1","datatype":"auto","broker":"8db3fac0.99dd48","nl":false,"rap":false,"inputs":0,"x":343.6666564941406,"y":33.66666793823242,"wires":[["47f9a07e53311609","1abb841e.5a146c"]]},{"id":"47f9a07e53311609","type":"debug","z":"a83eb32ba827c55d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":755.1335411071777,"y":102.06622505187988,"wires":[]},{"id":"c8d06b2e7b02e048","type":"debug","z":"a83eb32ba827c55d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1176.1266198566702,"y":177.15858010684744,"wires":[]},{"id":"8db3fac0.99dd48","type":"mqtt-broker","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""}]
You should think about giving your esp a topic so if you end up with more than 1 you know whats what.
The discovery topic you are using is meant for home assistant I think.
You should use tele/your_esp_topic/SENSOR
Then go into logging menu and set Telemetry period as you require eg 30 seconds
1 Like
Any luck ?
got to go now may l be around later, keep us posted 
...looks complicated.
Maybe this gives you some more examples on how to handle the different sensors and temperature values:
[{"id":"624963ed82f87a01","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"4f9153320964b9c5","type":"mqtt in","z":"624963ed82f87a01","name":"tasmota-shelly1.2","topic":"tele/shelly1.2/SENSOR","qos":"2","datatype":"json","broker":"1701f33596afcf6b","nl":false,"rap":true,"rh":0,"inputs":0,"x":200,"y":380,"wires":[["3615e5f9d45a16a4"]]},{"id":"f2e416e7958b7ecb","type":"debug","z":"624963ed82f87a01","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1090,"y":380,"wires":[]},{"id":"3615e5f9d45a16a4","type":"split","z":"624963ed82f87a01","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","x":390,"y":380,"wires":[["b880d5419d323126"]]},{"id":"b880d5419d323126","type":"switch","z":"624963ed82f87a01","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"DS18B20-1","vt":"str"},{"t":"eq","v":"DS18B20-2","vt":"str"},{"t":"eq","v":"DS18B20-3","vt":"str"}],"checkall":"false","repair":false,"outputs":3,"x":550,"y":380,"wires":[["6c0f9619a512733a"],["6c0f9619a512733a"],["6c0f9619a512733a"]]},{"id":"6c0f9619a512733a","type":"change","z":"624963ed82f87a01","name":"set payload to Temperature value","rules":[{"t":"move","p":"payload.Temperature","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":820,"y":380,"wires":[["f2e416e7958b7ecb"]]},{"id":"1701f33596afcf6b","type":"mqtt-broker","name":"mosquitto-1","broker":"192.168.10.22","port":"1883","clientid":"NRofficialv2","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""}]
Ok , i have been reading and watching video's and something isn't clicking in my head
on how to handle the messages.
i have it at least where i have each sensor going out on its on direction.
but i cant get the temp data to work with a guage yet.
i copied the information from the debug node.
please explain what to do with this msg.payload
{"topic":"DS18B20-1","payload":{"Id":"3C01D607442F","Temperature":18.9},"qos":0,"retain":false,"_topic":"Railtemp1/SENSOR","parts":{"id":"0f7b85538a9dc02e","type":"object","key":"DS18B20-1","index":1,"count":9},"_msgid":"9a5c1f02d4c5aa9a"}
In the gauge setting Value format you need to choose the correct msg property.
The message above looks like it comes from a split node ?
The property you are intested in is Temperature contained in the payload object.
The path to that is then payload.Temperature, to put this in the guage you need to type {{payload.Temperature}} into Value format.
...msg.payload is an object structure.
As already pointed out by @smcgann99 you can access its elements by name (msg.payload.Temperature) or have a look in my example, where I used a change node after the switch to move the value directly into the payload.
Use/connect more debug nodes to evaluate the structure of the msg,
so im using a custom guage and i have to convert to F
here is the custom guage
[{"id":"a579f17634aa79e7","type":"ui_template","z":"1f851c1.28701e4","group":"4894865519cc16c4","name":"Hot Liqour Tank","order":5,"width":6,"height":6,"format":"<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"--gauge-value:0; --container-size:6; --gn-distance:14; --ga-tick-count:22; --ga-subtick-count:220; --g-unit:''°F'\">\n <div id=\"bgr\" class=\"g-body\">\n <div class=\"g-ring\">\n <div class=\"g-rivets\">\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n </div>\n <div class=\"g-plate\">\n <div class=\"g-ticks\">\n <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:13;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:15;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:17;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:19;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:21;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:23;\"></div>\n </div>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:11;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:31;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:51;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:71;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:91;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:111;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:131;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:151;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:171;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:191;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:211;\"></div>\n \n </div>\n <div class=\"g-nums\">\n <div class=\"g-num\" style=\"--ga-tick:1;\" >0</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">60</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">80</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">100</div>\n <div class=\"g-num\" style=\"--ga-tick:13;\">120</div>\n <div class=\"g-num\" style=\"--ga-tick:15;\">140</div>\n <div class=\"g-num\" style=\"--ga-tick:17;\">160</div>\n <div class=\"g-num\" style=\"--ga-tick:19;\">180</div>\n <div class=\"g-num\" style=\"--ga-tick:21;\">200</div>\n <div class=\"g-num\" style=\"--ga-tick:23;\">220</div>\n \n </div>\n <div class=\"g-label\">HLT </div>\n <div class=\"g-needle\"></div>\n <div class=\"g-needle-ring\"></div>\n <div id=\"{{'gauge_val_'+$id}}\" class=\"g-val\"></div>\n </div>\n </div>\n </div>\n</div>\n<script>\n(function(scope) {\n let min = 0;\n let max = 100;\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n const v = Math.floor(((msg.payload - min) / (max - min)) * (100 * 0.46));\n const d = Math.floor(((msg.payload - min) / (max - min)) * 100);\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = d;\n }\n \n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1465.9147262573242,"y":1259.034755706787,"wires":[[]]},{"id":"4894865519cc16c4","type":"ui_group","name":"Hot Liquor Tun","tab":"a74ffe3d.4eb73","order":4,"disp":true,"width":12,"collapse":false},{"id":"a74ffe3d.4eb73","type":"ui_tab","name":"Brewery","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
also needs this one to display properly
[{"id":"1981e1b781103b1a","type":"ui_template","z":"1f851c1.28701e4","group":"f914d5e93fc3ec46","name":"gauge-style","order":1,"width":0,"height":0,"format":"<style id=\"hotNipi-gauge\">\n:root{\n --needle-color:#001100;\n --needle-second-color:#ff0000;\n --red-ticks:9;\n --sec-high-color:#ff00004f;\n --sec-normal-color:#00ff004f;\n --sec-low-color:#0000ff4f;\n --sec-sub-color:#0000ff8f;\n}\n.g-container {\n padding-top: 3px;\n padding-bottom: 3px;\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n user-select:none;\n}\n \n.g-body {\n width: 98%;\n height: 98%;\n border-radius: 15%;\n position: relative;\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 5px 8px #00000045;\n background: linear-gradient(0deg, rgba(78,78,78,1) 0%, rgba(215,215,215,1) 99%, rgba(236,236,236,1) 100%);\n}\n\n.g-body::before { \n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==\"); \n background-repeat: repeat;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n opacity: 0.1;\n border-radius:15%;\n}\n\n.g-sector{\n width: 100%;\n height: 100%;\n position: absolute;\n top: 50%;\n left: 50%;\n \n transform-origin: 0 0;\n}\n.g-sector-high {\n background: var(--sec-high-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n.g-sector-normal {\n background:var(--sec-normal-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n.g-sector-low {\n background:var(--sec-low-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n.g-sector-sub {\n background:var(--sec-sub-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n\n.g-ring {\n width: 94%;\n height: 94%;\n border-radius: 50%;\n position: relative;\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n background: linear-gradient(180deg, rgba(78,78,78,1) 0%, rgba(215,215,215,1) 99%, rgba(236,236,236,1) 100%);\n}\n.g-plate {\n overflow: hidden;\n width: 93%;\n height: 93%;\n border-radius: 50%;\n position: relative;\n box-shadow: inset 0 0 15px #000000a3;\n background: radial-gradient(circle, #dd8400 3%, rgb(196 205 209) 1%, rgb(177 183 186) 40%, rgb(191 193 194) 100%);\n}\n.g-plate-bright {\n overflow:hidden;\n width: 90%;\n height: 90%;\n border-radius: 50%;\n position: relative;\n box-shadow: inset 0 0 10px yellow;\n background: radial-gradient(circle, #ed9400 3%, rgb(255, 255, 255) 1%, rgb(255, 255, 158) 40%, rgb(148, 154, 160) 100%);\n}\n\n\n.g-ticks {\n position: absolute;\n top:0;\n left:0;\n width: 100%;\n height: 100%;\n filter: drop-shadow(2px 4px 6px black);\n}\n.g-tick {\n transform: rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg)));\n background: #000;\n position: relative;\n left: 0;\n top: 50%;\n width: 100%;\n height: 1px;\n margin-bottom: -1px;\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(0 0 0 / 60%) 2%,rgb(0 0 0 / 60%) 10%,rgba(0,0,0,0) 10%);\n}\n.g-subtick {\n transform: rotate(calc(calc(270deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-subtick-count)) + 45deg)));\n background: #000;\n position: relative;\n left: 0;\n top: 50%;\n width: 100%;\n height: 1px;\n margin-bottom: -1px;\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(0 0 0 / 40%) 2%,rgb(0 0 0 / 40%) 6%,rgba(0,0,0,0) 6%);\n}\n\n.g-num {\n position: absolute;\n top: 50%;\n left: 50%;\n text-align: center;\n transform: translate(-50%, -50%) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg /\n var(--ga-tick-count)) + 45deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) *-1 -\n calc(calc(270deg / var(--ga-tick-count))*-1 - 45deg)));\n}\n\n.g-nums {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n color: #000000a1;\n font-size: calc(var(--container-size) * 20%);\n font-weight: 500;\n filter: drop-shadow(2px 4px 10px black);\n}\n.g-needle {\n transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));\n transition: transform 1s;\n background: #000;\n position: absolute;\n left: 0;\n top: 49%;\n width: 100%;\n height: 2%;\n filter:drop-shadow(0px 1px 3px #00000080);\n background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-color) 15%,var(--needle-color) 50%,rgba(0,0,0,0) 50%);\n}\n.g-needle-second {\n transform: rotate(calc(270deg * calc(var(--gauge-value-second, 0deg) / 100) - 45deg));\n transition: transform 1s;\n background: #000;\n position: absolute;\n left: 0;\n top: 49%;\n width: 100%;\n height: 2%;\n filter:drop-shadow(0px 1px 3px #ff000080); \n background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-second-color) 15%,var(--needle-second-color) 50%,rgba(0,0,0,0) 50%);\n}\n.g-needle-ring {\n position: absolute;\n width: calc(var(--container-size) * 1.5%);\n height: calc(var(--container-size) * 1.5%);\n top: 50%;\n left: 50%;\n background: var(--needle-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 1px 4px #0000009c;\n}\n.g-val{\n position: absolute;\n text-align: center;\n left: 50%;\n bottom: 8%;\n width: 80px;\n transform: translateX(-50%);\n font-family: monospace;\n font-size: calc(var(--container-size) * 40%);\n color: #000000a1;\n filter: drop-shadow(2px 3px 2px #00000050);\n}\n\n.g-label{\n position: absolute;\n text-align: center;\n left: 50%;\n top: 58%;\n width: 100%;\n transform: translateX(-50%);\n font-family: monospace;\n font-size: calc(var(--container-size) * 18%);\n color: #000000a1;\n filter: drop-shadow(2px 3px 2px #00000080);\n}\n.g-label::after{\n content: var(--g-unit);\n font-size: clamp(1em,calc(var(--container-size) * 40%),1.5em);\n position: absolute;\n left: 0;\n top: 100%;\n width: 100%;\n height: 100%;\n}\n.g-rivets{\n position: absolute;\n left:0;\n top:0;\n width: 100%;\n height: 100%;\n}\n\n.g-rivet {\n position: absolute;\n width: calc(var(--container-size) * 2px);\n height: calc(var(--container-size) * 2px);\n border-radius: 50px;\n background: linear-gradient(135deg, #adadad 0%,#d3d3d3 51%,#d1d1d1 68%,#8c8c8c 100%);\n box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);\n border: 1px solid rgba(255,255,255,0.1);\n}\n.g-rivet:nth-child(1){\n top:calc(var(--container-size) * 1.5px);\n left:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(2){\n top:calc(var(--container-size) * 1.5px);\n right:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(3){\n bottom:calc(var(--container-size) * 1.5px);\n left:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(4){\n bottom:calc(var(--container-size) * 1.5px);\n right:calc(var(--container-size) * 1.5px);\n}\n\n.g-rivet::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n width: calc(var(--container-size) * 10%);\n height: calc(var(--container-size) * 10%);\n box-shadow: inset 0px 1px 2px #222;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n border-bottom: 1px solid rgba(255,255,255,0.3);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1685.1143798828125,"y":797.0347290039062,"wires":[[]]},{"id":"09ad4768ace80c25","type":"ui_template","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","name":"0-220","order":50,"width":4,"height":1,"format":"<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"--gauge-value:0; --container-size:6; --gn-distance:14; --ga-tick-count:11; --ga-subtick-count:22; --g-unit:''°F'\">\n <div id=\"bgr\" class=\"g-body\">\n <div class=\"g-ring\">\n <div class=\"g-rivets\">\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n </div>\n <div class=\"g-plate\">\n <div class=\"g-ticks\">\n <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:10;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:12;\"></div>\n </div>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:10;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:12;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:14;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:16;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:18;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:20;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:22;\"></div>\n \n </div>\n <div class=\"g-nums\">\n <div class=\"g-num\" style=\"--ga-tick:1;\" >0</div>\n <div class=\"g-num\" style=\"--ga-tick:2;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:4;\">60</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">80</div>\n <div class=\"g-num\" style=\"--ga-tick:6;\">100</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">120</div>\n <div class=\"g-num\" style=\"--ga-tick:8;\">140</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">160</div>\n <div class=\"g-num\" style=\"--ga-tick:10;\">180</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">200</div>\n <div class=\"g-num\" style=\"--ga-tick:12;\">220</div>\n \n </div>\n <div class=\"g-label\">Boil Kettle </div>\n <div class=\"g-needle\"></div>\n <div class=\"g-needle-ring\"></div>\n <div id=\"{{'gauge_val_'+$id}}\" class=\"g-val\"></div>\n </div>\n </div>\n </div>\n</div>\n<script>\n(function(scope) {\n let min = 0;\n let max = 220;\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n const val = msg.payload\n const v = ((val - min) / (max - min)) * 100;\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = val.toFixed(1);\n }\n \n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1686.1143798828125,"y":851.0347290039062,"wires":[[]]},{"id":"f914d5e93fc3ec46","type":"ui_group","name":"Group 1","tab":"99204bb9016ca23c","order":2,"disp":false,"width":"6","collapse":false},{"id":"34c8e5f1.3881fa","type":"ui_group","name":"test","tab":"85b0e00f12eded88","order":1,"disp":true,"width":6,"collapse":false},{"id":"99204bb9016ca23c","type":"ui_tab","name":"Zacksquatchworks","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"85b0e00f12eded88","type":"ui_tab","name":"test 1","icon":"dashboard","disabled":false,"hidden":false}]
...show us your flow, not only single nodes...my crystal ball is broken atm
ok so i have it working with a standard UI gauge,
I have also figured out how to change to F using unit-converter node.
ok its going to be in 2 parts
[{"id":"99a0ddb1.7b3e4","type":"unit-converter","z":"1f851c1.28701e4","category":"temperature","inputUnit":"C","outputUnit":"F","inputField":"payload.Temperature","outputField":"payload.Temperature","inputFieldType":"msg","outputFieldType":"msg","roundOutputField":true,"outputFieldDecimals":2,"name":"442f","x":1231.0000076293945,"y":856.0000104904175,"wires":[["dd13811052cd95db","56c51ef94bcf5ad2","4e9b4d84eca3fd6a"]]},{"id":"dd13811052cd95db","type":"ui_text","z":"1f851c1.28701e4","group":"3e7d17b4939773da","order":2,"width":6,"height":1,"name":"","label":"Boil Kettle Temp","format":"{{msg.payload}}","layout":"row-spread","x":1493.0000076293945,"y":812.0000104904175,"wires":[]},{"id":"4e9b4d84eca3fd6a","type":"debug","z":"1f851c1.28701e4","name":"boil","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1458.0000076293945,"y":851.0000104904175,"wires":[]},{"id":"56c51ef94bcf5ad2","type":"ui_template","z":"1f851c1.28701e4","group":"3e7d17b4939773da","name":"Boil Kettle","order":5,"width":6,"height":6,"format":"<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"--gauge-value:0; --container-size:6; --gn-distance:14; --ga-tick-count:22; --ga-subtick-count:220; --g-unit:''°F'\">\n <div id=\"bgr\" class=\"g-body\">\n <div class=\"g-ring\">\n <div class=\"g-rivets\">\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n </div>\n <div class=\"g-plate\">\n <div class=\"g-ticks\">\n <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:13;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:15;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:17;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:19;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:21;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:23;\"></div>\n </div>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:11;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:31;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:51;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:71;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:91;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:111;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:131;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:151;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:171;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:191;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:211;\"></div>\n \n </div>\n <div class=\"g-nums\">\n <div class=\"g-num\" style=\"--ga-tick:1;\" >0</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">60</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">80</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">100</div>\n <div class=\"g-num\" style=\"--ga-tick:13;\">120</div>\n <div class=\"g-num\" style=\"--ga-tick:15;\">140</div>\n <div class=\"g-num\" style=\"--ga-tick:17;\">160</div>\n <div class=\"g-num\" style=\"--ga-tick:19;\">180</div>\n <div class=\"g-num\" style=\"--ga-tick:21;\">200</div>\n <div class=\"g-num\" style=\"--ga-tick:23;\">220</div>\n \n </div>\n <div class=\"g-label\">Boil Kettle </div>\n <div class=\"g-needle\"></div>\n <div class=\"g-needle-ring\"></div>\n <div id=\"{{'gauge_val_'+$id}}\" class=\"g-val\"></div>\n </div>\n </div>\n </div>\n</div>\n<script>\n(function(scope) {\n let min = 0;\n let max = 100;\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n const v = Math.floor(((msg.payload.Temperature - min) / (max - min)) * (100 * 0.46));\n const d = Math.floor(((msg.payload.Temperature - min) / (max - min)) * 100);\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = d;\n }\n \n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1469.447883605957,"y":888.7013654708862,"wires":[[]]},{"id":"1981e1b781103b1a","type":"ui_template","z":"1f851c1.28701e4","group":"f914d5e93fc3ec46","name":"gauge-style","order":1,"width":0,"height":0,"format":"<style id=\"hotNipi-gauge\">\n:root{\n --needle-color:#001100;\n --needle-second-color:#ff0000;\n --red-ticks:9;\n --sec-high-color:#ff00004f;\n --sec-normal-color:#00ff004f;\n --sec-low-color:#0000ff4f;\n --sec-sub-color:#0000ff8f;\n}\n.g-container {\n padding-top: 3px;\n padding-bottom: 3px;\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n user-select:none;\n}\n \n.g-body {\n width: 98%;\n height: 98%;\n border-radius: 15%;\n position: relative;\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 5px 8px #00000045;\n background: linear-gradient(0deg, rgba(78,78,78,1) 0%, rgba(215,215,215,1) 99%, rgba(236,236,236,1) 100%);\n}\n\n.g-body::before { \n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==\"); \n background-repeat: repeat;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n opacity: 0.1;\n border-radius:15%;\n}\n\n.g-sector{\n width: 100%;\n height: 100%;\n position: absolute;\n top: 50%;\n left: 50%;\n \n transform-origin: 0 0;\n}\n.g-sector-high {\n background: var(--sec-high-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n.g-sector-normal {\n background:var(--sec-normal-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n.g-sector-low {\n background:var(--sec-low-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n.g-sector-sub {\n background:var(--sec-sub-color);\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n\n.g-ring {\n width: 94%;\n height: 94%;\n border-radius: 50%;\n position: relative;\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n background: linear-gradient(180deg, rgba(78,78,78,1) 0%, rgba(215,215,215,1) 99%, rgba(236,236,236,1) 100%);\n}\n.g-plate {\n overflow: hidden;\n width: 93%;\n height: 93%;\n border-radius: 50%;\n position: relative;\n box-shadow: inset 0 0 15px #000000a3;\n background: radial-gradient(circle, #dd8400 3%, rgb(196 205 209) 1%, rgb(177 183 186) 40%, rgb(191 193 194) 100%);\n}\n.g-plate-bright {\n overflow:hidden;\n width: 90%;\n height: 90%;\n border-radius: 50%;\n position: relative;\n box-shadow: inset 0 0 10px yellow;\n background: radial-gradient(circle, #ed9400 3%, rgb(255, 255, 255) 1%, rgb(255, 255, 158) 40%, rgb(148, 154, 160) 100%);\n}\n\n\n.g-ticks {\n position: absolute;\n top:0;\n left:0;\n width: 100%;\n height: 100%;\n filter: drop-shadow(2px 4px 6px black);\n}\n.g-tick {\n transform: rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg)));\n background: #000;\n position: relative;\n left: 0;\n top: 50%;\n width: 100%;\n height: 1px;\n margin-bottom: -1px;\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(0 0 0 / 60%) 2%,rgb(0 0 0 / 60%) 10%,rgba(0,0,0,0) 10%);\n}\n.g-subtick {\n transform: rotate(calc(calc(270deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-subtick-count)) + 45deg)));\n background: #000;\n position: relative;\n left: 0;\n top: 50%;\n width: 100%;\n height: 1px;\n margin-bottom: -1px;\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(0 0 0 / 40%) 2%,rgb(0 0 0 / 40%) 6%,rgba(0,0,0,0) 6%);\n}\n\n.g-num {\n position: absolute;\n top: 50%;\n left: 50%;\n text-align: center;\n transform: translate(-50%, -50%) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg /\n var(--ga-tick-count)) + 45deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) *-1 -\n calc(calc(270deg / var(--ga-tick-count))*-1 - 45deg)));\n}\n\n.g-nums {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n color: #000000a1;\n font-size: calc(var(--container-size) * 20%);\n font-weight: 500;\n filter: drop-shadow(2px 4px 10px black);\n}\n.g-needle {\n transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));\n transition: transform 1s;\n background: #000;\n position: absolute;\n left: 0;\n top: 49%;\n width: 100%;\n height: 2%;\n filter:drop-shadow(0px 1px 3px #00000080);\n background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-color) 15%,var(--needle-color) 50%,rgba(0,0,0,0) 50%);\n}\n.g-needle-second {\n transform: rotate(calc(270deg * calc(var(--gauge-value-second, 0deg) / 100) - 45deg));\n transition: transform 1s;\n background: #000;\n position: absolute;\n left: 0;\n top: 49%;\n width: 100%;\n height: 2%;\n filter:drop-shadow(0px 1px 3px #ff000080); \n background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-second-color) 15%,var(--needle-second-color) 50%,rgba(0,0,0,0) 50%);\n}\n.g-needle-ring {\n position: absolute;\n width: calc(var(--container-size) * 1.5%);\n height: calc(var(--container-size) * 1.5%);\n top: 50%;\n left: 50%;\n background: var(--needle-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 1px 4px #0000009c;\n}\n.g-val{\n position: absolute;\n text-align: center;\n left: 50%;\n bottom: 8%;\n width: 80px;\n transform: translateX(-50%);\n font-family: monospace;\n font-size: calc(var(--container-size) * 40%);\n color: #000000a1;\n filter: drop-shadow(2px 3px 2px #00000050);\n}\n\n.g-label{\n position: absolute;\n text-align: center;\n left: 50%;\n top: 58%;\n width: 100%;\n transform: translateX(-50%);\n font-family: monospace;\n font-size: calc(var(--container-size) * 18%);\n color: #000000a1;\n filter: drop-shadow(2px 3px 2px #00000080);\n}\n.g-label::after{\n content: var(--g-unit);\n font-size: clamp(1em,calc(var(--container-size) * 40%),1.5em);\n position: absolute;\n left: 0;\n top: 100%;\n width: 100%;\n height: 100%;\n}\n.g-rivets{\n position: absolute;\n left:0;\n top:0;\n width: 100%;\n height: 100%;\n}\n\n.g-rivet {\n position: absolute;\n width: calc(var(--container-size) * 2px);\n height: calc(var(--container-size) * 2px);\n border-radius: 50px;\n background: linear-gradient(135deg, #adadad 0%,#d3d3d3 51%,#d1d1d1 68%,#8c8c8c 100%);\n box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);\n border: 1px solid rgba(255,255,255,0.1);\n}\n.g-rivet:nth-child(1){\n top:calc(var(--container-size) * 1.5px);\n left:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(2){\n top:calc(var(--container-size) * 1.5px);\n right:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(3){\n bottom:calc(var(--container-size) * 1.5px);\n left:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(4){\n bottom:calc(var(--container-size) * 1.5px);\n right:calc(var(--container-size) * 1.5px);\n}\n\n.g-rivet::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n width: calc(var(--container-size) * 10%);\n height: calc(var(--container-size) * 10%);\n box-shadow: inset 0px 1px 2px #222;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n border-bottom: 1px solid rgba(255,255,255,0.3);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1685.1143798828125,"y":797.0347290039062,"wires":[[]]},{"id":"09ad4768ace80c25","type":"ui_template","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","name":"0-220","order":50,"width":4,"height":1,"format":"<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"--gauge-value:0; --container-size:6; --gn-distance:14; --ga-tick-count:11; --ga-subtick-count:22; --g-unit:''°F'\">\n <div id=\"bgr\" class=\"g-body\">\n <div class=\"g-ring\">\n <div class=\"g-rivets\">\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n </div>\n <div class=\"g-plate\">\n <div class=\"g-ticks\">\n <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:10;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:12;\"></div>\n </div>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:10;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:12;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:14;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:16;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:18;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:20;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:22;\"></div>\n \n </div>\n <div class=\"g-nums\">\n <div class=\"g-num\" style=\"--ga-tick:1;\" >0</div>\n <div class=\"g-num\" style=\"--ga-tick:2;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:4;\">60</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">80</div>\n <div class=\"g-num\" style=\"--ga-tick:6;\">100</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">120</div>\n <div class=\"g-num\" style=\"--ga-tick:8;\">140</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">160</div>\n <div class=\"g-num\" style=\"--ga-tick:10;\">180</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">200</div>\n <div class=\"g-num\" style=\"--ga-tick:12;\">220</div>\n \n </div>\n <div class=\"g-label\">Boil Kettle </div>\n <div class=\"g-needle\"></div>\n <div class=\"g-needle-ring\"></div>\n <div id=\"{{'gauge_val_'+$id}}\" class=\"g-val\"></div>\n </div>\n </div>\n </div>\n</div>\n<script>\n(function(scope) {\n let min = 0;\n let max = 220;\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n const val = msg.payload\n const v = ((val - min) / (max - min)) * 100;\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = val.toFixed(1);\n }\n \n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1686.1143798828125,"y":851.0347290039062,"wires":[[]]},{"id":"9c3d32a00a61cd5f","type":"debug","z":"1f851c1.28701e4","name":"442fsensor","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1026.5643310546875,"y":895.5963913940429,"wires":[]},{"id":"4162dc019210439f","type":"link in","z":"1f851c1.28701e4","name":"","links":["4ccb4bd562321ec6"],"x":1016.5625276565552,"y":842.8950634002686,"wires":[["99a0ddb1.7b3e4","207bcda41f9fbadc"]]},{"id":"207bcda41f9fbadc","type":"debug","z":"1f851c1.28701e4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"te","targetType":"msg","statusVal":"","statusType":"auto","x":1113.23095703125,"y":776.4904648803711,"wires":[]},{"id":"3e7d17b4939773da","type":"ui_group","name":"BoilKettle","tab":"a74ffe3d.4eb73","order":2,"disp":true,"width":12,"collapse":false},{"id":"f914d5e93fc3ec46","type":"ui_group","name":"Group 1","tab":"99204bb9016ca23c","order":2,"disp":false,"width":"6","collapse":false},{"id":"34c8e5f1.3881fa","type":"ui_group","name":"test","tab":"85b0e00f12eded88","order":1,"disp":true,"width":6,"collapse":false},{"id":"a74ffe3d.4eb73","type":"ui_tab","name":"Brewery","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"99204bb9016ca23c","type":"ui_tab","name":"Zacksquatchworks","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"85b0e00f12eded88","type":"ui_tab","name":"test 1","icon":"dashboard","disabled":false,"hidden":false}]
This is the actual guage im trying to use. we are just working with the Boil Kettle as of now.
this is the stage coming from MQTT
[{"id":"a83eb32ba827c55d","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"d0e0c004.6fd2a","type":"change","z":"a83eb32ba827c55d","name":"WestFermenter","rules":[{"t":"set","p":"topic","pt":"msg","to":"WestFermenter","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1180.0087356567383,"y":277.0017795562744,"wires":[[]]},{"id":"12701796.dd9258","type":"change","z":"a83eb32ba827c55d","name":"Center Fermenter","rules":[{"t":"set","p":"topic","pt":"msg","to":"CenterFermenter","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1189.00883102417,"y":415.0017681121826,"wires":[[]]},{"id":"9c0c8a20.b71128","type":"change","z":"a83eb32ba827c55d","name":"HLT","rules":[{"t":"set","p":"topic","pt":"msg","to":"HLT","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1151.0087928771973,"y":483.0017499923706,"wires":[[]]},{"id":"9c20d488.d080b8","type":"change","z":"a83eb32ba827c55d","name":"Mash","rules":[{"t":"set","p":"topic","pt":"msg","to":"Mash","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1150.008804321289,"y":585.0016822814941,"wires":[[]]},{"id":"8ccbe599.592bb8","type":"change","z":"a83eb32ba827c55d","name":"EastFermenter","rules":[{"t":"set","p":"topic","pt":"msg","to":"EastFermenter","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1180.0087127685547,"y":688.0017127990723,"wires":[[]]},{"id":"7dd0da09.27a764","type":"change","z":"a83eb32ba827c55d","name":"Glycol","rules":[{"t":"set","p":"topic","pt":"msg","to":"Glycol","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1152.0086975097656,"y":787.0017709732056,"wires":[[]]},{"id":"b63ec7e2eb7e8742","type":"mqtt in","z":"a83eb32ba827c55d","name":"","topic":"Railtemp1/SENSOR","qos":"1","datatype":"auto","broker":"8db3fac0.99dd48","nl":false,"rap":false,"inputs":0,"x":196.66666412353516,"y":41.66667079925537,"wires":[["47f9a07e53311609","361b5baba80624fb"]]},{"id":"47f9a07e53311609","type":"debug","z":"a83eb32ba827c55d","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":755.1335411071777,"y":102.06622505187988,"wires":[]},{"id":"c8d06b2e7b02e048","type":"debug","z":"a83eb32ba827c55d","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"boil","targetType":"msg","statusVal":"","statusType":"auto","x":1159.1267700195312,"y":65.15860176086426,"wires":[]},{"id":"212da3aa222c8b91","type":"debug","z":"a83eb32ba827c55d","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":658.4107642080271,"y":158.58272871365858,"wires":[]},{"id":"361b5baba80624fb","type":"json","z":"a83eb32ba827c55d","name":"","property":"payload","action":"","pretty":false,"x":352.0069580078125,"y":89.97136087646484,"wires":[["212da3aa222c8b91","c5bea3284b1e541a"]]},{"id":"a147d8c8043979dd","type":"change","z":"a83eb32ba827c55d","name":"Boil","rules":[{"t":"change","p":"topic","pt":"msg","from":"DS18b20-1","fromt":"str","to":"Boil","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":971.008674621582,"y":148.0018072128296,"wires":[["c8d06b2e7b02e048"]]},{"id":"4ccb4bd562321ec6","type":"link out","z":"a83eb32ba827c55d","name":"Boil","mode":"link","links":["4162dc019210439f"],"x":1121.5591135025024,"y":151.88283920288086,"wires":[]},{"id":"c5bea3284b1e541a","type":"split","z":"a83eb32ba827c55d","name":"","splt":"\\n","spltType":"str","arraySplt":"1","arraySpltType":"len","stream":true,"addname":"topic","x":392.00695037841797,"y":182.90714168548584,"wires":[["ba96668845a56017","69e28bf5.580afc","4f747c81cec09094"]]},{"id":"69e28bf5.580afc","type":"change","z":"a83eb32ba827c55d","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"\"Railtemp1/SENSOR/\" & key","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":438.00867462158203,"y":298.0017375946045,"wires":[[]]},{"id":"ba96668845a56017","type":"debug","z":"a83eb32ba827c55d","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":691.5642700195312,"y":218.04428262939453,"wires":[]},{"id":"b7ba0628152a2d90","type":"debug","z":"a83eb32ba827c55d","name":"boil","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1256.5642547607422,"y":235.92799949645996,"wires":[]},{"id":"d76fc741de6f9ff8","type":"debug","z":"a83eb32ba827c55d","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1183.5660400390625,"y":308.9350242614746,"wires":[]},{"id":"4f747c81cec09094","type":"switch","z":"a83eb32ba827c55d","name":"If =442FBOIL","property":"payload.Id","propertyType":"msg","rules":[{"t":"cont","v":"3C01D607442","vt":"str"},{"t":"cont","v":"3C01D607551B","vt":"str"},{"t":"cont","v":"3C01D6075AAA","vt":"str"},{"t":"cont","v":"3C01D607B382","vt":"str"},{"t":"cont","v":"3C01D607ECB7","vt":"str"},{"t":"cont","v":"3C01D607FD9D","vt":"str"},{"t":"cont","v":"3C01F096D7D9","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":8,"x":467.0086441040039,"y":526.0017242431641,"wires":[["a147d8c8043979dd","b7ba0628152a2d90","4ccb4bd562321ec6","e3be74eea8c5a816"],["d76fc741de6f9ff8","d0e0c004.6fd2a"],["12701796.dd9258"],["9c0c8a20.b71128"],["9c20d488.d080b8"],["8ccbe599.592bb8"],["7dd0da09.27a764"],[]]},{"id":"7cec1889440cc7be","type":"comment","z":"a83eb32ba827c55d","name":"Sensor address legend","info":"Boil id 3C01D607442F\nWestF3C01D607551B\nCferm3C01D6075AAA\nHlt3C01D607B382\nMash3C01D607ECB7\nEferm3C01D607FD9D\nGlycol3C01F096D7D9\n","x":173.56597900390625,"y":121.87070274353027,"wires":[]},{"id":"944f65f9644713a9","type":"ui_gauge","z":"a83eb32ba827c55d","name":"","group":"251e880a.3e91e8","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{payload.Temperature}}","min":"-100","max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1204.670223236084,"y":176.44704818725586,"wires":[]},{"id":"e3be74eea8c5a816","type":"unit-converter","z":"a83eb32ba827c55d","category":"temperature","inputUnit":"C","outputUnit":"F","inputField":"payload.Temperature","outputField":"payload.Temperature","inputFieldType":"msg","outputFieldType":"msg","roundOutputField":true,"outputFieldDecimals":2,"name":"442f","x":916.0086669921875,"y":305.0017395019531,"wires":[["944f65f9644713a9"]]},{"id":"8db3fac0.99dd48","type":"mqtt-broker","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"251e880a.3e91e8","type":"ui_group","name":"Profile","tab":"42b914b0.66a0ac","order":1,"disp":true,"width":"10","collapse":false},{"id":"42b914b0.66a0ac","type":"ui_tab","name":"Main","icon":"dashboard","order":1}]
bottom blue node labled Boil Kettle is the node i have changed info in
the blue node labeled Hot Liqour Tank has orginalset info see difference of pictures below.
...so, you are saying it does work, if the msg.payload is just a single value, not an object (,Temperatue)?
Try this change node before the Gauge, then use the Gauge unmodified, with only msg.payload.
[{"id":"9cb40896823b2041","type":"change","z":"a83eb32ba827c55d","name":"set payload to Temperature value","rules":[{"t":"move","p":"payload.Temperature","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":240,"wires":[["944f65f9644713a9"]]}]
Or in tasmota console type command : SetOption8
Show temperature in
0 = Celsius (default)
1 = Fahrenheit
1 Like
