SISTEMAS EMBEBIDOS

Display TFT con Arduino mega 2560

Semana 2 (Sesión 4)
Profesor: Mg. Javier Camilo Poma Palacios
Pampas - 2021
 UNH
Ing. Electrónica
Display TFT 3.2" RGB 400x240
Las pantallas LCD permiten mostrar texto, gráficos e imágenes en los proyectos con
microcontroladores Arduino, PIC o Raspberry Pi. Pueden ser utilizadas para mostrar la lectura de
sensores, implementar una interfaz hombre máquina (HMI).
El Shield display LCD TFT 3.2" es una pantalla táctil a colores con una resolución de 240x400
píxeles, controlador gráfico HX8352B, controlador táctil, comunicación LCD paralela y puede
mostrar hasta 262144 colores RGB distintos. Agregar el shield display LCD a nuestros proyectos
con Arduino es muy sencillo, a nivel de hardware solo es necesario montar el shield sobre
nuestro Arduino Uno o Mega, en cuanto a la programación con Arduino se recomienda utilizar la
librería: Open Smart. El LCD se controla mediante 8 pines de datos (2-9) y 4 pines de control
(A0-A3), la pantalla táctil comparte el bus de datos del LCD para enviar la posición. El shield
display incluye además un socket para memorias micro SD, útil para almacenar imágenes en
formato mapa de bits (bmp). La memoria SD se conecta por el puerto SPI al Arduino (10-
13). Adicionalmente tiene un sensor de temperatura LM75A en placa para hacer pruebas y
mostrar datos con solo conectarlo con un Arduino. El LM75A se comunica mediante bus I2C, su
dirección es 0x48. La retroiluminación está siempre conectada, pero se puede desoldar el
jumper "3.3v" y soldar el jumper "d3" que está en la sección "backlight" al reverso de la tarjeta
para que sea controlado por el pin D3 del Arduino. Compatible con Arduino Uno, Mega y Due.
SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Display TFT 3.2" RGB 400x240

Características

Voltaje de operación: 5 VDC

Regulador en tarjeta a 3.3 V
Corriente de funcionamiento: 150 mA
Controlador gráfico (driver): HX8352B
Interface LCD: Data (8 pines) Control (5 pines)
Interface micro SD: SPI (SS,DI,DO,SCK)
Nivel lógico de SPI: 3.3 - 5V
Tamaño de la pantalla (diagonal): 3.2" (81mm)
Resolución: 240x400 píxeles
Profundidad de color o bits por pixel: 16/18 bpp

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Display TFT 3.2" RGB 400x240

Características

Cantidad de colores: 262144 colores (18-bit: R6G6B6)

Puede trabajar opcionalmente a RGB 16-bit: R5G6B5
Dimensiones pantalla: 70*43mm (área visible)
Dimensiones placa: 90*53mm
Socket para memoria externa micro SD
Pantalla táctil resistiva
Sensor de temperatura en placa: LM75
Interfaz LM75: I2C (SCL, SDA)
Dirección I2C: 0X48
Fabricante: Open Smart

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Display TFT 3.2" RGB 400x240
Conexión entre la pantalla TFT y Arduino

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Display TFT 3.2" RGB 400x240
Probando el ejemplo de la librería Open SMART_TFT_HX8352B

Para probar y programar nuestra la pantalla TFT es

necesario descargar e importar las siguientes librerías
de Open SMART_TFT_HX8352B a nuestro IDE de
Arduino.
Librería TouchScreen
Librería OPENSMART_TFT
Librería LM75
Librería de gráficos Adafruit GFX

Para verificar si se ha hecho las conexiones

correctamente y nuestra pantalla trabaja
adecuadamente cargamos el ejemplo LM75, para
abrirlo lo hacemos desde el IDE de Arduino. SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Esquema de conexión TFT 3.2” con Arduino Mega 2560

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
// ***********
// Default color definitions
// TFTLM75.ino
#define BLACK 0x0000 /* 0, 0, 0 */
// ***********
#define NAVY 0x000F /* 0, 0, 128 */
// Autor: Javier Camilo Poma Palacios
#define DARKGREEN 0x03E0 /* 0, 128, 0 */
// Fecha: 30/04/2020
#define DARKCYAN 0x03EF /* 0, 128, 128 */
#define MAROON 0x7800 /* 128, 0, 0 */
#include <Adafruit_GFX.h> // Core graphics library
#define PURPLE 0x780F /* 128, 0, 128 */
#include <Wire.h>
#define OLIVE 0x7BE0 /* 128, 128, 0 */
#include <LM75.h>
#define LIGHTGREY 0xD69A /* 211, 211, 211 */
#include <MCUFRIEND_kbv.h>
#define DARKGREY 0x7BEF /* 128, 128, 128 */
//----------------------------------------|
#define BLUE 0x001F /* 0, 0, 255 */
// TFT Breakout -- Arduino UNO / Mega2560 / OPEN-SMART UNO Black
#define GREEN 0x07E0 /* 0, 255, 0 */
// GND -- GND
#define CYAN 0x07FF /* 0, 255, 255 */
// 3V3 -- 3.3V
#define RED 0xF800 /* 255, 0, 0 */
// CS -- A3
#define MAGENTA 0xF81F /* 255, 0, 255 */
// RS -- A2
#define YELLOW 0xFFE0 /* 255, 255, 0 */
// WR -- A1
#define WHITE 0xFFFF /* 255, 255, 255 */
// RD -- A0
#define ORANGE 0xFDA0 /* 255, 180, 0 */
// RST -- RESET
#define GREENYELLOW 0xB7E0 /* 180, 255, 0 */
// LED -- GND
#define PINK 0xFE19 /* 255, 192, 203 */
// DB0 -- 8
#define BROWN 0x9A60 /* 150, 75, 0 */
// DB1 -- 9
#define GOLD 0xFEA0 /* 255, 215, 0 */
// DB2 -- 10
#define SILVER 0xC618 /* 192, 192, 192 */
// DB3 -- 11
#define SKYBLUE 0x867D /* 135, 206, 235 */
// DB4 -- 4
#define VIOLET 0x915C /* 180, 46, 226 */
// DB5 -- 13
// DB6 -- 6
void setup(void)
// DB7 -- 7
{
uint16_t identifier = tft.readID();
MCUFRIEND_kbv tft;
LM75 sensor; // initialize an LM75 object

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Serial.begin(115200);
Wire.begin();
tft.setCursor(250,92);
Serial.println(F("TFT LCD test"));
tft.setTextColor(WHITE);
tft.setTextSize(4);
#ifdef USE_ADAFRUIT_SHIELD_PINOUT
tft.print("o");
Serial.println(F("Using Adafruit 3.2\" TFT Arduino Shield Pinout"));
tft.setCursor(280,100);
#else
tft.setTextSize(6);
Serial.println(F("Using Adafruit 3.2\" TFT Breakout Board Pinout"));
tft.println("C");
#endif
tft.drawFastHLine(20,60,360,tft.color565(194,5,209));
}
tft.reset();
if(identifier == 0x65){
void loop(void)
Serial.println(F("Found HX8352B LCD driver"));
{ tft.setCursor(90,100);
}
tft.setTextColor(WHITE,RED); //tft.setTextColor(WHITE);
tft.print(sensor.temp(),1);
tft.begin(0x65); //Enable HX8352B driver code
Serial.print("@");
tft.fillScreen(RED);
Serial.print(sensor.temp(),1);
tft.setRotation(1);
delay(1000);
tft.setTextColor(YELLOW);
} //Fin de programa
tft.setTextSize(3);
tft.setCursor(50,30);
tft.print("TEMPERATURA LM75"); //Escribimos el texto
tft.setTextSize(2);
tft.setTextColor(tft.color565(41,41,41));
tft.setCursor(50,180);
tft.print("Mg. Javier Camilo Poma P.");
tft.setTextSize(2);
tft.setTextColor(NAVY);
tft.setCursor(80,210);
tft.print("UNH_Ing. Electronica");

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Librería (Adafruit_GX.h)
El sistema de coordenadas Adafruit GFX
En una pantalla TFT, la resolución de la pantalla se expresa por el número de píxeles horizontal y número de
píxeles vertical.
Los píxeles (elementos de una imagen digital) se establecen por sus coordenadas horizontales (X) y verticales
(Y). El sistema de coordenadas coloca el origen (0,0) en la esquina superior izquierda, con X positivo aumentando a
la derecha e Y positivo aumentando hacia abajo.

Comandos:
//Posición del cursor
tft.setCursor(X,Y);

/*Set the rotation angle of the screen display. The

parameters are: 0, 1, 2, 3 // It represents 0 °, 90 °, 180 °,
270 ° respectively */
setRotation(uint8_t r);

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Librería (Adafruit_GX.h)
Para la presentación de textos
La configuración de fuentes en un TFT, no solo usa fuentes predefinidas, sino también diseñadas. Aquí, solo lanzamos
dos funciones de configuración de fuentes más utilizadas:
Tamaño del texto
//set the text size, which is an integer from 1 to 7
setTextSize(uint8_t size);
Fuente para el texto
/*set font number font. The number range is 1, 2, 4, 6, 7, 8. //different numbers represent different fonts */
setTextFont(uint8_t font);
// El rango de cada fuente se detalla:
// Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_GLCD
// Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT2
// Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT4
// Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT6
// Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT7
// Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8 SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
COLORES DEFINIDOS
Librería (Adafruit_GX.h)
(COLOR)
Código de color RGB de 16 bits BLACK 0x0000
RGB significa rojo, verde y azul, y una resolución infinita al definir NAVY 0x000F
cuánta luz roja, verde y azul se mezclan. El código de color RGB DARKGREEN 0x03E0
DARKCYAN 0x03EF
de 16 bits tiene una resolución finita, solo nos permite obtener
MAROON 0x7800
65.536 de esos colores. Aún así, los colores que se pueden PURPLE 0x780F
mostrar alcanzan el espectro de color para mostrar imágenes OLIVE 0x7BE0
agradables. LIGHTGREY 0xC618
DARKGREY 0x7BEF
Para colores definidos: se utilizan el comando BLUE 0x001F
GREEN 0x07E0
//set text color: setTextColor(uint16_t color) CYAN 0x07FF
RED 0xF800
tft.setTextColor(COLOR);
MAGENTA 0xF81F
YELLOW 0xFFE0
/*set text color and background color: setTextColor(uint16_t WHITE 0xFFFF
txcolor, uint16_t bgcolor) */ ORANGE 0xFD20
tft.setTextColor(COLOR,COLOR); GREENYELLOW 0xAFE5
PINK 0xF81F
SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Librería (Adafruit_GX.h)
Para color RGB565 de 16 bits
El código de color RGB de 16 bits tiene una resolución finita, solo nos permite obtener
65.536 colores.

El siguiente gráfico muestra cómo se definen estos colores.

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Librería (Adafruit_GX.h)
Para color RGB565 de 16 bits: para este caso se utiliza el comando:
tft.color565(R, G, B);
/* R, G y B son enteros de 8 bits (0 -255), este comando ya realiza la conversión utilizando: Rgb565 = (((R & 0xf8)
<<8) + ((G & 0xfc) <<3)+(B >>3)) obteniéndose directamente color565 */
Ejemplos:
tft.color565(147, 30, 220);
tft.color565(129, 255, 1);

GRAFICA DE LÍNEAS Y CURVAS

tft.fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color): Draw a solid square on the TFT screen
x：x coordinate of the starting point
y：y coordinate of the starting point
w：the length of the square
h：the width of the square
color：the color of the square
Ejemplo:
tft.fillRect(0, 0, 160, 50,tft.color565(190,254,126));

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Librería (Adafruit_GX.h)
tft.drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color): Draw a line with any angle on the TFT screen.
x0：x coordinate of the starting point
y0：y coordinate of the starting point
x1：x coordinate of the ending point
y1：y coordinate of the ending point
color：color of the line

tft.drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color): Draw a horizontal line on the TFT screen
x：the x coordinate of the starting point
y：the y coordinate of the starting point
w：the length of the horizontal line
color：color of the line

tft.drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t color): Draw a vertical line on the TFT screen
x：x coordinate of the starting point
y：y coordinate of the starting point
w：length of the vertical line
color：color of the line

tft.fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color): Dibuja un círculo sólido en la pantalla TFT.
x0: coordenada x del punto central
y0: coordenada y del punto central
r: radio del círculo
color: el color del círculo
SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Librería (Adafruit_GX.h)
tft.fillRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color)
Dibuja un cuadrado sólido con esquinas redondeadas en la pantalla TFT.
x0: coordenada x del punto de inicio
y0: coordenada y del punto de inicio
w: la longitud del cuadrado
h: el ancho del cuadrado
radio: el radio de las esquinas redondeadas
color: el color del cuadrado
Ejemplo:
tft.fillRoundRect(30, 40, 60, 65, 20, GREEN);

tft.fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color)
Dibuja un triángulo sólido en la pantalla TFT.
x0：x coordinate of the apex
y0：y coordinate of the apex
x1：x coordinate of the bottom left point
y1：y coordinate of the bottom left point
x2：x coordinate of the bottom right point
y2：y coordinate of the bottom right point
color：the color of the triangle

Ejemplo:
tft.fillTriangle(43, 30, 40, 90, 80, 120, RED);
SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C
Librería (Adafruit_GX.h)
drawChar ()
Cuando dibujamos usando la fuente Adafruit GFX estándar con su tamaño predeterminado,
se dibuja en un espacio de la pantalla que tenga seis píxeles de ancho y ocho píxeles de
alto.

Comandos:

tft . drawChar ( 5 , 10 , 'H' , CHARcolor, CHARfondo , 2 );

tft . drawChar ( 29 , 10 , 'E' , CHARcolor, CHARfondo , 6 );
tft . drawChar ( 53 , 10 , 'L' , CHARcolor, CHARfondo , 8 );
SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica
Programación de TFT en C

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica Display TFT 3.2" RGB 400x240 OPEN SMART

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios
 UNH
Ing. Electrónica Display TFT 3.2" RGB 400x240 OPEN SMART

Ejemplos de aplicación de mostrar diversos mensajes.

Mensajes
Mansajes amplios
Números grandes
Letras grandes

SISTEMAS EMBEBIDOS
Profesor: Mg. Javier Camilo Poma Palacios