How do I set up a Class Template for a group of UI Text nodes?

Dashboard
1

Hi guys1

I have the following template which can set a particular ui-text node's font by using its ID:

[
    {
        "id": "1354ad7a373cff3a",
        "type": "ui_template",
        "z": "68e5c71acc43e814",
        "g": "3965a91f04409ef6",
        "group": "62350f50d4b09ff8",
        "name": "Set NodeId Font->LCD_Text",
        "order": 70,
        "width": 0,
        "height": 0,
        "format": "<style>\n@font-face {\n    font-family: LCDFont;\n    src: url(\"/fonts/7 Segment.ttf\");\n}\n[node-id=\"06402e17db343b1b\"] .value {\n    font-size: 90px; \n    color:green;\n    font-family: LCDFont;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 300,
        "y": 1110,
        "wires": [
            []
        ]
    },
    {
        "id": "62350f50d4b09ff8",
        "type": "ui_group",
        "name": "PCR1000",
        "tab": "554e77d51ad13f2d",
        "order": 1,
        "disp": false,
        "width": 25,
        "collapse": false,
        "className": ""
    },
    {
        "id": "554e77d51ad13f2d",
        "type": "ui_tab",
        "name": "Main",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

It is working fine, but rather than specify a template for each UI-Text, I would like to be able to apply it using:

screenshot-127.0.0.1_1880-2021.11.05-23_16_09

Can you perhaps point me in the right direction?

TIA
Ed

2

Here's the concept of having class declared at the widget level. Examine all the widgets and see why and how it applies.

[
    {
        "id": "c7a835b9b00660a7",
        "type": "ui_text",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text node",
        "format": "this is text were class is set red",
        "layout": "row-left",
        "className": "textnode-red-value",
        "x": 770,
        "y": 970,
        "wires": []
    },
    {
        "id": "bdb7438992b91faf",
        "type": "ui_template",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "name": "",
        "order": 6,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .textnode-red-value .value{\n        color:red;\n    }\n    .textnode-green-value .value{\n    color:green;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 770,
        "y": 910,
        "wires": [
            []
        ]
    },
    {
        "id": "d1ca671a31f152a4",
        "type": "ui_text",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text node",
        "format": "this is text were class is set green",
        "layout": "row-left",
        "className": "textnode-green-value",
        "x": 770,
        "y": 1020,
        "wires": []
    },
    {
        "id": "25d2d74451c85647",
        "type": "ui_text",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text node",
        "format": "some other thex but green",
        "layout": "row-left",
        "className": "textnode-green-value",
        "x": 770,
        "y": 1060,
        "wires": []
    },
    {
        "id": "6ff3bb48.c2b764",
        "type": "ui_group",
        "name": "Storage",
        "tab": "c209d57.e95de28",
        "order": 1,
        "disp": true,
        "width": "18",
        "collapse": false
    },
    {
        "id": "c209d57.e95de28",
        "type": "ui_tab",
        "name": "Recordings",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

The class is added to the parent element so it takes to have css arranged to apply the rule to the those element child.

image
image1019×182 15.3 KB

3

Thanks Heaps!!

Got it working with your help!!

[
    {
        "id": "0d8b36259550032b",
        "type": "ui_template",
        "z": "68e5c71acc43e814",
        "g": "3965a91f04409ef6",
        "group": "6ff3bb48.c2b764",
        "name": "textnode-LCD-Font Template",
        "order": 6,
        "width": 0,
        "height": 0,
        "format": "<style>\n    @font-face {\n        font-family: LCDFont;\n        src: url(\"/fonts/7 Segment.ttf\");\n    }\n    .textnode-LCD-Font .value{\n        font-size: 90px; \n        color:green;\n        font-family: LCDFont;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 180,
        "y": 1140,
        "wires": [
            []
        ]
    },
    {
        "id": "6ff3bb48.c2b764",
        "type": "ui_group",
        "name": "Storage",
        "tab": "c209d57.e95de28",
        "order": 1,
        "disp": true,
        "width": "18",
        "collapse": false
    },
    {
        "id": "c209d57.e95de28",
        "type": "ui_tab",
        "name": "Recordings",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Regds
Ed

4

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