OpenWeatherMap Weather Dashboard with Icons - Portrait

This flow pulls weather data from OpenWeatherMap (OWM) then presents it in a dashboard showing current weather conditions along with forecasts for the next 6 hours and 6 days. The mix of text and icons creates a compact and attractive display.

This version is formatted in a portrait orientation. A landscape version is also available.

Starting from Dashboard With Current Conditions And Forecast by djiwondee I made these changes:

One Call

I used the new One Call API from OpenWeatherMap that returns all this data:

• Minute forecast for 1 hour
• Hourly forecast for 48 hours
• Daily forecast for 7 days
• Historical data for 5 previous days

No Custom Nodes

The OpenWeatherMap custom node is good but it doesn't use the new One Call API. So I used standard nodes which was fairly easy. The HTTP call is simple and JSON data is returned which is perfect for Node-Red.

Weather Icons

I used the "lite" set of weather icons which are now included in Node-Red. No need to install an icon set.

Setup and Configuration

Go to OpenWeatherMap and sign up for a free account to get an API key.

Open the node labeled Settings and change these parameters:

• Change msg.payload.lat to your latitude.
• Change msg.payload.lon to your longitude.
• Change msg.payload.appid to your API key.
• Change msg.payload.units to imperial or metric.
• Change msg.payload.lang to your language, for example en for English. List of OWM languages
• Change msg.payload.hour12 to true to display times in 12 hour am/pm format, or false for 24 hour time format.

NOTE: You can get your latitude and longitude by looking up your town in OpenWeatherMap.

Changes

07 Apr 2021

• Use timezone from OWM to compute times and dates instead of using Node Red server settings.
• Added msg.payload.lang to support several languages. (If the short weekday names for the 4 day forecast do not match your language, you may need to upgrade to NodeJS 13 or higher when full international support was added for the toLocaleString function, or use the alternate code in the Format forecast data node.)
• Added msg.payload.hour12 to support 12 or 24 hour time display.
• Changed name of Set location, appid, units node to Settings.

Copy[{"id":"f74c934.b1f607","type":"tab","label":"OWM Portrait","disabled":false,"info":""},{"id":"976d517.6a183b","type":"change","z":"f74c934.b1f607","name":"Settings","rules":[{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"payload.lat","pt":"msg","to":"40.30","tot":"str"},{"t":"set","p":"payload.lon","pt":"msg","to":"-111.69","tot":"str"},{"t":"set","p":"payload.appid","pt":"msg","to":"<appID>","tot":"str"},{"t":"set","p":"payload.units","pt":"msg","to":"metric","tot":"str"},{"t":"set","p":"payload.lang","pt":"msg","to":"en","tot":"str"},{"t":"set","p":"hour12","pt":"flow","to":"false","tot":"bool"},{"t":"set","p":"units","pt":"flow","to":"payload.units","tot":"msg"},{"t":"set","p":"lang","pt":"flow","to":"payload.lang","tot":"msg"},{"t":"set","p":"payload.exclude","pt":"msg","to":"minutely","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":160,"wires":[["b1ca106b.5c71d"]]},{"id":"b1ca106b.5c71d","type":"http request","z":"f74c934.b1f607","name":"Get OWM data","method":"GET","ret":"obj","paytoqs":true,"url":"https://api.openweathermap.org/data/2.5/onecall","tls":"","persist":false,"proxy":"","authType":"","x":460,"y":160,"wires":[["db5d66a9.2b0838","f92d0eac.0841b"]]},{"id":"edb282aa.2e84c","type":"inject","z":"f74c934.b1f607","name":"Trigger","repeat":"600","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":100,"y":160,"wires":[["976d517.6a183b"]]},{"id":"fbae9b4f.b0a078","type":"link in","z":"f74c934.b1f607","name":"","links":["a4476346.61958"],"x":115,"y":220,"wires":[["976d517.6a183b"]]},{"id":"747088c5.64c398","type":"switch","z":"f74c934.b1f607","name":"tab focus","property":"tab","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":260,"y":280,"wires":[["976d517.6a183b"]]},{"id":"db5d66a9.2b0838","type":"function","z":"f74c934.b1f607","name":"Format current data","func":"var icon = {};\n\nvar units=flow.get('units');\nif (units===undefined)\n{\n  units=\"imperial\";\n}\n\nfunction timeConvert(UNIX_timestamp) {\n  var dateObject = new Date(UNIX_timestamp * 1000);\n  if (flow.get('hour12')) {  // 12 hour time format\n    return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: true, hour: 'numeric', minute: '2-digit'}).toLowerCase();\n  } else {  // 24 hour time format\n    return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: false, hour: 'numeric', minute: '2-digit'});\n  }      \n}\n\nvar degreesToCardinal = function(deg) {\n  if (deg>11.25 && deg<=33.75){return \"NNE\";}\n  else if (deg>33.75 && deg<56.25){return \"NE\";}\n  else if (deg>56.25 && deg<78.75){return \"ENE\";}\n  else if (deg>78.75 && deg<101.25){return \"E\";}\n  else if (deg>101.25 && deg<123.75){return \"ESE\";}\n  else if (deg>123.75 && deg<146.25){return \"SE\";}\n  else if (deg>146.25 && deg<168.75){return \"SSE\";}\n  else if (deg>168.75 && deg<191.25){return \"S\";}\n  else if (deg>191.25 && deg<213.75){return \"SSW\";}\n  else if (deg>213.75 && deg<236.25){return \"SW\";}\n  else if (deg>236.25 && deg<258.75){return \"WSW\";}\n  else if (deg>258.75 && deg<281.25){return \"W\";}\n  else if (deg>281.25 && deg<303.75){return \"WNW\";}\n  else if (deg>303.75 && deg<326.25){return \"NW\";}\n  else if (deg>326.25 && deg<348.75){return \"NNW\";}\n  else {return \"N\";}\n}\n\nif (units == 'imperial')\n{\n  msg.payload.current.temp = msg.payload.current.temp.toFixed() + ' °F';\n  msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed() + ' mph';\n}\nelse  // metric units\n{\n  msg.payload.current.temp = msg.payload.current.temp.toFixed(1) + ' °C';\n  msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed(1) + ' m/s';\n}\n\nmsg.payload.current.wind_cardinal = degreesToCardinal(msg.payload.current.wind_deg);\n\nmsg.payload.current.sunrise = timeConvert(msg.payload.current.sunrise);\nmsg.payload.current.sunset = timeConvert(msg.payload.current.sunset);\n\nvar iconString = 'wi-owm-' + msg.payload.current.weather[0].icon + ' wi-4x';\nicon = {\n    ui_control: {\n        icon: iconString\n    }\n}; \n\nreturn [msg, icon];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":700,"y":160,"wires":[["4200040.ae40ffc","a8a68dfc.a928","1467b772.ae71f9","73ad239f.64e1bc","5a05012f.ef0f9"],["d7e66d60.81ae7"]]},{"id":"f92d0eac.0841b","type":"function","z":"f74c934.b1f607","name":"Format forecast data","func":"var units=flow.get('units');\nif (units===undefined)\n{\n  units=\"imperial\";\n}\n\nfunction formatTemp(high, low) {\n    if (units == \"imperial\") {\n        if (low) {\n          temp = parseFloat(high).toFixed() + '/' + parseFloat(low).toFixed() + '°F'\n        }\n        else {\n          temp = parseFloat(high).toFixed() + '°F'\n        }\n    }\n    else {  // metric\n        if (low) {\n          temp = parseFloat(high).toFixed() + '/' + parseFloat(low).toFixed() + '°C'\n        }\n        else {\n          temp = parseFloat(high).toFixed() + '°C'\n        }\n    }\n    return temp;\n}\n\nfunction dayName(unixTime) {\n  var dateObject = new Date(unixTime * 1000);\n  return dateObject.toLocaleString(flow.get('lang'), { timezone: msg.payload.timezone, weekday: 'short'});\n  // If the line above is not producing the correct short weekday names for the language set by 'lang',\n  //   you can try upgrading to NodeJS version 13 or higher (when full international support was added for the toLocaleString function),\n  //   or you can use the code below which is an example for French short weekday names.\n/*  \n  switch (dateObject.toLocaleString('en', { timezone: msg.payload.timezone, weekday: 'short'})) {\n    case 'Mon':\n      return 'Lun';\n    case 'Tue':\n      return 'Mar';\n    case 'Wed':\n      return 'Mer';\n    case 'Thu':\n      return 'Jeu';\n    case 'Fri':\n      return 'Ven';\n    case 'Sat':\n      return 'Sam';\n    case 'Sun':\n      return 'Dim';\n  }\n*/\n}\n\nfunction timeConvert(UNIX_timestamp) {\n  var dateObject = new Date(UNIX_timestamp * 1000);\n  if (flow.get('hour12')) {  // 12 hour time format\n    return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: true, hour: 'numeric'}).toLowerCase();\n  } else {  // 24 hour time format\n    return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: false, hour: 'numeric'}) + ':00';\n  }      \n}\n\n\nfor (i=1;i<7;i++) {\n    msg.payload.hourly[i].time = timeConvert(msg.payload.hourly[i].dt);\n    msg.payload.hourly[i].temperature = formatTemp(msg.payload.hourly[i].temp);\n    msg.payload.daily[i].day = dayName(msg.payload.daily[i].dt);\n    msg.payload.daily[i].hilo = formatTemp(msg.payload.daily[i].temp.max, msg.payload.daily[i-1].temp.min);\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":700,"y":540,"wires":[["5be6a7ff.ff8f78","33210b7f.0feed4","188dfee1.7c3e11","cecfedca.f74b1","c843a03c.3b6c6","da3b0fb9.94476","c781fdac.2b344","77ad26d4.b80728","6e9c7bbd.f35514","6e6f86ef.4f3e78","27156e50.a61182","2050e0d3.3408a"]]},{"id":"49577c9f.fd0214","type":"ui_ui_control","z":"f74c934.b1f607","name":"Update tab","events":"all","x":90,"y":280,"wires":[["747088c5.64c398"]]},{"id":"4200040.ae40ffc","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":3,"width":4,"height":1,"name":"Wind","label":"","format":"{{msg.payload.current.wind_speed}}&nbsp;&nbsp;<i class=\"wi wi-darksky-wind\"></i>&nbsp;&nbsp;{{msg.payload.current.wind_cardinal}}","layout":"col-center","x":950,"y":100,"wires":[]},{"id":"a8a68dfc.a928","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":4,"width":6,"height":1,"name":"Description","label":"","format":"{{msg.payload.current.weather[0].description}}","layout":"row-center","x":970,"y":140,"wires":[]},{"id":"1467b772.ae71f9","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":5,"width":3,"height":1,"name":"SunriseTime","label":"","format":"<i class=\"wi wi-owm-01d\"></i>&nbsp;<i class=\"fa fa-arrow-up\"></i>&nbsp;&nbsp;{{msg.payload.current.sunrise}}","layout":"row-center","x":970,"y":180,"wires":[]},{"id":"73ad239f.64e1bc","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":6,"width":3,"height":1,"name":"SunsetTime","label":"","format":"<i class=\"wi wi-wu-sunny\"></i>&nbsp;<i class=\"fa fa-arrow-down\"></i>&nbsp;&nbsp;{{msg.payload.current.sunset}}","layout":"row-center","x":970,"y":220,"wires":[]},{"id":"d7e66d60.81ae7","type":"ui_button","z":"f74c934.b1f607","name":"IconRefresh","group":"699b821c.069cdc","order":1,"width":2,"height":2,"passthru":false,"label":"","tooltip":"Refresh","color":"","bgcolor":"#333333","icon":"fa-refresh fa-4x","payload":"true","payloadType":"bool","topic":"","topicType":"str","x":970,"y":260,"wires":[["a4476346.61958"]]},{"id":"5be6a7ff.ff8f78","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":7,"width":3,"height":1,"name":"Hour1","label":"","format":"<font color=#0EB8C0>{{msg.payload.hourly[1].time}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.hourly[1].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.hourly[1].temperature}}</font>","layout":"row-center","x":950,"y":320,"wires":[]},{"id":"33210b7f.0feed4","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":8,"width":3,"height":1,"name":"Day1","label":"","format":"<font color=#3393FF>{{msg.payload.daily[1].day}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.daily[1].weather[0].icon}}\"></i>&nbsp;{{msg.payload.daily[1].hilo}}</font>","layout":"row-center","x":950,"y":580,"wires":[]},{"id":"188dfee1.7c3e11","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":9,"width":3,"height":1,"name":"Hour2","label":"","format":"<font color=#0EB8C0>{{msg.payload.hourly[2].time}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.hourly[2].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.hourly[2].temperature}}</font>","layout":"row-center","x":950,"y":360,"wires":[]},{"id":"cecfedca.f74b1","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":11,"width":3,"height":1,"name":"Hour3","label":"","format":"<font color=#0EB8C0>{{msg.payload.hourly[3].time}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.hourly[3].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.hourly[3].temperature}}</font>","layout":"row-center","x":950,"y":400,"wires":[]},{"id":"c843a03c.3b6c6","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":13,"width":3,"height":1,"name":"Hour4","label":"","format":"<font color=#0EB8C0>{{msg.payload.hourly[4].time}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.hourly[4].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.hourly[4].temperature}}</font>","layout":"row-center","x":950,"y":440,"wires":[]},{"id":"da3b0fb9.94476","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":15,"width":3,"height":1,"name":"Hour5","label":"","format":"<font color=#0EB8C0>{{msg.payload.hourly[5].time}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.hourly[5].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.hourly[5].temperature}}</font>","layout":"row-center","x":950,"y":480,"wires":[]},{"id":"c781fdac.2b344","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":17,"width":3,"height":1,"name":"Hour6","label":"","format":"<font color=#0EB8C0>{{msg.payload.hourly[6].time}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.hourly[6].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.hourly[6].temperature}}</font>","layout":"row-center","x":950,"y":520,"wires":[]},{"id":"77ad26d4.b80728","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":10,"width":3,"height":1,"name":"Day2","label":"","format":"<font color=#3393FF>{{msg.payload.daily[2].day}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.daily[2].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.daily[2].hilo}}</font>","layout":"row-center","x":950,"y":620,"wires":[]},{"id":"6e9c7bbd.f35514","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":12,"width":3,"height":1,"name":"Day3","label":"","format":"<font color=#3393FF>{{msg.payload.daily[3].day}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.daily[3].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.daily[3].hilo}}</font>","layout":"row-center","x":950,"y":660,"wires":[]},{"id":"6e6f86ef.4f3e78","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":14,"width":3,"height":1,"name":"Day4","label":"","format":"<font color=#3393FF>{{msg.payload.daily[4].day}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.daily[4].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.daily[4].hilo}}</font>","layout":"row-center","x":950,"y":700,"wires":[]},{"id":"27156e50.a61182","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":16,"width":3,"height":1,"name":"Day5","label":"","format":"<font color=#3393FF>{{msg.payload.daily[5].day}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.daily[5].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.daily[5].hilo}}</font>","layout":"row-center","x":950,"y":740,"wires":[]},{"id":"2050e0d3.3408a","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":18,"width":3,"height":1,"name":"Day6","label":"","format":"<font color=#3393FF>{{msg.payload.daily[6].day}}&nbsp;&nbsp;<i class=\"wi wi-owm-{{msg.payload.daily[6].weather[0].icon}}\"></i>&nbsp;&nbsp;{{msg.payload.daily[6].hilo}}</font>","layout":"row-center","x":950,"y":780,"wires":[]},{"id":"a4476346.61958","type":"link out","z":"f74c934.b1f607","name":"Refresh","links":["fbae9b4f.b0a078"],"x":1095,"y":260,"wires":[]},{"id":"d608dfbd.8a2a9","type":"comment","z":"f74c934.b1f607","name":"OpenWeatherMap One Call API for Weather and Forecast","info":"","x":230,"y":40,"wires":[]},{"id":"5a05012f.ef0f9","type":"ui_text","z":"f74c934.b1f607","group":"699b821c.069cdc","order":2,"width":4,"height":1,"name":"Temperature","label":"","format":"{{msg.payload.current.temp}}","layout":"col-center","x":970,"y":60,"wires":[]},{"id":"699b821c.069cdc","type":"ui_group","name":"Portrait Group","tab":"b374715c.6fcb6","order":1,"disp":false,"width":"6","collapse":false},{"id":"b374715c.6fcb6","type":"ui_tab","name":"Weather Portrait","icon":"fa-umbrella","order":2,"disabled":false,"hidden":false}]