First september give-away (let's create one gauge)

[{"id":"b21d274b8315c0f7","type":"inject","z":"3cd636ebd5398d6e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"7","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":370,"y":300,"wires":[["dcd7d89bb2be17bf"]]},{"id":"c351447745138c19","type":"ui_template","z":"3cd636ebd5398d6e","group":"2c0d82c5cbab11fd","name":"gauge-style","order":1,"width":0,"height":0,"format":"<style id=\"hotNipi-gauge\">\n:root{\n    --needle-color:#dbe4eb;\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(81,74,29,1) 0%, rgba(163,149,59,1) 99%, rgba(181,166,66,1) 100%);\n}\n\n.g-body::before {    \n    content: \"\";\n    background-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiM2MjYxMkMiIGlkPSJzdmdfMSIgc3Ryb2tlPSIjOTc5NDRCIi8+CiAgPHBhdGggZD0ibTAsNWw1LC01bC01LDV6bTYsLTFsLTIsMmwyLC0yem0tNywtM2wyLC0ybC0yLDJ6IiBpZD0ic3ZnXzIiIGZpbGw9IndoaXRlIiBzdHJva2U9IiM4ODgiLz4KIDwvZz4KCjwvc3ZnPg==\"); \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:90%;\n    height:90%;\n    border-radius:50%;\n    position:relative;\n    display: flex;\n    align-content: center;\n    align-items: center;\n    justify-content: center;\n   \n    background:linear-gradient(180deg, rgba(81,74,29,1) 0%, rgba(163,149,59,1) 99%, rgba(181,166,66,1) 100%);\n}\n.g-plate {\n    overflow:hidden;\n    width: 90%;\n    height: 90%;\n    border-radius: 50%;\n    position: relative;\n    box-shadow: inset 0 0 15px black;\n    background: radial-gradient(circle, #dd8400 3%, rgb(196, 205, 209) 1%, rgb(177, 183, 186) 40%, rgb(108, 114, 120) 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.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(329deg) skew(12deg, 23deg);\n}\n.g-sector-normal {\n    background:var(--sec-normal-color);\n    transform: rotate(329deg) skew(12deg, 23deg);\n}\n.g-sector-low {\n    background:var(--sec-low-color);\n    transform: rotate(329deg) skew(12deg, 23deg);\n}\n.g-sector-sub {\n    background:var(--sec-sub-color);\n    transform: rotate(329deg) 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(19.3deg * var(--ga-tick) - 64.3deg));\n    background: #000;\n    position: relative;\n    left: 0;\n    top: 50%;\n    width: 100%;\n    height: 1%;\n    margin-bottom: -1%;\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-num {\n    position: absolute;\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) * 16%);\n    font-weight: 500;\n    filter: drop-shadow(2px 4px 6px black);\n}\n.g-needle {\n    transform: rotate(calc(270deg * calc(var(--g-angle, 0deg) / 99) - 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) * 50%);\n    color: #000000a1;\n    filter: drop-shadow(2px 3px 2px #00000080);\n}\n.g-label{\n    position: absolute;\n    text-align: center;\n    left: 50%;\n    top: 65%;\n    width: 100%;\n    transform: translateX(-50%);\n    font-family: monospace;\n    font-size:  calc(var(--container-size) * 20%);\n    color: #000000a1;\n    filter: drop-shadow(2px 3px 2px #00000080);\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":530,"y":240,"wires":[[]]},{"id":"eb080df2e58aef8a","type":"ui_template","z":"3cd636ebd5398d6e","group":"2c0d82c5cbab11fd","name":"gauge","order":3,"width":6,"height":6,"format":"<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"-g-angle:0; --container-size:6\">\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-sector g-sector-sub\" style=\"transform: rotate(133deg) skew(-28deg, 0deg);\"></div>\n                <div class=\"g-sector g-sector-low\" style=\"transform: rotate(251deg) skew(23deg, 0deg);\"></div>\n                <div class=\"g-sector g-sector-normal\" style=\"transform: rotate(318deg) skew(59deg, 0deg);\"></div>\n                <div class=\"g-sector g-sector-high\" style=\"transform: rotate(348deg) skew(31deg, 0deg);\"></div>\n                <div class=\"g-ticks\">\n                    <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:2;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:4;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:6;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:8;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:10;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:12;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:13;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:14;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:15;\"></div>\n                </div>\n                <div class=\"g-nums\">\n                    <div class=\"g-num\" style=\"left: 20%;top: 70%;\">-30</div>\n                    <div class=\"g-num\" style=\"left: 13%;top: 49%;\">-20</div>\n                    <div class=\"g-num\" style=\"left: 20%;top: 28%;\">-10</div>\n                    <div class=\"g-num\" style=\"left: 38%;top: 14%;\">0</div>\n                    <div class=\"g-num\" style=\"left: 57%;top: 14%;\">10</div>\n                    <div class=\"g-num\" style=\"left: 75%;top: 28%;\">20</div>\n                    <div class=\"g-num\" style=\"left: 78%;top: 49%;\">30</div>\n                    <div class=\"g-num\" style=\"left: 70%;top: 70%;\">40</div>\n                </div>\n                <div class=\"g-label\">Temp °C</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 = -30;\n    let max = 40;\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);\n            document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle', v);\n            document.getElementById('gauge_val_'+scope.$id).innerText = msg.payload;\n        }   \n  });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":450,"y":360,"wires":[["4fd74e18b22679fe"]]},{"id":"dcd7d89bb2be17bf","type":"random","z":"3cd636ebd5398d6e","name":"","low":"-30","high":"40","inte":"true","property":"payload","x":540,"y":300,"wires":[["2894c6d23426d14e"]]},{"id":"2894c6d23426d14e","type":"ui_slider","z":"3cd636ebd5398d6e","name":"","label":"slider","tooltip":"","group":"2c0d82c5cbab11fd","order":5,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":"-30","max":"40","step":1,"x":690,"y":300,"wires":[["eb080df2e58aef8a"]]},{"id":"4fd74e18b22679fe","type":"ui_template","z":"3cd636ebd5398d6e","group":"2c0d82c5cbab11fd","name":"backlit gauge","order":4,"width":6,"height":6,"format":"<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"-g-angle:0; --container-size:6\">\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-sector g-sector-sub\" style=\"transform: rotate(133deg) skew(-28deg, 0deg);\"></div>\n                <div class=\"g-sector g-sector-low\" style=\"transform: rotate(251deg) skew(23deg, 0deg);\"></div>\n                <div class=\"g-sector g-sector-normal\" style=\"transform: rotate(318deg) skew(59deg, 0deg);\"></div>\n                <div class=\"g-sector g-sector-high\" style=\"transform: rotate(348deg) skew(31deg, 0deg);\"></div>\n                <div class=\"g-ticks\">\n                    <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:2;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:4;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:6;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:8;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:10;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:12;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:13;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:14;\"></div>\n                    <div class=\"g-tick\" style=\"--ga-tick:15;\"></div>\n                </div>\n                <div class=\"g-nums\">\n                    <div class=\"g-num\" style=\"left: 20%;top: 70%;\">-30</div>\n                    <div class=\"g-num\" style=\"left: 13%;top: 49%;\">-20</div>\n                    <div class=\"g-num\" style=\"left: 20%;top: 28%;\">-10</div>\n                    <div class=\"g-num\" style=\"left: 38%;top: 14%;\">0</div>\n                    <div class=\"g-num\" style=\"left: 57%;top: 14%;\">10</div>\n                    <div class=\"g-num\" style=\"left: 75%;top: 28%;\">20</div>\n                    <div class=\"g-num\" style=\"left: 78%;top: 49%;\">30</div>\n                    <div class=\"g-num\" style=\"left: 70%;top: 70%;\">40</div>\n                </div>\n                <div class=\"g-label\">Temp °C</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 = -30;\n    let max = 40;\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);\n            document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle', v);\n            document.getElementById('gauge_val_'+scope.$id).innerText = msg.payload;\n        }   \n  });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":610,"y":360,"wires":[[]]},{"id":"2c0d82c5cbab11fd","type":"ui_group","name":"Group 3","tab":"20bb081.66afff8","order":3,"disp":false,"width":12,"collapse":false},{"id":"20bb081.66afff8","type":"ui_tab","name":"Ohh","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Sub-ticks are just as easy as regular ticks, just there is a lot more of them. :smiley:

image

[{"id":"6744cc2.7fb5234","type":"ui_template","z":"be2ac8b1.31fce8","group":"3ca910b5.3d50a","name":"gauge-style","order":4,"width":0,"height":0,"format":"<style id=\"hotNipi-gauge\">\n:root{\n    --needle-color:#001100;\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:90%;\n    height:90%;\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:90%;\n    height:90%;\n    border-radius:50%;\n    position:relative;\n    display: flex;\n    align-content: center;\n    align-items: center;\n    justify-content: center;\n   \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: 90%;\n    height: 90%;\n    border-radius: 50%;\n    position: relative;\n    box-shadow: inset 0 0 15px black;\n    background: radial-gradient(circle, #dd8400 3%, rgb(196 205 209) 1%, rgb(177 183 186) 40%, rgb(108 114 120) 100%);\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(329deg) 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: 1%;\n    margin-bottom: -1%;\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: 1%;\n    margin-bottom: -1%;\n    background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(0 0 0 / 30%) 2%,rgb(0 0 0 / 30%) 6%,rgba(0,0,0,0) 6%);\n}\n.g-num {\n    position: absolute;\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) * 16%);\n    font-weight: 500;\n    filter: drop-shadow(2px 4px 6px 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 #00000080);\n}\n.g-label{\n    position: absolute;\n    text-align: center;\n    left: 50%;\n    top: 55%;\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-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":510,"y":720,"wires":[[]]},{"id":"838d07e8.155da8","type":"ui_template","z":"be2ac8b1.31fce8","group":"3ca910b5.3d50a","name":"gauge","order":4,"width":"6","height":"6","format":"<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"--gauge-value:0; --container-size:6; --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            <div class=\"g-plate\">\n                <div class=\"g-sector-high\"></div>\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=\"left: 23%;top: 71%;\">0</div>\n                    <div class=\"g-num\" style=\"left: 13%;top: 56%;\">10</div>\n                    <div class=\"g-num\" style=\"left: 13%;top: 39%;\">20</div>\n                    <div class=\"g-num\" style=\"left: 19%;top: 24%;\">30</div>\n                    <div class=\"g-num\" style=\"left: 31%;top: 14%;\">40</div>\n                    <div class=\"g-num\" style=\"left: 47%;top: 10%;\">50</div>\n                    <div class=\"g-num\" style=\"left: 63%;top: 14%;\">60</div>\n                    <div class=\"g-num\" style=\"left: 74%;top: 25%;\">70</div>\n                    <div class=\"g-num\" style=\"left: 79%;top: 40%;\">80</div>\n                    <div class=\"g-num\" style=\"left: 78%;top: 56%;\">90</div>\n                    <div class=\"g-num\" style=\"left:65%; top:71%;\">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","x":510,"y":680,"wires":[[]]},{"id":"ee5b7fef.e2ddc","type":"ui_slider","z":"be2ac8b1.31fce8","name":"","label":"slider","tooltip":"","group":"3ca910b5.3d50a","order":6,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"x":350,"y":680,"wires":[["838d07e8.155da8"]]},{"id":"3ca910b5.3d50a","type":"ui_group","name":"Group 1","tab":"20bb081.66afff8","order":1,"disp":true,"width":6},{"id":"20bb081.66afff8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

It misses every first so they don't overlap with main ticks

2 Likes

Yes indeed... I see I was on the right track :slight_smile: Just didn't want to tackle the math :sweat_smile:

Gaining ideas ...
image

You guys have too much free time? :wink: I was playing with snap.svg for a project some years back.

Doing this with HTML/CSS only is quite impressive, I must say. What's you're hourly rate? :smiley:

Too low as it usually is ... :smiley:

2 Likes

After consulting with "art guy" the advises applied to improve readability and to have cleaner look (bigger numbers, less shadows, brighter colors, sharper ticks ...)

I actually starting to like it ... :smiley:

Always consult professionals

8 Likes

Mate, you are the man. Meanwhile, back in the BMS world, we have to deal with this awesome gauge from a global, "leading edge" software vendor. Actually, it is comical.
image

Thanks. A lot of things has been changed since the photos were black and white on paper and bicycle had no gears :slight_smile:

2 Likes

There are some rumors that this prototype may be turned onto ui-widget.
Sharing the prototype most probably last time for people interested to learn from it and make something by hand.

hotmipi-gauge-improved.json (41.0 KB)

4 Likes

I seem to be having issues with multiple (style) templates availed in a tab (but different cards). All gauges get the details from one or other, whichever is added last.

I have tried..

Changing the style id on one style template... but can't find any corresponding id marker in the gauges.

Assigning the style template to node instead of head

And even integrating into a single template (style and gauge)

Great to hear... you will make millions... oh right, open source :stuck_out_tongue:

Never mind the visuals, the dynamics of the pointer are awesome

Love that widget and learning heaps on CSS/HTML since playing with it for last few days.

I'm trying to establish a 2nd needle for "Target Value" and was able to do so with your 1st version but struggle to modify your new version.

You can see the 2nd needle (RED) for "Target Value"

Any suggestions on how I can realise the 2nd needle in the new template?

What "new version/template"? As far as I can tell, all these are basically the same great template that @hotNipi designed, just with various modifications to add colours, tics, adjust fonts etc.

Sorry, yes I was referring to these various modifications @hotNipi (which I like and wanna utilize). The structure has slightly changed and I struggle with my limited CSS/HTML skill to get the 2nd needle working again :frowning:

Start by showing how you made the addition you have.

That was primarily done by replicating the "g-needle" into "g-needle2" in the "gauge-style" component

.g-needle2 {
    transform: rotate(calc(270deg * calc(var(--g-angle2, 0deg) / 99) - 45deg));
    transition: transform 1s;
    background: #000;
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    height: 2%;
    filter:drop-shadow(0px 1px 3px #00000080);
    background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle2-color) 15%,var(--needle2-color) 50%,rgba(0,0,0,0) 50%);
}

and than initiating the class "g-needle2"

                <div class="g-label">Temperature</div>
                <div class="g-needle"></div>

                <div class="g-needle2"></div>

                <div class="g-needle-ring"></div>
                <div id="{{'gauge_val_'+$id}}" class="g-val"></div>

and afterwards i modified the MSG handler to update

  • g-needle when msg.topic == "Current"
  • g-needle2 (Target value) when other msg.topic was sent
<script>
(function(scope) {
    let min = 15;
    let max = 45;
    scope.$watch('msg', function(msg) {
        if (msg) {
            if (msg.topic=="Current")
            {
            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
            document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle', v);
            } else
            {
            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
            document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle2', v);
            }
            document.getElementById('gauge_val_'+scope.$id).innerText = msg.payload+"°";  
        }   
  });
})(scope);
</script>

OK, so basically the same thing... just have to look for all needle references.

In the Gauge Template...

<div id="{{'gauge_'+$id}}" class="g-container" style="--gauge-value:0; --gauge-value-second:80;--container-size:4; --gn-distance:13; --ga-tick-count:10; --ga-subtick-count:100; --g-unit:'°C'">

Also, here the order listed determines which needle is on top.

<div class="g-needle-second"></div>
<div class="g-needle"></div>

And in the Style Template

--needle-color:#001100;
--needle-second-color:#ff0000;
.g-needle {
    transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));
    transition: transform 1s;
    background: #000;
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    height: 2%;
    filter:drop-shadow(0px 1px 3px #00000080);
    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%);
}
.g-needle-second {
    transform: rotate(calc(270deg * calc(var(--gauge-value-second, 0deg) / 100) - 45deg));
    transition: transform 1s;
    background: #000;
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    height: 2%;
    filter:drop-shadow(0px 1px 3px #ff000080);  
    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%);
}

I haven't made mine dynamically adjustable yet... just using the preset.

image

1 Like

That is correct path to make it work.

Any dynamic thing, you'll later use or change by the css needs to be defined.

2 Likes

Thanks a lot ... I guess I have a try on that over the weekend