MOSTRAR IMÁGENES

Objetivos

 

  • Convertir archivos de imagen en arrays.
  • Cargarlos en la memoria flash de Arduino.
  • Mostrar las imágenes en la pantalla.
  •  

    MATERIAL REQUERIDO

     

    Vista principal Un Arduino Mega.
    Vista principal Un shield TFT LCD 3.5″ táctil.

     

    CONVERTIR LOS ARCHIVOS DE IMAGEN EN ARRAYS

     

    Para poder mostrar imágenes o fotos en la pantalla, primero vamos a tener que transformarlas en arrays que pueda entender nuestro Arduino. Estos arrays, básicamente, tienen una variable por cada píxel que tenga la imágen, y en cada uno de ellos contiene el color del que debe pintar ese píxel la pantalla para componer la imagen.

    Recordad que nuestra pantalla es de 480×320, así que ese será el tamaño máximo que podremos mostrar, aunque también tenemos limitaciones debidas a la memoria del Arduino. Ya hablaremos luego de eso.

    Para transformar los archivos de imagen en arrays existen muchas aplicaciones, yo he utilizado un conversor online que he ncontrado en la misma página que desarrolla las librerías que hemos modificado para esta pantalla. Aquí tenéis el enlace: Conversor de imágenes.

    Como veis es muy sencillo de usar, no tenéis más que seleccionar el archivo que queráis convertir y darle a «Make file».mientras esté seleccionado «Convert to: .c file». Cuando lo hagáis os descargaréis un archivo .txt en el que además del array os vendrá especificado el tamaño de la imagen y el tamaño que ocupará en memoria.

    image converter

     

    CARGAR LOS ARRAYS EN LA MEMORIA FLASH

     

    Como ya hemos comentado alguna vez, nosotros usamos normalmente la memoria SRAM de Arduino, que en el caso del Arduino Mega, tiene una capacidad de 8kb. O sea, que ni siquiera nos vale para guardar la pequeña imagen que hemos convertido, que si os fijáis es de 200×47 píxeles y ya ocupa casi 19kb. Por eso vamos a utilizar la memoria flash, que en el caso del Mega es de 256kb. Si os fijáis, el archivo que hemos descargado ya viene preparado para cargar el array en la memoria flash, así que prácticamente nos lo da todo hecho. Eso sí, por alguna razón, la librería UTFT que se descarga de esa misma página no carga las imágenes de la memoria flash, así que recordad que tenéis que descargar la librería modificada que hemos comentado en las anteriores sesiones: UTFT.

    Por aquello del orden y la limpieza, para incluir el array en nuestro programa vamos a crear una pestaña a parte del programa principal. Por si no lo habéis hecho nunca, no hay más que pulsar en la flechita que hay arriba a la derecha y seleccionar nueva pestaña.  Os pedirá un nombre, podéis darle el que queráis, pero os recomiendo que sea el mismo que el archivo txt pero terminado en .h. Una vez creado copiamos el contenido del archivo .txt en él. De esta manera ya incluimos la librería y declaramos el array para guardarlo en la memoria flash. Además tenemos en los comentarios algunos datos que necesitaremos a la hora de cargar la imagen.

    array imagen

     

    PROGRAMA PARA MOSTRAR LAS IMAGENES

     

    Una vez hemos incluido todas las imágenes que vamos a querer utilizar en el programa, vamos a la pestaña en la que construiremos el programa principal. Lo primero que haremos será incluir las librerías que vamos a utilizar y declarar la instancia UTFT de la pantalla. Además, en el setup, inicializamos la pantalla y la limpiamos, por si acaso.

    #include "UTFT.h"
    
    #include "arduino.h"
    #include "logo.h"
    
    UTFT lcd(ILI9481,38,39,40,41); 
    
    void setup()
    {
     lcd.InitLCD(); 
     lcd.clrScr();
    }

    Para mostrar las imágenes que hemos convertido en arrays, vamos a utilizar la función bitmap(). Como parámetros le pasaremos la posición X e Y donde queramos que empiece a mostrarla, o sea la que coincidirá con la esquina izquierda de la imagen, el tamaño en píxeles X e Y y el nombre del array.

    Por ejemplo, nuestro array «logo», que es el logo de Prometec, ocupa 200×47 . Podéis verlo en el archivo que hemos descargado, en los comentarios del principio. Y vamos a querer que empiece a dibujarlo en la esquina izquierda de la pantalla, o sea en las coordenadas 0,0.

    lcd.drawBitmap(0,0,200,47, logo);

    Además hacemos que muestre otra imagen con el logo Arduino, que hemos convertido previamente, en el centro de la pantalla más o menos. Como ocupa 75×78, unos cálculos aproximados nos dirán que tiene que empezar en las coordenadas 203,131.

    lcd.drawBitmap(203,131,75,58, arduino);

    Esta función nos permite además escalar la imagen pasándole un parámetro adicional. Por ejemplo podemos hacer que se vean el doble de grandes, aunque evidentemente perderemos calidad en la imagen.  Así, por ejemplo, hacemos un programa que muestre las imágenes en su tamaño original durante 5 segundos y después lo haga al doble de su tamaño durante otros 5. Como queremos mostrarla sobre fondo blanco, se lo indicamos también en el programa con la función fillScr().

    void loop()
    {
     lcd.fillScr(VGA_WHITE);
     lcd.drawBitmap(0,0,200,47, logo);
     lcd.drawBitmap(203,131,75,58, arduino);
     delay (5000);
     lcd.fillScr(VGA_WHITE);
     lcd.drawBitmap(0,0,200,47, logo, 2);
     lcd.drawBitmap(165,102,75,58, arduino, 2);
     delay (5000);
    }

    3.5 tft shield mega

    Aquí os dejamos un enlace al programa Cargar_Imagen, y un pequeño vídeo con el resultado.

     

    Resumen de la sesión

     

    En esta sesión hemos aprendido varias cosas importantes:

  • Hemos utilizado una aplicación que convierte archivos en formato imagen a arrays.
  • Hemos guardado los arrays en la memoria flash del Arduino,
  • SAbemos utilizar la fuinción bitmap() para visualizar las imágenes en la pantalla.
  •  

    Deja una respuesta