Acurite 5n1 rtl_433 WS
Temperature and Humidity
This is just a sample on how a weather station with 433mhz rf signal can be captured using rtl_433. Thanks to the makers of contrib rtl_433.
Copy JSON
Note: some third-party nodes may appear with blank styling, and not as they appear in the Node-RED Editor.
Copy [{"id":"7d4e594dc5220c40","type":"debug","z":"1d4eefd84d9113e8","name":"temperature","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":80,"wires":[]},{"id":"d26592617a2ad4c0","type":"switch","z":"1d4eefd84d9113e8","name":"filter NaN values","property":"payload","propertyType":"msg","rules":[{"t":"cont","v":"NaN","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":420,"y":160,"wires":[[],["7d4e594dc5220c40","32e85dd0ed4eeee5"]]},{"id":"00c1bb048840f427","type":"function","z":"1d4eefd84d9113e8","name":"rain","func":"var x =msg.payload\nvar y = x.rain_in\nvar msg1 = {payload:y}\nreturn msg1;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":200,"wires":[["a16cb56255b03668"]]},{"id":"a16cb56255b03668","type":"switch","z":"1d4eefd84d9113e8","name":"filter null values","property":"payload","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":380,"y":260,"wires":[[],[]]},{"id":"00ecc9fd87bc6e0b","type":"function","z":"1d4eefd84d9113e8","name":"humidity","func":"var x =msg.payload\nvar y = x.humidity\nvar msg1 = {payload:y}\nreturn msg1;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":300,"wires":[["0cb151a7334ca8cc"]]},{"id":"0cb151a7334ca8cc","type":"switch","z":"1d4eefd84d9113e8","name":"filter null values","property":"payload","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":380,"y":360,"wires":[[],["2c70cb1cff0ba557"]]},{"id":"3dc353d8e36b88ad","type":"function","z":"1d4eefd84d9113e8","name":"temp F to C","func":"var x =msg.payload\nvar y= x.temperature_F\nvar msg1 = {payload:(((y)-32)*(5/9))}\nreturn msg1;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":80,"wires":[["d26592617a2ad4c0"]]},{"id":"156a627f668a509b","type":"ui_template","z":"1d4eefd84d9113e8","group":"7ccfe2f3.3fd12c","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":590,"y":240,"wires":[[]]},{"id":"2c70cb1cff0ba557","type":"ui_template","z":"1d4eefd84d9113e8","group":"e8b7cd70.90dcb","name":"Backlight","order":2,"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:10; --ga-subtick-count:100; --g-unit:'%'\">\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-bright\">\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>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:10;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:12;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:13;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:14;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:15;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:16;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:17;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:18;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:19;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:20;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:22;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:23;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:24;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:25;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:26;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:27;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:28;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:29;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:30;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:32;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:33;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:34;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:35;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:36;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:37;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:38;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:39;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:40;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:42;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:43;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:44;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:45;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:46;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:47;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:48;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:49;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:50;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:52;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:53;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:54;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:55;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:56;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:57;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:58;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:59;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:60;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:62;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:63;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:64;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:65;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:66;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:67;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:68;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:69;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:70;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:72;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:73;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:74;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:75;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:76;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:77;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:78;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:79;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:80;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:82;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:83;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:84;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:85;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:86;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:87;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:88;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:89;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:90;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:92;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:93;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:94;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:95;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:96;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:97;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:98;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:99;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:100;\"></div>\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;\">10</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:4;\">30</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:6;\">50</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">60</div>\n <div class=\"g-num\" style=\"--ga-tick:8;\">70</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">80</div>\n <div class=\"g-num\" style=\"--ga-tick:10;\">90</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">100</div>\n </div>\n <div class=\"g-label\">Humidity</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);\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = v;\n }\n \n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":320,"wires":[[]]},{"id":"32e85dd0ed4eeee5","type":"ui_template","z":"1d4eefd84d9113e8","group":"e8b7cd70.90dcb","name":"Backlight","order":2,"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:10; --ga-subtick-count:100; --g-unit:'C'\">\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-bright\">\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>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:10;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:12;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:13;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:14;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:15;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:16;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:17;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:18;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:19;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:20;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:22;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:23;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:24;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:25;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:26;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:27;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:28;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:29;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:30;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:32;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:33;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:34;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:35;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:36;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:37;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:38;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:39;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:40;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:42;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:43;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:44;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:45;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:46;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:47;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:48;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:49;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:50;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:52;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:53;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:54;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:55;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:56;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:57;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:58;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:59;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:60;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:62;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:63;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:64;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:65;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:66;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:67;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:68;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:69;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:70;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:72;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:73;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:74;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:75;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:76;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:77;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:78;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:79;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:80;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:82;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:83;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:84;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:85;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:86;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:87;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:88;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:89;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:90;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:92;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:93;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:94;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:95;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:96;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:97;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:98;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:99;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:100;\"></div>\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;\">10</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:4;\">30</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:6;\">50</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">60</div>\n <div class=\"g-num\" style=\"--ga-tick:8;\">70</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">80</div>\n <div class=\"g-num\" style=\"--ga-tick:10;\">90</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">100</div>\n </div>\n <div class=\"g-label\">Temperature</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);\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = v;\n }\n \n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":720,"y":200,"wires":[[]]},{"id":"7ccfe2f3.3fd12c","type":"ui_group","name":"Group 1","tab":"477b3e43.1d624","order":1,"disp":false,"width":"6","collapse":false},{"id":"e8b7cd70.90dcb","type":"ui_group","name":"Group 3","tab":"477b3e43.1d624","order":3,"disp":false,"width":"6","collapse":false},{"id":"477b3e43.1d624","type":"ui_tab","name":"CDO Weather Station Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
