Msg.color stop updating Ui Template after 4.0.2 upgrade

Dashboard
1

I wrote a flow on Node-RED 3.1.6 and in the flow I use iconify icons. To set the color I send color: '#00afff' to the Ui template. After upgrading to 4.0.2 msg.color does not update the icon. I can manually type in the code and the color changes.

If you inject the msg in to the Ui template
image

it shows as

image

Please see code below. The css for .rounded is not in the code but does not affect what I am trying to show for the issue.

[{"id":"b62c0ece7b685e1b","type":"ui_template","z":"48a885b4dd2efb86","g":"3290b1603c3ac396","group":"b914eca7a788b208","name":"Antenna","order":10,"width":"4","height":"1","format":"<script src=\"https://code.iconify.design/2/2.0.3/iconify.min.js\"></script>\n\n<fieldset class=\"filled touched smallfont {{msg.style}}\">\n  <legend style=\"text-align: center\"> \n    <span class=\"iconify\" style=\"color:{{msg.color}}; height:24px ; width:24px;\" data-icon=\"iconoir:antenna\"></span>\n  </legend>\n  <div class=\"mediumfont\" ; style=\"text-align: center\">\n    {{msg.payload}}\n  </div>\n</fieldset>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":780,"y":400,"wires":[["82d9b61f0456c567"]]},{"id":"71c60857da77a49a","type":"inject","z":"48a885b4dd2efb86","name":"","props":[{"p":"payload"},{"p":"color","v":"#00afff","vt":"str"},{"p":"style","v":"rounded","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"80 M Dipole","payloadType":"str","x":350,"y":620,"wires":[["b62c0ece7b685e1b"]]},{"id":"b914eca7a788b208","type":"ui_group","name":"Radios","tab":"d8a12855.a756b8","order":1,"disp":false,"width":"4","collapse":false,"className":""},{"id":"d8a12855.a756b8","type":"ui_tab","name":"Station","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2

I figured out how to do get it to work. I suspect the way I had done was not a 'best' practice. I had to add a jquery scope watch to get the msg to update the css. Here is the code:

<script>
  scope.$watch('msg', function(msg) {
$("#color").css("color",(msg.color));
;
});
</script
1 Like
3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.