Weather Icon Previewer

README.md

Paul Reed created some really nice weather icons to display in the Node-RED dashboard. See his Weather Icons Lite page for installation steps. I created a Node-RED Dashboard UI which previews all of his Weather Icons using a slider.

Node-RED Dashboard Weather Icon Previewer

Node-RED flow

flow.json

[
    {
        "id": "2fc5b38b.4987ac",
        "type": "tab",
        "label": "Weather Icons",
        "disabled": false,
        "info": ""
    },
    {
        "id": "e82fa44b.23616",
        "type": "ui_template",
        "z": "2fc5b38b.4987ac",
        "group": "a6d199d8.11b45",
        "name": "Weather Icon Image",
        "order": 1,
        "width": "2",
        "height": "2",
        "format": "<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-4x wi {{msg.payload}}\"></i>\n</div>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 540,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "c3e8acf5.e5ea7",
        "type": "ui_template",
        "z": "2fc5b38b.4987ac",
        "group": "a6d199d8.11b45",
        "name": "Load CSS",
        "order": 0,
        "width": "0",
        "height": "0",
        "format": "<link rel=\"stylesheet\" href=\"/weather-icons-lite/css/weather-icons-lite.min.css\">\n<style>\n    .nr-dashboard-theme-dark ui-card-panel {\n \tbackground-color: #222;\n \toutline: 1px solid #cccccc;\n \t  }\n</style>\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 240,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "3db365b3.b2cfba",
        "type": "ui_text",
        "z": "2fc5b38b.4987ac",
        "group": "a6d199d8.11b45",
        "order": 0,
        "width": "6",
        "height": "1",
        "name": "Weather Icon Name",
        "label": "Current icon:",
        "format": "{{msg.payload}}",
        "layout": "row-center",
        "x": 530,
        "y": 220,
        "wires": []
    },
    {
        "id": "11cdf0a.9f6da8f",
        "type": "inject",
        "z": "2fc5b38b.4987ac",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "x": 90,
        "y": 100,
        "wires": [
            [
                "6afe12d6.38a8dc",
                "c3e8acf5.e5ea7"
            ]
        ]
    },
    {
        "id": "e43c6953.03b5a8",
        "type": "xml",
        "z": "2fc5b38b.4987ac",
        "name": "",
        "attr": "",
        "chr": "",
        "x": 410,
        "y": 100,
        "wires": [
            [
                "b278dc2a.369de8"
            ]
        ]
    },
    {
        "id": "6afe12d6.38a8dc",
        "type": "http request",
        "z": "2fc5b38b.4987ac",
        "name": "",
        "method": "GET",
        "ret": "txt",
        "url": "https://raw.githubusercontent.com/Paul-Reed/weather-icons-lite/master/xml/weather-icons-lite.xml",
        "tls": "",
        "x": 250,
        "y": 100,
        "wires": [
            [
                "e43c6953.03b5a8"
            ]
        ]
    },
    {
        "id": "b278dc2a.369de8",
        "type": "function",
        "z": "2fc5b38b.4987ac",
        "name": "Array of Weather Icon names",
        "func": "var weathericons = [];\nvar icon_name;\nfor( var i = 0; i < msg.payload.resources.string.length; i++ ) {\n    // Replace all of the \"wi_day_sunny\" with \"wi-day-sunny\"\n    // Except when the icon name should actually be wi-wu-nt_*\n    icon_name = msg.payload.resources.string[i].$.name.replace(/_/g,\"-\");\n    icon_name = icon_name.replace(/nt-/g,\"nt_\");\n    weathericons.push(icon_name);\n\n}\n\nmsg.payload = weathericons;\n// flow.set(\"weathericons\", weathericons );\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 620,
        "y": 100,
        "wires": [
            [
                "b064ad35.84777",
                "b953148.932ca68"
            ]
        ]
    },
    {
        "id": "b152a6ed.6a5ac8",
        "type": "ui_slider",
        "z": "2fc5b38b.4987ac",
        "name": "",
        "label": "slider",
        "group": "a6d199d8.11b45",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "",
        "min": 0,
        "max": "227",
        "step": 1,
        "x": 90,
        "y": 180,
        "wires": [
            [
                "1573d5cf.ab7a4a"
            ]
        ]
    },
    {
        "id": "13f1aae6.07ab7d",
        "type": "debug",
        "z": "2fc5b38b.4987ac",
        "name": "",
        "active": false,
        "console": "false",
        "complete": "payload",
        "x": 510,
        "y": 260,
        "wires": []
    },
    {
        "id": "1573d5cf.ab7a4a",
        "type": "function",
        "z": "2fc5b38b.4987ac",
        "name": "Look up Weather Icon",
        "func": "var weathericons = flow.get( \"weathericons\");\nmsg.payload = weathericons[msg.payload];\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 280,
        "y": 180,
        "wires": [
            [
                "e82fa44b.23616",
                "3db365b3.b2cfba",
                "13f1aae6.07ab7d"
            ]
        ]
    },
    {
        "id": "b064ad35.84777",
        "type": "change",
        "z": "2fc5b38b.4987ac",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "weathericons",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 880,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "b953148.932ca68",
        "type": "debug",
        "z": "2fc5b38b.4987ac",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "false",
        "x": 850,
        "y": 60,
        "wires": []
    },
    {
        "id": "a6d199d8.11b45",
        "type": "ui_group",
        "z": "",
        "name": "Weather Icons",
        "tab": "6531f3e5.98201c",
        "disp": true,
        "width": "8"
    },
    {
        "id": "6531f3e5.98201c",
        "type": "ui_tab",
        "z": "",
        "name": "Weather",
        "icon": "dashboard"
    }
]