Requires Dashboard V3
The gauge (CSS only, by @hotNipi) and the button & textbox to the right respond to msg.className from the buttons at the bottom.
Those buttons each have their custom class set in the editor.
This gif doesn't play.
[{"id":"9652b155ac1b5814","type":"tab","label":"dashboard 3","disabled":false,"info":""},{"id":"803e40274949c0cb","type":"ui_template","z":"9652b155ac1b5814","group":"2a5e1a15b5333ae5","name":"Default Style","order":2,"width":0,"height":0,"format":"<style id=\"hotNipi-gauge\">\n:root{\n --needle-color:#001100;\n --red-ticks:9;\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-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\n.g-sector-high {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 50%;\n left: 50%;\n background: #ff00004f;\n transform-origin: 0 0;\n transform: rotate(328deg) skew(12deg, 23deg);\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-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","className":"","x":90,"y":140,"wires":[[]]},{"id":"b3701723414d63bb","type":"ui_slider","z":"9652b155ac1b5814","name":"Set Temp","label":"Temperature","tooltip":"","group":"2a5e1a15b5333ae5","order":13,"width":"6","height":"1","passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":320,"y":20,"wires":[["6d91bdaf73ee2c65","860ac9462af36398","7945ca81a2b2a2ca"]]},{"id":"860ac9462af36398","type":"ui_template","z":"9652b155ac1b5814","group":"2a5e1a15b5333ae5","name":"Gauge","order":1,"width":6,"height":6,"format":"<style>\n #{{'gauge_'+$id}} .g-tick:nth-child(n+9){\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(255 0 0 / 60%) 2%,rgb(255 0 0 / 60%)\n 10%,rgba(0,0,0,0) 10%);\n height: 1.3px;\n margin-bottom: -1.3px;\n }\n #{{'gauge_'+$id}} .g-subtick:nth-child(n+73){\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(255 0 0 / 40%) 2%,rgb(255 0 0 / 40%)\n 6%,rgba(0,0,0,0) 6%);\n height: 1.3px;\n margin-bottom: -1.3px;\n }\n #{{'gauge_'+$id}} .g-num:nth-child(n+9){\n color:#dc080899;\n }\n</style>\n<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\">\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":"NoSuchStyleSoDefault","x":830,"y":140,"wires":[[]]},{"id":"bfa5d184af1f034b","type":"ui_template","z":"9652b155ac1b5814","group":"2a5e1a15b5333ae5","name":"Melamine Style","order":5,"width":0,"height":0,"format":"<head>\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lora\">\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto\">\n<style>\nmd-card.melamine {\n background: none;\n}\nmd-card.nr-dashboard-template.melamine .g-body {\n background: \n linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -10px 0,\n linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -10px 0,\n linear-gradient(315deg, #ECEDDC 25%, transparent 25%),\n linear-gradient(45deg, #ECEDDC 25%, transparent 25%);\t\n background-size: 20px 20px;\n background-color: #EC173A;\n border: 3px solid #EC173A;\n border-radius: 8%;\n}\nmd-card.nr-dashboard-template.melamine .g-body::before { \n background: none;\n border-radius:8%;\n}\nmd-card.nr-dashboard-template.melamine .g-ring {\nbackground-image: linear-gradient(180deg, rgb(78, 78, 78) 2%, rgb(241,240,206) 99%, rgb(230, 162, 33) 100%);\nborder: 2px solid darkgoldenrod;\n}\nmd-card.nr-dashboard-template.melamine .g-rivet {\n width:25px;\n height:25px;\n box-shadow: none;\n border:1px solid rgb(230, 162, 33);\n}\nmd-card.nr-dashboard-template.melamine .g-rivet:before {\n height: 20%;\n width: 100%;\n box-shadow: inset 0px 2px 2px #222;\n border-radius:0;\n transform: translate(-48%, -34%);\n}\nmd-card.nr-dashboard-template.melamine .g-nums {\n --gn-distance: 15;\n filter:none;\n}\nmd-card.nr-dashboard-template.melamine .g-num{\n font-family: Lora, sans-serif;\n font-size: 24px;\n font-weight: bold;\n}\nmd-card.nr-dashboard-template.melamine .g-num:nth-child(n+5) {\n color: mediumseagreen !important;\n}\nmd-card.nr-dashboard-template.melamine .g-num:nth-child(n+9) {\n color: #ec173a !important;\n}\nmd-card.nr-dashboard-template.melamine .g-needle {\n --needle-color: #ff4500;\n}\nmd-card.nr-dashboard-template.melamine .g-needle-ring {\n --needle-color: #ff4500;\n border:1px solid black;\n}\nmd-card.nr-dashboard-template.melamine .g-val{\n font-family: \"Roboto\", sans-serif;\n font-weight: bold;\n color: #EC173A;\n bottom: 4%;\n}\nmd-card.nr-dashboard-button.melamine .md-button, md-card.nr-dashboard-text.melamine, md-card.nr-dashboard-text.melamine p {\n background: \n linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -10px 0,\n linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -10px 0,\n linear-gradient(315deg, #ECEDDC 25%, transparent 25%),\n linear-gradient(45deg, #ECEDDC 25%, transparent 25%);\t\n background-size: 20px 20px;\n background-color: #EC173A;\n border: 3px solid #EC173A;\n border-radius: 8%;\n font-family: Roboto, sans-serif;\n color: #EC173A;\n font-size: 17px;\n font-weight: bold;\n}\nmd-card.nr-dashboard-button.melamine .md-button span {\n background: white;\n}\nmd-card.nr-dashboard-text.melamine {\n border-radius: 10px;\n}\nmd-card.nr-dashboard-text.melamine p{\n background: white;\n border:none;\n font-size: 1.5em;\n text-transform: uppercase;\n}\n</style>\n</head>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":100,"y":260,"wires":[[]]},{"id":"18d638ebd99edca7","type":"ui_button","z":"9652b155ac1b5814","name":"","group":"2a5e1a15b5333ae5","order":10,"width":"2","height":"2","passthru":false,"label":"Melamine","tooltip":"","color":"","bgcolor":"","className":"melamine","icon":"","payload":"melamine","payloadType":"str","topic":"","topicType":"str","x":340,"y":260,"wires":[["d43224c979d515da"]]},{"id":"82878c7c785cfb39","type":"ui_button","z":"9652b155ac1b5814","name":"","group":"2a5e1a15b5333ae5","order":7,"width":"2","height":"2","passthru":true,"label":"Default","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"default","payloadType":"str","topic":"","topicType":"str","x":340,"y":140,"wires":[["d43224c979d515da"]]},{"id":"fe302bab062d0514","type":"ui_button","z":"9652b155ac1b5814","name":"","group":"2a5e1a15b5333ae5","order":11,"width":"2","height":"2","passthru":false,"label":"Round","tooltip":"","color":"","bgcolor":"","className":"round","icon":"","payload":"round","payloadType":"str","topic":"","topicType":"str","x":350,"y":300,"wires":[["d43224c979d515da"]]},{"id":"6d91bdaf73ee2c65","type":"change","z":"9652b155ac1b5814","name":"","rules":[{"t":"set","p":"temp","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":20,"wires":[[]]},{"id":"49dd26486786ef93","type":"inject","z":"9652b155ac1b5814","name":"Initial Value","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"37","payloadType":"num","x":110,"y":20,"wires":[["b3701723414d63bb"]]},{"id":"607cb00158428334","type":"ui_template","z":"9652b155ac1b5814","group":"2a5e1a15b5333ae5","name":"Carbon Style","order":4,"width":0,"height":0,"format":"<style id=\"HotNipi-gauge CarbonTweeks\">\n\nmd-card.nr-dashboard-template.carbon, md-card.nr-dashboard-template.carbon .g-body {\n background-color: rgb(32, 32, 32);\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n background-position: 0px 0px, 5px 5px, 0px 0px;\n}\nmd-card.nr-dashboard-template.carbon .g-rivets{\n display:none;\n}\nmd-card.nr-dashboard-template.carbon .g-ring{\n transform: rotateX(45deg);\n}\nmd-card.nr-dashboard-template.carbon .g-nums {\n --gn-distance: 16;\n filter:none;\n}\nmd-card.nr-dashboard-template.carbon .g-val {\n bottom: 0;\n}\nmd-card.nr-dashboard-button.carbon .md-button {\n transform: rotateX(45deg);\n border-radius: 50%;\n}\nmd-card.nr-dashboard-button.carbon .md-button, md-card.nr-dashboard-text.carbon, md-card.nr-dashboard-text.carbon p {\n font-size: 1.2em;\n border: 8px solid black;\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n}\nmd-card.nr-dashboard-button.carbon .md-button span, md-card.nr-dashboard-text.carbon p {\n background: white;\n color: black;\n text-transform: uppercase;\n}\nmd-card.nr-dashboard-text.carbon {\n border-radius: 10px;\n\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":90,"y":180,"wires":[[]]},{"id":"f357d841214a1f50","type":"ui_button","z":"9652b155ac1b5814","name":"","group":"2a5e1a15b5333ae5","order":8,"width":"2","height":"2","passthru":false,"label":"Carbon","tooltip":"","color":"","bgcolor":"","className":"carbon","icon":"","payload":"carbon","payloadType":"str","topic":"","topicType":"str","x":340,"y":180,"wires":[["d43224c979d515da"]]},{"id":"d43224c979d515da","type":"change","z":"9652b155ac1b5814","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"temp","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":180,"wires":[["860ac9462af36398","e25dcab1ed688697","7945ca81a2b2a2ca"]]},{"id":"97c4da7ed4e05be2","type":"ui_button","z":"9652b155ac1b5814","name":"","group":"2a5e1a15b5333ae5","order":9,"width":"2","height":"2","passthru":false,"label":"Riot","tooltip":"","color":"","bgcolor":"","className":"riot","icon":"","payload":"riot","payloadType":"str","topic":"","topicType":"str","x":350,"y":220,"wires":[["d43224c979d515da"]]},{"id":"8af1c52b09f52f12","type":"ui_template","z":"9652b155ac1b5814","group":"2a5e1a15b5333ae5","name":"Riot Style","order":6,"width":0,"height":0,"format":"<head>\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Sofia\">\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Fredericka the Great\">\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Seaweed Script\">\n<style>\nmd-card.nr-dashboard-template.riot {\n background: red;\n} \nmd-card.nr-dashboard-template.riot .g-body{\n width: 96%;\n background: yellow;\n} \nmd-card.nr-dashboard-template.riot .g-ring{\n background: aquamarine;\n} \nmd-card.nr-dashboard-template.riot .g-rivet{\n transform: rotate(60deg);\n}\nmd-card.nr-dashboard-template.riot .g-rivet:before{\n background: #13141447;\n border-radius: 0;\n} \nmd-card.nr-dashboard-template.riot .g-plate{\n background: cornflowerblue;\n} \nmd-card.nr-dashboard-template.riot .g-needle {\n --needle-color: fuchsia;\n}\nmd-card.nr-dashboard-template.riot .g-needle-ring {\n --needle-color: blueviolet;\n border:1px solid black;\n}\nmd-card.nr-dashboard-template.riot .g-nums {\n --gn-distance: 17;\n filter:none;\n}\nmd-card.nr-dashboard-template.riot .g-num{\n font-family: Impact, Charcoal, sans-serif;\n font-size: 24px;\n filter: drop-shadow(0 0 8px #333);\n}\nmd-card.nr-dashboard-template.riot .g-num:nth-child(n+9) {\n font-family: \"Seaweed Script\", sans-serif;\n}\nmd-card.nr-dashboard-template.riot .g-label{\n font-family: \"MV Boli\", serif;\n font-size: 16px;\n}\nmd-card.nr-dashboard-template.riot .g-val{\n font-family: \"Fredericka The Great\", sans-serif;\n font-size: 3em;\n bottom: -5px;\n\tcolor: red;\n\tbackground: #fff;\n\tborder-radius: 10%;\n\tfilter: drop-shadow(0 0 8px #333);\n}\nmd-card.nr-dashboard-button.riot .md-button, md-card.nr-dashboard-text.riot, md-card.nr-dashboard-text.riot p {\n background:cornflowerblue;\n font-family: \"Fredericka The Great\", sans-serif;\n border: 6px solid yellow;\n border-radius: 8%;\n outline: 3px solid red;\n font-size: 20px;\n}\nmd-card.nr-dashboard-button.riot .md-button span {\nbackground: aquamarine;\ncolor: red;\n}\nmd-card.nr-dashboard-text.riot {\n border-radius: 10px;\n}\nmd-card.nr-dashboard-text.riot p {\n border: none;\n outline: none;\n background: aquamarine;\n color: red;\n font-size:1.5em;\n text-transform: uppercase;\n}\n</style>\n</head>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":80,"y":220,"wires":[[]]},{"id":"e25dcab1ed688697","type":"ui_button","z":"9652b155ac1b5814","name":"Changing button","group":"a723c6674c6ab435","order":1,"width":"2","height":"2","passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"","topicType":"str","x":860,"y":100,"wires":[["82878c7c785cfb39"]]},{"id":"b1108c6f62620dad","type":"ui_ui_control","z":"9652b155ac1b5814","name":"Set initial style to default","events":"all","x":130,"y":60,"wires":[["82878c7c785cfb39"]]},{"id":"7945ca81a2b2a2ca","type":"ui_text","z":"9652b155ac1b5814","group":"b4b9546f0b352ac8","order":2,"width":"5","height":"1","name":"Changing Textbox","label":"","format":"{{msg.className}}","layout":"row-center","className":"","x":870,"y":180,"wires":[]},{"id":"a5927c96962a0822","type":"ui_template","z":"9652b155ac1b5814","group":"2a5e1a15b5333ae5","name":"Round Style","order":3,"width":0,"height":0,"format":"<style>\nmd-card.nr-dashboard-template.round {\n background: none;\n}\nmd-card.nr-dashboard-template.round .g-body {\n border-radius: 50%;\n}\nmd-card.nr-dashboard-template.round .g-body::before { \n border-radius:50%;\n}\nmd-card.nr-dashboard-template.round .g-rivets {\n display:none;\n}\nmd-card.nr-dashboard-template.round .g-nums {\n --gn-distance: 16;\n filter:none;\n}\nmd-card.nr-dashboard-button.round .md-button, md-card.nr-dashboard-text.round {\n border-radius:50%;\n font-family: monospace;\n font-size: 1.5em;\n font-weight: bold;\n background: #BBC3C6;\n border: 8px solid #6c6c6c;\n color: black;\n text-transform: uppercase;\n}\nmd-card.nr-dashboard-text.round {\n border-radius: 10px;\n colvor: black;\n}\nmd-card.nr-dashboard-text.round p{\n font-size: 1.5em;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":90,"y":300,"wires":[[]]},{"id":"2a5e1a15b5333ae5","type":"ui_group","name":"Dynamic hotNipi Gauge","tab":"d4663bfd1e521a9f","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"a723c6674c6ab435","type":"ui_group","name":"Dynamic Button","tab":"d4663bfd1e521a9f","order":2,"disp":true,"width":"3","collapse":false,"className":""},{"id":"b4b9546f0b352ac8","type":"ui_group","name":"Dynamic Textbox","tab":"d4663bfd1e521a9f","order":3,"disp":true,"width":"5","collapse":false,"className":""},{"id":"d4663bfd1e521a9f","type":"ui_tab","name":"Dashboard V3 Experiment","icon":"dashboard","disabled":false,"hidden":false}]
