Sorry, I am coming late to this party, but this is absolutely freakin fantastic! Amazing what is possible in HTML and CSS.
Oh you are far from being late 
There is plenty of bits and bytes left around, enjoy
This is probably best what I can figure out with easy tricks.
.g-needle:before {
left: 5%;
top: calc(var(--container-size) * 1%);
content: "â";
position: absolute;
line-height: 0;
font-size: calc(var(--container-size) * 35%);
color: var(--needle-color);
}
By making sharp pointer it is reasonable also to remove the rounding from angle calculations when message arrives. (was for testing purposes anyway)
const v = Math.floor((val - min) / (max - min)) * 100);
// should be
const v = (val - min) / (max - min)) * 100;
3 Likes
I don't know if I can read the stats well but based on my experiences it shows interest above the average.
Thus I'm going more serious about turning it to the ui node.
Thinking about the creation process of my previous nodes I see many sides screaming for improvement. Mostly the contribution starts with the creator needs and after the release there will be many many versions with improvements in many areas. When it comes to add features - many times it comes with needs to rewrite cos the initial idea was far from what it should be.
I see easy way to get rid of luck of ideas. It will be to involve more brains. More visions, more potential use cases.
So why not to open the node's creation process before to write any line of code. If there will be more brains to move the thing in right direction before it runs into mud, I see much higher quality of outcome.
Of course - any regular type of contribution is welcome - writing the code or documents, do the beta testing ...
So I'm asking simple question - how do you feel about to be part of creating that gauge? (still nameless - so first task already waiting)
4 Likes
Slight typo - spurious ) after (max-min)
I think I see why you used a largeish triangle, a smaller one shows slight misalignment which I can't fix for all gauge sizes.
Happy to help but my skill level isn't up to the coding. I can opine on appearance though.
Some wild suggestions for widget settings, I have no idea if these could be made variable:
Adjustable border-radius 0 to 50%
Fasteners: rivets/slot head/square drive screws/none
Background image (texture): Choice of a couple of SVG images/none
Be able to show 360 degrees and hour/minute/second hands.
Should pointer(s) be an SVG image?
Various colour options.
A "backlight" layer that can be turned on to draw attention to a particular gauge.
Here's square drive screws (only really visible on 6x6 gauge):
.g-rivet::before {
content: '';
position: absolute;
left: 43%;
top: 50%;
width: calc(var(--container-size) * 8%);
height: calc(var(--container-size) * 8%);
box-shadow: inset 0px 1px 2px #222;
transform: translate(-50%, -50%);
border-radius: 0;
}
But really it's an amazing piece of design work already. Thanks hotNipi.
Happy cake day @jbudd
Marking the post with some ideas collected
You all are talented folks!
1 Like
That's the problem I already met. They don't scale down too well.
This is subject of change I hope 
1 Like
Well, I would like to participate (OK, I guess I have already) but I am still quite confused on how scope, msg. types and topics are all layered out... I am fairly amazed I have lasted this long 
On that note... I made a switchable backlight (funny how we like emulating light on a display that already produces such by it's very nature)... and I know I did it totally wrong... As in there is a slight visual glitch during which the backplate switches between undefined and what I am asking for it to do.
I honestly tried all the "proper" methods (see further below) that I Googled on dynamically changing the contents of a <div> but I just couldn't seem to get it to work.
And so I improvised 
<div class={{msg.backlight}}> with a one-shot inject to start it off correctly...
[{"id":"6378be4c0f510f14","type":"ui_template","z":"3cd636ebd5398d6e","group":"d1ae1ccfedfa70c5","name":"Fansnazzy Gauge","order":2,"width":6,"height":6,"format":"<style>\n #{{'gauge_'+$id}} .g-tick:nth-child(n+6) {\n background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2%, rgb(31 148 0 / 80%) 2%, rgb(31 148 0 / 80%)\n 10%, rgba(0, 0, 0, 0) 10%);\n height: 1.3px;\n margin-bottom: -1.3px;\n }\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%) 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+46) {\n background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2%, rgb(31 148 0 / 80%) 2%, rgb(31 148 0 / 80%), 6%, rgba(0, 0, 0, 0) 6%);\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%) 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+6) {\n color: #028606d1;\n }\n #{{'gauge_'+$id}} .g-num:nth-child(n+9) {\n color: #dc080899;\n }\n</style>\n\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\">\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\n <div class={{msg.backlight}}>\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;\" >-40</div>\n <div class=\"g-num\" style=\"--ga-tick:2;\">-30</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">-20</div>\n <div class=\"g-num\" style=\"--ga-tick:4;\">-10</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">0</div>\n <div class=\"g-num\" style=\"--ga-tick:6;\">10</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:8;\">30</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:10;\">50</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">60</div>\n </div>\n <div class=\"g-label\">Temperature</div>\n <div class=\"g-needle-second\"></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 id=\"{{'gauge_val_second'+$id}}\" class=\"g-val-second\"></div>\n </div>\n </div>\n </div>\n</div>\n<script>\n(function(scope) {\n let min = -40;\n let max = 60;\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n\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 = msg.payload +\"°C\";\n \n if (msg.marker == true) {\n const v = Math.floor(((msg.payload - min) / (max - min)) * 100);\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value-second', v);\n }\n }\n \n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":360,"wires":[[]]},{"id":"a180143b31d48a12","type":"ui_template","z":"3cd636ebd5398d6e","group":"d1ae1ccfedfa70c5","name":"gauge-style","order":1,"width":6,"height":1,"format":"<style id=\"hotNipi-gauge\">\n:root{\n --needle-color:#001100;\n --needle-second-color:#ff0000;\n --red-ticks:9;\n}\n.md-button {\n border-radius:0.8em;\n color: var(--text-color);\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-plate-backlight {\n overflow: hidden;\n width: 93%;\n height: 93%;\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-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-second {\n transform: rotate(calc(270deg * calc(var(--gauge-value-second, 0deg) / 100) - 45deg));\n transition: transform .5s;\n background: #000;\n position: absolute;\n left: 0;\n top: 49%;\n width: 100%;\n height: 1%;\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.g-val-second{\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: #ff0000a1;\n filter: drop-shadow(2px 3px 2px #ff000050);\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":710,"y":320,"wires":[[]]},{"id":"c1e287a023673ce9","type":"ui_slider","z":"3cd636ebd5398d6e","name":"","label":"","tooltip":"","group":"d1ae1ccfedfa70c5","order":4,"width":4,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":"-40","max":"60","step":1,"x":690,"y":440,"wires":[["6378be4c0f510f14","5b945c51ed48adf3"]]},{"id":"d0543c1cb1cc7656","type":"change","z":"3cd636ebd5398d6e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"marker","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":440,"wires":[["c1e287a023673ce9"]]},{"id":"e74c2999cd495d22","type":"ui_button","z":"3cd636ebd5398d6e","name":"Marker Button","group":"d1ae1ccfedfa70c5","order":3,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"red","bgcolor":"grey","icon":"fa-check","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":300,"y":440,"wires":[["d0543c1cb1cc7656"]]},{"id":"5b945c51ed48adf3","type":"ui_switch","z":"3cd636ebd5398d6e","name":"Backlight Switch","label":"","tooltip":"","group":"d1ae1ccfedfa70c5","order":5,"width":1,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-toggle-on fa-2x","oncolor":"yellow","offvalue":"false","offvalueType":"bool","officon":"fa-toggle-off fa-2x","offcolor":"lightyellow","animate":false,"x":300,"y":480,"wires":[["53af5a6d9334cd29"]]},{"id":"53af5a6d9334cd29","type":"function","z":"3cd636ebd5398d6e","name":"","func":"let setting;\nif (msg.payload == true) {\n setting = \"g-plate-backlight\";\n } else {\n setting = \"g-plate\";\n }\nmsg = {payload: setting};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":480,"wires":[["349594103704d87c"]]},{"id":"d7a1ccc17a933644","type":"inject","z":"3cd636ebd5398d6e","name":"","props":[{"p":"payload"},{"p":"backlight","v":"g-plate","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":510,"y":380,"wires":[["c1e287a023673ce9","e74c2999cd495d22"]]},{"id":"349594103704d87c","type":"change","z":"3cd636ebd5398d6e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"backlight","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":520,"wires":[["c1e287a023673ce9"]]},{"id":"d1ae1ccfedfa70c5","type":"ui_group","name":"Group 1","tab":"20bb081.66afff8","order":1,"disp":false,"width":"6","collapse":false},{"id":"20bb081.66afff8","type":"ui_tab","name":"New Gauge","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
But ohhh those visual glitches whenever the value changes 
I will keep working at the proper way... I am sure I was just missing something silly... for hours and hours and hours... 
<div id="backlight_state" class="<foo>"></div>
if (something==this) {
document.getElementById("backlight_state").innerHTML = "foo1";
} else {
document.getElementById("backlight_state").innerHTML = "foo2";
}
// ??? whyunoworkyoubleeping... ???
Oh, ya... I also added in the marker button (done properly I think?) that when pressed, sends the marker needle to the current needle position (I preferred having it in-behind, with the slight red glow indicating it's presence)
2 Likes
Nice work guys, it looks really good.
However, I don't think that the square industrial bezel would look right in my dashboard which uses other UI features, so would probably need to try and modify the bezel to be a more contemporary slim round bezel instead.
I'm sure you've already done this, but a couple of changes:
[{"id":"8bfacc2fe6bf03d4","type":"ui_template","z":"8d3aebaae0ecfcee","group":"3ca910b5.3d50a","name":"override","order":1,"width":0,"height":0,"format":"<style id=\"HotNipi-gaugeTweeks\">\n.g-body {\n border-radius: 50%;\n}\n\n.g-body::before { \n border-radius:50%;\n}\n.g-rivets {\n display:none;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":220,"wires":[[]]},{"id":"3ca910b5.3d50a","type":"ui_group","name":"4","tab":"20bb081.66afff8","order":3,"disp":false,"width":"4","collapse":false},{"id":"20bb081.66afff8","type":"ui_tab","name":"Ohh","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
5 Likes
See 
Already I hav no need to do much. Things going in right direction. Love it. 
2 Likes
Different strokes...
I have avoided the NR Dashboard because I don't like the appearance of the components. If ALL the components looked like this gauge I'd be all over it!
@jbudd - That's better (for me!) thanks.
Are your scale numbers placed differently to hotnipi's?
1 Like
That can be adjusted in this line
But is not scaled automatically when changing card size. AKA adjust to card size according to taste.
Don't adjust with that. That should be always same as the widget configured size is. There is more dependencies and the outcome may be wrong. Find proper class for element and adjust the font size calculation rule.. Im on phone so cant be more specific right now. Was even in g-num or g-nums ...
No changes to the numbers. I took hotNipi's code that was on my computer and just added the CSS I posted. Might not have been the most recent version though.
I guess that was my point... some of my gauges are in a small card (container?), others in a larger one, some combined, and that seemed the only way to make the numbers line up... as the calculations seem to feed from that container-size:
font-size: calc(var(--container-size) * 20%);
But I guess fine tuning is better with the percentages?
Placement-- the distantce to ticks can be adjjuste wit gn-distance. It is kind of arbitrary number but change the value and see the result
2 Likes
