skip to Main Content

RPi Airquality Station: Creating an Animated Nyancat Wallpaper

 

Goal:

Use the RPi Airquality station hardware, combined with node-red to create an animated nyancat wallpaper

 

What you will learn:

Combining the basic LED Matrix nodes, with more advanced javascript nodes to create fancier output.

 

What you will need to know:

Getting started with node-red

 

Parts List:

  • Full RPi Airquality kit

Getting Started:

First step is to familiarize yourself with the ‘image’ node.

Drag one in from the ‘LED Matrix’ section of the palette and setup config node, if you haven’t got one ready to re-use

All of the display settings can be left at their default, but because we want the wallpaper to update quickly you can bump the ‘Refresh Delay Milliseconds’ down to 100.
By default the Matrix will only redraw all the objects on the screen 2 times a second, but with this setting changed it’s a more attractive 10 times a second.

Next we’ll inject an image in the matrix.

This is the animated NyanCat we’ll be using: https://t3alliance.org/wp-content/uploads/2019/01/nyanCat.gif
It’s a tiny image, about 20 pixels high; but that’s a good thing for us because it means it’ll actually fit on the display. If you wish to use your own gifs and images with this tutorials, be mindful that the LED Matrix that comes with the airquality kit is only 128×64 pixels, so you’ll have to manually resize most images you want to use with it.

Setup an inject node with the nyanCat url as the string, and connect it to the image node.Once you deploy, and inject the node you should see the image appear as pictured.

Notice that the nyanCat is not animated. The way the Image Node handles gifs, is that it increments the frame when injected multiple times. So if you press the inject node button again, you should see the next frame in the sequence appear. You can continue clicking all the way through until the image resets back to frame one.

Of course the Node-Red inject node comes with repeating functionality already, so all you really have to do is setup the inject node like this to see your nyanCat beautifully animated in the top corner.

 

Manually Moving NyanCat:

Next is the more complicated step of actually moving the image around; I’ll lay out the function nodes so you can copy and paste them if you get stuck.

The basis for all our functions will be this info that comes with the image node. By default you can inject a plain string that gets matched with the settings in the node, or you can send a fully featured object that contains data for where the image should be drawn, as well as what file it’ll be.

To start we’ll try send just the image itself, in a static location.

//create the message we'll output
var output = {}

//insert our properties into the payload
output.payload = 
{
    data: "https://t3alliance.org/wp-content/uploads/2019/01/nyanCat.gif",
    x: 10, 
    y: 10,
}

//send out to the next node
return output

Here’s what the function node looks like with the code inside:

On line 2 we setup an empty object that we’ll fill with our properties later.
Then on line 5 – 10 we setup our data, the url of the image, and the location.
Then finally we return the object we created at the start, which will output it from the node-output.

Hooked up to the Image node with a generic inject node, you can draw the nyanCat again, except this time it’ll be offset from the top corner by 10 pixels.
Play around with the values for X and Y to move it around the screen manually.

 

Autonomous Nyancat:

The next step is getting the X and Y to update automatically.

Luckily for us nyanCat only flies in a straight line, so the Y coordinate can remain static, only changing the X coordinate interests us.
Here is the new code:

//create the message we'll output
var output = {}

//setup our varaible for X
var location = flow.get("x") || 0

//check to see if we've went off the edge
if(location > 128) location = 0

flow.set("x", location + 1)


//insert our properties into the payload
output.payload = 
{
    data: "https://t3alliance.org/wp-content/uploads/2019/01/nyanCat.gif",
    x: location,
    y: 20,
}

//send out to the next node
return output

On lines 5 – 10 we work with a ‘flow’ variable, this named variable ‘x’ sticks around with the flow and allows the function node to ‘remember’ a value between injections.
First we save the current value into the ‘location’ variable. Then we check to see if ‘location’ is greater than 128; if it is we reset it to zero.
Finally we save the new location back into the ‘flow variable’. The rest of the function node is pretty much the same as the last one.

Now with this code setup, your nyanCat should fly from one side of the screen over and over again. Remember to setup the inject node to repeatedly inject instead of just when you press the button.

Here is an export of the flow so far, so you can catch up if you’re lost:

[{"id":"7a5afae4.690634","type":"image-to-matrix","z":"93c88281.18b06","name":"","file":"","xOffset":0,"yOffset":0,"matrix":"9b09c013.e6c5b","zLevel":"","x":900,"y":360,"wires":[]},{"id":"b4672224.50062","type":"function","z":"93c88281.18b06","name":"NyanCat Function","func":"//create the message we'll output\nvar output = {}\n\n//setup our varaible for X\nvar location = flow.get(\"x\") || 0\n\n//check to see if we've went off the edge\nif(location > 128) location = 0\n\nflow.set(\"x\", location + 1)\n\n\n//insert our properties into the payload\noutput.payload = \n{\n    data: \"https://t3alliance.org/wp-content/uploads/2019/01/nyanCat.gif\",\n    x: location,\n    y: 20,\n}\n\n//send out to the next node\nreturn output","outputs":1,"noerr":0,"x":680,"y":360,"wires":[["7a5afae4.690634"]]},{"id":"56d87a3a.4542c4","type":"inject","z":"93c88281.18b06","name":"","topic":"","payload":"","payloadType":"date","repeat":"0.1","crontab":"","once":true,"onceDelay":0.1,"x":440,"y":360,"wires":[["b4672224.50062"]]},{"id":"9b09c013.e6c5b","type":"led-matrix","z":"","height":"64","width":"64","chained":"2","parallel":"1","brightness":"50","refreshDelay":"100","mapping":"adafruit-hat-pwm","autoRefresh":true}]

Animated Bubbles:

As a finishing touch we’ll be adding some animated bubbles to the mix. These will just be circles with random position, size, and color.
Just like with the image node, we’ll be using the object definitions from the circle node.

Here is the code for generating a static circle, that just sits in the middle of the screen looking pretty.

var output = {}

output.payload = 
{
    radius: 10, 
    rgb: "255,0,0",
    x: 64, 
    y: 34
}

return output;

Note that it looks almost identical to the original, if you inject this straight into a circle node it’ll plant a big red circle in the middle of the screen. If you setup the nyanCat properly it should be flying past it a couple of times a minute.

Next we can setup the random location and color, both pretty complicated functions so don’t be scared to just copy and paste them.

//generate a random number between 0 to max
function randInt (max)
{
    return Math.floor(Math.random() * Math.floor(max));
}

//generate a random rgb color, using the randInt function
function randColor()
{
    return randInt(256) + ',' + randInt(256) + ',' + randInt(256);
}



var output = {}

output.payload = 
{
    radius: randInt(10), 
    rgb: randColor(),
    x: randInt(128), 
    y: randInt(64)
}

return output;

The most important concept to grasp here, is the calling of user made functions between lines 19 – 22.
Other than that not much has changed.

For the best style I copy and paste this node a few times, into their own seperate circle nodes.
That way nyanCat can fly through 3 bubbles instead of just 1

And here is the exported flow, to catch you up to the final project:

[{"id":"7a5afae4.690634","type":"image-to-matrix","z":"93c88281.18b06","name":"","file":"","xOffset":0,"yOffset":0,"matrix":"9b09c013.e6c5b","zLevel":"","x":900,"y":360,"wires":[]},{"id":"b4672224.50062","type":"function","z":"93c88281.18b06","name":"NyanCat Function","func":"//create the message we'll output\nvar output = {}\n\n//setup our varaible for X\nvar location = flow.get(\"x\") || 0\n\n//check to see if we've went off the edge\nif(location > 128) location = 0\n\nflow.set(\"x\", location + 1)\n\n\n//insert our properties into the payload\noutput.payload = \n{\n    data: \"https://t3alliance.org/wp-content/uploads/2019/01/nyanCat.gif\",\n    x: location,\n    y: 20,\n}\n\n//send out to the next node\nreturn output","outputs":1,"noerr":0,"x":680,"y":360,"wires":[["7a5afae4.690634"]]},{"id":"56d87a3a.4542c4","type":"inject","z":"93c88281.18b06","name":"","topic":"","payload":"","payloadType":"date","repeat":"0.1","crontab":"","once":true,"onceDelay":0.1,"x":440,"y":360,"wires":[["b4672224.50062","e5b23895.437f38","9f3dc778.1d1e98","202d83ef.c75e8c"]]},{"id":"50105316.5a64dc","type":"circle","z":"93c88281.18b06","name":"","xPos":0,"yPos":0,"radius":0,"rgb":"0,255,41","matrix":"9b09c013.e6c5b","zLevel":"","x":890,"y":300,"wires":[]},{"id":"e5b23895.437f38","type":"function","z":"93c88281.18b06","name":"Circle Function","func":"//generate a random number between 0 to max\nfunction randInt (max)\n{\n    return Math.floor(Math.random() * Math.floor(max));\n}\n\n//generate a random rgb color, using the randInt function\nfunction randColor()\n{\n    return randInt(256) + ',' + randInt(256) + ',' + randInt(256);\n}\n\n\n\nvar output = {}\n\noutput.payload = \n{\n    radius: randInt(10), \n    rgb: randColor(),\n    x: randInt(128), \n    y: randInt(64)\n}\n\nreturn output;","outputs":1,"noerr":0,"x":660,"y":300,"wires":[["50105316.5a64dc"]]},{"id":"4313edf2.721a04","type":"circle","z":"93c88281.18b06","name":"","xPos":0,"yPos":0,"radius":0,"rgb":"0,255,41","matrix":"9b09c013.e6c5b","zLevel":"","x":890,"y":260,"wires":[]},{"id":"9f3dc778.1d1e98","type":"function","z":"93c88281.18b06","name":"Circle Function","func":"//generate a random number between 0 to max\nfunction randInt (max)\n{\n    return Math.floor(Math.random() * Math.floor(max));\n}\n\n//generate a random rgb color, using the randInt function\nfunction randColor()\n{\n    return randInt(256) + ',' + randInt(256) + ',' + randInt(256);\n}\n\n\n\nvar output = {}\n\noutput.payload = \n{\n    radius: randInt(10), \n    rgb: randColor(),\n    x: randInt(128), \n    y: randInt(64)\n}\n\nreturn output;","outputs":1,"noerr":0,"x":660,"y":260,"wires":[["4313edf2.721a04"]]},{"id":"4863e929.52f748","type":"circle","z":"93c88281.18b06","name":"","xPos":0,"yPos":0,"radius":0,"rgb":"0,255,41","matrix":"9b09c013.e6c5b","zLevel":"","x":890,"y":220,"wires":[]},{"id":"202d83ef.c75e8c","type":"function","z":"93c88281.18b06","name":"Circle Function","func":"//generate a random number between 0 to max\nfunction randInt (max)\n{\n    return Math.floor(Math.random() * Math.floor(max));\n}\n\n//generate a random rgb color, using the randInt function\nfunction randColor()\n{\n    return randInt(256) + ',' + randInt(256) + ',' + randInt(256);\n}\n\n\n\nvar output = {}\n\noutput.payload = \n{\n    radius: randInt(10), \n    rgb: randColor(),\n    x: randInt(128), \n    y: randInt(64)\n}\n\nreturn output;","outputs":1,"noerr":0,"x":660,"y":220,"wires":[["4863e929.52f748"]]},{"id":"9b09c013.e6c5b","type":"led-matrix","z":"","height":"64","width":"64","chained":"2","parallel":"1","brightness":"50","refreshDelay":"100","mapping":"adafruit-hat-pwm","autoRefresh":true}]

To import, copy it into your clipboard; and come up to the ‘import’  menu here:

 

More Ideas:

As long as the file is the right dimensions you can use any animated gif for the display, here is another file you can link into the project in this tutorial.
https://t3alliance.org/wp-content/uploads/2019/01/original.gif

 

Another good resource is pixilart.com

Here you can create your own pixel art, set the exact size in pixels (useful for making sure everything fits on the display) and even export animated gifs.
To create a gif, use the layer tools on the right. This button duplicates your current layer which is useful for making slight changes on the next frame.Then use the ‘Download/Save’ tool to export your file as an animated gif.

Back To Top