# How to connect openweathermap with the dashboard-gauge?

**URL:** <https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560>\
**Category:** Dashboard\
**Created:** [4 February 2019 07:35 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560 "2019-02-04T07:35:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![hebergeweb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hebergeweb/32/6394_2.png) [@hebergeweb](https://discourse.nodered.org/u/hebergeweb)\
**Post date:** [4 February 2019 07:35 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/1 "2019-02-04T07:35:31Z")

</div>

I installed **openweathermap** and the **dashboard** for node-red, But the gauge display 0.  
I want to display the current temperature from openweathermap with the dashboard-gauge.  
I need to use the following objects from **openweathermap** : **tempc** , **tempk** , **humidity** , **windspeed**...

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/eaad71b1295f7844189f195ccd299edcb562408b.png)

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [4 February 2019 07:41 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/2 "2019-02-04T07:41:50Z")

</div>

take a look at [flows.nodered.org](http://flows.nodered.org) there are example flows there you can import

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [4 February 2019 08:51 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/3 "2019-02-04T08:51:31Z")

</div>

Here's a flow one of my students created.  
You will need to adjust some of the JavaScript (in the function block) to filter out the objects YOU need.

 ![ScreenShot015](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4bafcaeffbf93336c1f72fdc07374e49fe6face9.png)

```auto
[{"id":"7756040a.e4dcc4","type":"inject","z":"223ea3e3.036484","name":"","topic":"","payload":"1","payloadType":"num","repeat":"900","crontab":"","once":true,"onceDelay":0.1,"x":270,"y":220,"wires":[["6483c1f5.92db"]]},{"id":"6483c1f5.92db","type":"openweathermap","z":"223ea3e3.036484","name":"","wtype":"current","lon":"","lat":"","city":"london","country":"UK","language":"en","x":450,"y":220,"wires":[["e1f8eb74.8c0cc8"]]},{"id":"e1f8eb74.8c0cc8","type":"function","z":"223ea3e3.036484","name":"","func":"var msg1 = { payload:msg.payload.temp_maxc };\nvar msg2 = { payload:msg.payload.tempc };\nvar msg3 = { payload:msg.payload.temp_minc };\nvar msg4 = { payload:msg.payload.description};\nvar msg5 = { payload:msg.payload.icon};\n\n\nreturn [msg1, msg2, msg3, msg4, msg5];","outputs":5,"noerr":0,"x":630,"y":220,"wires":[["80648643.7eb57"],["e4405ef6.8c72c","26beab8e.19427c"],["840712d7.9039a8"],["2b6581e6.803236"],["4875ad8f.b1cf5c"]],"outputLabels":["Temp Max","Current Temp","Temp Min","Description","Weather icon"]},{"id":"80648643.7eb57","type":"ui_gauge","z":"223ea3e3.036484","name":"","group":"73138b98.ae8a04","order":11,"width":"4","height":"4","gtype":"gage","title":"Max temp","label":"units","format":"{{value}}","min":"-5","max":"40","colors":["#0080ff","#008080","#ca3838"],"seg1":"5","seg2":"25","x":840,"y":100,"wires":[]},{"id":"e4405ef6.8c72c","type":"ui_gauge","z":"223ea3e3.036484","name":"","group":"73138b98.ae8a04","order":11,"width":"4","height":"4","gtype":"gage","title":"Current temp","label":"units","format":"{{value}}","min":"-5","max":"40","colors":["#0080ff","#008040","#ca3838"],"seg1":"5","seg2":"25","x":850,"y":160,"wires":[]},{"id":"840712d7.9039a8","type":"ui_gauge","z":"223ea3e3.036484","name":"","group":"73138b98.ae8a04","order":11,"width":"4","height":"4","gtype":"gage","title":"Min temp","label":"units","format":"{{value}}","min":"-5","max":"40","colors":["#0080ff","#008080","#ca3838"],"seg1":"5","seg2":"25","x":840,"y":220,"wires":[]},{"id":"26beab8e.19427c","type":"ui_chart","z":"223ea3e3.036484","name":"","group":"c77f1dce.efe768","order":1,"width":"14","height":"8","label":"Temp in degrees C","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-5","ymax":"40","removeOlder":"4","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":870,"y":280,"wires":[[],[]]},{"id":"2b6581e6.803236","type":"ui_text","z":"223ea3e3.036484","group":"3a61e161.becb0e","order":2,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","x":830,"y":340,"wires":[]},{"id":"4875ad8f.b1cf5c","type":"ui_template","z":"223ea3e3.036484","group":"3a61e161.becb0e","name":"Weather icon","order":1,"width":"4","height":"4","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-3x wi wi-owm-{{msg.payload}}\"></i>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":850,"y":400,"wires":[[]]},{"id":"73138b98.ae8a04","type":"ui_group","z":"","name":"Gauges","tab":"d37df474.8822c","order":1,"disp":true,"width":"6","collapse":false},{"id":"c77f1dce.efe768","type":"ui_group","z":"","name":"Chart","tab":"d37df474.8822c","order":2,"disp":true,"width":"14","collapse":false},{"id":"3a61e161.becb0e","type":"ui_group","z":"","name":"Description","tab":"d37df474.8822c","order":3,"disp":true,"width":"14","collapse":false},{"id":"d37df474.8822c","type":"ui_tab","z":"","name":"Weather","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![chuckf201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chuckf201/32/91382_2.png) [@chuckf201](https://discourse.nodered.org/u/chuckf201)\
**Post date:** [13 March 2019 18:37 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/4 "2019-03-13T18:37:55Z")

</div>

I've expanded the openweather function as shown.  
var msg1 = { payload:msg.payload.temp\_maxc \* (9/5)+32};  
var msg2 = { payload:msg.payload.tempc \* (9/5)+32 };  
var msg3 = { payload:msg.payload.temp\_minc \* (9/5)+32 };  
var msg4 = { payload:msg.payload.description};  
var msg5 = { payload:msg.payload.icon};  
var msg6 = { payload:msg.payload.windspeed};  
var msg7 = { payload:msg.payload.winddirection};

var msg8 = {  
"payload": {  
"windspeed":msg6,  
"speed\_unit":"MPH",  
"winddirection":msg7  
}  
}

return [msg1, msg2, msg3, msg4, msg5, msg6, msg7, msg8];

This will flow into an template as follows:

 @import url(https://fonts.googleapis.com/css?family=Dosis:200,400,500,600); .compass\_container{ transition: 1s ease-in-out; position: relative; display: none; width: 500px; height: 500px; border-radius: 100%; font-family: 'Dosis'; font-size: 80px; box-shadow: inset 0px 0px 0px 30px #777; background-color: {{color}}; } .compass\_container .compass\_header{ font-weight: bold; position: absolute; text-align: center; width: 100%; font-size: 75%; top: -15px } .compass\_container .text\_container{ height: 100%; width: 100%; padding: 0px; display: block; border-radius: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .compass\_container .arrow{ transition: 1s ease-in-out; width: 100%; height: 100%; display: block; position: absolute; top: 0; } .compass\_container .arrow .triangle{ width: 0; height: 0; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 90px solid black; position: absolute; top: -15px; left: 50%; margin-left: -45px; z-index: 99; }

N

```
<div class="nr-dashboard-text text_container">

    <div class="direction" style="font-size: 120%">{{direction}}</div>
    <div style="flex-direction: row; font-weight: bold;">
        <span style="font-size: 100%">{{msg.payload.windspeed}}</span>
        <span style="font-size: 75%">{{msg.payload.speed_unit}}</span>
    </div>
</div>
<div class="arrow" style="transform: rotate({{msg.payload.winddegrees}}deg);">
  <div class="triangle"></div>
</div>

```

the output of the template through the debugger is:  
3/13/2019, 2:34:17 PM[node: 3d099477.7516ec](http://24.75.147.210:1880/#)

msg.payload : Object

object

speed: 35

speed\_unit: "MPH"

degrees: 142

My problem is that my output from openweather does not display anything thru template.  
Can you help?  
THis is a very cool way to show temp and wind direction.

---

<div class="post-metadata">

**Author:** ![Creeps](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Creeps](https://discourse.nodered.org/u/Creeps)\
**Post date:** [15 March 2019 20:06 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/5 "2019-03-15T20:06:04Z")

</div>

Could you please provide your whole flow by "menu (top right corner) -\> export -\> clipboard"?

---

<div class="post-metadata">

**Author:** ![chuckf201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chuckf201/32/91382_2.png) [@chuckf201](https://discourse.nodered.org/u/chuckf201)\
**Post date:** [15 March 2019 23:41 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/6 "2019-03-15T23:41:50Z")

</div>

Issue solved. - thanks

---

<div class="post-metadata">

**Author:** ![robingreig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robingreig/32/81840_2.png) [@robingreig](https://discourse.nodered.org/u/robingreig)\
**Post date:** [24 August 2019 21:45 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/7 "2019-08-24T21:45:50Z")

</div>

> [@dynamicdave](#):
>
> [{"id":"7756040a.e4dcc4","type":"inject","z":"223ea3e3.036484","name":"","topic":"","payload":"1","payloadType":"num","repeat":"900","crontab":"","once":true,"onceDelay":0.1,"x":270,"y":220,"wires":[["6483c1f5.92db"]]},{"id":"6483c1f5.92db","type":"openweathermap","z":"223ea3e3.036484","name":"","wtype":"current","lon":"","lat":"","city":"london","country":"UK","language":"en","x":450,"y":220,"wires":[["e1f8eb74.8c0cc8"]]},{"id":"e1f8eb74.8c0cc8","type":"function","z":"223ea3e3.036484","name":"","func":"var msg1 = { payload:msg.payload.temp\_maxc };\nvar msg2 = { payload:msg.payload.tempc };\nvar msg3 = { payload:msg.payload.temp\_minc };\nvar msg4 = { payload:msg.payload.description};\nvar msg5 = { payload:msg.payload.icon};\n\n\nreturn [msg1, msg2, msg3, msg4, msg5];","outputs":5,"noerr":0,"x":630,"y":220,"wires":[["80648643.7eb57"],["e4405ef6.8c72c","26beab8e.19427c"],["840712d7.9039a8"],["2b6581e6.803236"],["4875ad8f.b1cf5c"]],"outputLabels":["Temp Max","Current Temp","Temp Min","Description","Weather icon"]},{"id":"80648643.7eb57","type":"ui\_gauge","z":"223ea3e3.036484","name":"","group":"73138b98.ae8a04","order":11,"width":"4","height":"4","gtype":"gage","title":"Max temp","label":"units","format":"{{value}}","min":"-5","max":"40","colors":["#0080ff","#008080","#ca3838"],"seg1":"5","seg2":"25","x":840,"y":100,"wires":},{"id":"e4405ef6.8c72c","type":"ui\_gauge","z":"223ea3e3.036484","name":"","group":"73138b98.ae8a04","order":11,"width":"4","height":"4","gtype":"gage","title":"Current temp","label":"units","format":"{{value}}","min":"-5","max":"40","colors":["#0080ff","#008040","#ca3838"],"seg1":"5","seg2":"25","x":850,"y":160,"wires":},{"id":"840712d7.9039a8","type":"ui\_gauge","z":"223ea3e3.036484","name":"","group":"73138b98.ae8a04","order":11,"width":"4","height":"4","gtype":"gage","title":"Min temp","label":"units","format":"{{value}}","min":"-5","max":"40","colors":["#0080ff","#008080","#ca3838"],"seg1":"5","seg2":"25","x":840,"y":220,"wires":},{"id":"26beab8e.19427c","type":"ui\_chart","z":"223ea3e3.036484","name":"","group":"c77f1dce.efe768","order":1,"width":"14","height":"8","label":"Temp in degrees C","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-5","ymax":"40","removeOlder":"4","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":870,"y":280,"wires":[,]},{"id":"2b6581e6.803236","type":"ui\_text","z":"223ea3e3.036484","group":"3a61e161.becb0e","order":2,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","x":830,"y":340,"wires":},{"id":"4875ad8f.b1cf5c","type":"ui\_template","z":"223ea3e3.036484","group":"3a61e161.becb0e","name":"Weather icon","order":1,"width":"4","height":"4","format":"\<div style="display: flex;height: 100%;justify-content: center;align-items: center;"\>\n\<i class="fa-3x wi wi-owm-{{msg.payload}}"\>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":850,"y":400,"wires":[]},{"id":"73138b98.ae8a04","type":"ui\_group","z":"","name":"Gauges","tab":"d37df474.8822c","order":1,"disp":true,"width":"6","collapse":false},{"id":"c77f1dce.efe768","type":"ui\_group","z":"","name":"Chart","tab":"d37df474.8822c","order":2,"disp":true,"width":"14","collapse":false},{"id":"3a61e161.becb0e","type":"ui\_group","z":"","name":"Description","tab":"d37df474.8822c","order":3,"disp":true,"width":"14","collapse":false},{"id":"d37df474.8822c","type":"ui\_tab","z":"","name":"Weather","icon":"dashboard","disabled":false,"hidden":false}]

Thanks dynamicdave for sharing this!  
I've just started playing with node-red on the Raspberry pi.  
I've been struggling how to pull the one piece of data from my OpenWeather feed.

---

<div class="post-metadata">

**Author:** ![Markkyboy](https://avatars.discourse-cdn.com/v4/letter/m/48db29/32.png) [@Markkyboy](https://discourse.nodered.org/u/Markkyboy)\
**Post date:** [26 September 2020 10:16 UTC](https://discourse.nodered.org/t/how-to-connect-openweathermap-with-the-dashboard-gauge/7560/8 "2020-09-26T10:16:15Z")

</div>

Thanks, very useful to an amateur node-redder like myself! 🙂