hi, i store the value of the variable (color1) in the flow. i would like to retrieve this value in the template node. What am I doing wrong?
value of color1 = rgba(208,22,22.1)
<style>
var color1 = flow.get("color1");
#Ereignismonitor_Einsatzzeit md-card {
font-size:160%;
font-weight: bold;
text-align:center;
justify-content: center;
background-color: color1;
}
</style>
<div ng-bind-html="msg.payload"></div>
You can't have any flow variable defined in style tags.
But you can send CSS properties with msg and use JavaScript to change properties of card.
Simple example
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
//assumng that msg.payload carry some color
$("#HOME_DEFAULT_cards").css("background-color",msg.payload)
}
});
})(scope);
</script>
great, thank you very much! Now I should only be able to insert the variable text (msg.topic) with the properties listed below by using css. How can I insert this in your script?
font-size:160%;
font-weight: bold;
text-align:center;
justify-content: center;
Well I'd avoid to use msg.topic for such kind of data transport but it is not hard rule...
You can have additional properties added to the msg.
like
msg.styles = {
fontSize:"160%",
fontWeight:"bold",
.....
}
And hen you'll need to figure out how those properties can be applied with JavaScript
The font-weight can be found from here HTML DOM Style fontWeight Property, try to find others, they are nearby.
thank you for your help. I think I'm on the wrong track. The idea is this: I have a stopwatch. When it is at 00 : 00: 00, the field (Ereignismonitor_Einsatzzeit md-card) should be green, when it is running, the field should be red (like picture below). Probably there is a much easier solution than using CSS?
Well the color is always CSS, except if it is image. So track is correct.
Share slight bit of the flow. Include nodes which send the data to the template...
Changing the color already works manually thanks to your help. Now the text (msg.time) is not displayed yet (I'm a beginner with nodered and have no idea how to insert it in the template node).
[
{
"id": "31354210.877a8e",
"type": "function",
"z": "a7d9890f.f7b6b8",
"name": "",
"func": "var seconds = msg.elapsed.time.seconds;\nvar minutes = msg.elapsed.time.minutes;\nvar hours = msg.elapsed.time.hours;\n//time.format('hh:mm:ss');\nlet hrs = ('00'+ hours).slice(-2);\nlet min = ('00'+ minutes).slice(-2);\nlet sec = ('00'+ seconds).slice(-2);\nmsg.time = \"EINSATZZEIT \" + hrs + \" : \" + min + \" : \" + sec;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"x": 1440,
"y": 1080,
"wires": [
[
"ca8496f9.a10478",
"155806cf.faeae9",
"cc87590.4b356a8",
"2ab8d6a7.5c504a"
]
]
},
{
"id": "2ab8d6a7.5c504a",
"type": "ui_template",
"z": "a7d9890f.f7b6b8",
"group": "4fceda30.842a04",
"name": "Einsatzzeit",
"order": 1,
"width": 6,
"height": 6,
"format": "<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n //assumng that msg.payload carry some color\n $(\"#Ereignismonitor_Einsatzzeit md-card\").css(\"background-color\",msg.payload)\n }\n });\n})(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"x": 1670,
"y": 1120,
"wires": [
[]
]
},
{
"id": "1e1b4248.409a7e",
"type": "inject",
"z": "a7d9890f.f7b6b8",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "rgba(208,22,22.1)",
"payloadType": "str",
"x": 1410,
"y": 1160,
"wires": [
[
"2ab8d6a7.5c504a"
]
]
},
{
"id": "229a0196.0598ce",
"type": "inject",
"z": "a7d9890f.f7b6b8",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "rgba(60,158,63,1.1)",
"payloadType": "str",
"x": 1410,
"y": 1120,
"wires": [
[
"2ab8d6a7.5c504a"
]
]
},
{
"id": "4fceda30.842a04",
"type": "ui_group",
"name": "Einsatzzeit",
"tab": "f01ad79b.4c5be8",
"order": 4,
"disp": false,
"width": "6",
"collapse": false
},
{
"id": "f01ad79b.4c5be8",
"type": "ui_tab",
"name": "Ereignismonitor",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
Did a bit to lead you to the right direction.
[{"id":"31354210.877a8e","type":"function","z":"63163740.2d4508","name":"","func":"var seconds = msg.elapsed.time.seconds;\nvar minutes = msg.elapsed.time.minutes;\nvar hours = msg.elapsed.time.hours;\n//time.format('hh:mm:ss');\nlet hrs = ('00'+ hours).slice(-2);\nlet min = ('00'+ minutes).slice(-2);\nlet sec = ('00'+ seconds).slice(-2);\nmsg.time = \"EINSATZZEIT \" + hrs + \" : \" + min + \" : \" + sec;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":280,"y":220,"wires":[["2ab8d6a7.5c504a"]]},{"id":"2ab8d6a7.5c504a","type":"ui_template","z":"63163740.2d4508","group":"4fceda30.842a04","name":"Einsatzzeit","order":1,"width":6,"height":6,"format":"<style>\n.container{\n margin:auto;\n text-align:center;\n}\n.counter{\n font-weight:bold;\n}\n.counter.title{\n color:beige;\n}\n.counter.clock{\n color:green;\n}\n</style>\n<div class=\"container\">\n <div class=\"counter title\" id=\"{{'title_'+$id}}\">TITLE HERE</div>\n <div class=\"counter clock\" id=\"{{'counter_'+$id}}\">CLOCK HRERE</div>\n</div>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n //assumng that msg.payload carry some color\n console.log(msg)\n \n if(msg.title){\n $(\"#title_\"+scope.$id).text(msg.title) \n }\n if(msg.time){\n $(\"#counter_\"+scope.$id).text(msg.time) \n }\n if(msg.payload){\n $(\"#Ereignismonitor_Einsatzzeit md-card\").css(\"background-color\",msg.payload)\n }\n \n \n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":530,"y":360,"wires":[[]]},{"id":"1e1b4248.409a7e","type":"inject","z":"63163740.2d4508","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgba(208,22,22.1)","payloadType":"str","x":270,"y":400,"wires":[["2ab8d6a7.5c504a"]]},{"id":"229a0196.0598ce","type":"inject","z":"63163740.2d4508","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgba(60,158,63,1.1)","payloadType":"str","x":270,"y":360,"wires":[["2ab8d6a7.5c504a"]]},{"id":"f26c1c7b.9978f","type":"inject","z":"63163740.2d4508","name":"time","props":[{"p":"time","v":"00:11:22","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":270,"y":300,"wires":[["2ab8d6a7.5c504a"]]},{"id":"88f813fa.c491f","type":"inject","z":"63163740.2d4508","name":"title","props":[{"p":"title","v":"SOMETHING","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":270,"y":260,"wires":[["2ab8d6a7.5c504a"]]},{"id":"4fceda30.842a04","type":"ui_group","name":"Einsatzzeit","tab":"f01ad79b.4c5be8","order":4,"disp":false,"width":"6","collapse":false},{"id":"f01ad79b.4c5be8","type":"ui_tab","name":"Ereignismonitor","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
wow, thank you so much for your help! This is terrific 
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy