Dashboard template - want to send icon by msg.payload, but doesn't work

Dashboard
1

Hi, it must be something obvious as I can't find solution.

I try to use template to show icon
if I enter to template

i have nice fire icon.

However, I want to do it programmically, so I try to inject message with
msg.payload = "fa fa-fire"

and use template as
which doesn't work.

Any thought?

[
    {
        "id": "532afaeffa9bb8d3",
        "type": "tab",
        "label": "FVE-voda",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "c96f5e956a370175",
        "type": "ui_template",
        "z": "532afaeffa9bb8d3",
        "group": "efe90ccc384fb6b3",
        "name": "",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "<i class=\"{{msg.payload}}\"></i>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 640,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "ccd2f3cbf9d29fbe",
        "type": "inject",
        "z": "532afaeffa9bb8d3",
        "name": "icon",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "\"fa fa-fire\"",
        "payloadType": "str",
        "x": 330,
        "y": 300,
        "wires": [
            [
                "c96f5e956a370175"
            ]
        ]
    },
    {
        "id": "efe90ccc384fb6b3",
        "type": "ui_group",
        "name": "Try",
        "tab": "0445cf945958507f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "0445cf945958507f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 3
    }
]

Node red v 2.2.2 on raspberry

2

It is already set us string type in the Debug node
No need to use the extra quotes that you have around the string "fa fa-fire"

Use :

image

3

thanks for response,

right, that works ... but I have now problem with refresh {?}

once I deploy flow, it doesnt work,

I have to switch between dashboard groups - there and back - viola - works.
Can I do that in the code?

Many thanks

4

maybe you need to give your icon an initial size with style ?

Test Flow

[{"id":"c96f5e956a370175","type":"ui_template","z":"532afaeffa9bb8d3","group":"efe90ccc384fb6b3","name":"","order":7,"width":0,"height":0,"format":"<i class=\"{{msg.payload}} fa-2x\" style=\"width:32px; height:32px;\"></i>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":640,"y":300,"wires":[[]]},{"id":"ccd2f3cbf9d29fbe","type":"inject","z":"532afaeffa9bb8d3","name":"icon fire","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fa fa-fire","payloadType":"str","x":390,"y":240,"wires":[["c96f5e956a370175"]]},{"id":"86f2f5f87caa980c","type":"inject","z":"532afaeffa9bb8d3","name":"icon snowflake","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fa fa-snowflake-o","payloadType":"str","x":360,"y":340,"wires":[["c96f5e956a370175"]]},{"id":"efe90ccc384fb6b3","type":"ui_group","name":"Try","tab":"0445cf945958507f","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"0445cf945958507f","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":3}]
5

perhaps a bit overdosed but this works for me:

[
    {
        "id": "92f5052ca0054b2b",
        "type": "tab",
        "label": "FVE-voda",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "f7f73fae9e56865b",
        "type": "ui_template",
        "z": "92f5052ca0054b2b",
        "group": "efe90ccc384fb6b3",
        "name": "",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "<span ng-if=\"IsMaterialIcon()===false\">\n    <i class=\"{{GetIcon()}}\" ng-class=\"icon\"></i>\n</span> \n<span ng-if=\"IsMaterialIcon()===true\">\n    <ui-icon icon=\"{{GetIcon()}}\" aria-hidden=\"false\">\n        <i class=\"{{GetIcon()}}\" ng-class=\"icon\"></i>\n    </ui-icon>\n</span> \n\n<script>\n    (function(scope){\n        scope.icon = '';\n        scope.GetIcon = function(){\n            return scope.icon;\n        }\n        scope.IsMaterialIcon = function(){\n            if(scope.icon.slice(0,2)=='mi'){\n                return true;\n            }else{\n                return false;\n            }\n        }\n        \n        scope.$watch('msg', function(msg) {\n            try{\n                switch(msg.topic){\n                    case 'icon':\n                        scope.$applyAsync(function(){\n                            scope.icon = msg.payload;\n                        });\n                        break;\n                    default:\n                        break;\n                }\n            }catch(err){\n                \n            }\n            \n        });\n    })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 720,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "201b3f29ae494883",
        "type": "inject",
        "z": "92f5052ca0054b2b",
        "name": "font awesome icon",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "icon",
        "payload": "fa fa-fire",
        "payloadType": "str",
        "x": 470,
        "y": 200,
        "wires": [
            [
                "f7f73fae9e56865b"
            ]
        ]
    },
    {
        "id": "b81c6907facd3e40",
        "type": "inject",
        "z": "92f5052ca0054b2b",
        "name": "material icon",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "icon",
        "payload": "mi-play_arrow",
        "payloadType": "str",
        "x": 490,
        "y": 320,
        "wires": [
            [
                "f7f73fae9e56865b"
            ]
        ]
    },
    {
        "id": "efe90ccc384fb6b3",
        "type": "ui_group",
        "name": "Try",
        "tab": "0445cf945958507f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "0445cf945958507f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 3
    }
]
6

Now this works well! Thank you

7

Thank you,

this is far beyond my knowledge :slight_smile:
However works great, and good study material.

Thank you

8

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