GLCD

From Flowcode Help
Jump to navigationJump to search

Types of graphical display

Monochrome

These displays are typically arrays of pixels that can be either switched on or off.

They tend to be fast to refresh and low cost but are limited in terms of what they can display.

Colour

These displays are typically arrays of pixels that have associated red, green and blue colour channels. Each colour channel will have a bit depth that dictates what resolution is available for that colour. A common colour bit depth is 565 where the red and blue colour channels have 5 bits (0-31) and the green colour channel has 6 bits (0-63), making a total of 16-bits that are easily transferred using two standard 8-bit byte transfers.

The GLCD component is aware of the colour depth of the display and will automatically convert and scale the assigned RGB colour byte (0-255) to the correct bit depth.

They tend to be slower to refresh due to the increased data per pixel and slightly higher cost but can display full colour images.

Serial

Serial displays have a pin for clock and a pin for data in. The data is transferred a single bit at a time by placing the data onto the data pin and then strobing the clock pin.

These types of display consume less pins of the host microcontroller but tend to be slower as you have to individually clock in each bit.

Often these types of display can be used with an SPI peripheral to help speed up the data flow into the display. This is because the SPI peripheral can often output data much faster then simple pin toggling.

On some microcontrollers the SPI can run much faster if you can give it a burst of data rather then byte by byte. For larger displays there are properties named Queue Fast Pixels and when enabled you can set how many pixels will be buffered and transferred in a single chunk.

Parallel

Parallel displays often have a number of data pins up to 8 or 16 and a single clock pin. The data is transferred in multiple bits at a time by placing the data onto the data pins and then strobing the clock pin.

Ideally when using parallel displays you would assign the data pins to a port of the microcontroller which then allows you to write to all the data pins in a single operation, significantly increasing the speed of sending data to the display.

The downside to this is you require a lot more connections to the host microcontroller.

Other Control Pins

The following pins are common and may or may not be available on your selected display.

RS / CD / RE / A0

This pin can have several names register select (RS), command data (CD), register enable (RE), Address0 (A0). They all do the same thing and simply tell the display if you are transferring a register address or a data value.

CS / CE

The chip Select (CS) or chip enable (CE) pin is there to tell the display if you are talking to it. It is common practise to tie this to ground if the display is always enabled.

For systems where the display is on a shared SPI bus it is a requirement to use the CS pin to control when you are communicating to the display and when you are communicating with other equipment.

The display component properties let you determine if CS pin is used and if it is actively toggled.

UseCS = No - don't do anything with the CS pin, user must connect the display CS pin to Ground or manually control it themselves using output icons.

UseCS = Yes - ToggleCS = No - Pull the CS pin low during the component initialise (enabled) and then don't do anything else with the pin. Allows future flexibility but avoids slowdown due to no instructions for toggling the CS pin.

UseCS = Yes - ToggleCS = Yes - Pull the CS pin high during the component initialise (disabled) then automatically toggle the pin to enabled when communicating with the display before toggling back to disabled.

Reset

The reset pin is used to reset the display back to a known condition, essentially resetting all the registers back to factory default.

The reset pin can also help with noise on the clock pin before the display has been initialised.

The reset pin is automatically strobed during initialisation and then held high.

If you do not wish to connect the reset pin to the microcontroller then you can simply connect it to the VCC power rail and then change the UseReset property to No. If you're not using the reset pin then it is wise to add a pull up or pull down resistor on the clock pin to avoid the pin floating during startup.

LED

The LED pin is used to control the backlight of the display.

The display component simply allows you to switch the backlight on or off. For more control over the backlight we recommend using a PWM enabled output pin of the microcontroller and a PWM Output component.

Core Functions

These functions are provided by the display component itself and are common to all graphical display components.

Colours

Foreground colour

The foreground colour is loaded with the colour from the display properties on calling the initialise function. It can then be overridden using the SetForegroundColour component macro.

This sets the colour of the foreground pixels for all proceeding objects E.g. Fonts shapes etc.

Background colour

The background colour is loaded with the colour from the display properties on calling the initialise function. It can then be overridden using the SetBackgroundColour component macro.

This sets the colour of the background pixels for all proceeding objects E.g. Fonts shapes etc.

Plot

Draws a single pixel at the provided X,Y coordinates in the foreground colour.

BPlot

Draws a single pixel at the provided X,Y coordinates in the background colour.

Draw Line

Draws a line with a width of a single pixel between coordinates X1,Y1 and X2,Y2 in the foreground colour.

Draw Rectangle

Draws a rectangle with square corners. X1,Y1 dictates the top left corner and X2,Y2 dictates the bottom right corner.

The rectangle outline will be drawn in the foreground colour with the width of a single pixel.

Transparent = 1 - The inside of the rectangle will not be drawn.

Transparent = 0 - Solid = 1 - The inside of the rectangle will be filled with the foreground colour.

Transparent = 0 - Solid = 0 - The inside of the rectangle will be filled with the background colour.

...

Additional Libraries

These functions are additional to the main display component and need to be linked to a valid graphical display component to function. Multiple GLCD library components can be linked to a single display.

Images

Images can be add to a gLCD via two components that can be linked to the display.

The images can be stored directly within ROM GLCD Bitmap Drawer ROM

Or saved and read from a SD card.

Graphs

Graphs that have x and y values set can be added by using GLCD Graph Creator XY from the Graphical Library.

Alternatively if x is to remain a fixed period and only got a varying y value then you can use GLCD Graph Creator from the Graphical Library

Touch

There are four touch components available.

For basic resistive touch screens that do not connect to an IC there is a [[Component: ResistiveTouch (Graphical Library)|ResistiveTouch component from the Graphical Library

For a 4-wire resistive touch screen there is a Touch Screen (XPT2046) Component from the Graphical Library.

For capacitive touchscreens are Touch Screen (GT911) component and Touch Screen (XPT2046) component that can be found within the Graphical Library.

Management

For graphical display managmet e.g. adding sliders, buttons, getting touch ID etc there is the Display Manager Component from the Graphical Library.

The image below shows the slider being moved to control the PWM duty - see Examples.

Graphical LCD Display Manager.png

Custom Fonts

There are up to four different fonts packaged and used by the display for printing strings of characters. Each of these four fonts can be selected from a predefined drop down list.

If you wish to use a specific font that is not already included then you can use a custom font as detailed in the gLCD Font Library.

Examples

gLCD demo - graphs and adding images to ROM

The example above will show on the graphical display

Testcard Demo.png

FC6 Icon.png FT6X06 Touch Demo

FC6 Icon.png Display Manager Demo


Here is an example that will scan for bitmap files in the root of the SD card and display them on a graphical display.

ZIP Icon.png Bitmap Drawer File Demo


The zip file contains the Flowcode project as well as some example bitmap image files taken from Pixabay.

Place the bitmap files in the same folder as the project file for the simulation to work.

Place the bitmap files on the root of the SD card for the embedded hardware to work.

Changing the display

If you want to replace the display in one of the examples with a different display type then information on how to do this can be found on the Replacing a Component page.