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 ...
take a look at flows.nodered.org there are example flows there you can import
1 Like
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.
[{"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}]
3 Likes
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 PMnode: 3d099477.7516ec
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.
Could you please provide your whole flow by "menu (top right corner) -> export -> clipboard"?
1 Like
Issue solved. - thanks
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.
Thanks, very useful to an amateur node-redder like myself! 
