Analog CSS clock for Dashboard2 (from Hotnipi?)

Dashboard
1

I have analog clock CSS template (from Hotnipi?) and it works great in Dashboard1, but now I want to convert it to Dashboard2 with Vue.js, but I don't know how I should do.

Clock
Clock649Ă—638 133 KB

The user interface works great on Dashboard2, but the clocks needles don't move. The clock stands still.
I believe the scripts into "Clock Dashboard2" -node must be modified from the "Inject node" so it works for Vue.js, instead of Angular v1.

<script>
    (function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
        const now = new Date()        
        const sec = now.getSeconds();
        const secDeg = ''+(((sec / 60) * 360) + 90)+'deg';        
        const mins = now.getMinutes();
        const minsDeg = ''+(((mins / 60) * 360) + ((sec/60)*6) + 90)+'deg';        
        const hour = now.getHours();
        const hourDeg = ''+(((hour / 12) * 360) + ((mins/60)*30) + 90)+'deg';
        document.getElementById('gauge_'+scope.$id).style.setProperty('--time-hour', hourDeg);
        document.getElementById('gauge_'+scope.$id).style.setProperty('--time-minute', minsDeg);
        document.getElementById('gauge_'+scope.$id).style.setProperty('--time-second', secDeg);
    }
  });
})(scope);
</script>

Clock.json file for "Import" of the analog clock in Dashboard1 and Dashboard2.
Clock.json (59.1 KB)

2

Here you are

[{"id":"6e16b311b4189103","type":"inject","z":"0532a420e0b5b5de","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":350,"y":260,"wires":[["49dd50d8598758e2"]]},{"id":"49dd50d8598758e2","type":"ui-template","z":"0532a420e0b5b5de","group":"acd5ff3b36facea1","page":"","ui":"","name":"Clock Dashboard2","order":1,"width":"1","height":"1","head":"","format":"<div class=\"g-wrapper g-wrapper-label-0\">\n    <div ref=\"hotNipiClock\" class=\"g-container\" style=\"--gauge-value:0; --container-size:5; --gn-distance:11.6; --ga-tick-count:12; --ga-subtick-count:60; --g-unit:''; --time-hour:0; --time-minute:0; --time-second:0; \">\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 clock\" style=\"--ga-tick:1;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:2;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:3;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:4;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:5;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:6;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:7;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:8;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:9;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:10;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:11;\"></div>\n                        <div class=\"g-tick clock\" style=\"--ga-tick:12;\"></div>\n                    </div>\n\n                    <div class=\"g-ticks\">\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:2;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:3;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:4;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:5;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:7;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:8;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:9;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:10;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:12;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:13;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:14;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:15;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:17;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:18;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:19;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:20;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:22;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:23;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:24;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:25;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:27;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:28;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:29;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:30;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:32;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:33;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:34;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:35;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:37;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:38;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:39;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:40;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:42;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:43;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:44;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:45;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:47;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:48;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:49;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:50;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:52;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:53;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:54;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:55;\"></div>\n\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:57;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:58;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:59;\"></div>\n                        <div class=\"g-subtick clock\" style=\"--ga-tick:60;\"></div>\n                    </div>\n\n                    <div class=\"g-nums\">\n                        <div class=\"g-num clock\" style=\"--ga-tick:1;\">12</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:2;\">1</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:3;\">2</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:4;\">3</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:5;\">4</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:6;\">5</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:7;\">6</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:8;\">7</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:9;\">8</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:10;\">9</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:11;\">10</div>\n                        <div class=\"g-num clock\" style=\"--ga-tick:12;\">11</div>\n\n                    </div>\n                    <div class=\"g-label\">BlackTronix AB</div>\n                    <div class=\"g-needle hour\"></div>\n                    <div class=\"g-needle second\"></div>\n                    <div class=\"g-needle minute\"></div>\n                    <div class=\"g-needle-ring\"></div>\n                   \n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<script>\n    export default {\n    data(){\n        return {\n           \n        }\n    },\n\n\n   \n    methods: {        \n        \n    },\n    watch: {\n        msg: function(){    \n            const now = new Date()        \n            const sec = now.getSeconds();\n            const secDeg = ''+(((sec / 60) * 360) + 90)+'deg';        \n            const mins = now.getMinutes();\n            const minsDeg = ''+(((mins / 60) * 360) + ((sec/60)*6) + 90)+'deg';        \n            const hour = now.getHours();\n            const hourDeg = ''+(((hour / 12) * 360) + ((mins/60)*30) + 90)+'deg';\n            this.$refs.hotNipiClock.style.setProperty('--time-hour', hourDeg);\n            this.$refs.hotNipiClock.style.setProperty('--time-minute', minsDeg);\n            this.$refs.hotNipiClock.style.setProperty('--time-second', secDeg);\n        }\n    },\n    computed: {\n        \n\n    },\n    mounted(){\n\n    },\n    unmounted () {\n      \n    }\n}\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":320,"wires":[[]]},{"id":"2569b9a4de77819f","type":"ui-template","z":"0532a420e0b5b5de","group":"","page":"","ui":"e9c974f7c1d080d1","name":"CSS clock Dashboard2","order":2,"width":"0","height":"0","head":"","format":"\n    :root {\n        --needle-color: #001100;\n        --needle-color-secondary: #ffdd30;\n        --target-needle-color: #ffa500;\n        --red-ticks: 9;\n        --zone-color-high: #ff5d4ebf;\n        --zone-color-warn: #ffb52d8c;\n        --zone-color-normal: #91ff4e85;\n        --zone-color-low: #4ec3ff85\n    }\n\n    .g-zone {\n        position: absolute;\n        width: 82%;\n        height: 82%;\n        top: 8%;\n        left: 10%;\n        box-sizing: border-box;\n        border-radius: 0 100% 0 0;\n        border-color: var(--zone-color-normal);\n        border-top: 7px solid;\n        border-right: 7px solid;\n        clip-path: polygon(0% 0%, 100% 0%, 0% 0%, 0% 100%);\n    }\n\n    .g-zone.high {\n        border-color: var(--zone-color-high);\n        clip-path: polygon(0% 0%, 100% 0%, 16% 0%, 0% 100%);\n    }\n\n    .g-zone.warn {\n        border-color: var(--zone-color-warn);\n        clip-path: polygon(16% 0%, 100% 0%, 73% 0%, 0% 100%);\n    }\n\n    .g-zone.normal {\n        border-color: var(--zone-color-normal);\n        clip-path: polygon(0% 50%, 100% 0%, 100% 67%, 0% 100%);\n    }\n\n    .g-zone.low {\n        border-color: var(--zone-color-low);\n        clip-path: polygon(100% 68%, 100% 0%, 100% 100%, 0% 100%);\n    }\n\n    .g-wrapper-label-0 {\n        grid-template-rows: 1fr;\n    }\n\n    .g-wrapper-label-3 {\n        grid-template-rows: 1fr 3fr;\n    }\n\n    .g-wrapper-label-4 {\n        grid-template-rows: 1fr 4fr;\n    }\n    .nrdb-ui-template:has(.g-wrapper){\n        aspect-ratio: 1;\n        height: 200px;\n    } \n\n    .g-wrapper {\n        display: grid;\n        width: 100%;\n        height: 100%;\n        align-content: center;\n        align-items: center;\n        justify-items: center;\n    }\n\n    .g-header {\n        display: flex;\n        text-align: center;\n    }\n\n    .g-wrapper-label-0 .g-container {\n        height: calc(100% - 6px);\n    }\n\n    .g-container {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        user-select: none;\n        width: 100%;\n        height: calc(100% - 10.5px);\n    }\n\n    .g-body {\n        position: relative;\n        display: flex;\n        align-content: center;\n        align-items: center;\n        justify-content: center;\n        height: 98%;\n        width: 98%;\n        border-radius: 15%;\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        position: absolute;\n        top: 0px;\n        right: 0px;\n        bottom: 0px;\n        left: 0px;\n        opacity: 0.1;\n        border-radius: 15%;\n        background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==\");\n        background-repeat: repeat;\n    }\n\n    .g-ring {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        align-content: center;\n        width: 94%;\n        height: 94%;\n        border-radius: 50%;\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\n    .quarter-top-right>.g-ring {\n        width: 90%;\n        height: 90%;\n        border-radius: 15% 85% 15% 15%;\n    }\n\n    .quarter-top-left>.g-ring {\n        width: 90%;\n        height: 90%;\n        border-radius: 85% 15% 15% 15%;\n    }\n\n    .g-plate {\n        position: relative;\n        overflow: hidden;\n        width: 93%;\n        height: 93%;\n        border-radius: 50%;\n        box-shadow: inset 0 0 15px #000000a3;\n        /*    background: radial-gradient(circle, rgb(196 205 209) 0%, rgb(177 183 186) 40%, rgb(191 193 194) 100%); */\n        background: radial-gradient(circle, #FFFFFF 5%, #FFFF9E 85%);\n    }\n\n    .g-plateDark {\n        position: relative;\n        overflow: hidden;\n        width: 93%;\n        height: 93%;\n        border-radius: 50%;\n        box-shadow: inset 0 0 15px #000000a3;\n        /*    background: radial-gradient(circle, rgb(196 205 209) 0%, rgb(177 183 186) 40%, rgb(191 193 194) 100%); */\n        background: radial-gradient(circle, #555555 5%, #555530 85%);\n    }\n\n    .quarter-top-right *>.g-plate {\n        width: 95%;\n        height: 95%;\n        border-radius: 15% 100% 15% 15%;\n        background: radial-gradient(farthest-corner at 24% 70%, rgb(207 209 211) 0%, rgb(177 183 186) 50%, rgb(191 193 194) 129%);\n    }\n\n    .quarter-top-left *>.g-plate {\n        width: 95%;\n        height: 95%;\n        border-radius: 100% 15% 15% 15%;\n        background: radial-gradient(farthest-corner at 24% 70%, rgb(207 209 211) 0%, rgb(177 183 186) 50%, rgb(191 193 194) 129%);\n    }\n\n    .g-sector-high {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 50%;\n        left: 50%;\n        background: #ff00004f;\n        transform-origin: 0 0;\n        transform: rotate(328deg) skew(12deg, 23deg);\n    }\n\n    .g-ticks {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        filter: drop-shadow(2px 4px 6px black);\n    }\n\n    .quarter-top-right *>.g-ticks {\n        top: -10%;\n        left: 10%;\n    }\n\n    .quarter-top-left *>.g-ticks {\n        top: -10%;\n        left: -10%;\n        transform: rotate(270deg);\n    }\n\n\n    .g-tick {\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        transform: rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg)));\n    }\n\n    .quarter-top-right *>.g-tick {\n        width: 86%;\n        position: absolute;\n        left: 0;\n        top: 100%;\n        background: linear-gradient(270deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 60%) 9%, rgba(0, 0, 0, 0) 9%);\n        transform: rotate(calc(calc(90deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(90deg / var(--ga-tick-count)) - 270deg)));\n        transform-origin: 0% 0%;\n    }\n\n    .quarter-top-left *>.g-tick {\n        width: 86%;\n        position: absolute;\n        left: 0;\n        top: 100%;\n        background: linear-gradient(270deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 60%) 9%, rgba(0, 0, 0, 0) 9%);\n        transform: rotate(calc(calc(90deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(90deg / var(--ga-tick-count)) - 270deg)));\n        transform-origin: -0.5% 0%;\n    }\n\n    .g-tick.clock {\n        transform: rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) + 270deg)));\n    }\n\n    .g-subtick {\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        transform: rotate(calc(calc(270deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-subtick-count)) + 45deg)));\n    }\n\n    .quarter-top-right *>.g-subtick {\n        width: 86%;\n        position: absolute;\n        left: 0;\n        top: 100%;\n        background: linear-gradient(270deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 60%) 5%, rgba(0, 0, 0, 0) 5%);\n        transform: rotate(calc(calc(90deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(90deg / var(--ga-subtick-count)) - 270deg)));\n        transform-origin: 0% 0%;\n    }\n\n    .quarter-top-left *>.g-subtick {\n        width: 86%;\n        position: absolute;\n        left: 0;\n        top: 100%;\n        background: linear-gradient(270deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 60%) 5%, rgba(0, 0, 0, 0) 5%);\n        transform: rotate(calc(calc(90deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(90deg / var(--ga-subtick-count)) - 270deg)));\n        transform-origin: -0.5% 0%;\n    }\n\n    .g-subtick.clock {\n        transform: rotate(calc(calc(360deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-subtick-count)) + 270deg)));\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 / 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 - calc(calc(270deg / var(--ga-tick-count))*-1 - 45deg)));\n    }\n\n    .quarter-top-right *>.g-num {\n        transform: translate(-50%, -50%) rotate(calc(calc(90deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(90deg / var(--ga-tick-count)) - 90deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(90deg / var(--ga-tick-count)) * var(--ga-tick) *-1 - calc(calc(90deg / var(--ga-tick-count))*-1 - 270deg)));\n    }\n\n    .quarter-top-left *>.g-num {\n        transform: translate(-50%, -50%) rotate(calc(calc(90deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(90deg / var(--ga-tick-count)) - 90deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(90deg / var(--ga-tick-count)) * var(--ga-tick) *-1 - calc(calc(90deg / var(--ga-tick-count))*-1 - 360deg)));\n    }\n\n    .g-num.clock {\n        transform: translate(-50%, -50%) rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) + 270deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) *-1 - calc(calc(360deg / var(--ga-tick-count))*-1 - 270deg)));\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) * 25%);\n        font-weight: 500;\n        filter: drop-shadow(2px 4px 10px black);\n    }\n\n    .quarter-top-right *>.g-nums {\n        top: 40%;\n        left: -40%;\n    }\n\n    .quarter-top-left *>.g-nums {\n        top: 40%;\n        left: 40%;\n        transform: rotate(270deg);\n    }\n\n    .g-needle {\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        transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));\n        transition: transform 1s;\n    }\n\n    .g-needle-secondary {\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-secondary) 15%, var(--needle-color-secondary) 50%, rgba(0, 0, 0, 0) 50%);\n        transform: rotate(calc(270deg * calc(var(--gauge-value-secondary, 0deg) / 100) - 45deg));\n        transition: transform 1s;\n    }\n\n    .g-target-needle {\n        position: absolute;\n        left: 0;\n        top: 49%;\n        width: 100%;\n        height: 1.5%;\n        transform: rotate(calc(270deg * calc(var(--gauge-target, 0deg) / 100) - 45deg));\n        transition: transform 1s;\n    }\n\n    .g-target-needle:before {\n        content: \"â–ş\";\n        position: absolute;\n        left: -1%;\n        top: calc(var(--container-size) * 1%);\n        line-height: 0;\n        font-size: calc(var(--container-size) * 35%);\n        color: #ffdc2d;\n        text-shadow: 0 0 3px black;\n    }\n\n    .quarter-top-right *>.g-needle {\n        position: absolute;\n        width: 74%;\n        height: 2%;\n        top: 89.5%;\n        left: 10%;\n        background: var(--needle-color);\n        transform: rotate(calc(90deg * calc(var(--gauge-value, 0deg) / 100) - 90deg));\n        transform-origin: 0% 50%;\n    }\n\n    .quarter-top-left *>.g-needle {\n        position: absolute;\n        width: 74%;\n        height: 2%;\n        top: 89.5%;\n        left: 90%;\n        background: var(--needle-color);\n        transform: rotate(calc(90deg * calc(var(--gauge-value, 0deg) / 100) - 270deg));\n        transform-origin: 0% 50%;\n    }\n\n    .g-needle.hour {\n        background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0, rgba(0, 0, 0, 0) 20%, var(--needle-color) 20%, var(--needle-color) 50%, rgba(0, 0, 0, 0) 50%);\n        transition: unset;\n\n        transform: rotate(var(--time-hour));\n    }\n\n\n    .g-needle.minute {\n        top: 49.25%;\n        height: 1.5%;\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        transition: unset;\n        transform: rotate(var(--time-minute));\n    }\n\n    .g-needle.second {\n        top: 49.5%;\n        height: 0.5%;\n        background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0, rgba(0, 0, 0, 0) 10%, var(--needle-color) 10%, var(--needle-color) 50%, rgba(0, 0, 0, 0) 50%);\n        transform: rotate(var(--time-second));\n        transition: unset;\n    }\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        width: 8%;\n        height: 8%;\n        top: 50%;\n        left: 50%;\n        border-radius: 50%;\n        box-shadow: 0 1px 4px #0000009c;\n        background: var(--needle-color);\n        transform: translate(-50%, -50%);\n    }\n\n    .quarter-top-right *>.g-needle-ring {\n        top: 90%;\n        left: 10%;\n    }\n\n    .quarter-top-left *>.g-needle-ring {\n        top: 90%;\n        left: 90%;\n    }\n\n\n    .g-val {\n        position: absolute;\n        text-align: center;\n        left: 50%;\n        bottom: 8%;\n        width: 80px;\n        font-family: monospace;\n        font-size: calc(var(--container-size) * 40%);\n        color: #000000a1;\n        filter: drop-shadow(2px 3px 2px #00000050);\n        transform: translateX(-50%);\n    }\n\n\n    .quarter-top-right *>.g-val {\n        width: 100%;\n        bottom: calc(calc(var(--container-size) * 8%) / calc(var(--container-size)/4));\n        font-size: calc(var(--container-size) * 25%);\n    }\n\n    .quarter-top-left *>.g-val {\n        width: 100%;\n        bottom: calc(calc(var(--container-size) * 8%) / calc(var(--container-size)/4));\n        font-size: calc(var(--container-size) * 25%);\n    }\n\n    .g-val-ring {\n        position: absolute;\n        right: 0%;\n        top: 0%;\n        width: 3px;\n        height: 30px;\n        border-radius: 50%;\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\n    .g-val-ring {\n        position: absolute;\n        right: 0%;\n        top: 0%;\n        width: calc(calc(var(--container-size) * 7%) / calc(var(--container-size)/4));\n        height: calc(calc(var(--container-size) * 6%) / calc(var(--container-size)/4));\n        border-radius: 50%;\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\n    .quarter-top-right *>.g-val-ring {\n        right: 0%;\n    }\n\n    .quarter-top-left *>.g-val-ring {\n        left: 0%;\n    }\n\n    .g-val-plate {\n        position: absolute;\n        right: 0%;\n        top: 0%;\n        width: 90%;\n        height: 90%;\n        border-radius: 50%;\n        background: #e4e9ee;\n        box-shadow: inset 0 0 15px #000000a3;\n        transform: translate(-5%, 5%);\n    }\n\n    .g-label {\n        position: absolute;\n        left: 50%;\n        top: 35%;\n        width: 100%;\n        font-family: monospace;\n        font-size: calc(var(--container-size) * 12%);       \n        text-align: center;\n        color: #000000a1;\n        filter: drop-shadow(2px 3px 2px #00000080);\n        transform: translateX(-50%);\n    }\n\n    .quarter-top-right *>.g-label {\n        left: 35%;\n        top: 60%;\n        width: 70%;\n    }\n\n    .quarter-top-left *>.g-label {\n        left: 65%;\n        top: 60%;\n        width: 70%;\n    }\n\n    .g-label::after {\n        position: absolute;\n        content: var(--g-unit);\n        left: 0;\n        top: 100%;\n        width: 100%;\n        height: 100%;\n        font-size: clamp(1em, calc(var(--container-size) * 40%), 1.5em);\n    }\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) * 4px);\n    height: calc(var(--container-size) * 4px); */\n\n        width: calc(var(--container-size)*2px);\n        height: calc(var(--container-size)*2px);\n\n\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        border-radius: 50px;\n        box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0, 0, 0, 0.2);\n        background: linear-gradient(135deg, #adadad 0%, #d3d3d3 51%, #d1d1d1 68%, #8c8c8c 100%);\n    }\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\n    .g-rivet:nth-child(2) {\n        top: calc(var(--container-size) * 1.5px);\n        right: calc(var(--container-size) * 1.5px);\n    }\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\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) * 3%);\n        height: calc(var(--container-size) * 3%);\n        border-radius: 5%;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n        box-shadow: inset 0px 1px 2px #222;\n        transform: translate(-50%, -50%);\n    }\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":870,"y":320,"wires":[[]]},{"id":"acd5ff3b36facea1","type":"ui-group","name":"Analog","page":"ae02a0fd8cd03855","width":"30","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"e9c974f7c1d080d1","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"ae02a0fd8cd03855","type":"ui-page","name":"Start","ui":"e9c974f7c1d080d1","path":"/Start","icon":"home","layout":"grid","theme":"71df790af7efd885","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Desktop","px":"1024","cols":"12"},{"name":"HD","px":"1900","cols":"18"},{"name":"Super HD","px":"2000","cols":"24"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"71df790af7efd885","type":"ui-theme","name":"BT Dark blue","colors":{"surface":"#00006e","primary":"#000082","bgPage":"#050546","groupBg":"#000050","groupOutline":"#5050c8"},"sizes":{"density":"compact","pagePadding":"3px","groupGap":"3px","groupBorderRadius":"3px","widgetGap":"2px"}}]
5 Likes
3

Wow ! It works !
You are the best :100:

4

Thanks for sharing that @hotNipi :grin:

I've tried to resize the clock by setting a class clock250 or clock300 and CSS

    .clock250.nrdb-ui-template {
        height: 250px;
    }
    .clock300.nrdb-ui-template {
        height: 300px;
    }

But the numbers don't change

image
image1048Ă—469 105 KB

I think it's something to do with --container-size in this div
<div ref="hotNipiClock" class="g-container" style="--gauge-value:0; --container-size:5; --gn-distance:11.6; --ga-tick-count:12; --ga-subtick-count:60; --g-unit:''; --time-hour:0; --time-minute:0; --time-second:0; ">
(Because if I change it from 5 to 6 in the 250px gauge I get this:)

image
image636Ă—410 64 KB

Unfortunately I can't understand how this applies, nor how to make it configurable via the widget class & CSS.

Please can you explain how it works?

5

Numbers are adjustable separately just because of the one may want them bigger or smaller and then the distance to ticks is also thing to change and so on.
It bases on the container size (which is near to an arbitrary number)

--gn-distance: moves numbres closer or away from ticks
and for size find class
.g-nums
and adjust font-size

2 Likes
6

If hotNipi has done his usual excellent job, you should set the size using the CSS variables and not directly. He will probably have calculations in the CSS that utilise the variables to scale everything accordingly.

Oops - didn't see his reply until after I typed this! Sorry.