Gráficos y animaciones en pantallas OLED i2c


Las pantallas OLED (leds orgánicos) son muy comunes en la actualidad, y las podemos incluir en nuestros proyectos con Arduino de una forma bastante sencilla.

La pantalla más habitual para Arduino y la soportada por ArduinoBlocks es la pantalla monocromo de 0.96" (pequeña pero matona!) con conexión i2c.

Este tipo de pantalla tiene un tamaño de 128x64 píxeles (Ancho x Alto).



La conexión e inicialización de la pantalla es muy sencilla. Debemos especificar la dirección i2c de la pantalla y poco más... (podemos conectar varias pantallas para usarlas independientemente todas conectadas al mismo bus i2c)


Inicialización de la pantalla OLED en ArduinoBlocks (importante comprobar la dirección i2c de nuestra pantalla)


En ArduinoBlocks tenemos todos estos bloques disponibles para programación de la pantalla, aunque en este artículo vamos a centrarnos en los relacionados con gráficos (bitmaps) y cómo hacer animaciones sencillas.



Para mostrar gráficos debemos generar un mapa de bits, que no es más que indicar los píxeles que están encendidos y los que están apagados. Este proceso puede ser complejo si lo queremos hacer a mano, pero en ArduinoBlocks tenemos una herramienta que nos permite generar fácilmente el código de los bitmaps de una manera, como no, visual...

El bloque para mostrar un bitmap es el siguiente:


Con el botón derecho sobre este bloque, y pinchando en la opción "ayuda" se abrirá una nueva pestaña con el editor de mapas de bits para pantalla OLED:


Editor OLED:

Podemos crear un mapa de bits manualmente pinchando encima del editor de píxeles (píxel a píxel), pero el proceso puede ser bastante complicado y entretenido... Si tenemos arte dibujando seguramente utilicemos otros editores de gráficos más avanzados (paint, gimp, photoshop, ...) o simplemente podemos descargar una imagen e importarla para convertirla en un mapa de bits binario (blanco y negro) adaptado a nuestra pantalla OLED:

Por ejemplo, vamos a descargar el logotipo de Arduino y adaptarlo para mostrarlo en la pantalla OLED.

Una vez importado en el editor podemos ajustar la posición x,y, el ancho y alto del bitmap, el zoom y sobre todo debemos ajustar el umbral de conversión a B/N para obtener la mejor calidad posible en la conversión:


Ahora, simplemente debemos copiar el "data" y pegarlo en el bloque de bitmap!


El resultado en la pantalla OLED:


Fácil! verdad? pues vamos a ver de una forma también sencilla como crear animaciones a partir de los famosos GIF animados.

Primero vamos a descargar el GIF animado que nos guste, para ello buscamos en cualquier web de descarga de animaciones GIF, yo he utilizado ésta:



Dentro he buscado en las categorías ordenadas por orden alfabético y he entrado en la categoría "ojos"  
me han gustado estos...

(hay que tener cuidado con elegir imágenes con demasiados colores, para que la conversión a blanco y negro sea lo más similar posible a la imagen original)
pero... ¿cómo convertimos este GIF animado en mapas de bits? primero tenemos que descomponer el GIF animado en su secuencia de imágenes, y posteriormente convertir cada una de ellas en un mapa de bits
Para decomponer el GIF animado utilizamos esta herramienta online:

La opción más sencilla es descargar el archivo ZIP con toda la secuencia de imágenes dentro (botón rojo) y descomprimimos en una carpeta en nuestro equipo


El siguiente proceso es similiar al primer ejemplo (logotipo de Arduino), debemos importar cada imagen en el editor y convertir a su mapa de bits, por simplificar el ejemplo vamos a simplificar la animación saltándonos algunas imágenes.... vamos a por la primera!



Lo más importante es "apuntar" todos los ajustes (X/Y, zoom, umbral B/N, ....) para aplicar los mismos valores a todos los fotogramas de la animación.

En el programa de ArduinoBlocks añadiremos bloques de bitmaps para cada fotograma, y una pequeña pausa entre ellos que delimitará la velocidad de la animación.


El resultado.... !!!



Comentarios

  1. Un buen trabajo y sumamente útil.
    Muchas gracias!!!

    ResponderEliminar
  2. Muy buen trabajo. Muchas gracias por compartir.

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Publicar y almacenar datos en Internet con ThingSpeak

Utilizar ESP-01 como periférico WiFi en ArduinoBlocks (parte I)