Leccin 23: Control de un display LCD grfico

En la leccin 16 estudiamos la forma de utilizar un display LCD de texto en nuestros proyectos

ARDUINO. En aquella ocasin ya definimos un display LCD (siglas del ingls liquid crystal display)
o pantalla de cristal lquido, como una pantalla delgada y plana formada por un nmero de
pxeles, en color o monocromos, colocados delante de una fuente de luz o reflectora. Su principal
ventaja es que utiliza cantidades muy pequeas de energa elctrica.
Tambin vimos que existen pantallas muy variadas en el mercado. Las hay de colores diferentes
(monocromo verde, monocromo mbar o color). Unas tienen capacidad para mostrar slo
caracteres de texto y otras admiten grficos. La leccin 16 se dedic a la familia de pantallas
que slo eran capaces de mostrar caracteres de texto. En esta ocasin queremos introducirnos
en el uso de las que tienen capacidades grficas.

Antes de empezar con la leccin hay que hacer dos salvedades importantes. En primer lugar,
hay que saber que existen muchos tipos diferentes de pantallas grficas y que su gobierno
puede diferir mucho de unas a otras. Cuando vayamos a elegir la pantalla para nuestro proyecto
hay que tener en cuenta dos cuestiones: la pantalla propiamente dicha (su tamao, color o
monocromo, resolucin, etc) y el chip con la que se controla. Hay diferentes tipos de controlador
y su programacin es diferente. Nosotros vamos a ver en esta leccin el control de una pantalla
monocromo de 128 x 64 pixels y basada en el controlador SAMSUNG KS0108.

En segundo lugar, es importante tener en cuenta una cosa. La programacin de una pantalla
grfica es considerablemente ms compleja que el de una pantalla de texto. En esta leccin
vamos a explicar los conceptos ms bsicos y realizaremos sencillos dibujos de lneas, polgonos
y caracteres. Llegar a realizar una pantalla grfica completa y profesional puede ser una tarea
bastante laboriosa y que nos lleve mucho tiempo.
Para controlar nuestra pantalla grfica vamos a utilizar una librera para ARDUINO disponible en
la pgina oficial en el siguiente enlace: KS0108 Graphics LCD library. Como ya hemos visto en
anteriores lecciones cuando utilizamos libreras de terceros tenemos que colocarla en el
directorio 'libraries' de la carpeta donde hayamos instalado nuestro entorno de desarrollo
ARDUINO. En esta ocasin, la librera se crear en la carpeta llamada KS0108.

Para simular nuestra pantalla grfica, Proteus nos facilita varios modelos. Nosotros vamos a
utilizar el llamado LGM12641BS1R. En la siguiente pantalla se muestra su representacin grfica
y la forma en que lo tenemos que conectar a nuestro equipo ARDUINO.

Es importante tener en cuenta que hemos puesto la seal de reset (RST) conectada
directamente al potencial de +5V. De esta manera la pantalla est encendida en todo momento.
El resto de los pines se han conectado a los pines de nuestro ARDUINO segn las
especificaciones de la librera que estamos utilizando. El esquema elctrico completo es el
siguiente:

Veamos ahora el software. Vamos a empezar con un programa muy sencillo para poder ir
introducindonos poco a poco en el control de una pantalla grfica. Siguiendo con la costrumbre
que vamos adquiriendo en lecciones anteriores partimos de un armazn bsico que nos sirve de
estructura para todos los programas.

Como vamos a utilizar la librera HUBOR que ya vimos en la leccin 22 y que podemos descargar
desde nuestra web, hemos includo en la lnea 14 un enlace a dicha librera. En la lnea 15
llamamos a la librera ks0108 que es la encargada de controlar la pantalla grfica basada en el
controlador SAMSUNG.En la lnea 16 incluimos en nuestro cdigo el fichero "SystemFont5x7.h"
que contiene la definicin de una familia de caracteres de 5x7 pixels. Esta fichero viene includo
en la librera ks0108 y por eso hemos optado por l.
En la funcin setup() hemos escrito tres sentencias de programa. En la lnea 31 inicializamos la
pantalla con la funcin GLCD.Init() de la librera ks0108. Esta funcin slo recibe un parmetro
que puede tomar dos valores (NON_INVERTED y INVERTED) segn deseemos que la pantalla
tenga fondo claro y dibujemos en negro o tenga fondo oscuro y dibujemos en blando.
En la lnea 32 seleccionamos la familia de caracteres que vamos a utilizar para escribr textos en
nuestra pantalla.Como se puede observar, pasamos como parmetro precisamente la familia de
caracteres que se define en el fichero "SystemFont5x7.h".
Por ltimo, en la lnea 33 utilizamos el primer comando para dibujar en nuestra pantalla grfica.
En este caso la funcin GLCD.DrawRect() que se encarga de dibujar un recuadro. Los parmetros
que recibe esta funcin son cinco: coordenadas x e y del origen del recuadro, coordenadas x e y
del fin del recuadro y color.
Compilemos y ejecutemos nuestro programa. El resultado en pantalla, aunque no es muy
espectacular, si es muy satisfactorio para el tiempo empleado en escribir el cdigo.

Veamos ahora un segundo ejemplo. Con este cdigo vamos a ver un ejemplo de utilizacin de la
mayora de las funciones que nos facilita la librera ks0108 para dibujar en nuestra pantalla
grfica. El cdigo completo es el siguiente:

La lgica de funcionamiento es como sigue.

Hasta la lnea 25 se encuentran las sentencias necesarias para llamar a las libreras utilizadas y
definir las constantes y variables que vamos a utilizar a lo largo del programa.
En las lneas 26 a 38 se encuentra la funcin setup() para inicializar el equipo. En ella se realiza
las llamadas necesarias para inicializar la pantalla y poner a cero las variables auxiliares.
A partir de la lnea 40 se encuentra la funcin loop() que, como siempre, contiene las sentencias
que se ejecutan de forma cclica. Hemos divido esta funcin en cuatro secciones (siguiendo el
esquema que ya hemos establecido como estndar en nuestras lecciones).
En el primer bloque leemos las entradas (en este caso no hay nada que leer).
En el segundo bloque, escribimos la lgica de control. En nuestro caso es muy sencilla. Con la
ayuda de las funciones temporales iniTmp() y chkTmp() de la librera HUBOR, ejecutamos cada

segundo unas sentencias que sirven para incrementar el contador y poner a uno el disparador
que utilizaremos para saber cuando tenemos que escribir en nuestra pantalla.
En el tercer bloque que utilizamos para escribir las salidas tampoco hay nada, porque en este
proyecto no utilizamos salidas a parte de las utilizadas para contral la pantalla grfica.
En el cuarto bloque que utilizamos para controlar perifricos, se encuentran las lneas que ms
nos importan en esta leccin y que se encargan de escribir en la pantalla. Para facilitar la
visualizacin y comprensin de lo que escribimos en la pantalla hemos hecho lo siguiente. Cada
vez que el disparador vale 1, realizamos una escritura en la pantalla y lo volvemos a poner a
cero (lnea 66). A continuacin borramos la pantalla (lnea 67).
En las lneas 68 a 115 utilizamos la estructura de control SWITCH-CASE. Como es la primera vez
que la utilizamos en este curso, vamos a empezar por explicar cmo funciona. La sentencia
SWITCH es una estructura de control de bifurcacin mltiple estndar en el lenguaje de
programacin C. En un bloque SWITCH-CASE, el controlador comprueba el valor de una variable
(en nuestro caso Contador1) de forma sucesiva frente a una lista de valores (cada una de las
sentencias CASE). Cuando encuentra una coincidencia, se ejecuta el bloque de sentencias
asociados con el CASE hasta que encuentra un BREAK. Si no se encuntra ninguna coincidencia se
ejecuta el bloque DEFAULT.
Una vez que ya sabemos como funciona un bloque SWITCH-CASE vayamos ahora a ver cmo
controlamos nuestra pantalla en cada incremento de nuestro contador. Cuando el contador vale
1 se ejecuta la funcin GCLD,DrawBitmap() de la librera KS0108. Esta funcin se encarga de
dibujar en nuestra pantalla una imagen en formato de mapa de bits. En nuestro caso, la
informacin de esta imagen se encuentra almacenada en el fichero ArduinoIcon.h que se
suministra con la librera y que incluimos en la lnea 16 de nuestro cdigo.

El resultado que se visualiza en nuestra pantalla es:

Cuando el contador vale 2 se ejecuta un bucle repetitivo con ayuda de la estructura de control
FOR. En cada iteracin del bucle ejecutamos una funcin GLCD.DrawCircle que se encarga de
dibujar un crculo en la pantalla. Los parmetros que le tenemos que pasar a esta funcin son las
coordenadas x e y del centro, el radio del cculo y el color con el que vamos a dibujarlo. En

nuestro caso, dibujamos una serie de cculos concentrcos con centro en el punto 64,32 y de
radios comprendidos entre 5 y 20 en saltos de 5 en 5.

El resultado ser:

Cuando el contador vale 3 ejecutamos la funcin GLCD.DrawLine() que se encarga de dibujar una
lnea recta. Los parmetros que debemos pasar a esta funcin son las coordenadas x e y del
origen de la lnea, las coordenadas x e y del fin de la lnea y el color.

En la pantalla se visualiza:

Cuando el contador vale 4 ejecutamos la funcin GLCD.DrawVertLine() que se encarga de dibujar

una lnea recta vertical. Los parmetros que debemos pasar a esta funcin son las coordenadas x
e y del origen de la lnea, la longitud de la misma y el color. En este caso volvermos a utilizar un

bucle FOR para dibujar una serie de lneas desde la coordenada x = 20 hasta la coordenada
x=100 en saltos de 5 en 5.

En la pantalla se visualiza:

Cuando el contador vale 5 ejecutamos la funcin GLCD.DrawHoriLine() que se encarga de dibujar

una lnea recta horizontal. Los parmetros que debemos pasar a esta funcin son las
coordenadas x e y del origen de la lnea, la longitud de la misma y el color.

En la pantalla se visualiza:

Cuando el contador vale 6 ejecutamos la funcin GLCD.DrawRect() que se encarga de dibujar un

rectngulo. Los parmetros que debemos pasar a esta funcin son las coordenadas x e y del
origen del recuadro, las coordenadas x e y del final y el color.

En la pantalla se visualiza:

Cuando el contador vale 7 ejecutamos la funcin GLCD.DrawRoundRect() que se encarga de

dibujar un rectngulo de esquinas redondeadas. Los parmetros que debemos pasar a esta
funcin son las coordenadas x e y del origen del rectngulo, las coordenadas x e y del final, el
radio con el que se redondear las esquinas y el color.

En la pantalla se visualiza:

Cuando el contador vale 8 ejecutamos la funcin GLCD.FillRect() que se encarga de dibujar un

rectngulo con relleno. Los parmetros que debemos pasar a esta funcin son las coordenadas x
e y del origen del rectngulo, las coordenadas x e y del final y el color.

En la pantalla se visualiza:

Cuando el contador vale 10 ejecutamos la funcin GLCD.DrawLine() que ya vimos con

anterioridad y que se encarga de dibujar una lnea recta. Con ayuda de un bucle FOR somos
capaces de dibujar una serie de lneas con origen en un punto comn (0,0) y con final en un
punto de coordenada x constante (127) y coordenada y variable desde 0 a 65 en intervalos de 2
pixel de separacin.

En la pantalla se visualiza:

Cuando el contador vale ms de 9 no existe ninguna clasula CASE que se cumpla, as que se
ejecutar el bloque DEFAULT. En este bloque se utilizan varias funciones. La funcin
GLCD.CursorTo() se encarga de situar el cursor en las coordenadas x e y correspondientes. La
funcin GLCD.Puts() escribe una cadena de texto en el lugar donde se encuentre el cursor en
este momento. La funcin GLCD.PrintNumber() escribe un nmero en la pantalla. Tambin nos
ayudamos de la funcin estndar de C strcpy() para escribir en la variable 'Cadena' el valor de
una constante de texto.

En la pantalla se visualiza en cada nuevo incremento del contador, un mensaje con el valor del
contador.

Y con esto, terminamos nuestra leccin de hoy. Ya hemos aprendido a utilizar un display grfico.
Todava exigir por parte del lector una buena dosis de trabajo para mostrar resultados
satisfactorios en sus proyectos. Pero las bases estn slidamente fundamentadas.
El cdigo completo de la leccin se puede descargar desde este enlace: Cdigo leccin 23.