bclose

Display TFT SPI 1.8″

Arduino y el primer display TFT
tienda online prometec

Objetivos

 

 

    • Presentar los primeros displays TFT de 1,8”.
    • Mostrar la forma de conectarlo correctamente.
    • Mostrar algunos programas para sacarle partido imprimiendo texto de diferentes colores y tamaños de letra.
    • Presentar las primitivas graficas disponibles.
 

Material requerido.

Imagen de Arduino UNO

Arduino Uno o similar. Esta sesión acepta cualquier otro modelo de Arduino.

Protoboard

Una Protoboard.

conexiones

Cables  de protoboard

Resitor resistencias de 1kΩ

resistencias de 1kΩ

Pantalla TFT

 Un display TFT de 1.8″ con SPI

 

Los displays 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.

Pantalla TFT
Pantalla TFT con SPI vista posterior

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

 

Esquema de conexiones

 

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.

Esquema protoboard

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.

 

El Programa de control

 

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.

 
  • La pantalla va del punto (0,0) en la esquina superior izquierda hasta el punto (128,160) en la esquina inferior derecha.
 

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);
   }
 
  • Fíjate en que para poder poner 1.8” en la última línea de texto hemos escrito “Display SPI de 1.8\”” esto no es un error. Para poder escribir las comillas y que C++ no lo confunda con el cierre del string literal he usado \” para indicarle que quiero usar las comillas dentro del literal.
 
Texto de prueba

 

A la izquierda teneís el resultado del programa, y por cierto los colores disponibles de serie son:

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:

Muestras de posibilidades

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

MétodoDescripció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

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.

 

Resumen de la sesión

 

 

 

    • Hemos presentado los displays TFT de 1,8”.
    • Hemos visto que el único truco que tienen para conectarlos es usar unas resistencias de 1kΩ en los pines de datos, algo que está muy mal documentado y que ha generado mucha confusión en internet.
    • Hemos visto los principios básicos para mostrar textos en varios colores y tamaños, así como la forma de posicionarlos en pantalla.
    • Presentar sin entrar mucho en ello las primitivas graficas que nos permiten dibujar líneas, círculo y rectángulos.
 

 

 

 

 

(21) Comments

    • Javier martinez

    buenos dias, tengo una pregunta acerca del reset de la pantalla.
    en las definiciones aparece reset en el pin #7 dice que puedo conectar el reset de la pantalla directamente al reset del arduino mi pregunata esta es si hago esto enonces en esa deficion ue debo de colocar, porque si la elimino o la quito me alta error porque la instrucion
    Adafruit_QDTech tft = Adafruit_QDTech(cs, dc, rst); // Invoke custom library me pide tres valores gracias

    • Hola Javier, creo que deberías dejarla tal cual.

  • Hola, ¿Cómo se ve esta pantalla a la luz del día?

    Un saludo

    • Se ve bastante bien pero no tanto si recibe luz de sol directa claro

    • Berni

    hola, no consigo quitar el parpadeo. El display sólo va bien con la ST7735.h

    {
    tft.setCursor (90,60); // datos de roll
    tft.setTextColor (ST7735_GREEN);
    tft.setTextSize(3);
    tft.print (grad_X);
    tft.setCursor (9,36); // datos de pitch
    tft.setTextColor (ST7735_GREEN);
    tft.setTextSize(3);
    tft.print (grad_Y);
    delay(600); // borrar
    tft.fillRect (90,60,60,46,ST7735_BLUE);
    tft.fillRect (9,36,59,40,ST7735_BLUE);
    }

    Es este tft: http://www.ebay.es/itm/TFT-DISPLAY-color-1-8-spi-lcd-driver-st7735-128×160-SDCARD-Arduino-Raspberry-/122357916758?hash=item1c7d19a456:g:oDwAAOSwr~lYpV-f

    Alguna idea?

    • Hola Berni

      Por lo que veo en el enlace que nos mandas es el mismo display que nosotros distribuimos y hasta la fecha sin problemas sin mas que cargar el software que vemos en la pagina. SI no funciona y sobre todo por lo del parpadeo o bien es un modelo diferente a nivel electronico o bien el display puede estar dañado. No es habitual pero tampoco hay que descartarlo

  • y como es la coneccion con el otro lado del display.

    • Lionel

    Hola gente linda, estoy haciendo una practicas con una pantalla TFT de 1.44 sobre Arduino UNO. Básicamente muestro el valor de la entrada A0, pero la pantalla parpadea cada vez que actualizo (borro y vuelvo a escribir). Si no borro la pantalla antes de escribir los caracteres se pisan, osea si tengo un 6 e imprimo un 9 se me transforma en un 8, se solapan los caracteres.

    Alguien se le ocurre alguna idea para solucionar esto?

    Desde ya muchas gracias

    • Buenos dias Lionel,

      EN muchas pantallas hay que hacer precisamente eso, borrar todo antes de volver a escribir, pero la sesnacion de parpadeo ocurre porque no se sincroniza el borrado y refresco con la frecuencia de refresco de la pantalla. NOrmalmente e sun problema que deberia solucionars eusando una libreria reciente como las de adafruit

    • Cdlm

    hola. mi modulo tiene los pines en este orden:
    GND, VCC, NC, NC, NC, RESET, A0, SDA, SCL, CS, SCK, MISO, MOSI, SD_CS_LED +, LED -.

    Cual de estos es dc

    • hola, en ese tipo de pantallas los dos pines que tienes que conectar al 5v del arduino son Lcd+ y Vcc. Haciendo una búsqueda rápida encontrarás varios esquemas de montaje de pantallas de ese tipo. Un saludote.

    • Adrian

    Saludos, geniales tutoriales.
    Tengo una pregunta, recientemente me llego el display (que compre en esta pagina) y al hacer las conexiones y correr el ejemplo la pantalla se pone totalmente en blanco y no muestra nada. Cuando oprimo el botón reset del arduino aparece la imagen que se supone debería estar mostrando pero no cambia y cuando suelto el botón la pantalla vuelve a ser blanca. ¿Sabes cual podría ser el problema?

    Lo probe con un arduino UNO y un nano con el mismo resultado. Otra cosa, el display que me llego es ligeramente diferente que el que se muestra aquí, dice KMR-1.8 SPI en la parte inferior y cuenta con 16 pines.

    • Hola Adrian,

      No se muy bien que decirte porque si se muestra la imagen cunado pulsas el boton parece que ha enviado correctamente la imagen

      No podemos descartar un defecto del display por lo que lo mas sensato seria que me mandes un correo privado con tu nombre y numero de pedido si puede ser para que te envie uno nuevo y asi salimos de dudas de si es diferente display a pesar de tener el mismo aspecto o simplemente es defectuosos el que te enviamos ¿Vale?

  • Hola
    agradeceros las ayuda que aportáis a los que estamos empezando.
    Recientemente he comprado una tft de 1.8 y he conseguido que se vean los datos de un sensor.
    pero mi problema es que la retroiluminacion de la pantalla esta muy fuerte y pierde mucha calidad
    Solamente cuando reseteo el programa se reduce el brillo y se ve perfecto.
    Pero cuando termina de carga otra vez vuelve el brillo.
    He intentando buscar información pero no encuentro nada.
    Si alguien supiera cual es problema, agradecería la ayuda.
    un saludo

    • Hola Josin, tranquilo. Normalmente hay un pin que regula el brillo o bien una instruccion que te permite modificarlo. Revisa la documentacion de tu pantalla y veras como lo encuentras enseguida

    • Jesus

    hola he comprado una pantalla y cuando le paso el programa solo salen rallas
    he seguido el tutorial y he intentado hacer un algo mas sencillo pero en cuanto le envio una orden a la pantalla salen rallas inmoviles de colores

    • Hola Jesus, Normalmente esas rayas significan o bien que no es el mismo modulo y si lo es entonces parece significar que tu display esta un poc joido, lo siento

    • Wilo

    hola amigos. como hago que mi arduino lea el reloj de mi pc para encender un leed en un determinado tiempo sin la necesidad de utilizar otro dispositivo adicional como los RTC u otros parecidos solo quiero que me lea el reloj a través de la libreria timeserial y mi pc porque va a estar siempre conectado a este .
    gracias….

    • Hola Wilo,
      Si no te preocupa que tu Arduino se resetee cada dia y pico, no necesitarias ni siquiera conectarlo al PC, pues podrias usar la libreria Time interna de Arduino.

      Si por el contrario quieres sincronizar Arduino y tu PC via serie, lo mas sencillo que se me ocurre, seria escribir un programa rapido en C++ o Python por ejemplo desde el PC, que lea y envie la hora a la puerta serie donde tienes Arduino cada tanto tiemepo. Tu Arduino lo lee y usa esa hora, con lo que ya los tienens sincronizados.

      Si necesitas algo mas sofisticado podrias usar Firmata en https://github.com/firmata/arduino o quizas tambien un programa en processing, Aquí tienes la nueva libreria time de arduino que se supone incluye un ejemplo para hacer exactamente, la sincronizacion que tu quieres entre arduino y un PC: http://playground.arduino.cc/Code/Time
      Suerte

    • Seta43

    Ya tenía mi TFT como perdido, no había forma de hacerlo funcionar, pero gracias a vosotros ya me funciona.
    He añadido un reloj de tiempo real al ejemplo TFT_Clock, con el chip DS1302.

    Un saludo

Give a Reply

WordPress Anti-Spam by WP-SpamShield