CONEXIÓN ESP32 CON PANTALLAS TFT

SPI TFT Display ST7735 con 128 x 160 Pixeles

Resolución: 128×160 píxeles,

controlador TFT ST7735

2.8 Pulgadas 240 x 320 SPI TFT LCD

2.8 Pulgadas 240 x 320 SPI TFT LCD

controlador LCD SPI Serie ILI9341

Vamos a poner algunos ejemplos que nos ayuden a trabajar con este tipo de pantallas;

Conexionado:

el mismo cableado para ambas pantallas

ESP32	TFT SPI SCREEN
5	cs
2	dc
23	MOSI
18	CLK

PANTALLA 2.8

LIBRERIAS:

Para probar esta pantalla basada en el chip ILI9341, he utilizado en primer lugar estas librerias ya conocidas para módulos arduíno.

include <“SPI.h”>

include <“Adafruit_GFX.h”>

include <“Adafruit_ILI9341.h”>

definiendo los pines ESP32,CS y DC

define TFT_DC 2

define TFT_CS 5

/*
	Visualizacion en pantalla TFT bus SPI ILI9341 de cantidad de segundos transcurridos
	desde iniciado el programa. Requiere librerias Adafruit ILI9341 y Adafruit GFX

	Autor: bitwiseAr  

*/

#include <SPI.h>		// incluye libreria bus SPI
#include <Adafruit_GFX.h>	// incluye libreria para manejo de graficos
#include <Adafruit_ILI9341.h>	// incluye libreria para controlador ILI9341
 
#define TFT_DC 2		
#define TFT_CS 5		

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);	// crea objeto
 
void setup(){
  tft.begin();				// inicializa pantalla
  tft.setRotation(0);			// establece posicion vertical con pines hacia abajo
  tft.fillScreen(ILI9341_RED); 		// relleno de pantalla en color rojo
  tft.setTextColor(ILI9341_WHITE);	// color de texto en blanco
  tft.setTextSize(2);			// escala de texto en 2
  tft.setCursor(0,0);			// ubica cursor en esquina superior izquierda
  tft.print("Hola, han pasado: "); 	// imprime texto
  tft.setCursor(75,250);		// ubica cursor a 75 px de izquierda y 250 px de arriba
  tft.print("segundos");		// imprime texto
}

void loop(){
  tft.setTextColor(ILI9341_BLUE, ILI9341_RED);	// texto blanco en fondo rojo
  tft.setTextSize(8);			// escala de texto en 8
  tft.setCursor(30,100);		// ubica cursor
  tft.print(millis()/1000);		// imprime segundos transcurridos
  delay(10);				// demora de 10 mseg.
}

USO DE LA LIBRERIA <TFT_eSPI.h>

Esta libreria tiene que ser personalizada antes de utilizarla. Para ello iremos a la ubicación del archivo donde esta la libreria y editaremos el archivo “user_setup.h”, buscaremos el apartado ESP32 y lo dejaremos asi ,sin utilizar el RST, ya que lo tenemos siempre en nivel alto con la resistencia de 4.7K. Tambien lo probe sin la resistencia utilizando este pin y funciona bien.

// ###### EDIT THE PIN NUMBERS IN THE LINES FOLLOWING TO SUIT YOUR ESP32 SETUP   ######

// For ESP32 Dev board (only tested with ILI9341 display)
// The hardware SPI can be mapped to any pins

#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_SCLK 18
#define TFT_CS   5  // Chip select control pin
#define TFT_DC    2  // Data Command control pin
//#define TFT_RST   4  // Reset pin (could connect to RST pin)
//#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST

Tengo que añadir que es conveniente alimentar la pantalla en el mismo punto de conexión que la placa esp32. Pues despues de probar otra pantalla ,esta vez de 2,8″ de la marca HITLEGO, tuve problemas cuando la alimentaba separadamente aunque de la misma fuente. Asi mismo tuve que conectar “rst” de la pantalla al pin “EN” del esp32.

Si queremos ahorrarnos un hilo,podemos dar a masa el pin “CS”,pero para ello hay que comentar:

//#define TFT_CS   5  // Chip select control pin to ground

LIBRERIA <Adafruit_GFX.h>

MÉTODO	DESCRIPCIÓN
tft.fillScreen( Color )	Borra la pantalla con el color indicado
tft.fillRect (x0,y 0,x1, y1, Color);	Rellena un recuadro de color entre x0,y0 a x1,y1
tft.drawPixel(x0,y0, Color);	Pinta el pixel y ya está ( A mí no me miréis)
tft.drawLine(x0,y 0, x1, y1,Color)	Dibuja una línea
tft.drawFastHLine(x0,y0, L, Color)	Dibuja una línea horizontal de la longitud L
tft.drawFastHLine(x0,y0, H, Color)	Dibuja una línea vertical de la longitud L
tft.fillCircle(x, y, radius, color);	Dibuja un circulo relleno
tft.drawCircle(x, y, radius, color);	Dibuja el contorno de un circulo
tft.drawTriangle(x0, y0, x1, y1,x2, y2, color);	Dibuja un triángulo entre los 2 puntos indicaos
tft.drawRoundRect(x0, y0, x1,y1h, R, color)	Rectángulo redondeado entre P0 y P1 con redondeo de radio R

Si queremos ver el ancho y el alto de nuestra pantalla utilizaremos:

tft.println(tft.widht());
tft.println(tft.height());

Para ver todas las funciones de la libreria;

http://adafruit.github.io/Adafruit-GFX-Library/html/class_adafruit___g_f_x.html

PANTALLA 1.8

Con el mismo conexionado que la pantalla de 2,8″ ,solo tenemos que cambiar la librería del controlador de pantalla que ahora es el ST7735

#include <Adafruit_GFX.h>    // Librería graficos
#include <Adafruit_ST7735.h> // Librería Hardware
#include <SPI.h>
#define TFT_CS     5
#define TFT_DC     2
int TFT_RST;
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST);

Ejemplo sencillo:

#include <Adafruit_GFX.h>    // Librería graficos
#include <Adafruit_ST7735.h> // Librería Hardware
#include <SPI.h>
#define TFT_CS     5
#define TFT_DC     2
int TFT_RST;
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST); // Comandos utilizados
uint16_t timer;
//unsigned long tref;
void setup(void) {
  Serial.begin(9600);
  tft.initR(INITR_BLACKTAB);   // Iniciando chip
 tft.fillScreen(ST7735_BLACK);  // Fondo negro
  tft.setRotation(1);            // Rotación orientación
  tft.setCursor(10,30);          // Escribe en la posicion del cursor
 
  tft.setTextColor(ST7735_YELLOW); //Color de texto
   tft.setTextSize(2);        // Tamaño texto
  timer=millis();
}

void loop(){
  tft.setTextWrap(false);//false-solo imprime una fila--true; no hace nada
timer=millis();//cuando llege a 65 empezara de cero otra vez ya que hemos definido timer como uint16_t
  tft.fillScreen(ST7735_BLACK); 
tft.setTextSize(1);
tft.setCursor(10,20);  
 tft.println("midiendo segundos");
 tft.setTextSize(2);tft.setCursor(100,40);
 tft.println(timer/1000);

 delay(1000);
}

ALGUNAS FUNCIONES DE LA LIBRERIA GFX.H

Podemos expresar el color con formato RGB565 u otro formato de 16 bits o de la forma ST7735_BLACK(…)

◆ writeFillRect()/fillRect()/drawRect()

Ejemplo

 tft.writeFillRect  (1,1,20,10,0xF814);
tft.writeFillRect  (x,y,w,h,color);// presenta rectangulo relleno
Tambien se puede expresar como:
tft.fillRect() 
y si queremos que no este relleno lo expresaremoscomo tft.drawRect()

Write a rectangle completely with one color, overwrite in subclasses if startWrite is defined!Parameters

x	Top left corner x coordinate
y	Top left corner y coordinate
w	Width in pixels
h	Height in pixels
color	16-bit 5-6-5 Color to fill with

CODIGO RGB 565

RGB565 Color Picker

◆ writePixel()/drawPixel()

tft.writePixel (x,y,color);

tft.writePixel (80,64,0x07F3);//presentara un pixel color verde en el centro de la pantalla

◆ writeFastVLine()/drawFastVLine()

tft.writeFastVLine (x,y,h,color); //h=altura en pixeles

semejante a tft.drawFastVLine()

Dibuja una linea de altura “h”

◆ writeFastHLine()/drawFastHLine()

tft.writeFastHLine (x,y,w,color); //w=anchura en pixeles

similar a tft.drawFastHLine()

Presenta una linea horizontal de anchura “w”

◆ writeLine()/drawLine()

tft.writeLine (x0,y0,x1,y1,color)

x0,y0—coordenada origen

x1,y1—coordenada final

◆ drawCircle()/fillCircle()

drawCircle( x0,y0,r,color )//presenta la linea externa

fillCircle( x0,y0,r,color ) //presenta el circulo relleno

◆ drawTriangle()/fillTriangle()

tft.drawTriangle (x0,y0,x1,y1,x2,y2,color);