Hello Friends,
Welcome Back. This is the continuation of our tutorial series on Graphical LCD Programming. Till now we have made the hardware for testing and setup avr studio project for graphical development. Now as our hardware and software is ready, its time to get our hands dirty by digging deep into ProGFX graphical programming.
Introduction
The graphical LCD is made up of a grid of pixels. Common resolution is 128x64. That means that their are 64 horizontal lines and each line has 128 pixels. These displays are monochrome that means each pixel can either be ON or OFF. ON pixels looks dark while OFF pixels are nearly invisible. The glcd has a graphic RAM where each bit in ram corresponds to one pixel on screen. You write to the graphic RAM to modify its contents and the screen will change accordingly. The LCD module offers just that much functionality. You can't do much with that.
Pixel Matrix of Graphical LCD |
You need a graphic library that takes high level commands like
- Graphic primitives like line,circles, rectangle etc
- Text Drawing
- Image/Icon drawing.
- Double buffering.
and changes the graphic memory accordingly. These operation requires some advance algorithms (at least from beginners point of view!). So the graphic library will help you generate complex graphical output very easily.
Pixel Addressing
The horizontal location is called the X address and its starts from the left hand side(where its value is 0) and increases as we move right. The vertical location is called Y address of pixel its starts from the top (where its value is 0) and increases as we move down. Only positive values are allowed. Pixel is always addressed by specifying its X and Y co-ordinate. It is written in form (x,y). The image below shows address of some pixels.
Pixel Addressing in 128x64 glcd |
Colors
In ProGFX engine only two colors are defined they are
- GFX_COLOR_BLACK
- GFX_COLOR_WHITE
Most of the ProGFX functions takes pixel address and color as arguments.
Drawing A Pixel in GLCD
The function which draws a single pixel in ProGFX is called
void GFXRawPutPixel(UINT8 x,UINT8 y,UINT8 color);
The function is very simple. The first argument is the x location of pixel, the second is the y location of pixel, the third is the color of the pixel.
Example
To plot a pixel at (32,24) with black colour.
#include <gfx.h>
void main()
{
//Initialize ProGFX Engine
GFXInit();
//Draw a pixel at 32,24 in Black
GFXRawPutPixel(32,24,GFX_COLOR_BLACK);
//Update the display
GFXUpdate();
}
Drawing A line in GLCD
A line is a geometrical figure defined by two points. A line can be drawn on GLCD by specifying a start point and an end point. The function in ProGFX which draws a line is explained below.
void GFXLine(UINT8 x1,UINT8 y1,UINT8 x2,UINT8 y2,UINT8 color);
Arguments
- x1 = start x co-ordinate.
- y1 = start y co-ordinate.
- x2 = end x co-ordinate.
- y2 = end y co-ordinate.
- colour = either GFX_COLOR_BLACK or GFX_COLOR_WHITE
Return Value
- NONE
Example
Draw a line between (16,16) to (100,41) in Black colour
#include <gfx.h>
void main()
{
//Initialize ProGFX Engine
GFXInit();
//Draw a line between (16,16) to (100,41) in Black colour
GFXLine(16,16,100,41,GFX_COLOR_BLACK);
//Update the display
GFXUpdate();
}
![]() |
Line in GLCD |
If the line you want to draw is perfectly horizontal or vertical then you may use the following two functions.
- void GFXHLine(UINT8 x1,UINT8 y1,UINT8 len,UINT8 color);
- void GFXVLine(UINT8 x1,UINT8 y1,UINT8 len,UINT8 color);
These function takes starting point and the length of line. They are much faster than generic GFXLine() function.
Drawing a Rectangle In GLCD
Rectangle can be drawn on the screen by specifying two points and colour.
- Top-left point
- Bottom-right point
The function which draws a rectangle is documented below.
void GFXRect(UINT8 x1,UINT8 y1,UINT8 x2, UINT8 y2,UINT8 color);
Argument:
- x1 = top-left x co-ordinate.
- y1 = top-left y co-ordinate.
- x2 = bottom-right x co-ordinate.
- y2 = bottom-right y co-ordinate.
colour = either GFX_COLOR_BLACK or GFX_COLOR_WHITE
Return Value
- NONE
Example
Draw a rectangle between (16,16) and (100,41) in Black colour
#include <gfx.h>
void main()
{
//Initialize ProGFX Engine
GFXInit();
//Draw a rectangle between (16,16) to (100,41) in Black colour
GFXRect(16,16,100,41,GFX_COLOR_BLACK);
//Update the display
GFXUpdate();
}
![]() |
Rectangle in GLCD |
Drawing a Filled Rectangle in GLCD
In place of above function use the following function. It will draw a filled rectangle.
void GFXFillRect(UINT8 x1,UINT8 y1,UINT8 x2, UINT8 y2,UINT8 color);
Example
Draw a filled rectangle between (16,16) and (100,41) in Black colour
#include <gfx.h>
void main()
{
//Initialize ProGFX Engine
GFXInit();
//Draw a filled rectangle between
//(16,16) to (100,41) in Black colour
GFXFillRect(16,16,100,41,GFX_COLOR_BLACK);
//Update the display
GFXUpdate();
}
![]() |
Filled Rectangle in GLCD |
Drawing a Circle in GLCD
Circle can be drawn on GLCD by specifying the center and the radius. The following function draws a circle in ProGFX.
void GFXCircle(UINT8 cx,UINT8 cy,UINT8 rad,UINT8 color);
Argument:
- cx = x co-ordinate of center.
- cy = y co-ordinate of center.
- rad = radius.
- colour = either GFX_COLOR_BLACK or GFX_COLOR_WHITE
Return Value
- NONE
Example
Draw a circle with center at 64,32 and having a radius of 20 pixels in Black colour.
#include <gfx.h>
void main()
{
//Initialize ProGFX Engine
GFXInit();
//Draw a circle with center at 64,32
//and radius of 20 pixels.
GFXCircle(64,32,20,GFX_COLOR_BLACK);
//Update the display
GFXUpdate();
}
![]() |
Circle in GLCD |
System Functions of ProGFX
void GFXInit();
This function Initialize the ProGFX Graphics Engine. Must be called before using any other graphic functions.
Argument:
NONE
Return Value
NONE
void GFXUpdate();
This function transfers the internal graphic buffer to the LCD Module. After your drawing is complete you must call this to make it visible on screen.
Argument:
NONE
Return Value
NONE
void GFXClear();
This function Clears the screen.
Argument:
NONE
Return Value
NONE
Other Parts of the Tutorial Series
- Part I - Introduction to GLCD and Hardware Setup
- Part II - Downloading and Installing ProGFX!
- Part III - Explains Graphic Primitive Functions.
- Part IV - Font and Text Handling Functions.







Good tutorial ..In last tutorial you created library for Progfx with extension of .lib file how to creaate our own library can u give guide me
@Kiran,
In gcc compilers library has extension .a and NOT .lib
Also when you downloaded WinAVR (avr-gcc) it comes with its own user manual which is very good. So why are you asking such silly things so as how to make a library if it is clearly given on the manuals ???
sir,can u please upload the custom characters tutorial for
a 16×2 lcd (4-wire)module.I have been waiting for it long time.
It would be great help for me,sir.Thank you.
Thank you Avinash..i didn’t read the user manual thats the problem ..any how thank you.. i will do it..
Hi Avinash,
It was an excellent tutorial. I was waiting for these tutorials ever since you said that GLCD tutorials are on their way.
Hai Avinash
I saw your tutorial about the graphical LCD.Its amazing.congrats…I want to one thing that can i change the port pins that connecting with the graphic LCD.Or i should have to connect in the same manner as shown in the above circuit diagram.Please give me a solution. Thank you
Amazing tutorials keep it up…
Does the library works with a st7920? Thanks.
Hi,
This is probably not the right place to say this, but, there is another IDE for AVR development called Visual Micro Lab and its awesome. It uses the same WinAVR backend, but it can simulate all kinds of devices that you would connect with an AVR (yes, even an LCD!!) along with the AVR. the website is : http://www.amctools.com/. Best part is Its Free!!
Regards.
@Swaroop,
Ya, we know VMLab, use it and love it!
GFXRawPutPixel(32,24,GFX_COLOR_BLACK); will draw a pixel but how to erase the same pixel?
is there any other command by which a drawn pixel can be erased?
pls tell…..
thanks in advance
@Srinath
Common sense
GFXRawPutPixel(32,24,GFX_COLOR_WHITE);
Lovely work….Keep it up buddy…