Ng-bind-html include more than 1 element in Template

General
1

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

2

You can reference the msg properties with mustache format. eg

<span> {{msg.deerMode}} {{msg.eastLightStatus}} </span>

then you can use these properties to specify a colour or icon etc as required.

3

Hmm, I tried this but using this method sends the icons and text not as html. Also this method also only shows one element at a time.

Still stuck..

4

Not sure what you mean html is basically text, you can put anything the payloads ?
How are you sending the messages, if both properties don't exist in the msg then you will only see the one that does.

Can you give a better example of what you are sending and what you want it to do ?

5

I just had a look at your flow, I think you may be barking up the wrong tree.

I think you will find it a lot easier to use standard dashboard widgets to get the same results.

As an example this is one of my tabs all done with standard widgets.

image
image660Ă—769 44.4 KB

6

Beautiful! Yes, that's the direction I'm heading in. Please share your flow so I can check it out.

Thanks!
Rich

7

Some examples of ui switch nodes, note the template is required to allow the use of extra icons from iconify

[
    {
        "id": "db3067a063384197",
        "type": "ui_switch",
        "z": "be14baae.1728",
        "name": "Landing Light Auto",
        "label": "",
        "tooltip": "",
        "group": "c19b844d5d34a8cd",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "auto.landing_light_auto",
        "topicType": "str",
        "style": "",
        "onvalue": "ON",
        "onvalueType": "str",
        "onicon": "iconify-mdi:motion-sensor 34px",
        "oncolor": "#ff8000",
        "offvalue": "OFF",
        "offvalueType": "str",
        "officon": "iconify-mdi:motion-sensor-off 34px",
        "offcolor": "grey",
        "animate": true,
        "className": "",
        "x": 2235,
        "y": 3000,
        "wires": [
            []
        ]
    },
    {
        "id": "094f0e82e8a023fd",
        "type": "ui_switch",
        "z": "be14baae.1728",
        "name": "",
        "label": "Landing Light",
        "tooltip": "",
        "group": "c19b844d5d34a8cd",
        "order": 1,
        "width": 3,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "cmnd/Landing/Power1",
        "topicType": "str",
        "style": "",
        "onvalue": "ON",
        "onvalueType": "str",
        "onicon": "fa-power-off fa-2x",
        "oncolor": "lime",
        "offvalue": "OFF",
        "offvalueType": "str",
        "officon": "fa-power-off fa-2x",
        "offcolor": "grey",
        "animate": true,
        "className": "",
        "x": 2225,
        "y": 3045,
        "wires": [
            []
        ]
    },
    {
        "id": "3748928a8a8d0937",
        "type": "ui_switch",
        "z": "be14baae.1728",
        "name": "lounge_lamp Auto",
        "label": "",
        "tooltip": "",
        "group": "c19b844d5d34a8cd",
        "order": 11,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "auto.lounge_lamp",
        "topicType": "str",
        "style": "",
        "onvalue": "auto",
        "onvalueType": "str",
        "onicon": "iconify-ic:outline-access-time 34px",
        "oncolor": "#ff8000",
        "offvalue": "stop",
        "offvalueType": "str",
        "officon": "iconify-ic:outline-access-time 34px",
        "offcolor": "grey",
        "animate": true,
        "className": "",
        "x": 2235,
        "y": 3090,
        "wires": [
            []
        ]
    },
    {
        "id": "f6fed51b42800712",
        "type": "ui_template",
        "z": "be14baae.1728",
        "group": "c19b844d5d34a8cd",
        "name": "allow iconify",
        "order": 9,
        "width": 0,
        "height": 0,
        "format": "\n<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 2215,
        "y": 2940,
        "wires": [
            []
        ],
        "info": "<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>"
    },
    {
        "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": false
    }
]