Showing Images on LED Matrix using Simulator
Controlling the LED matrix is actually almost the same as controlling seven segment. The difference is that the LEDs of seven segment are organized into seven sections which could form the figures. While the LED matrix, LEDs are arranged into a matrix that can be referenced by column and row. The columns on the LED matrix can be equated with the digits on the seven segment. While the lines on the LED matrix can be equated with LED a through LED g plus a decimal point LED on seven segment. Thus between the seven segment and LED matrix is basically the same, especially if the number of rows are only eight.
Then how to display images on the LED matrix? Yes basically the same as displaying the numbers on the seven segment. If you are already familiar with how to display data on the seven segment display using the buffer as is done in discussion about seven segment in the Easy and Fun Learning Microcontroller book, in which to display data on the seven segment, all we have to do is fill the display buffers, then to display image on the LED matrix, all we need to do is also just fill data on corresponding display buffers.
In the picture above, the size of the LED matrix that we use is 8 rows x 32 columns. This size is equivalent to seven segment which the number of digits are 32 digits. Thus basically we need a total of 32 bytes of display buffers. The LEDs on the top line we associate with bit 0 of port and successively LEDs on the lines below to bit 1, bit 2, and so on until bit 7. To make a LED lit on a particular line, then we need only fill the correlated bits with 0 or 1 depending on the configuration of the matrix that we use, active low or active high. For ease of understanding, we usually use active high so to lit the LED on the top line then we have to make the bit 0 to has the value of 1.
As an example, consider the logo below. The logo size is 32 x 32. Therefore, the logo may not be displayed on the LED matrix with the size of 32 x 8 at once. To display it, we have to split the logo into four parts. After that we have to show four parts one by one.
To the left of the logo there is a number from 0 to 7 and repeated up to four times. While above the logo are the numbers from 0 to 31. These figures will show us how to display the parts of the logo on the LED matrix. The figure above the logo shows the buffer index, while the figure at left of the logo shows the bit position. Thus, to show the first part of the logo (the top), then the buffer  must be filled with data 11111111b, buffer  = 00000001b, buffer  = 00011001b, and so on.
0. 1. 2. 3. 01234567890123456789012345678901 0 ©©©©©©©©©©©©©©©©©©©©©©©©©©©©©©©© 1 © .............................© 2 ©..........©©©©..©©©©..........© 3 ©........©©©©©©..©©©©©©........© 4 ©......©©©©©©©©..©©©©©©©©......© 5 ©.....©©©©...©©..©©...©©©©.....© 6 ©....©©©.....©©..©©.....©©©....© 7 ©...©©©......©©..©©......©©©...© 0 ©..©©©.......©©..©©.......©©©..© 1 ©..©©........©©..©©........©©..© 2 ©.©©©............©©............© 3 ©.©©.............©©............© 4 ©.©©©©©©©©©©©©©..©©©©©©©©©©©©©.© 5 ©.©©©©©©©©©©©©©..©©©©©©©©©©©©©.© 6 ©............©©.............©©.© 7 ©............©©............©©©.© 0 ©..©©........©©..©©........©©..© 1 ©..©©©.......©©..©©.......©©©..© 2 ©...©©©......©©..©©......©©©...© 3 ©....©©©.....©©..©©.....©©©....© 4 ©.....©©©©...©©..©©...©©©©.....© 5 ©......©©©©©©©©..©©©©©©©©......© 6 ©........©©©©©©..©©©©©©........© 7 ©..........©©©©..©©©©..........© 0 ©..............................© 1 ©..©©©.©..©..©©..©...©.©..©©©©.© 2 ©.©....©..©.©..©.©©..©.©.©.....© 3 ©.©....©©©©.©©©©.©.©.©....©©©..© 4 ©.©....©..©.©..©.©..©©.......©.© 5 ©..©©©.©..©.©..©.©...©...©©©©..© 6 ©..............................© 7 ©©©©©©©©©©©©©©©©©©©©©©©©©©©©©©©© The Logo.
To be able to fill these data to the buffer with ease, then we can create an image data table. This technique is similar to how to show the variation of Running LED on exercise 5 of the Easy and Fun Learning Microcontroller book or on the LED Simulation article. Each image table has the same size with the size of the buffer. And for the case of the logo above, we need four 32 bytes size image tables.
Like on the Running LED exercise, the work of preparing the table is a tedious job and requires precision. But you should not be discouraged if you want to make the table of the large and complicated image because you can use the aid program ImgTable.exe. The program will help you to convert bmp format images into an image table that we can use it in the program using either the M51 format or using the SDCC format. So to get an image table, you simply create an image using MSPaint, and then do the conversion using ImgTable.exe.
ImgTable.exe can do the conversion from bmp file with a monochrome format up to 24 bits format. But because the table will be used to lit the LED which of course is equivalent to a monochrome format, the 24 bits format would be first converted by ImgTable.exe into the monochrome format. Therefore, it is better if you save the images you create with monochrome format to save on file size.
Rules applied by ImgTable is that the pixels that are black will be converted into 1, while the white pixels into 0. For colors other than black and white, then the three basic color elements will be summed first, then divided by three. After that, if the value is closer to the black will be interpreted as black, and if it is closer to white will be interpreted as white.
Table creation sequence is from left to right and from top to bottom. From top to bottom means every eight pixels will be taken as one byte. For example, an image with a size of 32 x 32, it will be four tables with the size of 32 bytes. The first table stores the data of the coordinates (0,0) to (31,7) by the rule that the upper left pixel is (0,0) and the lower right pixel is (31.31). The second table is (0,8) to (31,15). So forth.
In this example, all tables store the entire image data appropriately because the high of the image size is a multiples of eight. If the size of the image is not a multiples of eight, then the final table will have the remaining bits. For example if the image size is 32 (width) x 33 (height), then the number of tables are five tables with size of 32 bytes. And the last table only use bit 0. While bit 1 to bit 7 will be filled with 0.
Return to the LED matrix, we must display the four parts of the logo one by one. But if we display them alternately, then the shape of the logo will not be seen clearly. We will only see the incomplete images that appear alternately. Therefore we have to show by shifting it up or down. However, we have created tables that contains the data of the image blocks. So we can not retrieve data from the image coordinates (0,1) to (31,8) directly. For that, we need one more buffer with the same size as the first buffer. If we call the first buffer as the display buffer, then we call the second buffer as hidden buffer because it was not for displaying data to the LED matrix. This buffer is only used as an aid in manipulating the display data.
In case we want to shift the image up, then we can describe the arrangement as if the buffer is as follows:
01245... abcde... Numbers = the display buffer, alfabets = hidden buffer.
The first time, we fill the display buffer with data 0, so that all the LEDs will be turned off. Then we put the first image block table on hidden buffer. After that do a bit shifting between a and 0, b and 1, c and 2, and so on. Do these shifts of up to eight times, which means that all parts of the image block has been on display buffer. And before doing the ninth shift, we must place the second image block into the hidden buffer. And the next step is an iteration of the previous step.
For more details, you can see the program listing for the demo above that is written in the format of M51 and c. In the listing, there is DelayTime constants that you can replace to change the speed of picture motions.
To try on the simulator, then you must set the port link so that both Port0 and Port1 are linked to MXLED.exe by the message link with the WM_USER message, and lParam of Port0 is 2 and lParam of Port1 is 1. You also have to set the configuration of MXLED size as 8 x 32 landscape.
Happy trying and please do not hesitate to ask if there are less clear. Hopefully useful.
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.Please notice that comment or question submitted should match the topic.