Cómo mostrar una imagen personalizada en una pantalla LCD gráfica

Las pantallas LCD gráficas se pueden utilizar para mostrar diversa información, como texto, imágenes y gráficos. En este artículo te guiaremos paso a paso por el proceso para mostrar imágenes personalizadas en una pantalla LCD gráfica. Empezaremos creando la imagen en un editor gráfico. Una vez creada la imagen, debemos convertirla a un formato que la pantalla LCD pueda interpretar. Para ello, podemos utilizar una herramienta como LCD Assistant. Por último, escribiremos un código para mostrar la imagen en la pantalla LCD.

En este tutorial se utilizará un Arduino Uno, pero los principios se pueden aplicar a cualquier microcontrolador que cuente con una pantalla LCD gráfica.

Herramientas y material

• Arduino UNO
• Pantalla LCD gráfica: NHD-14432WG-BTFH-V#T
• Conector de cabezal de clavijas de una sola fila
• Placa de pruebas
• Cables de puente
• Soldadura y soldador
• Cable USB de macho A a macho B (cable de impresora)
• Entorno de desarrollo integrado (IDE) de Arduino
• Programas de edición de imágenes como MS Paint y GIMP (opcional)
• Software LCD Assistant para convertir imágenes de mapa de bits monocromáticas en matrices de datos de imagen (opcional)

Distribución de pines de la pantalla LCD gráfica (interfaz paralela)

La pantalla Newhaven NHD-14432WG-BTFH-V#T es un módulo LCD gráfico de 144 x 32 píxeles con el controlador ST7920. Utiliza comunicación paralela y funciona con una tensión de alimentación de 5 V.

Circuito: diagrama de conexiones y esquema eléctrico

Esquema de conexiones

Esquema

Crear un gráfico personalizado

Para mostrar una imagen personalizada o ya existente en una pantalla LCD gráfica, es necesario convertirla a un formato compatible con la pantalla, normalmente en forma de matriz de datos. Existen diversas herramientas de diseño gráfico, como Microsoft Paint, GIMP y Photoshop, que pueden ayudarte en esta tarea. Sin embargo, en el marco de este tutorial, nos centraremos en el uso de Microsoft Paint.

Cómo crear una imagen personalizada para una pantalla LCD gráfica

1. Abre un nuevo archivo en Microsoft Paint.
2. Ve a Archivo -> Propiedades.
3. Configura las siguientes propiedades:
   • Unidades: píxeles
   • Colores: blanco y negro
   • Ancho: número de píxeles de ancho de tu pantalla (144 en nuestro ejemplo)
   • Altura: número de píxeles de altura de tu pantalla (32 en nuestro ejemplo)
4. Ve a la pestaña «Ver» y marca la casilla «Líneas de cuadrícula».
5. Utiliza las herramientas para crear un gráfico personalizado.
6. 6. Ve a Archivo -> Guardar como, asigna un nombre al archivo de tu imagen y selecciona «Guardar como tipo»: Imagen de mapa de bits monocromática (*.bmp; *.dib).

En la configuración de imagen anterior, el modo de color está establecido en monocromo para garantizar una compatibilidad óptima, y el tamaño de la imagen, de 144 x 32, se ajusta a las dimensiones de la pantalla LCD, de modo que la imagen se adapta perfectamente a la pantalla.

Si utilizas un Mac o prefieres un programa de edición de imágenes de código abierto, puedes utilizar GIMP siguiendo unos ajustes similares a los del documento, exportar la imagen como imagen X Bitmap y abrirla en cualquier editor de código para ver la matriz de datos de la imagen. Con GIMP, puedes saltarte el paso de convertir el gráfico en una matriz de datos. Además, también se puede utilizar la herramienta en líneaImage2cpp para este fin.

Convertir el gráfico en una matriz de datos

La conversión de un gráfico en una matriz de datos suele consistir en extraer los datos de color de los píxeles de una imagen y representarlos numéricamente en una matriz de datos. Existen varios métodos y herramientas disponibles para realizar esta conversión, como bibliotecas de programación, software a medida y herramientas en línea. En este tutorial, utilizaremos el software LCD Assistant.

1. Abre el programa LCD Assistant: Descargar aquí.
2. Establece la orientación de los bytes en «Horizontal».
3. Ve a Archivo -> Cargar imagen y selecciona el archivo BMP que contiene tu gráfico.
4. Ve a Archivo -> Guardar salida y guarda el archivo con la extensión .h.
5. Abre el archivo .h para copiar la matriz de datos.

Tanto si eliges LCD Assistant como GIMP, el objetivo es obtener una representación numérica de tu imagen similar a la del ejemplo de este tutorial.

Añade la matriz de datos de la imagen al código de ejemplo

Existen dos métodos principales para incorporar la matriz de datos de la imagen en tu esbozo de Arduino: incrustar los datos directamente en el esbozo o utilizar un archivo de cabecera independiente. Para este tutorial, utilizaremos un archivo independiente en el mismo directorio del proyecto. La carpeta de tu proyecto debería contener el archivo .h con la matriz de datos de la imagen y el archivo .ino con el código de ejemplo de Arduino que se muestra a continuación.

Copiar el código de ejemplo al IDE de Arduino

Abre el IDE de Arduino y crea un nuevo boceto. Borra cualquier código preexistente y, a continuación, copia y pega el código que se proporciona a continuación.

     //---------------------------------------------------------
    /*
      Program for writing to NHD-14432WG-BTFH-V#T LCD with the ST7920 controller
      This code is written for the Arduino Uno R3 using 8-bit parallel interface
      Newhaven Display invests time and resources providing this open source code,
      Please support Newhaven Display by purchasing products from Newhaven Display!
      This code is provided as an example only and without any warranty by Newhaven Display.
      Newhaven Display accepts no responsibility for any issues resulting from its use.
      The developer of the final application incorporating any parts of this
      sample code is responsible for ensuring its safe and correct operation
      and for any consequences resulting from its use.
      See the GNU General Public License for more details.
      Use Horizontal Orientation when converting BMP to hex code
      to display custom image using LCD assistant.
    */
    //---------------------------------------------------------
    #define RS      8  //Register Select signal
    #define RW      9  //Read/Write signal
    #define E       10 //Enable signal
    #include "144_32_Arrows.h"
    /****************************************************
                      Function Commands
    *****************************************************/
    //--------------------------------------------------------------------------
    void command(unsigned char c){
      unsigned char i, temp;
      PORTD = c;
      digitalWrite(RS, LOW);               // Command
      digitalWrite(RW, LOW);               // Write
      digitalWrite(E, HIGH);
      delay(1);
      digitalWrite(E, LOW);
      delay(1);
    }
    //--------------------------------------------------------------------------
    void data(unsigned char d){
      unsigned char i, temp;
      PORTD = d;
      digitalWrite(RS, HIGH);              // Data
      digitalWrite(RW, LOW);               // Write
      digitalWrite(E, HIGH);
      delay(1);
      digitalWrite(E, LOW);
      delay(1);          
    }
    /****************************************************
                      Display Commands
    *****************************************************/
    void disp(unsigned char *LCD_String)
    {
      unsigned int x, y, page;
      page = 0x80;
      for(int i=0;i<32;i++)
      {
        command(0x3E);
        command(page);
        command(0x80);           
        for (x=0;x<18;x++){
          data(*LCD_String);
          LCD_String++;
        }
        page++;
      }
    }
    void Fill()
    {
      unsigned int x, y, page;
      page = 0x80;
      for (page=0x80;page<0xA1;page++)
      {
        command(0x3E);
        command(page);
        command(0x80);
        for (x=0;x<18;x++)
        {
          data(0xFF);
          delayMicroseconds(50);
        }
      }
    }
    void Clear()
    {
      unsigned int x, y, page;
      page = 0x80;
      for (page=0x80;page<0xA1;page++)      
      {
        command(0x3E);
        command(page);
        command(0x80);
        for (x=0;x<18;x++)
        {
          data(0x00);
          delayMicroseconds(100);
        }
      }
    }
    /****************************************************
                Initialization For controller
    *****************************************************/
    void Initialization_Sequence()
    {
      command(0x38);        //Function Set: 8-bit mode, basic instruction
      delay(2);
      command(0x0C);        //Display control: Display on, cursor off, blink off
      delay(2);
      command(0x06);        //Entry Mode Set
      delay(2);
      command(0x02);        //Return home
      delay(100);
      command(0x01);        //Display Clear
      delay(10);
      for(int i=1;i<=32;i++){
        command(0x3E);
        command(0x80);
        command(0x80);
        for(int j=1;j<=40;j++){
          data(0x00);
        }
      } 
    }
    /*****************************************************
                Setup Function, to run once
    *****************************************************/
    void setup() {
      DDRD = 0xFF; // First 8 pins of PORT D as output
      DDRB = 0x3F; // Port B first 6 pins as output
      Initialization_Sequence();
      delay(10);
      Fill();
      delay(500);
      Clear();
      delay(500);
    }
    /*****************************************************
                Loop Function, to run repeatedly
    *****************************************************/
    void loop() {
      disp(Arrows);
    }
	

Resumen de funciones:

• La función command() envía un comando a la pantalla LCD.
• La función data() envía datos a la pantalla LCD.
• La función disp() muestra un gráfico de 144x32 en la pantalla LCD.
• La función fill() enciende todos los píxeles de la pantalla LCD.
• La función clear() apaga todos los píxeles de la pantalla LCD.
• La función Initialization_Sequence() envía las instrucciones necesarias para inicializar la pantalla LCD.
• La función `setup() ` es la función principal y se ejecuta cuando se inicia el Arduino. La función `setup` llama a la función `Initialization_Sequence()` y, a continuación, enciende y apaga todos los píxeles de la pantalla LCD.
• La función loop() se ejecuta de forma continua una vez finalizada la función setup(). Esta función llama a la función disp() pasando como argumento la matriz de datos gráficos.

Cargue el código en Arduino.

1. Conecta el Arduino a tu PC con el cable USB-B.
2. En el IDE de Arduino, selecciona la placa y el puerto.
3. Haga clic en el botón «Cargar» para programar el Arduino con su código.

Una vez que el código se haya cargado correctamente, tu imagen personalizada debería aparecer en la pantalla LCD.

Tutorial en vídeo

Conclusión

Mostrar imágenes personalizadas en una pantalla LCD gráfica puede mejorar la experiencia del usuario y ofrecer una interfaz más interactiva. Siguiendo los pasos descritos en este artículo, desde la creación de los gráficos hasta la implementación del código, los usuarios pueden integrar a la perfección gráficos personalizados en sus pantallas LCD. Tanto si utilizas un Arduino Uno como otro microcontrolador, los principios son los mismos, lo que garantiza un proceso fluido para todos.