How to Create LED Matrix Display from PNG file with WisBlock

Creating 16x16 Pixel Colored Image using RAK14012 LED Matrix Display Module

WisBlock ecosystem offers a 16x16 LED RGB Matrix display module called RAK14012 which fits on the IO slot of the WisBlock Base board. This LED RGB Matrix is based on the popular WS2812B RGB LED chip. In this tutorial, you will learn how to create a custom 16x16 image display for both black-white and color on the LED matrix. This will allow you to create different images and even an ​⁠animated pixel motion display with WisBlock. We will create a 16x16 pixel image and then convert it to a binary form so that we can include it in the code and run it in WisBlock Core.

This is the 16x16 LED matrix panel. It is in a non-rigid PCB that allows you to slightly flex the LED matrix.

Hardware Setup

To start, you need to have the following hardware components.1. RAK14012 RGB LED Matrix Module (this module already includes one 16x16 LED RGB matrix).2. External voltage supply for the LED Matrix (this is important since the LED Matrix consumes lots of power, especially when in full brightness).3. WisBlock Core (I used RAK4631).4. WisBlock Base (any base with IO slot will work).

To connect the modules, you can follow the instruction from the RAK14012 quick start guide. The guide will tell you the needed things to work with RAK14012 which will not be covered in this tutorial. Following that guide will help you create this project easier.

These are the modules you need to configure the display of the LED. It is composed of the WisBlock Core, WisBlock Base, and the RAK14012 LED RGB Matrix module. The RAK14012 has a 3-pin terminal block that connects to the 16x16 RGB LED Matrix.

There are available solderable pads under the 16x16 LED RGB Matrix. Basically, these are the data lines and the power supply lines (5V and GND) in the middle. You must connect an external power to it to make sure that you have enough power to light up the display. The DIN and DOUT also allow you to cascade multiple LED matrix however this is out of the scope of this tutorial.

Creation of an image

In this tutorial, we will use the Pixilart online drawing platform to create our pixelated image to be displayed on the LED RGB Matrix. You can create an account or just proceed straight to drawing your pixelated art.

You must create a new file and change the width and height sizes of both to size 16. This is the same pixel dimension with your RAK14012 module. After that, click New Drawing.

After the creation of the new drawing, you will have a 16x16 empty canvas. You can use the tools on the right to create the drawing you want. The color selection can be found on the left side of the drawing webpage.

On my ghost image, I used the bucket tool to make the background pure black and then the paint tool to draw the image. You also have the option of creating multiple layers, but in this tutorial, a single layer works fine. The final step is to export the image created to a png image file and store it on your computer. The generated png image will be very small, and that is expected with the 16x16 image size.

Converting the Image to an Array Variable

Once the image you created is ready, you have to convert it to 32-bit arrays, which is accepted by the RAK14012 library. To do this, there is a free converter tool that you must use called LCD Image Converter (lcd-image-converter). In this software, you must open the image you created in the previous step by clicking File, then Open.

The file will be opened, and you will see the 16x16 pixel drawing. If the image is correct, you can now proceed with the conversion by clicking Options and then Conversion.

There are two things that you need to configure here so that you can have a compatible array that will work on the RAK14012 library. Under the Prepare tab, you must check Use custom script. Use this specific scanning script in order to be compatible with the arrangement of the 16x16 LED RGB Matrix of RAK14012.

for (var y = 0; y < image.height; y++)
{
if (y % 2 == 1)
{
for (var x = 0; x < image.width; x++)
{
image.addPoint(x, y);
}
}
if (y % 2 == 0)
{
for (var x = image.width - 1; x >= 0; x--)
{
image.addPoint(x, y);
}
}
}

The second parameter to configure is the Block Size which is under the Image tab. Select 32-bit since this is the format accepted by the RAK14012 library. After selecting 32-bit, you can now click Show Preview to see the output array.

This is the 256-size 32-bit array generated by the LCD Image Converter software that you will use in your code for the WisBlock Core. Using these values will allow you to see the image you have drawn on the Pixilart website on your 16x16 LED RGB Matrix.

Preparing the WisBlock Code

In this step, you must have an Arduino IDE installed on your PC with RAK Boards BSPs added to its Board Manager. If you have no RAK boards installed yet, specifically WisBlock Core based on RAK4630, you can follow this RAK Arduino BSP guide: GitHub - RAKWireless/RAKwireless-Arduino-BSP-Index: RAKwireless BSP Support for the Arduino Board Manager. Both RAK4631 and RAK4631-R are compatible in this tutorial.

After ensuring you have the necessary WisBlock Core, you can proceed to add this library to your Arduino IDE: GitHub - RAKWireless/RAK14012-LED-Matrix: Arduino library for RAK14012 to controlling single-wire-based LED pixels and strip. This library must be downloaded as.zip and manually added to the Arduino IDE.

After the successful installation of the library, we can start with this example code(RAK14012-LED-Matrix/RAK14012_RGB_Matrix_SingleCycle.ino at main · RAKWireless/RAK14012-LED-Matrix), then modify it to show the 32-bit arrays we created earlier. If you decide to upload this sketch first (which I recommend), then you will see a single dot scanning from left to right across the whole LED matrix.

There are two things we need to change in this example so that the custom image created in Pixilart will be shown. The first thing to add is the 32-bit array that we generated from the image converter.

The second item to update is the one in the void loop, which changes the way the image is shown. This code snippet will individually update each pixel of the colored ghost image, and then it will stay with the complete ghost photo for three seconds before it goes back to scanning again.

After this, you can now compile and upload the code. Finally, you should now have the image displayed on the LED RGB Matrix.

Conclusion

The RAK14012 is a great module in the WisBlock ecosystem as it allows you to create displays based on 16x16 pixel images. With its RGB capability, creative WisBlock users can build more sophisticated displays and even make short animations out of them. Although this tutorial shows how to create a png image in your 16x16 LED RGB matrix, you can also make numbers and text in the display, which opens up other possible applications like air quality display, queuing system, currency tracker, and a few more other projects. What are you waiting for? Check out the RAK14012 from our store and start making your own creative displays!