Hey All,
I recently started converting my dashboard from letters/words to icons using the Material Icons library from google and using CSS to change the colors of the icons.
Here is a static version of what I'm looking for.
[
{
"id": "0ed1c7a3148120c5",
"type": "ui_template",
"z": "6759bf7578d65fba",
"group": "c19b844d5d34a8cd",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "<span style=\"float:left; display: inline; clear:none;\">\n TEST ZONE\n <i class=\"material-icons big-icon\" style=\"color:firebrick; display: inline; font-weight: bolder; font-size: 150%;\">\n power_settings_new\n </i>\n <i class=\"material-icons big-icon\" style=\"color:seagreen; font-size:150%;\">\n lightbulb_outline\n </i>\n <i class=\"material-symbols-outlined\" style=\"color:darkorange; font-size:150%;\">\n mode_fan\n </i>\n <i class=\"material-symbols-outlined\" style=\"color:seagreen; font-size:150%;\">\n volume_up\n </i>\n</span><br />\n\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 660,
"y": 240,
"wires": [
[]
]
},
{
"id": "c19b844d5d34a8cd",
"type": "ui_group",
"name": "CLOCK",
"tab": "c548a45fe690539c",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "c548a45fe690539c",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": true
}
]
But when I try to make the icons change dynamically I'm having a hard time getting multiple variables, i.e. icons, to render in a template. I'm starting out with 2 variables, I'm able to get msgs to dynamically render but never both at the same time.
Here's the code from the template
<span ng-bind-html="msg.eastLightStatus"></span>
<span ng-bind-html="msg.deerMode"></span>
<!-- The following works halfway, but only renders one msg, the last updated one -->
<span ng-bind-html="(msg.deerMode) + (msg.eastLightStatus)"></span>
How can I get more than one msg to render in this template?
Thanks!
Rich