Great tutorial @Andrei much appreciated by the node-RED community.
Thanks for posting.
Paul
3 Likes
I revisited this thread to copy and reuse the scope.$watch code elsewhere and just now I realized that this very same part of code could be simplified.
The point is that the original demand was to insert msg.payload into the <span> element.
<div class="battery-text"><p><span id="myMsg"></span>%</p></div>
For this purpose it is not necessary to rely on scope.$watch. Instead the code inside the template could be simplified to:
<div class="battery">
<div class="battery-level"></div>
<div class="battery-text"><p><span id="myMsg">{{msg.payload}}</span>%</p></div>
</div>
I found it was better to edit a paragraph for clarity and add this post in case someone refers to this thread in the future.
[{"id":"38246fef.68cb","type":"tab","label":"SOC - 3 - Simplified - without scope.$watch","disabled":true,"info":""},{"id":"b5202bf5.0bde08","type":"delay","z":"38246fef.68cb","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":490,"y":180,"wires":[["6877907.0893a7"]]},{"id":"6877907.0893a7","type":"ui_template","z":"38246fef.68cb","group":"5b604618.e06228","name":"Batt_NEW","order":0,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<head>\n\n<style>\n\n/*Initial Code By Mickael Novotny*/\n\n:root {\n --batt_lev: {{msg.payload}}%;\n --batt_col: #30b455;\n}\n\nbody {\n padding: 25px 50px;\n}\n\n.battery {\n/* Battery outerwall*/\n border: 5px solid #333;\n width: 278px;\n height: 108px;\n padding: 4px;\n border-radius: 2px;\n position: relative;\n margin: 15px 0;\n} \n\n\n.battery::before {\n/* Battery Pole */\n content: '';\n height: 90px;\n width: 16px;\n background: #333;\n display: block;\n position: absolute;\n top: 7.5px;\n right: -16px;\n border-radius: 0 4px 4px 0;\n}\n\n.battery::after {\n/* Battery inner margins*/\n content: '';\n display: block;\n position: absolute;\n top: -3px;\n left: -3px;\n right: -3px;\n bottom: -3px;\n border: 6px solid #fff;\n border-radius: 2px;\n}\n\n-->\n\n.battery-level {\n/* battery level*/\n background: var(--batt_col, blue); \n position: absolute;\n top: 0px;\n bottom: 0px;\n width: var(--batt_lev, 50%);\n left: 0%;\n}\n\n.battery-text{\n z-index:99;\n position: absolute;\n font-size:32px;\n top: 20px;\n left:120px;\n color:'';\n}\n\n.warn {\n background-color: #efaf13;\n}\n \n.alert {\n background-color: #e81309;\n} \n\n.alert::after {\n background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3C%2Fg%3E%20%3Cpath%20fill%3D%22%23e81309%22%20d%3D%22M17.927%2012l2.68-10.28c0.040-0.126%200.060-0.261%200.060-0.4%200-0.726-0.587-1.32-1.314-1.32-0.413%200-0.78%200.187-1.019%200.487l-13.38%2017.353c-0.18%200.227-0.287%200.513-0.287%200.827%200%200.733%200.6%201.333%201.333%201.333h8.073l-2.68%2010.28c-0.041%200.127-0.060%200.261-0.060%200.4%200.001%200.727%200.587%201.32%201.314%201.32%200.413%200%200.78-0.186%201.020-0.487l13.379-17.353c0.181-0.227%200.287-0.513%200.287-0.827%200-0.733-0.6-1.333-1.333-1.333h-8.073z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); \n background-repeat: no-repeat;\n background-size: 18px;\n height: 18px;\n width: 18px;\n margin: 6px 0 0 8px;\n content: '';\n display: inline-block;\n position: absolute;\n}\n\n</style>\n</head>\n\n<body>\n\n<div class=\"battery\">\n <div class=\"battery-level\"></div>\n <div class=\"battery-text\"><p><span id=\"myMsg\">{{msg.payload}}</span>%</p></div>\n</div>\n\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":690,"y":180,"wires":[[]]},{"id":"4554a3ef.1b48fc","type":"inject","z":"38246fef.68cb","name":"Trigger","topic":"","payload":"","payloadType":"date","repeat":"0.9","crontab":"","once":true,"onceDelay":0.1,"x":140,"y":180,"wires":[["9b7df2b9.88ca6"]]},{"id":"9b7df2b9.88ca6","type":"change","z":"38246fef.68cb","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload%100","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":180,"wires":[["b5202bf5.0bde08"]]},{"id":"36278bd2.9c6a84","type":"comment","z":"38246fef.68cb","name":"Modified: removed scope.$watch","info":"","x":170,"y":120,"wires":[]},{"id":"5b604618.e06228","type":"ui_group","z":"","name":"Car Data","tab":"2935f8c9.c36ff8","order":3,"disp":true,"width":"12","collapse":false},{"id":"2935f8c9.c36ff8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
2 Likes
