Zusätzliche Wettericons für UI Dashboard in Redmatic verfügbar machen
Weather Icons Lite ist eine Sammlung von Wettersymbolen/-Icons, die bereits in node-red integriert sind. Sie können somit in jedem Flow verwendet werden, das hochwertige wetterbasierte Symbole darstellen soll, die als Labels und/oder auf Tasten im Node-red Dashboard angezeigt werden können. Der NodeRed-Flow-Editor für z. B. das ui_template_widget
verweisst in seiner Infobox selbst auf diese in Node-Red out of-the-box verfügbaren Wetter-Icons:
Es gibt darüber hinaus auf dieser Basis ein in Node-red nutzbares noch umfangreiches Set von über 200 Wettersymbolen. Diese eignen sich insbesondere im Zusammenhang mit den in der OpenWeather-API verfügbaren Daten, wenn es darum geht:
- zusätzliche Wettersymbole für Tag- und Nacht-Design
- Symbole für Mond-, Sonnenauf- und -Untergang
- Uhrzeit-Icons für jede volle Stunde
- Windrichtungspfeile
- Beaufort Windstärke
- weitere verschiedene Icons im Wetter-Kontext und astronomischen Kontext
darstellen zu wollen.
Für die Einrichtung des vollen CSS-Repositories für RedMatic sind jedoch ein paar Dateien aus dem CSS-Repository auf RedMatic zu kopieren und es sind kleine Anpassungen in der Konfiguration vorzunehmen.
1) Clonen des Repositories
Erstellen eines neuen Verzeichnises (z.B. public) auf einem Rechner, welcher z. B. über sFTP zum Kopieren der Dateien auf die CCU3 mit dieser verbunden werden kann. Mit git wird nun dieses Repository in das neu erstellte Verzeichnis geklont:
cd && cd ./public
git clone https://github.com/Paul-Reed/weather-icons.git
2) Einrichten des Verzeichnis und Kopieren der CSS-Resourcen
Auf der CCU3 wird nun ebenfalls ein Verzeichnis weather-icons in dem für solche Zwecke vorgesehenen Pfad angelegt:
/usr/local/sdcard/www/addons/red/
Nun werden aus dem geklonten Repository mindestens die im folgenden Bild angegeben Dateien per sFTP in dieses Verzeichnis auf der CCU3 kopiert:
Beachten Sie die Verzeichnisstruktur und die Rechte auf Dateisystem!
3) httpStatic aktivieren durch Anpassen der RedMatic Node-Red settings.json
In der settings.jsonvon Node-red muss httpStatic aktiviert werden, damit das UI-Dashboard beim Rendering der Webseite die Symbole aufgrund der CSS-Angaben im Template/Widget einbeziehen kann:
/usr/local/addons/redmatic/etc/settings.json
Als nächster Schritte überprüft resp. passt man die Parameter httpRootund httpStatic gemäß des folgenden Beispiels an:
4) Neustart von RedMatic
(selbsterklärend)
5) Beispiel-Flow mit Einstellungen für das UI-Template Widget
Folgender Flow
[{"id":"f8c39451.3e2588","type":"ui_text","z":"2a69941d.ef5254","group":"632f4f94.2324a8","order":1,"width":"4","height":"1","name":"Condition Txt","label":"","format":"{{msg.payload.detail}}","layout":"row-center","x":1060,"y":140,"wires":[]},{"id":"f768b630.f413f","type":"function","z":"2a69941d.ef5254","name":"Prepare Dashboard Dat","func":"var windDirection = {};\nvar windDirectionIcon = {};\nvar windSpeed = {};\nvar windSpeedIcon = {};\nvar sunRise = {};\nvar sunSet = {};\nvar conditionIcon = {};\nvar date = new Date ();\n\n/* function for converting meteorogical degree to text */\n\nvar degToCard = function(deg){\nif (deg>11.25 && deg<=33.75){\nreturn \"Nord-Nord-Ost\";\n }else if (deg>33.75 && deg<56.25){\nreturn \"Nord-Ost\";\n }else if (deg>56.25 && deg<78.75){\nreturn \"Ost-Nord-Ost\";\n }else if (deg>78.75 && deg<101.25){\nreturn \"Ost\";\n }else if (deg>101.25 && deg<123.75){\nreturn \"Ost-Süd-Ost\";\n }else if (deg>123.75 && deg<146.25){\nreturn \"Süd-Ost\";\n }else if (deg>146.25 && deg<168.75){\nreturn \"Süd-Süd-Ost\";\n }else if (deg>168.75 && deg<191.25){\nreturn \"Süd\";\n }else if (deg>191.25 && deg<213.75){\nreturn \"Süd-Süd-West\";\n }else if (deg>213.75 && deg<236.25){\nreturn \"Süd-West\";\n }else if (deg>236.25 && deg<258.75){\nreturn \"West-Süd-West\";\n }else if (deg>258.75 && deg<281.25){\nreturn \"West\";\n }else if (deg>281.25 && deg<303.75){\nreturn \"West-Nord-West\";\n }else if (deg>303.75 && deg<326.25){\nreturn \"Nord-West\";\n }else if (deg>326.25 && deg<348.75){\nreturn \"Nord-Nord-West\";\n }else{\nreturn \"Nord\"; \n }\n}\n\n/* function for converting meteorogical degree to weather icons */\n\nvar degToCardIcon = function(deg){\nif (deg>11.25 && deg<=33.75){\nreturn \"wi-from-nne\";\n }else if (deg>33.75 && deg<56.25){\nreturn \"wi-from-ne\";\n }else if (deg>56.25 && deg<78.75){\nreturn \"wi-from-ene\";\n }else if (deg>78.75 && deg<101.25){\nreturn \"wi-from-e\";\n }else if (deg>101.25 && deg<123.75){\nreturn \"wi-from-ese\";\n }else if (deg>123.75 && deg<146.25){\nreturn \"wi-from-se\";\n }else if (deg>146.25 && deg<168.75){\nreturn \"wi-from-sse\";\n }else if (deg>168.75 && deg<191.25){\nreturn \"wi-from-s\";\n }else if (deg>191.25 && deg<213.75){\nreturn \"wi-from-ssw\";\n }else if (deg>213.75 && deg<236.25){\nreturn \"wi-from-sw\";\n }else if (deg>236.25 && deg<258.75){\nreturn \"wi-from-wsw\";\n }else if (deg>258.75 && deg<281.25){\nreturn \"wi-from-w\";\n }else if (deg>281.25 && deg<303.75){\nreturn \"wi-from-wnw\";\n }else if (deg>303.75 && deg<326.25){\nreturn \"wi-from-nw\";\n }else if (deg>326.25 && deg<348.75){\nreturn \"wi-from-nnw\";\n }else{\nreturn \"wi-from-n\"; \n }\n}\n\n/* Function for converting wind speed into Beaufort scale icon */\n\nvar speedToCardIcon = function(speed){\nif (speed>0.5 && speed<=1.5){\nreturn \"wi-wind-beaufort-1\";\n }else if (speed>1.5 && speed<=3.3){\nreturn \"wi-wind-beaufort-2\";\n }else if (speed>3.3 && speed<=5.5){\nreturn \"wi-wind-beaufort-3\";\n }else if (speed>5.5 && speed<=7.9){\nreturn \"wi-wind-beaufort-4\";\n }else if (speed>7.9 && speed<=10.7){\nreturn \"wi-wind-beaufort-5\";\n }else if (speed>10.7 && speed<=13.8){\nreturn \"wi-wind-beaufort-6\";\n }else if (speed>13.8 && speed<=17.1){\nreturn \"wi-wind-beaufort-7\";\n }else if (speed>17.1 && speed<=20.7){\nreturn \"wi-wind-beaufort-8\";\n }else if (speed>20.7 && speed<=24.4){\nreturn \"wi-wind-beaufort-9\";\n }else if (speed>24.4 && speed<=28.4){\nreturn \"wi-wind-beaufort-10\";\n }else if (speed>28.4 && speed<=32.6){\nreturn \"wi-wind-beaufort-11\";\n }else if (speed>32.6){\nreturn \"wi-wind-beaufort-12\";\n }else{\nreturn \"wi-wind-beaufort-0\"; \n }\n}\n\n/* Function for Time Conversions */\n\nfunction timeConverter(UNIX_timestamp){\n var a = new Date(UNIX_timestamp * 1000);\n var hour = a.getHours();\n var min = a.getMinutes();\n if (min < 10) {min = \"0\" + min;}\n else {min = min;}\n var sec = a.getSeconds();\n if (sec < 10) {sec = \"0\" + sec;}\n else {sec = sec;}\n \n var time = hour + ':' + min + ':' + sec ;\n return time;\n}\n\n/* Convert OpenWeeather Map Icon to https://erikflowers.github.io/weather-icons/ */\n\nconst owIconMap = new Map();\n\nowIconMap.set('01d', 'wi-day-sunny'); // clear sky\nowIconMap.set('02d', 'wi-day-cloudy'); // few clouds\nowIconMap.set('03d', 'wi-cloud'); // scattered clouds\nowIconMap.set('04d', 'wi-cloudy'); // broken clouds\nowIconMap.set('09d', 'wi-day-showers'); // shower rain\nowIconMap.set('10d', 'wi-day-rain'); // rain\nowIconMap.set('11d', 'wi-thunderstorm'); // thunderstorm\nowIconMap.set('13d', 'wi-snow'); // snow\nowIconMap.set('50d', 'wi-fog'); // mist\nowIconMap.set('01n', 'wi-night-clear'); // clear sky\nowIconMap.set('02n', 'wi-night-alt-cloudy'); // few clouds\nowIconMap.set('03n', 'wi-cloud'); // scattered clouds\nowIconMap.set('04n', 'wi-cloudy'); // broken clouds\nowIconMap.set('09n', 'wi-night-alt-showers'); // shower rain\nowIconMap.set('10n', 'wi-night-alt-rain'); // rain\nowIconMap.set('11n', 'wi-thunderstorm'); // thunderstorm\nowIconMap.set('13n', 'wi-snow'); // snow\nowIconMap.set('50n', 'wi-fog'); // mist\n\nconditionIcon.topic = \"ConditionIcon\";\nconditionIcon.payload = owIconMap.get(msg.payload.icon);\n\nwindDirection.topic = \"WindDirection\";\nwindDirection.payload = degToCard(msg.payload.winddirection);\n\nwindDirectionIcon.topic = \"WindDirectionIcon\";\nwindDirectionIcon.payload = degToCardIcon(msg.payload.winddirection);\n\nwindSpeed.topic = \"WindSpeed\";\nwindSpeed.payload = msg.payload.windspeed + \" m/s\"; /* \" + windDirection.payload; */\n\nwindSpeedIcon.topic = \"WindSpeedIcon\";\nwindSpeedIcon.payload = speedToCardIcon(msg.payload.windspeed);\n\nsunRise.topic = \"SunRise\";\nsunRise.payload = timeConverter(msg.payload.sunrise);\n\nsunSet.topic = \"SunRet\";\nsunSet.payload = timeConverter(msg.payload.sunset);\n\nowIconMap.clear(); //freeing resource\n\nreturn [conditionIcon, windSpeedIcon, windSpeed, windDirection, windDirectionIcon, sunRise, sunSet];","outputs":7,"noerr":0,"x":710,"y":280,"wires":[["d4c31d0f.e64218"],["1d7a70ae.4a0587"],["10144e20.d1313a"],[],["788a6579.ea7e34"],["522c2d91.5ffedc"],["f0839cf9.f458a8"]]},{"id":"10144e20.d1313a","type":"ui_text","z":"2a69941d.ef5254","group":"9631a21b.1a6e48","order":2,"width":"2","height":"1","name":"WindSpeed","label":"","format":"{{msg.payload}}","layout":"row-center","x":1050,"y":260,"wires":[]},{"id":"522c2d91.5ffedc","type":"ui_text","z":"2a69941d.ef5254","group":"3917802.e83608","order":2,"width":"2","height":"1","name":"Sunrise","label":"","format":"{{msg.payload}}","layout":"col-center","x":1040,"y":400,"wires":[]},{"id":"f0839cf9.f458a8","type":"ui_text","z":"2a69941d.ef5254","group":"3917802.e83608","order":4,"width":"2","height":"1","name":"Sunset","label":"","format":"{{msg.payload}}","layout":"col-center","x":1040,"y":480,"wires":[]},{"id":"e03d7879.3389c8","type":"ui_template","z":"2a69941d.ef5254","group":"3917802.e83608","name":"Sunrise Icon","order":1,"width":"1","height":"1","format":"<link rel=\"stylesheet\" href=\"/addons/red/weather-icons/mycss/weather-icons.min.css\">\n<div style=\"display: flex;height: 100%;justify-content: left;align-items: center;\">\n<i class=\"fa-2x wi wi-sunrise\"></i>\n</div> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1050,"y":360,"wires":[[]]},{"id":"6dd2d6ec.d2aba8","type":"ui_template","z":"2a69941d.ef5254","group":"3917802.e83608","name":"Sunset Icon","order":3,"width":"1","height":"1","format":"<link rel=\"stylesheet\" href=\"/addons/red/weather-icons/mycss/weather-icons.min.css\">\n<div style=\"display: flex;height: 100%;justify-content: left;align-items: center;\">\n<i class=\"fa-2x wi wi-sunset\"></i>\n</div> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1050,"y":440,"wires":[[]]},{"id":"788a6579.ea7e34","type":"ui_template","z":"2a69941d.ef5254","group":"9631a21b.1a6e48","name":"WindDirection icon","order":3,"width":"1","height":"1","format":"<link rel=\"stylesheet\" href=\"/addons/red/weather-icons/mycss/weather-icons-wind.css\">\n<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-lg wi wi-wind {{msg.payload}}\"></i>\n</div> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1070,"y":300,"wires":[[]]},{"id":"8f851902.1a086","type":"openweathermap","z":"2a69941d.ef5254","name":"Get Current Weather","wtype":"current","lon":"8.01","lat":"50.01","city":"","country":"","language":"de","x":380,"y":140,"wires":[["f768b630.f413f","f8c39451.3e2588"]]},{"id":"1d7a70ae.4a0587","type":"ui_template","z":"2a69941d.ef5254","group":"9631a21b.1a6e48","name":"WindSpeed Icon","order":1,"width":"1","height":"1","format":"<link rel=\"stylesheet\" href=\"/addons/red/weather-icons/mycss/weather-icons-wind.css\">\n<div style=\"display: flex;height: 100%;justify-content: left;align-items: center;\">\n<i class=\"fa-2x wi wi-wind {{msg.payload}}\"></i>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1070,"y":220,"wires":[[]]},{"id":"d4c31d0f.e64218","type":"ui_template","z":"2a69941d.ef5254","group":"4fb1fda9.a150ac","name":"Condition Icon","order":1,"width":"2","height":"2","format":"<link rel=\"stylesheet\" href=\"/addons/red/weather-icons/mycss/weather-icons.min.css\">\n<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-4x wi {{msg.payload}}\"></i>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1060,"y":180,"wires":[[]]},{"id":"780f6870.0ab52","type":"link in","z":"2a69941d.ef5254","name":"Link to Refresh Btn","links":["28574fc0.09b598"],"x":175,"y":140,"wires":[["8f851902.1a086","e6cb1247.6b6528"]]},{"id":"632f4f94.2324a8","type":"ui_group","z":"","name":"Condition","tab":"d4f13986.04113","order":4,"disp":false,"width":"4","collapse":false},{"id":"9631a21b.1a6e48","type":"ui_group","z":"","name":"Wind","tab":"d4f13986.04113","order":5,"disp":false,"width":"4","collapse":false},{"id":"3917802.e83608","type":"ui_group","z":"","name":"Ereignisse","tab":"4e9b13b2.12840c","order":5,"disp":true,"width":"6","collapse":false},{"id":"4fb1fda9.a150ac","type":"ui_group","z":"","name":"Condition","tab":"d4f13986.04113","order":2,"disp":false,"width":"2","collapse":false},{"id":"d4f13986.04113","type":"ui_tab","z":"","name":"Wetterstation","icon":"fa-thermometer-half","order":5,"disabled":false,"hidden":false},{"id":"4e9b13b2.12840c","type":"ui_tab","z":"","name":"Home","icon":"home","order":1}]
fragt über die public OpenWeather-API die aktuelle Wetterdaten ab, erstellt ein kleines Dashboard und nutzt darin die Icons aus den neuen CSS-Ressourcen.
Exemplarisch sei hier der HTML-Code des ui_template-Nodes für das Symbol der aktuellen Wetterlage dargestellt:
Wie oben erwähnt, sind ebenso die Sonnenauf- und -untergangssymbole verfügbar:
Sofern die zusätzlichen Icons benötigt werden, stellt dieses Beispiel eine schöne Ergänzung für Node-red im allg. und in Verbindung mit RedMatic im speziellen eine sinnvolle Erweiterung dar, wenn man UI-Dashboard mit umfangreichen grafischen Wetter- und anderen Symbolen nutzen will.
Vielen Dank an dieser Stelle für die Hilfe und Anmerkungen von @Hypnos3 und @hobbyquaker im Zusammenhang mit dieser Ergänzung für RedMatic.
