# Level Up. (DIY gauge)

**URL:** <https://discourse.nodered.org/t/level-up-diy-gauge/80712>\
**Category:** Dashboard\
**Created:** [22 August 2023 11:44 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712 "2023-08-22T11:44:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 August 2023 11:44 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712/1 "2023-08-22T11:44:30Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/baca201b3eba049ce39ab5172032dcc073acaa45.png)

So let's try to bend the ribbon then 😃

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/50e2ab16bd0c3a93c1903b23db71738b930cfa85.png)

Here's the [wave generator](https://wave.novoselski.net/) to make nice curves for clip-path polygon

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [22 August 2023 14:26 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712/2 "2023-08-22T14:26:27Z")

</div>

Very nice!

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 August 2023 23:10 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712/3 "2023-08-22T23:10:59Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [23 August 2023 10:12 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712/4 "2023-08-23T10:12:16Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/84aee6812bbb35f26f571fc53f39d922cdf26d63.jpeg)

No problem with Chrome of FireFox

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 August 2023 10:24 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712/5 "2023-08-23T10:24:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 August 2023 12:40 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712/6 "2023-08-23T12:40:22Z")

</div>

Thank you @zenofmud for testing.

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/13ae0f033293d93d0c3dbed92e0a5d7db59397c7.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 September 2023 12:40 UTC](https://discourse.nodered.org/t/level-up-diy-gauge/80712/7 "2023-09-22T12:40:59Z")

</div>

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