Hey,
Keeping up on my battery application (node is copied below) - I am trying to get my msg.payload to animate HTML and CSS and I am not quite sure how to do this.
The example of the ui_template suggests that the HTML code would be handling it, i succesfully passed a message to display a value on the dashboard, now i would like to use that same value to position/colored css elements. I know it's more css/js related - but i have been on a lot of forum and try that all..so looking for your experience on using the ui_template.
I get the following HTML warning
You are using the ngTouch module.
AngularJS Material already has mobile click, tap, and swipe support...
ngTouch is not supported with AngularJS Material!
and
Source map error: request failed with status 404
Resource URL: http://localhost:1880/ui/js/app.min.js
Source Map URL: angular-chart.min.js.map[Learn More]
and this error (which use not to block me before)
Error: msg is undefined @http://localhost:1880/ui/#/0:5:9 $digest@http://localhost:1880/ui/js/app.min.js:165:410 $apply@http://localhost:1880/ui/js/app.min.js:168:361 e/q<@http://localhost:1880/ui/js/app.min.js:181:386 f@http://localhost:1880/ui/js/app.min.js:66:490 mg/k.defer/c<@http://localhost:1880/ui/js/app.min.js:69:418
Thanks for your recommendation.
[{"id":"89106e79.6e3368","type":"function","z":"19017313.db0925","name":"SOC","func":"if (msg.canid === 884) {\n var MSB = (msg.data[1]-10)/2 ;\n var Vtg = MSB/2 ;\n msg.payload = Vtg;\n return msg;\n} else {\n return null;\n}\n\n\n\n","outputs":2,"noerr":0,"x":230,"y":100,"wires":[["45ddf0ad.f0ab9"],[]]},{"id":"45ddf0ad.f0ab9","type":"delay","z":"19017313.db0925","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":370,"y":100,"wires":[["1345a1cf.428186"]]},{"id":"1345a1cf.428186","type":"ui_template","z":"19017313.db0925","group":"52aeaff2.e16798","name":"Batt_NEW","order":0,"width":0,"height":0,"format":"<div class=\"battery\">\n <div class=\"battery-level\" ></div>\n <div class=\"battery-text\"><p><span id=\"myMsg\"></span>%</p></div>\n</div>\n<!--\n<div class=\"battery\">\n <div class=\"battery-level warn\" style=\"width:18%;\"></div>\n</div>\n\n<div class=\"battery\">\n <div class=\"battery-level alert\" style=\"width:10%;\"></div>\n</div>\n-->\n\n<style>\n/*Initial Code By Mickael Novotny*/\n\n:root {\n --batt_lev: 50%;\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.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.battery-level {\n/* battery level*/\n background: --batt_col; \n position: absolute;\n top: 0px;\n bottom: 0px;\n left: --batt_lev;\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}\n</style>\n\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n // new message received\n document.getElementById(\"myMsg\").innerHTML = msg.payload;\n document.documentElement.style.setProperty(--batt_lev, msg.payload + '%');\n });\n})(scope);\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":550,"y":100,"wires":[[]]},{"id":"52aeaff2.e16798","type":"ui_group","z":"","name":"Car Data","tab":"ca621891.e2b488","order":3,"disp":true,"width":"12","collapse":false},{"id":"ca621891.e2b488","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
! Seems to work well now - i still have a couple of things to correct which i will work on
)
- should probably take a break on this now - sorry to bother Andrei - below is the flow. The only think that i can see now is that whenever i loose the property of the message it's getting back to 0. So still looking how i could sync those two messages (tried join but they don't have the same sample time) to get a unique msg with both properties (but this is probably off topic ?)