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.

graphical lcd matrix

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

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

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();
}
glcd rectangle

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();
}
glcd filled rectangle

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();
}

glcd circle drawing

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