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

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}]

10 Likes