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

**URL:** <https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626>\
**Category:** Dashboard\
**Created:** [27 April 2020 15:24 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626 "2020-04-27T15:24:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ANabbie](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@ANabbie](https://discourse.nodered.org/u/ANabbie)\
**Post date:** [27 April 2020 15:24 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626/1 "2020-04-27T15:24:22Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/644fab09fed85bc9efa817b8fbcf2d7e5d0a5b3e.png)

The flow (contained below) looks like this:

 ![Weather flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/32dba71dc837d53c8438f61b7b3fd86a5246002a.png)  
Remember to add your API key from DarkSky.  
 ![Darksky API Key](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7af8548d5a7d018c1729cb67d01e161f990656ce.png)

Copy code below and import in Node Red:

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 April 2020 15:44 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626/2 "2020-04-27T15:44:23Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rei\_vilo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rei_vilo/32/162_2.png) [@rei\_vilo](https://discourse.nodered.org/u/rei_vilo)\
**Post date:** [27 April 2020 17:23 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626/3 "2020-04-27T17:23:18Z")

</div>

@ANabbie Unfortunately, the [Dark Sky API](https://darksky.net/dev) page shows

> We are no longer accepting new signups.

So no option to try it.

---

<div class="post-metadata">

**Author:** ![ANabbie](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@ANabbie](https://discourse.nodered.org/u/ANabbie)\
**Post date:** [27 April 2020 19:14 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626/4 "2020-04-27T19:14:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ANabbie](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@ANabbie](https://discourse.nodered.org/u/ANabbie)\
**Post date:** [27 April 2020 19:20 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626/5 "2020-04-27T19:20:59Z")

</div>

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.** _

---

<div class="post-metadata">

**Author:** ![ghayne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghayne/32/39_2.png) [@ghayne](https://discourse.nodered.org/u/ghayne)\
**Post date:** [27 April 2020 19:44 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626/6 "2020-04-27T19:44:45Z")

</div>

Have a look at this thread:

[https://discourse.nodered.org/t/the-end-of-darksky](https://discourse.nodered.org/t/the-end-of-darksky)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 May 2020 19:44 UTC](https://discourse.nodered.org/t/getting-the-darksky-payload-to-display-in-a-ui-template-with-icons/25626/7 "2020-05-27T19:44:45Z")

</div>

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