Dashboard tips. Let the ui_text act as level gauge ... DIY gauge examples

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

[{"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

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

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 :slight_smile:

8 Likes

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.

[{"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}]

7 Likes

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

5 Likes

You are the best @hotNipi .

We can only bow to your skills. :wink:

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