This tutorial is written by Ng Yong Han.
To display graphics and text output from the PIC32, we need a Graphics LCD (GLCD). One of the GLCD we are using in this tutorial is the ST7920-type controller. The advantage of this controller is it can display Mandarin text apart from the Latin alphabets with only a few instructions to the display. To conserve pins, only 4 data pins are used, hence the 4-bit mode selected in the controller during initialization. There is a serial mode but it will be covered in another tutorial.
On top of that, the controller allows users to switch between the text and graphics mode.
As usual, include the skpic32-glcd.h and the graphics.h files into your project, like this:
Connect the data pins (DB4-7), E, RS and RST individually as shown in the picture. In the example LATE is used.
The connection is shown in this following diagram:
( The value of R can be 10K – 100K )
Please take note that the backlight connections are not included here too.
Call the function above to start the GLCD. Upon initialization, the default actions for the GLCD are:
1.) A short reset to the GLCD and Cursor and blinking cursor is disabled.
2.) All text is cleared from screen.
3.) Text mode is enabled.
To send a command to the GLCD, the function above is called, and this function takes in an 8-bit value.
Refer the datasheet for more details about each command:
You have noticed that the GLCD has two types of instructions: Basic and Extended Instructions. The Basic instructions primarily deal with printing text on the screen, and the Extended instructions mainly deal with drawing pictures on the screen. The Extended instructions also controls whether you want the GLCD to be in 4-bit mode, or in 8-bit mode, and you can enable graphics or disable it over there too.
Do not worry about changing the instruction sets as the functions such as
already handles the switching for you. (These functions will be discussed later)
If we want to place a character on a screen, this function can be used. Up to four rows and up to eight columns is supported on the screen. Wait… but when you calculate it on the screen, it’s actually two letters per column! Why is that happening?
According to the datashee it is to accomodate Mandarin words which takes up two alphabets, and each of them must be displayed in the start position of each address/column:
However, the next character can be placed after printing the first character in the column. In this function, only the first character in each column can be printed after the column is selected, leaving another empty space.
Similarly, if a string is printed, up to four rows and up to eight columns are only supported on the screen. But, the system will continuously print the next character in each column, as mentioned in the previous function.
Example, here we print texts on each row:
And the GLCD shows:
Hmm, so we can show some text here, but how about drawing simple graphics on it? Well, here’s the function mentioned. This function takes in a constant 8-bit pointer to a 1024-byte graphic array. A simple demonstration of how to convert the picture to an array form will be explained later.
But first thing first – clear the text out from the screen! You don’t want the text to overlap the screen and cause a mess on your picture. So, this command will work:
Okay. All the text is gone. Then you will switch on the graphics mode. It is done by calling this function:
and then you need to clear the screen in graphics mode, which is:
The extra graphical clutter and mess is now gone after calling this function. After that, now you can fill the screen with your own picture:
To make your own graphic array, you will need Irfanview and a program called “LCDAssistant”.
First, grab a picture from the Internet. I’ll take the Cytron logo as an example here:
You will resize the image to accomodate the size of the screen. Press CTRL-R to Resize/Resample the image.
Set the size according to the size of the GLCD, which is 128×64 pixels. Check that the units are in pixels, and the “Preserve aspect ratio (proportional)” checkbox is cleared. After clicking “OK”, the image is then resized:
Then, you decrease its color depth. Click on the “Image” above and then “Decrease Color Depth”.
Since the GLCD has two colors, which is black and white only, so we select this one and turn it into a grayscale image:
The final result will be this:
and save the converted picture to a bitmap file by pressing ‘S’:
On the bottom of the Save dialog box, click the dropdown bar “Save as type” and select “BMP-Windows Bitmap”. Then type the file name and click “Save”.
Next, you launch “LCD Assistant” software. Load the image by clicking on the “File” and “Load Image”. Load the image you have converted just now. Then set up the software according to the picture given:
The byte orientation is set to “Horizontal”, width is 128, height is 64, and the Size endianness is “Big”.
Afterwards, click “File” and “Save output”. Save as “graphics.h”. Copy the “graphics.h” to your project folder.
Of course, you may need to enable the graphics mode and clear the screen (both text and graphics) before you paint the entire screen with that Cytron logo:
Finally, compile the program afterwards and download the HEX file into the SKPIC32.
Well, you have been rewarded with the digital Cytron painting on your GLCD! Congratulations!
The small letters isn’t very clear due to the downsampling and stuff, but the “Cytron” in the logo is clearly visible.
Still want to print some text after painting the screen? Simple! You will use this after clearing the screen:
Wishing the readers Happy New Year 2012 and Have a Great Year Ahead!
Note: This program is compiled by MPLAB C32 2.01 which the SKPIC32’s bootloader does not support. Thus, users need a PICKit3 or ICD to program the hex code to SKPIC32. This action will erase the pre-programmed bootloader inside SKPIC32.
1.) di Jasio, L. (2008) Programming 32-bit Microcontrollers in C – Exploring the PIC32, Elsevier
2.) Radoslaw Kwiecien, FastLCD program -> en.radzio.dxp.pl/bitmap_converter/
3.) ST7920 Datasheet, www.crystalfontz.com/controllers/ST7920.pdf