Ui template - multiple elements?

Dashboard
1

I'm attempting to combine two payloads in the dashboard. I've managed to combine them into 1 payload.

Currently, this is what I have, in two different dashboard groups (Motion & Time)
image

I'd like to get them into 1 group, so move the Time over into the group Motion, and then remove the group Time. I'm attempting to do this via the Template Ui node, but not having any luck.

This is what the below code results in. Not sure why only the : shows up and not the time. Also, why is it on a new line?
image

This is what I've got with the template node/widget.

Office: <font color="{{msg.color}}"><div class="material-icons {{msg.icon}}"/><font color="white">{{msg.time}} </font>

And here is an flow to import with the right data (msg.time msg.color etc).

[{"id":"ef1e2b95f17cad89","type":"ui_template","z":"dc8def0e.5ff96","group":"ac35072fdc970f14","name":"Office","order":15,"width":0,"height":0,"format":"Office: <font color=\"{{msg.color}}\"><div class=\"material-icons {{msg.icon}}\"/><font color=\"white\">{{msg.time}} </font>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2150,"y":2420,"wires":[[]]},{"id":"5e2847d0a4de9e24","type":"inject","z":"dc8def0e.5ff96","name":"","props":[{"p":"topic","vt":"str"},{"p":"icon","v":"directions_walk","vt":"str"},{"p":"color","v":"red","vt":"str"},{"p":"time","v":"5:00","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Office","x":1850,"y":2420,"wires":[["ef1e2b95f17cad89","929690fd5f641eb5"]]},{"id":"929690fd5f641eb5","type":"debug","z":"dc8def0e.5ff96","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2150,"y":2460,"wires":[]},{"id":"ac35072fdc970f14","type":"ui_group","name":"Temp","tab":"1862e313.45ffad","order":21,"disp":true,"width":"4","collapse":false},{"id":"1862e313.45ffad","type":"ui_tab","name":"Mike","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
2

ok , im not a css person and have probably missed some thing
try the following

    <div layout="row" layout-align="start center">
    Office:
    <span flex class="material-icons {{msg.icon}}"> </span>

    <span flex style="color:{{msg.color}}">{{msg.time}}</span>
    </div>```
1 Like
3

ive added the topic and changed the icon colour as well in this.

    {
        "id": "a7b96b8807d3d0de",
        "type": "tab",
        "label": "Flow 3",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "ef1e2b95f17cad89",
        "type": "ui_template",
        "z": "a7b96b8807d3d0de",
        "group": "ac35072fdc970f14",
        "name": "Office",
        "order": 1,
        "width": 5,
        "height": 1,
        "format": "\n    <div layout=\"row\" layout-align=\"start center\">\n    <span flex style=\"color:white\">{{msg.topic}}</span>\n    <span flex class=\"material-icons {{msg.icon}}\" style=\"color:{{msg.color}}\" > </span>\n    <span flex style=\"color:{{msg.color}}\">{{msg.time}}</span>\n    </div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1130,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "5e2847d0a4de9e24",
        "type": "inject",
        "z": "a7b96b8807d3d0de",
        "name": "",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "icon",
                "v": "directions_run",
                "vt": "str"
            },
            {
                "p": "color",
                "v": "red",
                "vt": "str"
            },
            {
                "p": "time",
                "v": "6:00",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Shed",
        "x": 790,
        "y": 260,
        "wires": [
            [
                "ef1e2b95f17cad89",
                "929690fd5f641eb5"
            ]
        ]
    },
    {
        "id": "929690fd5f641eb5",
        "type": "debug",
        "z": "a7b96b8807d3d0de",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1110,
        "y": 300,
        "wires": []
    },
    {
        "id": "e1378f79b560655d",
        "type": "inject",
        "z": "a7b96b8807d3d0de",
        "name": "",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "icon",
                "v": "directions_walk",
                "vt": "str"
            },
            {
                "p": "color",
                "v": "green",
                "vt": "str"
            },
            {
                "p": "time",
                "v": "5:00",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Office",
        "x": 790,
        "y": 300,
        "wires": [
            [
                "ef1e2b95f17cad89"
            ]
        ]
    },
    {
        "id": "ac35072fdc970f14",
        "type": "ui_group",
        "name": "Temp",
        "tab": "1862e313.45ffad",
        "order": 21,
        "disp": true,
        "width": 5,
        "collapse": false
    },
    {
        "id": "1862e313.45ffad",
        "type": "ui_tab",
        "name": "Mike",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]```
4

Thanks mate. That will get me where I need to get. You're a better css person that me. Thanks!

1 Like
5

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