Tutorial de pantalla OLED I2C con Arduino/NodeMCU
Por Tarantula3
El primer programa que escribes cuando empiezas a aprender un
nuevo lenguaje de programación es: “¡Hola Mundo!”.
El programa en sí no hace más que mostrar el texto “Hola Mundo” en la pantalla.
Entonces, ¿cómo logramos que nuestro Arduino muestre el “¡Hola Mundo!”?
En este video te mostraré cómo empezar con las pequeñas pantallas OLED I2C de 0.91 (128×32) y 0.96 (128×64).
Hay cientos de tutoriales en la web que explican lo mismo de distintas maneras, pero no pude encontrar uno que me contara todo sobre la pantalla OLED y cómo usarla en diferentes escenarios. Me llevó algo de tiempo resolverlo todo. Así que pensé que debía crear un tutorial con lo que aprendí y reunir todas las funciones y formas en que se pueden usar las pantallas OLED en nuestros proyectos.
Notas para docentes
¡Docentes! ¿Usaste este instructivo en tu salón de clases?
Añade una nota de docente para compartir cómo lo incorporaste a tu lección.
Paso 1: Lo que vamos a aprender hoy
En este video hablaremos de:
– ¿Qué es una pantalla OLED?
– Luego veremos más de cerca las pantallas OLED I2C de 0.91 (128×32) y 0.96 (128×64)
– Después hablaremos sobre cómo instalar la librería de Adafruit en tu IDE de Arduino
– Luego conectaremos el NodeMCU y el Arduino a una pantalla OLED
– A continuación veremos el código y mostraremos algunos gráficos y texto en ella
– También hablaremos de cómo aplicar fuentes personalizadas y mostrar imágenes
– Luego conectaremos varias OLED a un microcontrolador usando un multiplexor I2C
– Finalmente, hablaremos de algunos errores comunes que la gente comete al usar las pantallas OLED
Paso 2: Material necesario
Para este tutorial necesitamos:
– Una protoboard
– Pantallas OLED I2C de 0.91″ (128×32) y 0.96″ (128×64)
– Arduino UNO/NANO (el que tengas a la mano)
– NodeMCU
– Multiplexor I2C TCA9548A
– Algunos cables de conexión
– y un cable USB para subir el código
Paso 3: ¿Qué es una pantalla OLED?
OLED, o diodo orgánico emisor de luz, es un diodo emisor de luz
(LED) en el que la capa electroluminiscente emisora es una película de compuesto orgánico (millones de pequeñas luces LED) que emite luz en respuesta a una corriente eléctrica.
Las OLED se usan para crear pantallas digitales en dispositivos como televisores, monitores de computadora, sistemas portátiles como teléfonos móviles, consolas de videojuegos portátiles y PDAs. Una pantalla OLED funciona sin retroiluminación porque emite luz visible por sí misma.
Paso 4:
Hay muchos tipos de pantallas OLED disponibles en el
mercado según su
– Tamaño
– Color
– Marca
– Protocolo
– SPI (Serial Peripheral Interface) o I2C
– Esquema de control de matriz pasiva (PMOLED) o matriz activa (AMOLED)
En este tutorial voy a hablar sobre cómo conectar las
pantallas OLED I2C de color azul de 0.91 (128×32 OLED) y 0.96 (128×64 OLED) a un Arduino NANO y a un NodeMCU. La tecnología del bus I2C usa solo 2 pines del MCU, así que tenemos muchos disponibles para otros sensores.
Paso 5: Vista más de cerca
Veamos más de cerca estas dos pantallas.
En la parte trasera de estas pantallas hay montones de capacitores y resistencias SMD soldados a bordo; pero, como es un dispositivo I2C, solo nos importan estos 2 pines (SCL y SDA)
La pantalla se conecta al Arduino usando solo cuatro cables: dos para alimentación (VCC y GND) y dos para datos (reloj serie SCL y
datos serie SDA), lo que hace el cableado muy sencillo. La conexión de datos es I2C (I²C, IIC o Inter-Integrated Circuit) y esta interfaz también se llama TWI (Two Wire Interface).
– Los pines a bordo pueden estar en distinto orden, así que verifica siempre tres veces antes de conectarla a tu proyecto.
– El voltaje de operación está entre 3v y 5v, pero lo mejor es seguir las indicaciones de la hoja de datos del fabricante.
– A veces necesitamos usar 2 pantallas en nuestros proyectos. Entonces, ¿cómo podemos lograrlo?
El truco es tener una dirección configurable en tu pantalla. Esta unidad tiene una dirección configurable entre 0x78 y 0x7A. Con solo desoldar la resistencia de 0 Ohm de un lado y conectarla al otro, o simplemente poniendo un puente de soldadura, podemos cambiar la dirección. Hablaremos de ello en profundidad cuando conectemos varias pantallas a un Arduino en la sección posterior de este tutorial.
En la imagen estas pantallas se ven muy grandes. Pero, en la práctica, son diminutas. Están hechas de 128 x 32/64 píxeles OLED individuales y no requieren ninguna retroiluminación. Solo míralas y verás lo pequeñas que son. Aunque son pequeñas, pueden ser muy útiles en cualquier proyecto electrónico.
Paso 6: Librería
Hay varias librerías disponibles para controlar estas
pantallas. En el pasado he usado la “librería u8glib”, pero me parece que la librería de AdaFruit es muy fácil de entender y usar en nuestros proyectos. Así que voy a usar la librería de AdaFruit en este tutorial.
Para controlar la pantalla OLED necesitarás la librería “adafruit_GFX.h” y la librería “adafruit_SSD1306.h”.
Hay dos maneras de descargar e instalar la librería en tu IDE de Arduino.
Método 1
Ve al “Gestor de librerías” y busca “adafruit_SSD1306” y “adafruit_gfx”
Selecciona la versión más reciente y presiona el botón Instalar.
Una vez instaladas, puedes usar estas librerías en tu programa.
Método 2
Estas dos librerías también se pueden descargar desde github (necesitas ambas):
Proporcionaré los enlaces en la descripción de abajo.
La librería de la pantalla: https://github.com/adafruit/Adafruit_SSD1306
La librería GFX: https://github.com/adafruit/Adafruit-GFX-Library
Una vez descargada, copia la carpeta Adafruit_SSD1306-master del archivo zip descargado dentro de la carpeta de librerías de Arduino. Esta carpeta suele encontrarse en Documentos > Arduino > libraries en los sistemas Windows. En Linux suele estar en la carpeta home > Arduino > libraries. Finalmente, en la carpeta de librerías de Arduino, renombra la carpeta Adafruit_SSD1306-master a Adafruit_SSD1306. Aunque no la renombres, no hay problema.
Paso 7:
Ahora, veamos el archivo “Adafruit_SSD1306.h”
archivo
Hay dos cosas que debemos saber en esta librería:
1. Si quieres usar la pantalla más pequeña, usa el valor por defecto 128_32; de lo contrario, para la pantalla más grande comenta el 128_32 y descomenta el 128_64
2. Si has soldado la dirección 0x7A en la placa (de lo que hablaremos más adelante), usa la dirección de 7 bits 0x3D para las pantallas más grandes; de lo contrario, usa la dirección por defecto 0x3C. Para las pantallas más pequeñas la dirección es 0x3C.
Paso 8: Cableado de las OLED 128 x 64/32
Empecemos conectando el NodeMCU a la pantalla.
Lo primero y más importante a tener en cuenta es que algunas pantallas pueden tener los pines de alimentación GND y VCC intercambiados. Revisa tu pantalla para asegurarte de que sea igual a la imagen. Si los pines están intercambiados, asegúrate de cambiar las conexiones al Arduino o NodeMCU.
– Cableado OLED con NodeMCU
OLED VCC – NodeMCU 3.3V
OLED GND – NodeMCU GND
OLED SCL – NodeMCU D1
OLED SDA – NodeMCU D2
– Cableado OLED con Arduino Uno
OLED VCC – Arduino 5V
OLED GND – Arduino GND
OLED SCL – Arduino Uno A5
OLED SDA – Arduino Uno A4
– Cableado OLED con Arduino MEGA 2560
OLED VCC – Arduino 5V
OLED GND – Arduino GND
OLED SCL – Arduino MEGA 2560 pin 21
OLED SDA – Arduino MEGA 2560 pin 20
Paso 9: Código
La librería de Adafruit viene con muy buenos ejemplos tanto para
las pantallas 128×32 como 128×64.
La librería se encuentra en File > Examples > Adafruit SSD1306 > y luego el tipo de pantalla en el IDE de Arduino.
Vamos a usar el ejemplo 128×32 I2C y lo modificaremos para que funcione con las pantallas 128×64 y 128×32, primero conectándolo a un Arduino y luego a una placa NodeMCU.
El código empieza incluyendo ambas librerías de Adafruit. En este tutorial voy a enfocarme solo en aquellas partes del código que son necesarias para cargarlo en ambas placas y pantallas. Si quieres saber más sobre el código, deja un comentario en mi blog o en la sección de comentarios de abajo y haré lo posible por responderte.
– Primero vamos a cargar el código en un Arduino Nano conectado a una pantalla 128×32.
Podemos usar el código tal cual, sin ninguna modificación.
La 128×32 usa la dirección 0x3C, así que esta parte se ve bien aquí; verifiquemos también la librería de cabecera: sí, también está usando la dirección 0x3C y el tipo de pantalla es 128×32.
– Ahora conectemos la pantalla 128×64. Como sabemos, usa la dirección 0x3C por defecto, así que no necesitamos actualizar la dirección ni en el código ni en la librería.
Solo necesitamos comentar el 128_32 y descomentar el 128_64 en la librería de cabecera y cambiar el LCDHEIGHT a 64 en nuestro código.
– Ahora, para ejecutar el mismo código en un NodeMCU, necesitamos cambiar una línea más en nuestro código.
El “#define OLED_RESET 4” > “#define OLED_RESET LED_BUILTIN”; el resto del código es igual que en Arduino
Básicamente, para mostrar cualquier cosa primero necesitamos borrar la pantalla anterior usando
display.clearDisplay(); // Clear the buffer
Luego dibujar el objeto
testdrawline(); // Draw a line
Mostrarlo en el hardware
display.display(); // Make them visible on the display hardware!
Esperar un tiempo antes de mostrar el siguiente elemento.
delay(2000); // Wait for 2 seconds
En este ejemplo mostramos algunos elementos como texto, líneas, círculos, texto desplazable, triángulos y más. Adelante, usa tu imaginación y muestra lo que quieras en estas diminutas pantallas.
Archivos adjuntos
Paso 10: Personalizar texto y añadir imágenes
A veces tu código necesita mostrar fuentes personalizadas e
imágenes. Si eres muy bueno haciendo mapas de bits, entonces solo necesitas crear arreglos de bytes encendiendo o apagando los pequeños LEDs de la pantalla para crear fuentes e imágenes personalizadas.
Sin embargo, no soy muy bueno haciendo estos mapeos y no quiero pasar horas creando las tablas de mapas de bits.
Entonces, ¿cuáles son mis opciones? Generalmente uso dos sitios web para generar fuentes e imágenes personalizadas. Los enlaces están en la descripción de abajo.
Fuentes personalizadas
————
Ve al sitio web del conversor de fuentes, selecciona la familia de la fuente, el estilo, el tamaño, la versión de librería como “Adafruit GFX Font” y luego presiona el botón “Create”. En el lado derecho de esta página puedes ver cómo se va a ver tu fuente en la pantalla real.
Según tu selección, la página web genera el archivo de cabecera de las fuentes. Crea un archivo llamado “modified_font.h” en la misma carpeta donde está tu código y copia y guarda el código generado en él. Luego solo necesitas incluir el archivo de cabecera en tu código para usar la fuente personalizada.
#include “modified_font.h”
Después, solo necesitas establecer la fuente antes de mostrar el texto para aplicarle la fuente personalizada.
display.setFont(&Your_Fonts_Name);
Puedes obtener el nombre de la fuente del archivo de cabecera que acabas de añadir a tu proyecto. Eso es todo, fácil.
La memoria siempre es una preocupación al usar fuentes personalizadas, así que considera siempre los bytes que consumirá la memoria. Solo recuerda que el Arduino UNO tiene apenas 32K de memoria.
Imágenes personalizadas
————-
Para mostrar una imagen de mapa de bits en tu pantalla, primero necesitas crear una imagen de tamaño 128 x 64/32.
Estoy usando el clásico “MS Paint” para crear una imagen de mapa de bits de 128 x 64 que luego subiré a este sitio web conversor de imágenes. El sitio web convierte las imágenes en cadenas de bytes, que pueden usarse con Arduino y pantallas OLED.
Empieza subiendo la imagen al sitio web. Luego marca la casilla “Invert image colors” y cambia el “Output code format” a “Arduino Code”; después selecciona la orientación y presiona el botón “Generate Code” para generar el arreglo de bytes. La sección “Preview” te muestra cómo se verá tu imagen en la pantalla real.
He incluido el código junto con este tutorial, que puedes usar para mostrar tus imágenes. Solo necesitas reemplazar el arreglo de mi código con el que acabas de generar y luego cargarlo a tu Arduino.
Archivos adjuntos
Paso 11: Conectar 2 pantallas
Conectar dos pantallas de 128 x 64 a tu proyecto es fácil.
Solo necesitas desoldar la resistencia de 0 Ohm de la dirección 0x78 y ponerla en 0x7A, y luego usar la dirección 0x3D en tu código en lugar de la 0x3C por defecto.
Te estarás preguntando por qué usamos las direcciones 0x3C y 0x3D y no las reales 0x78 y 0x7A. Arduino acepta direcciones de 7 bits y no las direcciones de hardware de 8 bits. Así que primero necesitamos convertir la dirección de 8 bits a binario y luego eliminar el bit menos significativo para obtener los 7 bits. Después convertimos los 7 bits a HEX para obtener las direcciones 0x3C o 0x3D que ingresas en tu código.
Primero, inicializa la pantalla dándole un nombre único:
Adafruit_SSD1306 display1(OLED_REST);
Adafruit_SSD1306 display2(OLED_REST);
Luego, en tu código usa display 1 y display 2 para llamar a las instrucciones begin con las direcciones de los dispositivos:
display1.begin(SSD1306_SWITCHCAPVCC, 0x3C); // display 1 op address 0x3C
display2.begin(SSD1306_SWITCHCAPVCC, 0x3D); // display 2 op address 0x3D
Eso es todo, ahora puedes hacer lo que quieras usando Display 1 o Display 2 en el resto de tu código. He proporcionado un ejemplo con este tutorial.
El cableado es exactamente igual al que hicimos antes; básicamente solo necesitas añadir otra pantalla a los mismos pines I2C del Arduino o NodeMCU. Según las direcciones, el MCU envía entonces los datos por la línea de datos I2C.
Archivos adjuntos
Paso 12: Conectar más de 2 pantallas
3 imágenes más
Ahora, ¿qué pasa si quieres conectar más de 2 pantallas?
Arduino tiene un número limitado de pines y, por lo tanto, no puedes tener más de cierta cantidad de shields conectados a él. Además, solo tiene un par de buses I2C.
Entonces, ¿cómo podemos conectar más de 2 pantallas I2C a un Arduino? El truco es usar un multiplexor TCA9548.
El TCA9548 permite que un solo microcontrolador se comunique con hasta ’64 sensores’, todos con la misma o diferente dirección I2C, asignando un canal único a cada sub-bus esclavo de sensor.
Cuando hablamos de enviar datos por 2 cables a múltiples dispositivos, necesitamos una forma de direccionarlos. Es lo mismo que el cartero que llega por una sola calle y deja los paquetes de correo en diferentes casas porque tienen distintas direcciones escritas en ellos.
El multiplexor se conecta a las líneas 3V3, GND, SDA y SCL del microcontrolador. Los sensores esclavos se conectan a uno de los ocho puertos esclavos SCL/SDA de la placa. Los canales se seleccionan enviando al TCA9548A su dirección I2C (0x70 {por defecto} – 0x77) seguida del número de canal (0b00000001 – 0b10000000). Podrías tener como máximo 8 de estos multiplexores conectados juntos en las direcciones 0x70-0x77 para controlar 64 de los mismos componentes con dirección I2C. Al conectar los tres bits de dirección A0, A1 y A2 a VIN puedes obtener distintas combinaciones de las direcciones. Explicaré esto en profundidad en mi próximo tutorial sobre la placa breakout TCA9548A. Por ahora, conectemos 8 OLED a esta placa y echemos un vistazo rápido al código.
Conexión:
VIN a 5V (o 3.3V)
GND a tierra
SCL al reloj I2C
SDA a los datos I2C
Luego cablea los sensores a VIN, GND y usa uno de los buses multiplexados SCn / SDn
Ahora, en el código empecemos incluyendo la librería “Wire” y definiendo la dirección del multiplexor.
#include “Wire.h”
#include
#define MUX_Address 0x70 // TCA9548A Encoders address
Luego necesitamos seleccionar el puerto con el que queremos comunicarnos y enviar los datos por él usando esta función:
void tcaselect(uint8_t i) {
if (i > 7) return;
Wire.beginTransmission(MUX_Address);
Wire.write(1 << i);
Wire.endTransmission();
}
A continuación, inicializaremos la pantalla en la sección setup llamando a “u8g.begin();” para cada pantalla conectada al MUX “tcaselect(i);”
Una vez inicializado, podemos hacer lo que queramos simplemente llamando a la función “tcaselect(i);” donde “i” es el valor del bus multiplexado y luego enviando los datos y el reloj según corresponda.
Archivos adjuntos
Paso 13: Ventajas y desventajas
La imagen de una OLED es hermosa. Sin embargo, las OLED también tienen
desventajas. Como las pantallas OLED contienen material orgánico, su vida útil es más corta que la de las pantallas LCD. Además, muchas pantallas OLED sufren de “burn-in” (quemado) después de mostrar la misma imagen durante mucho tiempo. Tras un burn-in, la imagen permanece en la pantalla incluso después de mostrar otra imagen. Así que asegúrate de refrescar la pantalla cada pocos segundos. El agua puede dañar al instante los materiales orgánicos de estas pantallas.
Ventajas
No necesitan retroiluminación
Las pantallas son muy delgadas y ligeras
Bajo consumo de energía
Los ángulos de visión son más amplios que en las LCD
El brillo y el contraste son excelentes
Alta velocidad y bajo tiempo de respuesta
Color negro profundo
Desventajas
Tecnología costosa
Ciclo de vida corto
Las OLED son más propensas al burn-in
Daño por agua
Paso 14: Errores comunes
Para concluir el tutorial, hablemos de algunos errores comunes
que la gente comete al usar estas pantallas:
– Verifica siempre tres veces los pines antes de usarla en tu proyecto
– Elige la dirección correcta de la librería en el archivo de cabecera y en tu código
#define SSD1306_I2C_ADDRESS 0x3C // in Adafruit_SSD1306.h
y
display.begin(SSD1306_SWITCHCAPVCC, 0x3C); // in your code
Si la dirección es incorrecta, la OLED no mostrará nada
– El tamaño de la pantalla debe cambiarse en el driver antes de poder usarla. Si no se cambia, obtendrás un mensaje de error al intentar verificar el código
#error (“Height incorrect, please fix Adafruit_SSD1306.h!”);
– Si usas NodeMCU, asegúrate de reemplazar el OLED_RESET de 4 a LED_BUILTIN
#define OLED_RESET LED_BUILTIN
He visto a gente hacer todo tipo de cosas usando esta pantalla OLED. Algunos incluso han hecho videojuegos y demás. Realmente no me interesa hacer un videojuego usando esta diminuta pantalla. Sin embargo, ahora te dejo para que explores tu imaginación y se te ocurran ideas asombrosas.
Paso 15: Enlaces
– Blog: http://diyfactory007.blogspot.com.au
– Añadir imagen: http://javl.github.io/image2cpp/
– Texto personalizado: http://oleddisplay.squix.ch/#/home
– Librería de pantalla de Adafruit: https://github.com/adafruit/Adafruit_SSD1306
– Librería GFX de Adafruit: https://github.com/adafruit/Adafruit-GFX-Library
– Librería u8glib: https://code.google.com/archive/p/u8glib/ o https://github.com/olikraus/u8glib
Si quieres usar la pantalla más pequeña, usa el valor por defecto 128_32; de lo contrario, para la pantalla más grande comenta el 128_32 y descomenta el 128X64 NO_ACK en tu código (solo descomenta el tipo de pantalla que estés usando) (las fuentes están en la librería de fuentes)
Archivos adjuntos
Artículo traducido al español. Autor original: Tarantula3. Fuente original: diyfactory007.blogspot.com.au