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: [Weather flow] 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":" \n \n \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":" \n \n \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}]

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?

@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.

Node-RED

Node-RED Forum

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

Dashboard

ghayne 27 April 2020 19:44 6

Have a look at this thread:

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

Topic		Replies	Views
Weather icons for OpenWeathermap in a Dashboard 2 template Share Your Projects dashboard-2	4	490	21 November 2025
Weather icons - please help why some aren't loaded Dashboard	61	3086	19 July 2021
Local weather group for Dashboard Dashboard weather	89	20149	10 July 2019
Weather icons used in Dashboard 2.0 Dashboard dashboard-2 , ui-template	3	439	18 March 2024
KNMI Weather dashboard (free api key) Share Your Projects node-red-dashboard	8	758	2 July 2025

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

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

Related topics