Display TFT SPI 1.8″

	Arduino Uno o similar. Esta sesión acepta cualquier otro modelo de Arduino.
	Una Protoboard.
	Cables  de protoboard
	5 resistencias de 1kΩ
	Un display TFT de 1.8″ con SPI

Casi cualquier proyecto que planteemos tendrá, invariablemente, una parte en la que necesitaremos mostrar información al usuario exterior, y para ello necesitaremos alguna forma de display.

En el curso de introducción fuimos viendo algunas de las opciones disponibles en el mercado, especialmente las más accesibles para alguien que quiere introducirse en el mundo de Arduino y la electrónica.

Per naturalmente, el mercado nos ofrece un sinfín de posibilidades de displays cuya capacidades y grados de sofisticación son crecientes y que suelen conllevar un cierto grado también de complejidad.

En los últimos años han ido apareciendo un creciente número de displays de buenas prestaciones con precios inimaginables (Por lo bajos, gracias a Dios) hasta hace muy poco y muchos de ellos incorporan algún tipo de bus de control para simplificar su acceso.

Es el caso de los displays TFT que empezaron a venderse, en distintos tamaños, para los teléfonos móviles y que han acabado popularizándose como displays en color y  de pequeño tamaño.

En esta sesión vamos a ver como conectar a nuestros Arduinos un modelo de 1,8” en color con interface SPI, que son relativamente sencillos de encontrar muy baratos y que, por lo que he visto, están bastante mal documentados.

Y es una pena porque son unos displays magníficos que por muy poco dinero nos permite manejar texto y gráficos a color con muy poco esfuerzo, aunque naturalmente la resolución no es gran cosa, es baja 128 x 160 puntos en pantalla.

Vamos a ver como conectarlos

La conexión es muy sencilla y os incluye el ejemplo de conexión a la protoboard de la forma natural, es decir con el display hacia arriba y los pines de conexión hacia abajo, de manera que encajen en la protoboard.

He estado bastante tiempo volviéndome loco tratando de conectar este display, sin conseguirlo, porque la documentación que hay en internet es muy pobre y se olvidan de darte una clave fundamental para que la cosa funcione.

Hay que poner resistencias de 1KΩ en los pines de datos para el SPI y el único que parece haberse dado cuenta son los chicos de domipheus.

Una vez que lo tienes claro, la conexión es trivial. Así pues, montar esas resistencias y veréis como enseguida vuestro display estará haciendo cositas a colorines.

Por cierto el pin al lado del GND del display, está rotulado como BL o Back Light, y se usa para encender la luz de fondo del display y que pueda verse lo que hay en pantalla. Yo lo he conectado a 5V directamente, pero puedes usar un pin de tu Duino para encenderla y apagarla a voluntad.

Como no podía ser de otra manera, vamos a utilizar las librerías de Adfruit para TFTs, modificadas para el control vía SPI. Tenemos que cargar dos librerías Libreria Adafruit GFX.zip y Libreria Adafruit_QDTech.zip.

Seguid el procedimiento habitual para instalar librerías y veréis que también os instalarán una serie de ejemplos. Cargad el ejemplo:

Archivo\ejemplos\Adafruit_QDTech\graphicsTest_QDTech

Aquí tenéis el resultado del ejemplo:

Vamos ahora con el detalle de cómo se maneja. Empecemos con las definiciones:

define sclk 13           // No cambiar
#define mosi 11          // No cambiar
#define cs   9
#define dc   8
#define rst  7              //Es el reset del display
#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_QDTech.h> // Hardware-specific library
#include <SPI.h>

Son las definiciones de pines de conexión que corresponden con la imagen de la protoboard arriba. Mas las librerías necesarias incluyendo la SPI, que es el interface del display actual.

Adafruit_QDTech tft = Adafruit_QDTech(cs, dc, rst);

Creamos una instancia del objeto Adafruit_QDTech que llamamos tft. Lo siguiente es inicializar el objeto, Seleccionar la orientación vertical y borrar la pantalla:

tft.init();                 // Inicializamos tft
tft.setRotation(0);         // 0 - Portrait, 1 - Lanscape
tft.fillScreen(QDTech_BLACK);   // Rellenar de negro, o sea, borrar

Y aquí es donde le vamos a mandar escribir y dibujar:

tft.fillRect (0, 16, 128, 18 ,QDTech_BLUE);
testdrawtext ("   Curso Arduino\n    Prometec.net   \nPantalla de 21 x 20\n    caracteres.\n", QDTech_WHITE);

tft.fillRect (0, 100, 128, 160 ,QDTech_RED);

Le pedimos que rellene  un recuadro con fillRect(), del punto x=0, y=16 hasta el punto 128,18 de color azul.

Para escribir usamos la función testdrawtext(“xxxxxxxx”), o bien posicionamos el cursor en un punto y usamos tft.print(“Text”)

Y aquí tenemos el programa completo  Prog_40_1 

#define sclk 13  // No cambiar
#define mosi 11  // No cambiar
#define cs   9
#define dc   8
#define rst  7  // Podemos conectarlo al  Arduino reset
#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_QDTech.h> // Hardware-specific library
#include <SPI.h>

Adafruit_QDTech tft = Adafruit_QDTech(cs, dc, rst);  // Invoke custom library

void setup()
   {
        tft.init();             // Inicializa la pantalla
        tft.setRotation(0);     // 0 - Portrait, 1 - Lanscape
        tft.fillScreen(QDTech_BLACK);

        tft.fillRect (0, 16, 128, 18 ,QDTech_BLUE);
        testdrawtext ("   Curso Arduino\n    Prometec.net   \nPantalla de 21 x 20\n            caracteres.\n", QDTech_WHITE);

        tft.fillRect (0, 100, 128, 160 ,QDTech_RED);  // Rellena de rojo
        tft.setCursor(10, 50);                          // Cursor a 10,50
        tft.setTextColor(QDTech_BLUE); // Color del texto azul
        tft.print("Display SPI de 1.8\"");    // Escribe en la posicion del cursor
   }
void loop() {}

void testdrawtext(char *text, uint16_t color)
   {     tft.setCursor(0, 0);
         tft.setTextColor(color);
         tft.setTextWrap(true);      // Si el texto no cabe pasalo a la siguiente linea
         tft.print(text);
   }

 

QDTech_BLACK 
QDTech_RED
QDTech_GREEN
QDTech_BLUE 
QDTech_YELLOW
QDTech_MAGENTA
QDTech_CYAN
QDTech_WHITE
QDTech_GREY

Pero no debería ser demasiado difícil definir nuevos colores.

Vamos a insistir un poco en un programa que imprima textos de diferentes colores en la pantalla en distintas orientaciones, para que no haya dudas.   Prog_40_2

#define sclk 13  // No cambiar
#define mosi 11  // No cambiar
#define cs   9
#define dc   8
#define rst  7  
#include <Adafruit_GFX.h>    
#include <Adafruit_QDTech.h> 
#include <SPI.h>

Adafruit_QDTech tft = Adafruit_QDTech(cs, dc, rst);  // Invoke custom library

void setup()
   {   tft.init();
       tft.setRotation(0);      // 0 - Portrait, 1 - Lanscape
       tft.fillScreen(QDTech_BLACK);
       tft.setTextWrap(true);
       delay(500);

       tft.setTextSize(1);
       tft.setCursor(0, 10);           // Cursor a 10,50
       tft.setTextColor(QDTech_BLUE);  // Color del texto azul
       tft.print("Display");           // Escribe en la posicion del cursor
      
      tft.setTextSize(2);
      tft.setCursor(0, 25);            // Cursor a 10,50
      tft.setTextColor(QDTech_RED);    // Color del texto rojo
      tft.print("Display");            // Escribe en la posicion del cursor

      tft.setTextSize(3);
      tft.setCursor(0, 50);            // Cursor a 10,50
      tft.setTextColor(QDTech_GREEN);  // Color del texto azul
      tft.print("Display");            // Escribe en la posicion del cursor

      tft.setTextSize(4);
      tft.setTextWrap(false);      // Si cambias esto lo que no quepa sigue en la siguiente linea
      tft.setCursor(0, 80);        // Cursor a 10,50
      tft.setTextColor(QDTech_CYAN);      // Color del texto cian
      tft.print("Display"); 

      tft.setRotation(1); // 0 - Portrait, 1 – Lanscape, Cambiamos orientacion
      tft.setTextSize(2);
      tft.setCursor(0, 10);             // Al cambiar la orientación cambia el punto 0,0
      tft.setTextColor(QDTech_YELLOW);          // Color del texto amarillo
      tft.print("Display");             // Escribe en la posicion del cursor
   }
void loop() {}

El resultado es como este:

La instancia de tft tiene varios métodos gráficos interesantes:

Y alguna propiedades que merecen destacar como tft.width(), que nos devuelve la anchura de la pantalla y tft.height(), que nos devuelve la altura.