Checkmark for Ui_template

An extremely simple Boolean-powered checkmark in a _uitemplate. I use it to indicate the status of IoT devices, but it could be used to indicate pretty much any two-state value.

[
    {
        "id": "dc884fe.e4387b",
        "type": "ui_template",
        "z": "a2a0f621.d83018",
        "group": "5627adc5.5dddd4",
        "name": "state",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    i.off   {color: red;}\n    i.on    {color: green;}\n</style>\n<div layout=\"row\" layout-align=\"space-between\">\n    <p>Example State</p>\n    <p><i ng-class=\"{false:'fa fa-exclamation-circle off', true:'fa fa-check-circle on'}[(msg.payload || false)]\"></i></p>\n</div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 1350,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "5627adc5.5dddd4",
        "type": "ui_group",
        "z": "",
        "name": "Examples",
        "tab": "8656b654.3d56f8",
        "order": 1,
        "disp": true,
        "width": "6"
    },
    {
        "id": "8656b654.3d56f8",
        "type": "ui_tab",
        "z": "",
        "name": "Examples",
        "icon": "dashboard",
        "order": 4
    }
]
cerebrate

Flow Info

created 8 months, 2 weeks ago

Node Types

Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • ui_template
  • dashboard
  • checkmark
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option