[solved] Change color of template node with variable

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>
1 Like

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?

einsatzzeit

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

time

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 :slight_smile: