Dynamic CSS changes in Dashboard V3beta

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.
Animation2

[{"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}]
3 Likes