The Simplecortex is fast enough to interface with a full color LCD screen. This tutorial explains how to work with a LCD screen and provides examples how to write pixels and basic shapes on the LCD screen. The library also has functions to show a button or a process bar on the LCD screen. the way to use a touch screen is also explained. For this tutorial the LCD library is required, this library can be downloaded from from our repository.
The LCD screen that is used is for this tutorial http://www.adafruit.com/products/376.
The 2.4 and 2.8 inch LCD screens from Iteadstudio can be used to:
We reccommend the 2.8 inch as optimisation can not be used for the 2.4 inch LCD.
Warning: It is highly recommended to use an external power supply or two usb cables. Else the LCD screen might not work or the microSD card may fail. If the LCD works but it can't load pictures from a MicroSD card please try it again with an external power supply.
To begin it is needed to include the libraries. This is done by these commands:
#include "spi_sd_lpc17xx.h" //Only needed when using MicroSD
The libraries for the microcontroller itself and the variables have to be included to:
When using a MicroSD card it is required to open the bmp.c file and change the line "#define CFG_SDCARD 0" to "#define CFG_SDCARD 1"
There are multiple fonts that can be used, this example uses the "veramonobold11.h" font but other fonts can be used to. When using another font look in the .h file for using it to show text strings on the LCD screen.
3. Initialize and basic info
To initialize the LCD screen the command lcdInit(); is used. This sets up the display and makes it fully black. The LCD screen has a resolution of 240 * 320 pixels, 240 pixels width and 320 pixels height. The LCD screen has a 565 color code; the first 5 bits are for Red, then 6 for green and then 5 for blue. The most used color code is 8 bits per color, 24 bits total. For black this is #FFFFFF. To convert a 24 bits color to a usable color for the LCD the command drawRGB24toRGB565(R, G, B); is used. A 16 bits variable is used to store the result in. To convert the color red (#FF0000) to a usable color the command is:
convcolor = drawRGB24toRGB565(0xff, 0x00, 0x00);
In the Color.h library a couple of colors are already defined, to use the color red it’s possible to fill in COLOR_RED when using a draw command.
The command to draw a single pixel is drawPixel(X, Y, color); To make pixel 285, 120 red the command is:
drawPixel(285, 120, COLOR_RED);
To fill the entire screen with one color the command drawFill(color); To make the entire screen red the command would be:
4. Drawing figures
There are several commands to draw a figure like a line or a circle. To draw a line the command is drawLine(X0, Y0, X1, Y1, color); To draw a line from the lower left corner to the upper right in green is:
drawLine(0, 0, 320, 240, COLOR_GREEN);
Circles can be drawn filled and unfilled, the commands are drawCircle(Xcenter, Ycenter, Radius, Color); and drawCircleFilled(Xcenter, Ycenter, Radius, Color); The commands work the same, to make a filled red circle in the middle of the screen with a radius of 40 the command is:
drawCircleFilled(160, 120, 40, COLOR_RED);
Rectangles can also be made filled and unfilled. The commands are drawRectangle(X0, Y0, X1, Y1, Color); and drawRectangleFilled(X0, Y0, X1, Y1, Color); X0, Y0 is the begin point and X1, Y1 the end point for the rectangle.
5. Drawing advanced figures
The LCD library has some more advanced functions like drawing text, buttons and a process bar. To draw a string of text on the LCD screen the command drawstring(X, Y, Color, &fontinfo, “you’re text here”); is used. Fontinfo is the font that is used, as it is a pointer the & symbol has to be placed in front of the font name. For the veramonobold11 font the font info name is: bitstreamVeraSansMonoBold11ptFontInfo. The correct command to write the string “Hello everyone” on the LCD is:
drawString(160, 0, COLOR_BLACK, &bitstreamVeraSansMonoBold11ptFontInfo, "Hello everyone");
It is also possible to draw a button on the LCD screen. The command to do this is:
drawButton(X, Y, Width, Height, &fontinfo, fontsize, “Text here”, pressed);
Width and Height is for the size of the buton, fontsize is the size of the used font, 11 for the VeraSansMonoBold11pt font. When pressed is false the button is lightgrey, when pressed is true the button is darkgray. This is to animate a pressing motion if the button is pressed. To draw a button the following command is correct:
drawButton(80, 160, 80, 30, &bitstreamVeraSansMonoBold11ptFontInfo, 11, "Button", FALSE);
To draw a progress bar the following command is used:
drawProgressBar(X, Y, Width, Height, BarBorderColor, BarFillColor, Progress);
BarBorderColor is the color of the outlines of the progress bar. BarFillColor is the color of the actual bar. Progress is a value from 0 to 100, 0 means an empty bar and 100 a full bar. A working command to draw a Progress bar is:
drawProgressBar(60, 160, 120, 30, COLOR_LIGHTGRAY, COLOR_RED, 50);
To print a variable as text for the drawstring, drawButton and drawProgressBar the itoa command can be used.
The itoa command converts a variable to a string. The command is:
itoa(variable to be converted, string variable, base);
Variable to be converted is a numeric variable; string variable is a character array and base is the used base, decimal, hex, octal etc.
To use decimal, base has to be 10 and for hexadecimal it’s 16.
A correct command to convert a variable to a string and then print it on the LCD is:
char Variablestr ; //when the variable is between 0 and 1024 make sure this number is 4 or higher!
itoa(Variable, Variablestr, 10);
drawString(160, 0, COLOR_BLACK, &bitstreamVeraSansMonoBold11ptFontInfo, Variablestr);
With an SD card it is also possible to show bitmap files on the LCD screen. To do this the FAT library has to be imported to. The FAT libraries can be found in the SD card example. To show a bitmap file on the LCD the file has to be 320*240 pixels or smaller and in a BMP file!
The command to show a BMP file is drawBitmapImage(X, Y, “filename”); To show a picture called “Hello world.bmp” that is placed in the root the correct command is:
drawBitmapImage(0, 0, "/hello world.bmp");
If the file is placed in a folder called “Images” the command is:
drawBitmapImage(0, 0, "/images/hello world.bmp");
An image should be 320*240 or smaller, preferably an even number (so 180*200 instead of 179*199) else an image can get bugged. A free software tool to resize images is irfanview.
For more information see the SD card tutorial.
6. Adding fonts and using other LCD's
There are multiple fonts included. To use one of those just add them to the project and include the .h file. In the .h file the Fontinfo can be found. Open the .h file and look for something like this:
extern const FONT_INFO fontinfohere;
The string located at "fontinfohere" is the Fontinfo that is required for drawing strings and other things.
To use a different LCD, remove gcld.h and gcld.c from the project and add the new gcld.h and gcld.c files. The glcd files for the 2.4 inch display from Iteadstudio are provided with the example.
Warning: The 2.4 inch LCD screen from Iteadstudio only works with optimizing on 0!
The 2.8 inch LCD screen can be used with optimize on 3 and is much faster that way.
7. Using the touchscreen
The LCD library supports the touchscreen on the Iteadstudio LCD.
To read the current value of the touchscreen the command lcdReadTouch(&Xval, &Yval); is used.
This command puts the value of the X and Y axis in the variables used for the command
The X value is between 0 and 240 and the Y value between 0 and 320.
A correct command to read the X and Y values is:
The & before the variables are required
Every touchscreen is a bit different, so it is recommended to check what values the touchscreen returns when pressing in every corner.
Most of the touchscreens have a small offset, so they might return 10 to 230 instead of 0 to 240.