Level Up. (DIY gauge)

I was asked for a gauge some day.
Got a sketch also with simple guides:
Would be nice if the display is like led ribbon but wavy
If value is below threshold, should display red

image

So let's try to bend the ribbon then :smiley:

[{"id":"3006c9ca80d58e2f","type":"ui_template","z":"02ca79a9a08a0cf4","group":"340d31f212ce5a97","name":"Curved Gauge","order":0,"width":"6","height":"2","format":"<div class=\"lg-txt\"><span id=\"{{'val_'+$id}}\" class=\"lg-value\"></span><span class=\"lg-unit\">units</span></div>\n<div id=\"{{'lg_'+$id}}\" class=\"lg-gauge lg-clipped\">\n    <div class=\"lg-stripe lg-dim\"></div>\n    <div id=\"{{'stripe_'+$id}}\" class=\"lg-stripe lg-glow \"></div>\n</div>\n\n<script>\n    (function(scope) {\n    const min = -50;\n    const max = 300;\n    const setpoint = 50;\n    const ok = 150;\n    const bad = 30;\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n            const h = msg.payload > setpoint ? ok : bad; //hue value                    \n            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);\n            document.getElementById('lg_'+scope.$id).style.setProperty('--lg-hue', h);\n            document.getElementById('stripe_'+scope.$id).style.width =  v + \"%\";           \n            document.getElementById('val_'+scope.$id).innerText = msg.payload;  \n        }   \n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":720,"y":700,"wires":[[]]},{"id":"314c6b978935f783","type":"inject","z":"02ca79a9a08a0cf4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":350,"y":700,"wires":[["90fdec69f70a4c62"]]},{"id":"90fdec69f70a4c62","type":"function","z":"02ca79a9a08a0cf4","name":"random","func":"msg.payload = Math.floor(Math.random() * 350) - 50\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":700,"wires":[["3006c9ca80d58e2f"]]},{"id":"3af0fb04233893f5","type":"ui_template","z":"02ca79a9a08a0cf4","group":"9a0dc7b8658081f5","name":"curved gague CSS","order":2,"width":0,"height":0,"format":"<style>\n    .lg-clipped {\n        clip-path: polygon(100% 100%, 0% 100%, 0% 83.59%, 2% 83.5%, 4% 83.24%, 6% 82.79%, 8% 82.17%, 10% 81.38%, 12% 80.42%, 14% 79.3%, 16% 78.01%, 18% 76.57%, 20% 74.98%, 22% 73.25%, 24% 71.39%, 26% 69.4%, 28% 67.29%, 30% 65.07%, 32% 62.76%, 34% 60.35%, 36% 57.86%, 38% 55.31%, 40% 52.7%, 42% 50.04%, 44% 47.35%, 46% 44.63%, 48% 41.9%, 50% 39.17%, 52% 36.45%, 54% 33.76%, 56% 31.1%, 58% 28.48%, 60% 25.92%, 62% 23.43%, 64% 21.02%, 66% 18.7%, 68% 16.47%, 70% 14.35%, 72% 12.35%, 74% 10.48%, 76% 8.74%, 78% 7.14%, 80% 5.69%, 82% 4.39%, 84% 3.25%, 86% 2.28%, 88% 1.47%, 90% 0.84%, 92% 0.38%, 94% 0.1%, 96% 0%, 98% 0.08%, 100% 0.33%);\n    }\n\n    .lg-gauge {\n        --lg-hue: 220;\n        --lg-l: 50%;\n        --color: oklch(70% 0.3 var(--lg-hue));\n        --dim: oklch(43% 0.18 var(--lg-hue));\n        --col: var(--color);\n        position: relative;\n        width: 100%;\n        height: 100%;\n    }\n\n    .lg-stripe {\n        width: 100%;\n        height: 100%;\n        background: repeating-linear-gradient(90deg, var(--col), var(--col) 2px, 2px, transparent 4px);\n    }\n\n    .lg-dim {\n        --col: var(--dim);\n        position: absolute;\n    }\n\n    .lg-glow {\n        --col: var(--color);\n        position: absolute;\n        transition: 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);\n        filter: drop-shadow(0px 0px 5px var(--col));\n    }\n\n    .lg-txt {\n        left: 10%;\n        top: 5%;\n        font-size: 2em;\n        position: absolute;\n    }\n\n    .lg-value {\n        font-size: 1.2em;\n        font-weight: 600;\n    }\n\n    .lg-unit {\n        font-size: 0.5em;\n        padding-left: 0.25em;\n        vertical-align: top;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":730,"y":660,"wires":[[]]},{"id":"340d31f212ce5a97","type":"ui_group","name":"Curved Gauge","tab":"588b215f2b5ee2be","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"9a0dc7b8658081f5","type":"ui_group","name":"Pick","tab":"588b215f2b5ee2be","order":1,"disp":true,"width":"4","collapse":true,"className":""},{"id":"588b215f2b5ee2be","type":"ui_tab","name":"Colors","icon":"dashboard","disabled":false,"hidden":false}]

image

Here's the wave generator to make nice curves for clip-path polygon

15 Likes

Very nice!

2 Likes

Looks good, you should post it in the flows section (as I have mentioned before :wink: )

That way if I need something cool you have created, but cannot remember the topic, I can just search for your name there :+1:

Another odd Safari artifact (on my Mac), going from a larger green (or red) graph to a smaller one some green lines remain
green-stripes

No problem with Chrome of FireFox

I do use pretty new color space oklch . It may freely be related to this but I can't do any tests cos I dont have any I device. But it will be easy enough to convert it to use HEX or RGB color space if needed.

Thank you @zenofmud for testing.

Safari users can fix the issue by removing one line from CSS.

image

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.