# Method to interact bewteen node-red/JS/HTML/CSS ui\_template
**URL:** https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229
**Category:** Dashboard
**Created:** [23 October 2018 17:23 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229 "2018-10-23T17:23:33Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Bobet21](https://discourse.nodered.org/u/Bobet21)
#### Post date: [23 October 2018 17:23 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/1 "2018-10-23T17:23:33Z")
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](http://localhost:1880/ui/#/0:5:9) $digest@[http://localhost:1880/ui/js/app.min.js:165:410](http://localhost:1880/ui/js/app.min.js:165:410) $apply@[http://localhost:1880/ui/js/app.min.js:168:361](http://localhost:1880/ui/js/app.min.js:168:361) e/q\<@[http://localhost:1880/ui/js/app.min.js:181:386](http://localhost:1880/ui/js/app.min.js:181:386) f@[http://localhost:1880/ui/js/app.min.js:66:490](http://localhost:1880/ui/js/app.min.js:66:490) mg/k.defer/c\<@[http://localhost:1880/ui/js/app.min.js:69:418](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":"\n\n\n\n\n\n","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"}]`
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [23 October 2018 21:55 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/2 "2018-10-23T21:55:35Z")
> [@Bobet21](#):
>
> i succesfully passed a message to display a value on the dashboard,
I suspect that you did not copy the full code since there is not data feeding the function node screenshot below) and this results in errros.
By generating random data (state of charge in msg.payload) I got the following displayed in the dashboard. I guess you are almost there.
my test flow:
```auto
[{"id":"9345e788.8ae158","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"c2c17c33.f245d","type":"delay","z":"9345e788.8ae158","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":590,"y":320,"wires":[["a246f6ee.fa75c8","b0b0d6e.78fc628"]]},{"id":"a246f6ee.fa75c8","type":"ui_template","z":"9345e788.8ae158","group":"b8a5fd64.71bf8","name":"Batt_NEW","order":0,"width":0,"height":0,"format":"\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":770,"y":320,"wires":[[]]},{"id":"b0b0d6e.78fc628","type":"debug","z":"9345e788.8ae158","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":760,"y":280,"wires":[]},{"id":"7147e36.1a3c41c","type":"inject","z":"9345e788.8ae158","name":"Trigger","topic":"","payload":"","payloadType":"date","repeat":"3","crontab":"","once":true,"onceDelay":0.1,"x":240,"y":320,"wires":[["54a8c2a0.75442c"]]},{"id":"54a8c2a0.75442c","type":"change","z":"9345e788.8ae158","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload%100","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":320,"wires":[["c2c17c33.f245d"]]},{"id":"b8a5fd64.71bf8","type":"ui_group","z":"","name":"Car Data","tab":"f484a0a.6c67a6","order":3,"disp":true,"width":"12","collapse":false},{"id":"f484a0a.6c67a6","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
```
---
### Author:  [@Bobet21](https://discourse.nodered.org/u/Bobet21)
#### Post date: [24 October 2018 05:49 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/3 "2018-10-24T05:49:21Z")
Thanks Andrei, yes indeed i didn't put my input node from my CAN network
by changing your UI theme to Light you would see something like the one i designed - basically trying to get, mostly, a green filling of the battery based on the msg.payload value.
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 October 2018 12:07 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/4 "2018-10-24T12:07:34Z")
> [@Bobet21](#):
>
> trying to get, mostly, a green filling of the battery based on the msg.payload value.
ok, I see now.
There are possibly two or three things to fix in the code.
**Let´s starting talking about CSS variables**.
This `::root` statement is good for static data. Later on we may need to use mustache syntax to change the `batt_lev` variable based on `msg.payload`.
```auto
:root {
--batt_lev: 80%;
--batt_col: #30b455;
}
```
Moving on, I think it is necessary to replace:
```auto
.battery-level {
/* battery level*/
background: --batt_col;
position: absolute;
top: 0px;
bottom: 0px;
left: --batt_lev;
}
```
by
```auto
.battery-level {
/* battery level*/
background: var(--batt_col, blue);
position: absolute;
top: 0px;
bottom: 0px;
left: var(--batt_lev, 50px);
}
```
Please test and let me know the results.
---
### Author:  [@Bobet21](https://discourse.nodered.org/u/Bobet21)
#### Post date: [24 October 2018 12:44 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/5 "2018-10-24T12:44:44Z")
Basically no change - can't see any color -
The attached code(Nored) there work for me - but i am not able to understand what it does - if that can help
[Battery-gauge-solved](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639)
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 October 2018 12:49 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/6 "2018-10-24T12:49:37Z")
As a matter of fact I have it working like shown below. I just wanted to show you, step by step, what are the changes made.
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 October 2018 12:53 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/7 "2018-10-24T12:53:34Z")
The second change applied is shown below. It seems to make more sense to incrementaly change the width of the charging bar, instead of changing the left margin property.
```auto
.battery-level {
/* battery level*/
background: var(--batt_col, blue);
position: absolute;
top: 0px;
bottom: 0px;
width: var(--batt_lev, 50%);
left: 0%;
}
```
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 October 2018 13:01 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/8 "2018-10-24T13:01:18Z")
Finally to make it dynamic according to the `msg.payload` I have used the mustache syntax as below:
```auto
:root {
--batt_lev: {{msg.payload}}%;
--batt_col: #30b455;
}
```
This is the working flow:
```auto
[{"id":"9345e788.8ae158","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"c2c17c33.f245d","type":"delay","z":"9345e788.8ae158","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":[["a246f6ee.fa75c8"]]},{"id":"a246f6ee.fa75c8","type":"ui_template","z":"9345e788.8ae158","group":"b8a5fd64.71bf8","name":"Batt_NEW","order":0,"width":0,"height":0,"format":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":690,"y":180,"wires":[[]]},{"id":"7147e36.1a3c41c","type":"inject","z":"9345e788.8ae158","name":"Trigger","topic":"","payload":"","payloadType":"date","repeat":"0.9","crontab":"","once":true,"onceDelay":0.1,"x":140,"y":180,"wires":[["54a8c2a0.75442c"]]},{"id":"54a8c2a0.75442c","type":"change","z":"9345e788.8ae158","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload%100","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":180,"wires":[["c2c17c33.f245d"]]},{"id":"b8a5fd64.71bf8","type":"ui_group","z":"","name":"Car Data","tab":"f484a0a.6c67a6","order":3,"disp":true,"width":"12","collapse":false},{"id":"f484a0a.6c67a6","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
```
---
### Author:  [@Bobet21](https://discourse.nodered.org/u/Bobet21)
#### Post date: [24 October 2018 13:04 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/9 "2018-10-24T13:04:43Z")
Thanks a lot Andrei 😊 ! Seems to work well now - i still have a couple of things to correct which i will work on
- like the background of the battery text to be transparent
- change the battery color according to the background
one more question i have then - considergin this mustache synthax
- could i get rid of this part of the JS code ?
> document.getElementById("myMsg").innerHTML = msg.payload;
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 October 2018 13:07 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/10 "2018-10-24T13:07:27Z")
> [@Bobet21](#):
>
> could i get rid of this part of the JS code ?
Actually I removed (commented out) the next line in the code as it seems unnecessary:
```auto
document.getElementById("myMsg").innerHTML = msg.payload;
//document.documentElement.style.setProperty(--batt_lev, msg.payload + '%');
```
The first line is required to show the numeric value inside the battery.
---
### Author:  [@Bobet21](https://discourse.nodered.org/u/Bobet21)
#### Post date: [24 October 2018 13:38 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/11 "2018-10-24T13:38:20Z")
The question maybe more generic - i though i had to use the JS to use any msg.payload value in dynamic. Would the moustache style be usable in both CSS and HTML? Would you have syntax guide on how i could use this to adapt the color based on the {{msg.payload}} value?
By the way - thanks for your time!
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 October 2018 16:57 UTC](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229/12 "2018-10-24T16:57:45Z")
HI @Bobet21, you're welcome. I modified your code to show you an example of using `msg.color` along with CSS variables.
```auto
[{"id":"21e5ebaa.aba024","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"61624757.a64c28","type":"ui_template","z":"21e5ebaa.aba024","group":"b8a5fd64.71bf8","name":"Batt_NEW","order":0,"width":0,"height":0,"format":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":630,"y":160,"wires":[[]]},{"id":"d8cabc6a.e87c5","type":"inject","z":"21e5ebaa.aba024","name":"Trigger","topic":"","payload":"","payloadType":"date","repeat":"0.9","crontab":"","once":true,"onceDelay":0.1,"x":120,"y":160,"wires":[["c742f45c.63c858"]]},{"id":"c742f45c.63c858","type":"change","z":"21e5ebaa.aba024","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload%100","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":160,"wires":[["23d767e1.0e1a38"]]},{"id":"23d767e1.0e1a38","type":"function","z":"21e5ebaa.aba024","name":"Set color","func":"let pay = msg.payload;\nlet col = \"lime\";\n\nswitch (true) {\n case (pay >70):\n col = \"lime\";\n break;\n case (pay >50):\n col = \"orange\";\n break; \n case (pay >0):\n col = \"red\";\n break;\n}\n\nmsg.color = col;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":160,"wires":[["61624757.a64c28"]]},{"id":"b8a5fd64.71bf8","type":"ui_group","z":"","name":"Car Data","tab":"f484a0a.6c67a6","order":3,"disp":true,"width":"12","collapse":false},{"id":"f484a0a.6c67a6","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
```
Some additional remarks:
CSS variables works well to dynamically change values of CSS properties. By using the mustache syntax it is possible to "copy" values from Node-Red msg to a CSS variables, as we did here:
```auto
:root {
--batt_lev: {{msg.payload}}%;
--batt_col: #30b455;
}
```
and afterwards we can access the CSS variable with the function var() as we did here:
```auto
width: var(--batt_lev, 50%);
```
Following paragraph edited (later) for clarity:
The original flow has a `