Weather icons Previewer

Paul Reed created some really nice weather icons to display in the Node-RED dashboard. 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 Dashboard Weather Icon Previewer

Node-RED flow

Node-RED Weather Icon  Previewer flow pix

[
    {
        "id": "b2a443e3.97e438",
        "type": "tab",
        "label": "Weather Icons",
        "disabled": false,
        "info": ""
    },
    {
        "id": "a90de97d.0b79d8",
        "type": "ui_template",
        "z": "b2a443e3.97e438",
        "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": 580,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "b1a7d5c8.15e148",
        "type": "inject",
        "z": "b2a443e3.97e438",
        "name": "test inject wi-wu-nt_fog",
        "topic": "",
        "payload": "wi-wu-nt_fog",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "x": 290,
        "y": 300,
        "wires": [
            [
                "a90de97d.0b79d8",
                "a21dd1de.001a28"
            ]
        ]
    },
    {
        "id": "4826e499.bb221c",
        "type": "ui_template",
        "z": "b2a443e3.97e438",
        "group": "a6d199d8.11b45",
        "name": "Load CSS",
        "order": 0,
        "width": "0",
        "height": "0",
        "format": "<link rel=\"stylesheet\" href=\"/weather-icons/mycss/weather-icons.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": 130,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "a21dd1de.001a28",
        "type": "ui_text",
        "z": "b2a443e3.97e438",
        "group": "a6d199d8.11b45",
        "order": 0,
        "width": "4",
        "height": "2",
        "name": "Weather Icon Name",
        "label": "Current icon:",
        "format": "{{msg.payload}}",
        "layout": "row-center",
        "x": 580,
        "y": 300,
        "wires": []
    },
    {
        "id": "cf14d6b.7cbe228",
        "type": "inject",
        "z": "b2a443e3.97e438",
        "name": "",
        "topic": "",
        "payload": "https://raw.githubusercontent.com/erikflowers/weather-icons/master/values/weathericons.xml",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "x": 110,
        "y": 120,
        "wires": [
            [
                "2241567a.9a9de2"
            ]
        ]
    },
    {
        "id": "ee9fc4ad.f6afc",
        "type": "xml",
        "z": "b2a443e3.97e438",
        "name": "",
        "attr": "",
        "chr": "",
        "x": 430,
        "y": 120,
        "wires": [
            [
                "b036a0a1.574c4"
            ]
        ]
    },
    {
        "id": "2241567a.9a9de2",
        "type": "http request",
        "z": "b2a443e3.97e438",
        "name": "",
        "method": "GET",
        "ret": "txt",
        "url": "https://raw.githubusercontent.com/erikflowers/weather-icons/master/values/weathericons.xml",
        "tls": "",
        "x": 270,
        "y": 120,
        "wires": [
            [
                "ee9fc4ad.f6afc"
            ]
        ]
    },
    {
        "id": "b036a0a1.574c4",
        "type": "function",
        "z": "b2a443e3.97e438",
        "name": "Array of Weather Icon names",
        "func": "var weathericons = [];\nfor( var i = 0; i < msg.payload.resources.string.length; i++ ) {\n    // Replace all of the \"wi_day_sunny\" with \"wi-day-sunny\"\n    weathericons.push(msg.payload.resources.string[i].$.name.replace(/_/g,\"-\"));\n}\nmsg.payload = weathericons;\n// flow.set(\"weathericons\", weathericons );\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 650,
        "y": 120,
        "wires": [
            [
                "7befd28c.5f2c8c",
                "bb6a5a2f.318ca"
            ]
        ]
    },
    {
        "id": "d105cdf3.9a2838",
        "type": "ui_slider",
        "z": "b2a443e3.97e438",
        "name": "",
        "label": "slider",
        "group": "a6d199d8.11b45",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "",
        "min": 0,
        "max": "595",
        "step": 1,
        "x": 110,
        "y": 220,
        "wires": [
            [
                "b2fce57.ff34c18"
            ]
        ]
    },
    {
        "id": "a1052d9b.1432d",
        "type": "debug",
        "z": "b2a443e3.97e438",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "payload",
        "x": 550,
        "y": 220,
        "wires": []
    },
    {
        "id": "b2fce57.ff34c18",
        "type": "function",
        "z": "b2a443e3.97e438",
        "name": "Look up Weather Icon",
        "func": "var weathericons = flow.get( \"weathericons\");\nmsg.payload = weathericons[msg.payload];\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 300,
        "y": 220,
        "wires": [
            [
                "a1052d9b.1432d",
                "a21dd1de.001a28",
                "a90de97d.0b79d8"
            ]
        ]
    },
    {
        "id": "7befd28c.5f2c8c",
        "type": "change",
        "z": "b2a443e3.97e438",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "weathericons",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 920,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "bb6a5a2f.318ca",
        "type": "debug",
        "z": "b2a443e3.97e438",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "false",
        "x": 890,
        "y": 140,
        "wires": []
    },
    {
        "id": "a6d199d8.11b45",
        "type": "ui_group",
        "z": "",
        "name": "Test",
        "tab": "6531f3e5.98201c",
        "disp": true,
        "width": "6"
    },
    {
        "id": "6531f3e5.98201c",
        "type": "ui_tab",
        "z": "",
        "name": "Test",
        "icon": "dashboard"
    }
]
johnwalicki

Flow Info

created 3 weeks, 4 days ago

Node Types

Core
  • change (x1)
  • debug (x2)
  • function (x2)
  • http request (x1)
  • inject (x2)
  • xml (x1)
Other
  • tab (x1)
  • ui_group (x1)
  • ui_slider (x1)
  • ui_tab (x1)
  • ui_template (x2)
  • ui_text (x1)

Tags

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