# Dashboard tips. Let the ui\_text act as level gauge ... DIY gauge examples

**URL:** <https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878>\
**Category:** Dashboard\
**Created:** [12 February 2021 16:27 UTC](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878 "2021-02-12T16:27:55Z")\
**Posts on this page:** 5\
**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:** [12 February 2021 16:27 UTC](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878/1 "2021-02-12T16:27:55Z")

</div>

A "poor-man" level gauge created with a few lines of jquery and css.

```auto
[{"id":"36bcc3c8.68771c","type":"ui_template","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","name":"loll","order":12,"width":"1","height":"0","format":"<style>\n .levelbody{\n background: #2626b4f7;\n height: 0%;\n position: absolute;\n width: 100%;\n bottom: 0;\n z-index:0;\n transition: height 1s;\n box-shadow: inset 0px 0px 10px 0px #00000080;\n \n }\n .levelframe{\n position:absolute;\n background:transparent;\n height:100%;\n width: 100%;\n border:2px solid #0000ff57 ;\n box-shadow:inset 0px 0px 41px 0px #000000b5;\n bottom:0;\n z-index:1;\n }\n .leveltext{\n text-shadow: 0px 0px 9px #191938c2;\n z-index:2;\n }\n</style>\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\".nr-dashboard-widget-Level\")){\n return\n \n }\n \n if (!$('.nr-dashboard-widget-Level').find('.levelbody').length) {\n $(\".nr-dashboard-widget-Level\").find(\"p\").addClass(\"leveltext\")\n $(\".nr-dashboard-widget-Level\").find(\".value\").css(\"font-size\",\"25px\")\n $(\".nr-dashboard-widget-Level\").prepend(\"<div class='levelbody'></div>\")\n $(\".nr-dashboard-widget-Level\").prepend(\"<div class='levelframe'></div>\")\n }\n $(\".levelbody\").css(\"height\",msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":590,"y":220,"wires":[["a00e9a56.b42a58"]]},{"id":"a00e9a56.b42a58","type":"ui_text","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","order":5,"width":"4","height":3,"name":"","label":"Level","format":"{{msg.payload}}%","layout":"col-center","x":730,"y":220,"wires":[]},{"id":"971b7001.1b3f2","type":"inject","z":"a05ff4cd.1ae7e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":310,"y":220,"wires":[["35be2967.0edfd6"]]},{"id":"35be2967.0edfd6","type":"random","z":"a05ff4cd.1ae7e8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":460,"y":220,"wires":[["36bcc3c8.68771c"]]},{"id":"19f5ed07.08a453","type":"ui_group","name":"Default","tab":"c71e2691.3704f8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c71e2691.3704f8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/728d9846ddb8438f4a6a6ecb22c7ac1ddb6a743b.png)

Real purpose of this post is to popularize the useful addition in widgets class list

```auto
class="nr-dashboard-text _md layout-column layout-align-center-center nr-dashboard-widget-Level visible"

```

The `nr-dashboard-widget-Level` in this list may come very handy in many situations when dealing with CSS for dashboard 🙂

---

<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:** [26 February 2021 13:05 UTC](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878/2 "2021-02-26T13:05:33Z")

</div>

For actual use, here is `ui_template` version of similarly looking thing. Acts in many ways, from bottom up, from top down, from side or from both sides. And can be round.

```auto
[{"id":"9821976d.81e4a8","type":"inject","z":"9f4fbba4.68ceb8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":1300,"wires":[["5d17609.94dd2a","9d583201.b3e3","7ceb37db.bf6158","9f86e34f.b94b5"]]},{"id":"5d17609.94dd2a","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1260,"wires":[["ff079329.434ad"]]},{"id":"9d583201.b3e3","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1340,"wires":[["a8b35e60.cbf8b","6a797db2.668714"]]},{"id":"a8b35e60.cbf8b","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level blue ","order":9,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">LEVEL</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody' style='background:#2196f399;'></div>\n <div class='levelframe' style='border-color:#2196f3; border-width:2px;'></div>\n</div>\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"height\",msg.payload+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":640,"y":1340,"wires":[[]]},{"id":"9139794a.12e668","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level top down","order":12,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">BLINDS</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody topdown' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"height\",msg.payload+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":1300,"wires":[[]]},{"id":"a78d7f3c.66fc6","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple-gauge css","order":3,"width":0,"height":0,"format":"<style id=\"simple-gauge\">\n\n.simple-gauge{\n overflow:hidden;\n position:relative;\n width:100%;\n height:100%;\n}\n.levelbody.side.right {\n right:0;\n}\n.levelbody.side.left {\n left:0;\n}\n.levelbody.side {\n height:100%;\n width:0%;\n}\n.levelbody.topdown {\n bottom: unset;\n top:0;\n}\n.levelbody.round {\n height:100%;\n width:100%;\n}\n.levelbody{\n background: #FFFFCCf7;\n height: 0%;\n position: absolute;\n width: 100%;\n bottom: 0;\n z-index:0;\n transition: all 1s;\n box-shadow: inset 0px 0px 10px 0px #00000080;\n}\n.bodywrap{\n position: absolute;\n clip-path: circle(50%);\n width: 100%;\n height: 100%;\n bottom: 0;\n}\n.levelframe.round{\n border-radius:50%;\n}\n.levelframe{\n position:absolute;\n box-sizing:border-box;\n background:transparent;\n height:100%;\n width: 100%;\n border:1px solid #FFFFFF ;\n box-shadow:inset 0px 0px 41px 0px #000000b5;\n bottom:0;\n z-index:1;\n}\n.leveltext{\n top:30%;\n position:relative;\n width:100%;\n text-align:center;\n text-shadow: 0px 0px 9px #191938c2;\n z-index:2;\n mix-blend-mode: exclusion;\n}\n.leveltext.value{\n font-size:25px;\n}\n.leveltext.title{\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":650,"y":1420,"wires":[[]]},{"id":"ff079329.434ad","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level side","order":11,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">BLINDS</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody side' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"width\",msg.payload+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":640,"y":1260,"wires":[[]]},{"id":"e9e664c6.c84b48","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level double side","order":13,"width":6,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">CURTAINS</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody side left' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelbody side right' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody.side\").css(\"width\",(msg.payload/2)+\"%\")\n \n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":670,"y":1220,"wires":[[]]},{"id":"6a797db2.668714","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level blue round","order":10,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge round\">\n <div class=\"leveltext title\">LEVEL</div>\n <div class=\"leveltext value\"></div>\n <div class=bodywrap>\n <div class='levelbody round' style='background:#2196f399;'></div>\n </div>\n <div class='levelframe round' style='border-color:#2196f3; border-width:2px;'></div>\n</div>\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"top\",(100-msg.payload)+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":1380,"wires":[[]]},{"id":"9f86e34f.b94b5","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1220,"wires":[["e9e664c6.c84b48"]]},{"id":"7ceb37db.bf6158","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1300,"wires":[["9139794a.12e668"]]},{"id":"19f5ed07.08a453","type":"ui_group","name":"Default","tab":"c71e2691.3704f8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c71e2691.3704f8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6e73197faca9a58fda5d6be53eab2f729778bc9d.png)

---

<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:** [28 February 2021 10:36 UTC](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878/3 "2021-02-28T10:36:08Z")

</div>

And if your expectations are a bit higher than abstract art can do, you are still on the land of CSS possibilities ... yes it is possible to put same gauge into the tank

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/63ddd9f96abf94b9771fa35905db219abdcd5b25.jpeg)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 February 2021 10:48 UTC](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878/4 "2021-02-28T10:48:17Z")

</div>

You are the best @hotNipi .

_We can only bow to your skills._😉

---

<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:** [30 March 2021 10:48 UTC](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878/5 "2021-03-30T10:48:21Z")

</div>

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