Laboratorio 5-ARQUITECTURA DE COMPUTADORAS-2020-II

Vista previa del material en texto

Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
1 
 
 
 
 
 
 
 
 
UNIVERSIDAD 
 
 NACIONAL DE LA 
 
 AMAZONIA PERUANA 
 
 
 
 
FACULTAD DE INGENIERIA 
 
DE SISTEMAS E INFORMATICA 
 
LABORATORIO DE ARQUITECTURA DE COMPUTADORAS 
 
 
GUIA - INFORME Nº 5 
CURSO : ARQUITECTURA DE COMPUTADORAS 
 TEMA : Visualizando Datos con el LCD Grafico 
 PROFESOR : 
 GRUPO : 
 ALUMNO : 
 CODIGO : 
 
 NOTA: 
 
 FECHA EXPE.: SEMEST. ACADÉ. 2020 - II 
 
 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
2 
 
 
 
5to LABORATORIO 
Tema: Visualizando Datos con el LCD Grafico 
Objetivo: Hacer que el alumno aprenda a interactuar con una pantalla de cristal líquido (LCD) 
Grafico para poder ver la información generada por un Arduino de tal modo podrá 
mostrar texto, caracteres personalizados, datos numéricos y gráficos 
 
Material y Equipo: 
 LCD Paralelo, serie, gráfico y un GLCD 
Diodos LED 
 Resistencias 
 Un Protoboard 
 Cablecitos de Conexión 
 Una Tarjeta Arduino Uno 
 Cable USB 
EXPERIENCIA 1: FUNCIONAMIENTO DEL LCD GRAFICO: EL KS0108 
Si necesitamos mostrar en una pantalla algo que sea de tipo gráfico como líneas, círculos o 
imágenes en general, estamos obligados a utilizar un tipo de LCD denominado GLCD. Este tipo 
de pantallas abunda hoy en día en los más diversos dispositivos de uso común como teléfonos 
móviles, calculadoras científicas, relojes digitales, etc. 
Considerando que anteriormente un carácter era definido por 5 x 8 píxeles, los LCD gráficos usan 
toda la pantalla como lienzo de dibujo permitiendo un control completo para representar lo que 
queramos, pixel a pixel. Las posibilidades de representación son inmensas, desde el diseño de un 
videojuego a la visualización de datos complejos y precisos. Existen muchos tipos de LCD 
gráficos, pero nosotros vamos a utilizar un estándar clásico basado en el chip KS0108. Este 
presenta una configuración de 128 x 64 píxeles en blanco y negro. Al igual que en los LCD 
alfanuméricos vistos antes, los GLCD disponen de una extensa librería que permiten dibujar 
fácilmente a lo largo y ancho de toda su pantalla. 
Para comunicarse con el KS0108 GLCD se va a utilizar la librería glcd-v3() disponible en 
http://code.google.com/p/glcd-arduino/downloads/list. Es necesario añadirla al IDE descargándola 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
3 
 
 
en formato zip. Viene acompañada de varios ejemplos y un documento en PDF ampliamente 
documentado. 
 Tabla 1 enumera algunas de las diversas funciones de la extensa librería del KS0108 GLCD 
Función Descripción 
GLCD.init() Inicializa la librería. 
ClearScreen() Limpia la pantalla. 
DrawBitmap() Dibuja una imagen bitmap en unas 
coordenadas dadas 
GotoXY() Mueve el cursor gráfico a las coordenadas 
dadas. 
SetDot() Establece el color de un determinado pixel. 
DrawVLine() Dibuja una línea vertical. 
DrawHLine() Dibuja una línea horizontal. 
DrawLine() Dibuja una línea entre dos coordenadas dadas. 
DrawRect() Dibuja un rectángulo 
FillRect() Rellena el interior de un rectángulo 
DrawRoundRect() Dibuja un rectángulo con esquinas 
redondeadas 
DrawCircle() Dibuja un círculo. 
FillCircle() Rellena el interior de un círculo. 
SelectFont() Establece una Fuente de Texto. 
SetFontColor() Establece el color de la fuente de texto. 
ClearArea() Limpia la actual área de texto con el color de 
fondo. 
EraseTextLine(row) Borra todo el texto e la fila dada dentro del 
área de texto y mueve el cursor a la posición 
de la izquierda. 
EraseTextLine() Borra el texto en la línea actual. 
CursorTo() Mueve el cursor de texto a una fila y columna 
dadas. 
CursorToXY() Mueve el cursor de texto a unas coordenadas 
dadas. 
GLCD.print() Imprime un carácter, entero, cadena o tipo 
float. 
Vamos a ver ahora las conexiones entre el patillaje del Arduino y el GLCD (Figura 9). Esta librería 
viene documentada y preparada para utilizar con el Arduino UNO o con el Arduino MEGA. En 
 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
4 
 
 
función de que usemos uno u otro, varía la referencia de los pines del mismo tal como se observa 
en la Figura 1. El esquema que se muestra a continuación (Figura 2) representa el conexionado 
entre Arduino UNO y un GLCD. 
 
 
 
 
 
 
 
 
 
 
 
 
 Figura 1.- Conexión entre el Arduino Uno y el GLCD KS0108 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Figura 2.- Diagrama de Conexión entre Arduino UNO con el GLCD 
 
 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
5 
 
 
 
Programa: Utilizando un GLCD 
Vamos a mostrar un sencillo logotipo de Arduino en un GLCD 
/*LCO gráfico basado en el chip ks0108 */ 
#include <glcd.h> 
#include "bitmaps/ArduinoIcon.h" 
void setup() 
{ 
 GLCD.Init(); 
 GLCD.DrawBitmap (ArduinoIcon. 32,0. BLACK); 
} 
void loop() 
{ 
} 
Las dos primeras líneas del sketch incluyen la librería GLCD y la imagen bitmap del logotipo que 
deseamos mostrar: 
#include <glcd.h> 
#include "bitmaps/ArduinoIcon.h" 
En el bloque de configuración tenemos la función de inicialización de la pantalla y la que 
imprime o dibuja la imagen en unas coordenadas x, y de la misma 
GLCD.Init(); 
GLCD.DrawBitmap (ArduinoIcon. 32,0. BLACK); 
Como vemos el programa es muy sencillo y con pocas órdenes podemos realizar presentaciones 
muy vistosas de nuestros proyectos. Es conveniente explorar la librería para darse cuenta de su 
potencia gráfica. 
Programa: Mostrando Texto en un GLCD 
Sin cambiar el hardware, observemos ahora como mostrar texto y elegir el tipo de fuente para 
visualizarlo en un GLCD 
/* Ejemplo sencillo para mostrar un texto en un GLCO */ 
#include <glcd.h> 
#include <fonts/allFonts.h> 
void setup() 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
6 
 
 
{ 
 GLCD.Init(); 
 GLCD.SelectFont(Arial_14); 
} 
void loop() 
{ 
 GLCD.CursorTo(20,1); 
 GLCD.print("Arduino y GLCD"); 
} 
En primer lugar, incluimos la famosa librería glcd.h y la correspondiente a los diferentes tipos de 
fuentes de texto denominada: allFonts.h 
#include <glcd.h> 
#include <fonts/allFonts.h> 
Inicializamos la pantalla y establecemos el tipo de fuente de texto que queremos usar. En este 
caso una Arial de tamaño 14. 
 GLCD.Init(); 
 GLCD.SelectFont(Arial_14); 
Por último, definimos las coordenadas del origen del texto en pantalla e imprimimos la cadena de 
caracteres deseada. 
 GLCD.CursorTo(20,1); 
 GLCD.print("Arduino y GLCD"); 
PROGRAMA: Profundizando en la librería GLCD 
Con el documento PDF completo de la librería glcd.h, estudia el siguiente sketch y averigua a la 
salida visualizada en tu GLCD. 
/* A ver lo que te sale ... */ 
#include <glcd.h> 
#include "fonts/Arial14.h" 
#include "fonts/SystemFont5x7.h" 
#include "bitmaps/Arduinolcon.h" 
unsigned long startMillis; 
unsigned int loops = O; 
unsigned int iter = O; 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
7 
 
 
void setup() 
{ 
 GLCD.Init(NON_INVERTED); 
 GLCD.ClearScreen(); 
 GLCD.DrawBitmap(ArduinoIcon, 32,0, BLACK); 
 GLCD.SelectFont(System5x7); 
 countdown(5); 
 GLCD.ClearScreen(); 
 introScreen(); 
 GLCD.ClearScreen(); 
} 
void introScreen(){ 
 GLCD.SelectFont(Arial_14); 
 GLCD.GotoXY(20, 2): 
 GLCD.Puts("GLCD version O); 
 GLCD.PrintNumber(GLCD_VERSION); 
 GLCD.DrawRoundRect(16,O,99,18, 5, BLACK); 
 GLCD.SelectFont(System5x7); 
 showCharacters(); 
 countdown(5); 
} 
void showCharacters() 
{ 
 byte line = 3; 
 for(byte c = 32; c <=127; c++) 
 { 
 if ( (c-32) % 20 == O) 
 GLCD.CursorTo(l,line++); 
 GLCD.PutChar(c); 
 } 
} 
void drawSpinner(byte pos, byte x, byte y) 
{ 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
8 
 
 
 switch(pos % 8) 
 { 
 case O : GLCD.DrawLine( x, y-8, x, y+8, BLACK); 
 break; 
 case 1 : GLCD.DrawLine( x+3, y-7, x-3, y+7, BLACK) ; 
 break; 
 case 2 : GLCD.DrawLine( x+6. y-6. x-6, y+6. BLACK): 
 break: 
 case 3 : GLCD.DrawLine( x+7, y-3, x-7, y+3, BLACK) ; 
 break; 
 case 4 : GLCD.DrawLine( x+8. y. x-8. y. BLACK) ; 
 break: 
 case 5 : GLCD.DrawLine( x+7, y+3, x-7, y-3, BLACK) ; 
 break; 
 case 6 : GLCD.DrawLine( x+6. y+6. x-6, y-6. BLACK): 
 break: 
 case 7 : GLCD.DrawLine( x+3, y+7, x-3, y-7, BLACK) ; 
 break; 
 } 
} 
void countdown (int count) 
{ 
 while (count --) 
 { 
 GLCD.CursorTo(O,l); 
 GLCD.PutChar(count + 'O'); 
 delay(lOOO); 
 } 
} 
void loop() 
{ 
 iter = O; 
 startMillis = millis(); 
 while( millis() - startMillis < 1000) 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
9 
 
 
 { 
 GLCD.DrawRect(O, 0, 64, 61, BLACK); 
 GLCD.DrawRoundRect(68, 0, 58. 61, 5, BLACK): 
 for(int i=O; i < 62; i += 4) 
 GLCD.DrawLine(l, l, 63,i, BLACK); 
 GLCD.DrawCircle(32.31.30, BLACK); 
 GLCD.FillRect(92,40,16,16, WHITE); 
 drawSpinner(loops++, l00,48): 
 GLCD.CursorTo(5,5); 
 GLCD.PrintNumber(++iter); 
 } 
 GLCD.ClearScreen(): 
 GLCD.CursorTo(14,2); 
 GLCD.Puts("FPS= "); 
 GLCD.PrintNumber(iter); 
} 
EJERCICIO ENCARGADO 
Diseña un proyecto que muestre en un GLCD basado en el controlador KS0108, una temperatura 
obtenida de un sensor LM35. Añádele algún tipo de elemento gráfico, como un rectángulo o 
círculo que realce la vistosidad del dato mostrado. 
PROGRAMA: Visualizando Nuestras Propias Imágenes 
Podemos utilizar nuestras propias imágenes (mapas de bits) con la pantalla GLCD. Los mapas de 
bits se definen en los archivos de cabecera con una extensión ".h". Por ejemplo, la imagen 
anteriormente usada del icono Arduino, llamada "ArduinoIcon.h", se almacena en la carpeta de 
mapa de bits del directorio de la librería GLCD. Esta carpeta también contiene un archivo 
denominado "allBitmaps.h" que almacena otros ficheros de imágenes. Ahí es donde podemos 
incluir las nuestras. 
Para añadir nuestros propios mapas de bits, la librería GLCD incluye una utilidad llamada 
glcdMakeBitmap.pde que convierte un fichero con formato gif, jpg, bmp, tga o png, en un archivo 
de encabezado que puede ser utilizado por la librería GLCD. Este fichero, en realidad, es un 
programa que debe ser ejecutado en Processing ( http://processing.org ).Processing es un lenguaje 
de programación y entorno de desarrollo integrado de código abierto basado en Java, de fácil 
Universidad Nacional de la Facultad de Ingeniería de 
 Amazonia Peruana Sistemas e Informática 
10 
 
 
utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e 
interactivos de diseño digital. 
Después de haber descargado Processing, abre su entorno y ejecuta el fichero 
glcdMakeBitmap.pde. 
Ahora arrastra a su ventana un fichero de imagen que hayas creado tú o que hayas bajado de la 
red. Processing creará un archivo de cabecera con el mismo nombre de tu archivo de imagen. El 
archivo se agrega automáticamente al fichero allBitMaps.h; con lo cual ya lo puedes usar 
directamente en tu sketch. Vamos a verlo. 
Partimos que ya hemos generado fichero de cabecera yomismo.h a partir de una imagen llamada 
yomismo.bmp, según el procedimiento anteriormente descrito. 
PROGRAMA: Mostrando Imágenes Propias en un GLCD 
/*Visualizando bitmaps propios */ 
/* La verdad es que es alucinante ...*/ 
#include <glcd.h> 
#include "bitmaps/allBitmaps.h" 
void setup() 
{ 
 GLCD.Init(); 
 GLCD.ClearScreen(); 
 GLCD.DrawBitmap(yomismo, 0,0); 
} 
void loop() 
{ 
} 
El sketch nos mostrará la imagen que hemos cerado con la sencilla función 
 GLCD.DrawBitmap(yomismo, 0,0); 
EJERCICIO ENCARGADO 
Diseñar un proyecto que muestre en un GLCD basado en el chip KS0108, una imagen bitmap de 
tu elección. 
	LABORATORIO DE ARQUITECTURA DE COMPUTADORAS