Getting the Darksky payload to display in a UI template with icons

This example gets weather data for today and tomorrow from Darksky and then simply sends the payload to a UI Template which also displays a weather icon using the in-built icons designed by Paul-Reed.
The output looks like this:
Weather

The flow (contained below) looks like this:


Remember to add your API key from DarkSky.
Darksky API Key

Copy code below and import in Node Red:

[{"id":"1e2c66dc.382bd9","type":"ui_template","z":"2d77d0e2.da70f","group":"f8408626.2b7b88","name":"Display weather icon","order":1,"width":"4","height":"4","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-{{msg.payload.weather}} wi-5x wi-rotate-0\" style=\"color:yellow;\"></i>\n</div>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":960,"y":2060,"wires":[[]]},{"id":"60085ef5.69ab2","type":"comment","z":"2d77d0e2.da70f","name":"Remember to insert your Darksky API key here","info":"","x":260,"y":1740,"wires":[]},{"id":"80590b60.9f27b8","type":"debug","z":"2d77d0e2.da70f","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":970,"y":2000,"wires":[]},{"id":"73c7a205.36e16c","type":"ui_text","z":"2d77d0e2.da70f","group":"f8408626.2b7b88","order":2,"width":0,"height":0,"name":"detail","label":"","format":"{{msg.payload.detail}}","layout":"row-center","x":1010,"y":2100,"wires":[]},{"id":"91f7422b.56f57","type":"ui_text","z":"2d77d0e2.da70f","group":"f8408626.2b7b88","order":5,"width":0,"height":0,"name":"maxtemp","label":"Maximum:","format":"{{msg.payload.maxtemp | number:0}}&deg","layout":"row-spread","x":1000,"y":2180,"wires":[]},{"id":"2ee1d81b.7832c8","type":"darksky","z":"2d77d0e2.da70f","darksky":"","name":"","lon":"28.001889","lat":"-26.262218","date":"","time":"","mode":"message","lang":"en","units":"si","x":380,"y":1700,"wires":[["91f7422b.56f57","80590b60.9f27b8","4b755dd0.802cc4","e8576027.f2663","73c7a205.36e16c","1e2c66dc.382bd9","1b0aee4a.733e62","d95ecf3a.317b7"]]},{"id":"1749261f.77680a","type":"inject","z":"2d77d0e2.da70f","name":"","topic":"","payload":"","payloadType":"date","repeat":"900","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":1700,"wires":[["2ee1d81b.7832c8"]]},{"id":"4b755dd0.802cc4","type":"ui_text","z":"2d77d0e2.da70f","group":"f8408626.2b7b88","order":3,"width":0,"height":0,"name":"mintemp","label":"Minimum:","format":"{{msg.payload.mintemp | number:0}}&deg","layout":"row-spread","x":1000,"y":2140,"wires":[]},{"id":"e8576027.f2663","type":"ui_text","z":"2d77d0e2.da70f","group":"f8408626.2b7b88","order":6,"width":0,"height":0,"name":"precipitation","label":"Chance of rain:","format":"{{msg.payload.precipitation * 100}}%","layout":"row-spread","x":990,"y":2220,"wires":[]},{"id":"1b0aee4a.733e62","type":"change","z":"2d77d0e2.da70f","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"data.currently","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":1700,"wires":[["9c275cd9.13869","d94f3d32.9566d","f062a9b4.2cfb98","d8cee664.62d838","ecd7a902.a66428","1a6605a1.032f6a"]]},{"id":"9c275cd9.13869","type":"debug","z":"2d77d0e2.da70f","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":970,"y":1640,"wires":[]},{"id":"d94f3d32.9566d","type":"ui_template","z":"2d77d0e2.da70f","group":"d9feffd5.67033","name":"Display weather icon","order":1,"width":"4","height":"4","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-{{msg.payload.icon}} wi-5x wi-rotate-0\" style=\"color:yellow;\"></i>\n</div>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":960,"y":1700,"wires":[[]]},{"id":"a5b620ce.b9333","type":"comment","z":"2d77d0e2.da70f","name":"Current weather","info":"","x":660,"y":1660,"wires":[]},{"id":"3bf68bab.dfd204","type":"comment","z":"2d77d0e2.da70f","name":"Tomorrows weather","info":"","x":670,"y":2100,"wires":[]},{"id":"f062a9b4.2cfb98","type":"ui_text","z":"2d77d0e2.da70f","group":"d9feffd5.67033","order":2,"width":0,"height":0,"name":"summary","label":"","format":"{{msg.payload.summary}}","layout":"row-center","x":1000,"y":1740,"wires":[]},{"id":"d8cee664.62d838","type":"ui_text","z":"2d77d0e2.da70f","group":"d9feffd5.67033","order":3,"width":0,"height":0,"name":"temperature ","label":"Now:","format":"{{msg.payload.temperature | number:0}}&deg","layout":"row-spread","x":990,"y":1780,"wires":[]},{"id":"ecd7a902.a66428","type":"ui_text","z":"2d77d0e2.da70f","group":"d9feffd5.67033","order":5,"width":0,"height":0,"name":"precipProbability","label":"Chance of rain:","format":"{{msg.payload.precipProbability* 100}}%","layout":"row-spread","x":970,"y":1860,"wires":[]},{"id":"d95ecf3a.317b7","type":"debug","z":"2d77d0e2.da70f","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":580,"y":1600,"wires":[]},{"id":"1a6605a1.032f6a","type":"ui_text","z":"2d77d0e2.da70f","group":"d9feffd5.67033","order":3,"width":0,"height":0,"name":"humidity","label":"Humidity:","format":"{{msg.payload.humidity* 100}}%","layout":"row-spread","x":1000,"y":1820,"wires":[]},{"id":"f8408626.2b7b88","type":"ui_group","z":"","name":"Tomorrow","tab":"9f8b88a6.068d58","order":11,"disp":true,"width":"4","collapse":false},{"id":"d9feffd5.67033","type":"ui_group","z":"","name":"Today","tab":"9f8b88a6.068d58","order":10,"disp":true,"width":"4","collapse":false},{"id":"9f8b88a6.068d58","type":"ui_tab","z":"","name":"Nabbie Home","icon":"home","order":1,"disabled":false,"hidden":false}]
1 Like

Good demo.

However please edit your post & place the flow between three back ticks (to prevent forum messing with the code - cannot be imported otherwise)

```
like this
```

You might also wish to add it to the flows library for others to find easier?

2 Likes

@ANabbie Unfortunately, the Dark Sky API page shows

We are no longer accepting new signups.

So no option to try it.

Thank you, I was wondering how to achieve that. (3 back ticks makes it look neater).

Wow, I didn't know that, I will have to find a new solution soon. For the benefit of others, the following snippet is from Darksky website:
2020-04-27:
Our API service for existing customers is not changing today, but we will no longer accept new signups. The API will continue to function through the end of 2021.

Have a look at this thread:

https://discourse.nodered.org/t/the-end-of-darksky

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.