Share this article
Introduction
This article is intended to serve as a conceptual guide for the Microcontroller graphics Modules.
Hardware Modules
The basic modules in a Microcontroller graphics applications are:
- Microcontroller
- Frame buffer
- Display Controller
- Display Glass
Graphics Modules

The above diagram shows the basic building blocks of the Embedded Graphics system.
Display Glass : The display glass is used to display a sequence of colors on the pixels and also converts the digital representation of colors into actual colors. The typical types of Display glass in embedded applications are TFT LCDs, CSTN/MSTN LCDs or OLED/AMOLEDs. All the LCD modules include the gate and source drivers to display all the pixels.
The display glass has no inherent memory and must be constantly updated with pixel data in each row and column, without which the display will go blank. This refreshing of data is handled by the display controller.
Display Controller : The function of the display controller is to constantly provide the horizontal and vertical pixel data to the display glass from the frame buffer. It fetches the data from the frame buffer, decodes it to the required bit format and outputs it to the display glass with the control signals. The display control must adhere to the timing requirements of the display glass.
Frame Buffer : The frame buffer is a memory (usually a RAM), which holds the data to be shown on the display screen and acts as a source for the display controller. The required size of the frame buffer depends upon the resolution and the color depth. The minimum requirement
is that it should hold the data required to display one full
frame and must support the scan rate (preferred
refresh rate as per the data sheet of the display glass)
of the display controller.
Frame Buffer Size Required (Bytes) = Number of Pixels x
Color Depth (Bits)/8
Microcontroller : The application code running inside the microcontroller decides which data should be stored in the frame
buffer, and as the frame buffer changes, the display content also changes. Each pixel’s color is calculated and stored in the frame buffer. The microcontroller and the display controller must have the same settings, with respect to the color depth and memory range of the frame buffer being used.
The microcontroller must have sufficient processing power (usually measured in MIPS) to render the required shapes in the frame buffer, such that it does not appear to be drawn slowly
on the display screen. This is because the display controller keeps pumping data from the frame buffer concurrently, with the microcontroller rendering pixels into the frame buffer. However, the microcontroller does not render any new shapes into the frame buffer if there is no change on the display screen. If there is a change on the screen, only the changed pixels need to be sent to the frame buffer, thereby minimizing the data transfer to the frame buffer.
Interconnection Scenarios
Scenario 1: The frame buffer and display controller are integrated in a display module, The Microcontroller and the display Modules are interfaced using a serial or parallel interface.

Scenario 2 : The Frame buffer and the display controller are integrated on a graphics controller chip. The Microcontroller connects to the Graphics controller through the serial or parallel interface, the graphics controller is interfaced to the display glass using the RGB connections.

Scenario 3 : The frame buffer and the display controller are integrated into the Microcontroller chip. The display glass is connected to the Microcontroller through the RGB connections.

Scenario 4 : The Display controller is integrated into the Microcontroller, The External RAM is being used as a frame buffer. The external RAM is connected to the Microcontroller through the parallel interface. The Display glass is connected to the Microcontroller through the RGB interface.

Software Modules
The basic software component required for any graphics application is a Software Display Driver which provides one basic operation (i.e., setting the color of a pixel). A driver may also implement APIs to draw fundamental shapes, for instance, a line, rectangle, bar, circle, text, image and so on. The Software Display
Driver must be written for every separate graphics driver used. More complex graphic elements, like labels, buttons, check boxes, sliders and progress bars are implemented in higher layers, which in turn, use the Software Display Driver.
The Graphics Display Controller is the hardware module consisting of the frame buffer and Display Controller.
The remaining layers are the software layers.
Graphics Library Model

Graphics Terminology
Pixel : A pixel is the smallest unit of a screen which is an LED for LED displays. The color of the pixel can be changed by changing the RGB values connected to the pins of the LED.
Resolution : The count of the pixels in the horizontal rows and vertical columns in a display panel is called the Screen resolution. The units of the screen resolution are specified as Rows x Columns , for example 320 x 240 means a screen having 320 rows and 240 columns and the count of pixels is equal to 76,800 pixels.
Frame Rate : Frame rate is the frequency at which the number of frames are changed on a display, it is expressed in Hertz. It is used for moving images or videos application.
Scan Rate : Scan rate usually refers to horizontal scan rate of a display panel and it describes the number of times the rows are scanned or illuminated in a single frame. The scan rate can be expressed as 1/2,1/4,1/8 etc…
Refresh Rate : Refresh rate is also a scan rate but used for vertical columns scanning and it describes the number of times the columns are illuminated in a frame. The refresh rate is expressed in hertz and usually a refresh rate of 60 Hz implies that the screen is refreshed 60 times within a second.
The refresh rate is related to the scan rate, For instance a screen with a scan rate of 96 Khz at a resolution of 1280 x 1024 results in a refresh rate of 96,000 /(1280 x 1024) ~ 89 Hz.
Raster scan : Raster scan is a technique to display images on a panel by illuminating or scanning one line at a time from left to right on a screen. Depending on the scan rate, few rows are scanned simultaneously and then the display is blanked and then the other rows are scanned. This process is repeated for each frame and during the same process the vertical scan is also steadily increasing downward but at a lesser rate which is called the refresh rate.
Color depth : The units of the color depth are bits per pixel or bpp. Each pixel is represented by the number of bits used for RGB. A 24 bit bpp corresponds to 8 bits for Red, 8 bits for Green and 8 bits for blue colours.