Weather Icon Previewer
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
[{"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"}]
