Raspi Weather Display with Icons


Raspberry air-quality kit with LED panels setup.
Some icons, these were prepared earlier:


Building the flow:

If you ever get stuck along the way, feel free to copy the entire flow from here and import it into your node-red:

[{"id":"ed465cb7.d4944","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"411f7586.434bcc","type":"inject","z":"ed465cb7.d4944","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":190,"y":260,"wires":[["8a3f6b9e.de4138"]]},{"id":"8a3f6b9e.de4138","type":"Bme280","z":"ed465cb7.d4944","name":"","bus":"1","address":"0x76","topic":"bme280","extra":false,"x":380,"y":260,"wires":[["6a071f4.48389e"]]},{"id":"6a071f4.48389e","type":"BME280-Parse","z":"ed465cb7.d4944","name":"","x":570,"y":260,"wires":[["bc3d596d.2a3848","29830fae.65e84"],[],[]]},{"id":"bc3d596d.2a3848","type":"text-to-matrix","z":"ed465cb7.d4944","name":"","xOffset":0,"yOffset":0,"rgb":"0,255,41","font":"6x9.bdf","prefix":"Temperature C: ","source":"msg.payload","matrix":"892e8063.2e0c3","zLevel":"","x":820,"y":160,"wires":[]},{"id":"11d60dbb.385ee2","type":"image-to-matrix","z":"ed465cb7.d4944","name":"","file":"","xOffset":"96","yOffset":"32","matrix":"892e8063.2e0c3","zLevel":"","x":850,"y":300,"wires":[]},{"id":"29830fae.65e84","type":"function","z":"ed465cb7.d4944","name":"get current icon","func":"//setup some definitions\ncurrentTemperature = msg.payload\ncold = -3\nhot  = 39\n\noutputImage = \"https://t3alliance.org/wp-content/uploads/2018/11/sunny.jpg\"\n\n//check the temperature, and switch the image\nif (currentTemperature > hot)\n{\n    outputImage = \"https://t3alliance.org/wp-content/uploads/2018/11/fire.gif\"\n}\n\nif (currentTemperature < cold)\n{\n    outputImage = \"https://t3alliance.org/wp-content/uploads/2018/11/snow.gif\"\n\n}\n\n//replace the input with an image\nmsg.payload = outputImage\n\n//send to the next node \nreturn msg","outputs":1,"noerr":0,"x":830,"y":240,"wires":[["11d60dbb.385ee2"]]},{"id":"892e8063.2e0c3","type":"led-matrix","z":"","height":"64","width":"64","chained":"2","parallel":"1","brightness":"60","refreshDelay":"50","mapping":"adafruit-hat-pwm","autoRefresh":true}]


The first thing we need before we can start displaying any data, is the data itself. The air-quality kit comes with a variety of sensors, but here we will be focusing on the Bme280 which provides Temperature, Humidity, and Pressure.

First things first is to start reading the sensor, for this you’ll need these 3 nodes.

the ‘Bme280’ node retrieves data from the sensor, in a strange json format, the ‘BME280 parser’ node splits up the data into more user friendly streams, and the inject node on the far left is used to prod the ‘Bme280’ node into sending data to the Parser node.

The config looks like this (click to expand) :

If you deploy now you can already tell if the ‘Bme’ node is working, it’ll display some status text below the node showing the data it’s  reading. I’ve also hooked up a debug mode to my flow so I can see the temperature in real-time on the ‘debug’ tab.  You can also hook up a text node and put the results onto the display like this:
When using a led-matrix node, make sure to setup the ‘Display’ option, usually you can leave all the config for the display itself on default.


The ‘image’ node takes a url as a payload, and uses a few other parameters to decide where on the display to draw the image. All the icons at the top of this article are the same size (32×32); so we can always use the same location, the only data we need to parametrize is the url itself. But before we do that it’s nice to test out the image without any added complications.


Above I setup an inject node to inject one of the icons, I get the URL from this very article by using ‘copy Image location’.
You could leave the image node in its defaults, but I think its prettier with the icon in the bottom corner so I setup some X and Y offsets like this.

If you deploy this flow, you should see the icon you chose in the bottom right, and the temperature written across the top of the LED matrix. If you didn’t setup the inject nodes to auto-inject you might have to manually press the buttons that appear on the nodes to activate them.








Switching the image based on the temperature:

Next we will setup the flow to switch the image displayed based on the current temperature, using a function node to inject different URLs.
The function node receives a msg object, in this case from the BME Parse node which contains some properties like payload, and topic.

//setup some definitions
currentTemperature = msg.payload
cold = -3
hot  = 27

outputImage = "https://t3alliance.org/wp-content/uploads/2018/11/average.png"

//check the temperature, and switch the image
if (currentTemperature > hot)
    outputImage = "https://t3alliance.org/wp-content/uploads/2018/11/sunny.jpg"

if (currentTemperature < cold)
    outputImage = "https://t3alliance.org/wp-content/uploads/2018/11/cold.png"


//replace the input with an image
msg.payload = outputImage

//send to the next node 
return msg

Here we are just interested in the payload property, which is the temperature in Celsius.  We also setup three other variables, the temperatures we consider hot or cold, and the default icon to display if it isn’t really hot or really cold.

Then we use some if statements to check if the temperature is hot or cold, if it is we swap the outputImage for another.
Finally we swap the msg payload with our image and return it; in this case returning sends the msg to the output of this node and into the image node.

Here is what it looks like setup in our flow:
Feel free to copy and paste some or all of the code in if you feel confused, and remember the complete flow is available at the top of this article.

If you chose to use the animated gif icons, the frame-rate they play at is determined by the inject rate, the BME node tends to upde the weather about once or twice a second, so the gif will only play at about 1 or 2fps. This could be improved by injecting the temperature faster using some kind of function or repeat node, which would be a good personal project.



image_pdfGenerate PDFimage_printPrint
Posted in Flows - Experiments, Raspberry Pi.

Leave a Reply