Llega un momento en la vida de un Maker que se aburre de mostrar información en una pantalla LCD y se pasa a un SSD1306 con una pantalla OLED Arduino y ESP8266 I2C.
Si todavía no te ha llegado ese momento, hoy probablemente tires todas tus pantallas LCD a un contenedor de reciclado de electrónica para sustituirlas por pantallas OLED con Arduino.
Se trata de pantallas que utilizan diodos orgánicos de emisor de luz capaces de consumir muy poca energía, son muy delgadas, se comunican por I2C o SPI y producen una imagen más brillante y nítida que una pantalla LCD.
Si todavía no tienes ni idea de cómo utilizar una pantalla OLED con Arduino o ESP8266 hoy te lo voy a explicar todo paso a paso.
Indice de contenidos
¿Qué es una pantalla OLED?
Antes de empezar hay que aclarar lo que significa OLED. Son las siglas en inglés de Organic Light-Emitting Diode que traducido sería diodo orgánico de emisión de luz.
Cuando lo leí por primera vez, no entendía muy bien a qué se refería con eso de orgánico. Lo asocié a algo vivo, a los organismos. Y en realidad tiene mucho que ver.
Las pantallas OLED están compuestas por láminas de materiales orgánicos como el carbón (de aquí el nombre de diodo orgánico). Estas láminas emiten luz cuando se les aplica electricidad entre ellos.
En realidad las láminas están colocadas entre dos conductores.
Una de las ventajas de las pantallas OLED con respecto a pantalla LCD es que no requieren de una luz de fondo ni de filtros.
Luego veremos que no tenga luz de fondo o backlight es muy importante ya que hace que su consumo sea muy reducido.
Esto hace que las pantallas OLED sean más eficientes en términos de energía, más fáciles de fabricar y mucho más finas. A parte pueden ser flexibles y transparentes.
En la actualidad se utilizan en multitud de dispositivos como televisores, teléfonos y, como no, para utilizar pantallas OLED con Arduino o ESP8266.
Sin duda alguna OLED es una tecnología puntera que en la actualidad está cambiando la forma en la que los dispositivos muestran información. Sin embargo todavía quedan muchos retos que superar.
En los próximos años veremos el alcance real de las pantallas OLED.
Como curiosidad sobre las pantallas OLED, los tres químicos que descubrieron los semiconductores orgánicos, Alan Heeger, Alan MacDiarmid y Hideki Shirakawa, recibieron el premio Nóbel en el año 2000 por su hazaña.
La primera empresa que comercializó una pantalla OLED fue Kodak con su cámara EasyShare LS633 en el año 2003.
Desde entonces ha llovido mucho y a día de hoy, las pantallas OLED se utilizan en muchos dispositivos e incluso tenemos pantallas OLED con Arduino y ESP8266. como veremos a continuación.
Controlador SSD1306 para pantalla OLED con Arduino y ESP8266
Las pantallas OLED no son más que eso, pantallas. Por si solas no hacen nada. Para poder mostrar datos e información en ellas se necesita un driver o controlador.
Normalmente viene todo ensamblado en un mismo módulo. Así es como lo encontrarás en las tiendas de electrónica. Sin embargo, debe quedar claro que en ese módulo está la pantalla OLED, el controlador y la electrónica necesaria para que todo funcione correctamente.
Normalmente estos módulos utilizan un controlador bastante conocido que se llama SSD1306. Pero pueden utilizar otro tipo de controladores. Se trata de un potente controlador OLED CMOS.
Básicamente lo que hace el SSD1306 es comunicar con el microcontrolador para obtener los datos y enviarlos a la pantalla OLED para que dibuje esos datos.
La comunicación entre el SSD1306 y el microcontrolador, ya sea un Arduino o un ESP8266, se realiza mediante SPI o I2C. Generalmente, la comunicación SPI es más rápida que la comunicación I2C. Por el contrario, la comunicación SPI requiere de más pines que la comunicación I2C.
Al final una cosa compensa a la otra. Puedes elegir una comunicación más rápida en detrimento del número de pines o puedes elegir liberar más pines en detrimento de la velocidad. No deja de ser una elección personal.
Gracias a que el SSD1306 es tan versátil, puedes encontrar pantallas OLED con Arduino con diferentes tamaños y colores.
Los tamaños más típicos son los siguientes:
* Hay incluso pantallas de 1,30″ de diagonal que utilizan otro controlador como el SH1106. También existen de tamaños superiores.
Respecto a los colores lo más típico es encontrar pantallas de un solo color sin embargo, hay de dos colores por ejemplo azul y amarillo. Estas son precisamente las que yo tengo.
Ten en cuenta una cosa, cuanto más grande es la pantalla, más consumirá. Si necesitas mostrar mucha información te recomiendo que utilices alguna pantalla TFT Nextion.
Siempre, absolutamente siempre, debes acudir a la hoja de características técnicas del componente para poder tener la información de primera mano. En el caso del SSD1306 la puedes encontrar aquí.
Algo a destacar es cómo alimentar el SSD1306 y la pantalla OLED. Aquí te dejo los rangos:
| Parámetro | Valor |
|---|---|
| Voltaje de operación SSD1306 | 1,65V a 3,3V |
| Voltaje de operación pantalla OLED | 7V a 15V |
Todo esto es posible porque gracias a los dobladores de tensión y los circuitos de bomba de carga que permiten obtener voltajes superiores al voltaje de alimentación.
A parte, los módulos de pantalla OLED integran un regulador de tensión o LDO. En concreto el que he encontrado en las pantallas que tengo por casa es el XC6206P332MR-G.
Este regulador permite un voltaje de entrada entre 1,8V y 6V y mantiene un voltaje de salida de 3,3V constante.
Gracias a toda esta electrónica se puede alimentar un módulo de pantalla OLED que utilice un controlador SSD1306 con una alimentación de 3,3V o de 5V. Lo que quiere decir que es compatible tanto para ESP8266 como para Arduino.
Visualización de gráficos en pantalla OLED
Voy a explicar por encima cómo funciona la pantalla OLED cuando muestra los datos. Si quieres profundizar más sobre este tema te recomiendo que te dirijas a la hoja de características técnicas.
Para mostrar los datos en la pantalla, el controlador SSD1306 tiene una memoria RAM gráfica que se llama GDDRAM (viene del inglés Graphic Display Data RAM) que ocupa 1 KB.
Esto equivale a 1.024 bytes o 8.192 bits que se distribuyen en la pantalla en una matriz de filas (páginas) y columnas (segmentos). En total hay 8 páginas (filas) y cada página tiene 128 segmentos (columnas) que, a su vez, cada segmento almacena 1 byte.
Esta distribución es válida para las pantallas de 128 x 64. Las pantallas OLED de 128 x 32 solo muestran 4 páginas que equivalen a medio KB de la memoria RAM del SSD1306.
Por lo tanto, tenemos una matriz de 128 columnas y 64 filas. Todo esto lo puedes ver en la programación donde te mostraré cómo poder recorrer con dos bucles for toda la pantalla.
Cada bit representa un píxel en la pantalla OLED y mediante la programación, se puede encender o apagar para que muestre cualquier información.
Pero no te asustes, no vamos a tener que trabajar a nivel de bit. De eso se encargan las librerías de Arduino y ESP8266. Pero antes de meternos de lleno en la programación, vamos a ver el pineado de las pantallas OLED.
Pineado módulo pantalla OLED con Arduino y ESP8266
La pantalla OLED que voy a mostrar a continuación es una pantalla que utiliza la interfaz I2C. En este tipo de pantallas vas a encontrar 4 pines.
- GND: pin de tierra.
- VCC: es el pin de alimentación. Se puede alimentar la pantalla entre 1,8V y 6V.
- SCL: es el pin de la señal de reloj de la interfaz I2C.
- SDA: es el pin de la señal de datos de la interfaz I2C.
Conexión pantalla OLED con Arduino I2C
El siguiente esquema te muestro cómo debes conectar la pantalla OLED con un Arduino UNO.
Si utilizas otro modelo de Arduino mira la relación de los pines en la siguiente tabla:
| Placa | SDA | SCL |
|---|---|---|
| Arduino Pro Mini | A4 | A5 |
| Arduino MEGA | 20 | 21 |
| Arduino DUE | 20 | 21 |
| Arduino Leonardo | 2 | 3 |
| Arduino Yun | 2 | 3 |
| Arduino Nano | A4 | A5 |
| Arduino MKR1000 | 11 | 12 |
Conexión pantalla OLED ESP8266 I2C
En el siguiente esquema te muestro cómo conectar una pantalla OLED con un ESP8266 I2C. He utilizado una placa NodeMCU aunque puedes utilizar cualquier otra placa basada en el ESP8266.
Si utilizas otra placa asegúrate que el SDA está conectado al pin GPIO4 y el SCL al pin GPIO5.
Ahora que lo tenemos todo conectado vamos a pasar a la programación.
Librerías pantalla OLED con Arduino y ESP8266
Lo primero que vamos a hacer es instalar las librerías. Vamos a necesitar dos: Adafruit_SSD1306 y Adfruit-GFX-Library.
Lo vamos a hacer como siempre lo hacemos cuando quieres instalar una librería de Arduino. Abre el gestor de librerías y busca SSD1306. Debes instalar la librería de Adafruit.
Una novedad que incorpora la versión 1.8.11 del IDE de Arduino es que cuando instalas una librería que tiene alguna dependencia, te muestra una pantalla donde te permite instalar las dependencias.
Cuando hablo de dependencias hablo de otras librerías que se utilizan dentro de la librería que estás instalando.
Si haces click en el botón de Install all instalará las dos librerías. Así es mucho más sencillo.
Estas dos librerías tienen propósitos diferentes. Vamos a ver por encima qué hacen cada una de ellas.
Librería Adafruit GFX
La puedes encontrar en el repositorio de la librería en GitHub. Es la librería gráfica es decir, la que se encarga de dibujar en la pantalla OLED. Proporciona una serie de gráficos primitivos como puntos, líneas, rectángulos, círculos, etc…
Para poder dibujar o pintar en la pantalla debe de combinarse con una librería de hardware específica para cada dispositivo. Por ejemplo, para dibujar en pantallas OLED hay que combinarla con la librería Adafruit SSD1306.
Librería Adafruit SSD1306
Esta librería es la específica para las pantallas OLED basadas en el controlador SSD1306. Funciona tanto para pantallas I2C como SPI.
Puedes ver el código y descargar esta librería desde el repositorio de GitHub. (Si quieres profundizar en el funcionamiento de GitHub entra aquí)
Adafruit invierte mucho tiempo y recursos en crear estas librerías y las libera para que todo el mundo las podamos utilizar. Una forma de poder contribuir con Adafruit es comprar sus componentes en tiendas online como Amazon. A parte de contribuir, también estarás comprando componentes de mucha calidad.
Las dos librerías ofrecen multitud de funciones que puedes utilizar en tus propias pantallas OLED con Arduino o ESP8266. A continuación te voy a ir mostrando varias de las funciones de esta librería pero no todas.
Todo el código que vamos a ver a continuación es compatible tanto para Arduino como para ESP8266.
Programación pantalla OLED con Arduino y ESP8266 I2C
Una vez montado el circuito e instalado las dos librerías ya se puede empezar a programar.
Vamos a empezar por un ejercicio muy sencillo que muestre un punto moviéndose por la pantalla. Esto te permitirá entender cómo funciona la programación de la pantalla OLED con Arduino.
Dibujar un un punto en una pantalla OLED con Arduino
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
#define __DEBUG__ #include <SPI.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> // Definir constantes #define ANCHO_PANTALLA 128 // ancho pantalla OLED #define ALTO_PANTALLA 64 // alto pantalla OLED // Objeto de la clase Adafruit_SSD1306 Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1); void setup() { #ifdef __DEBUG__ Serial.begin(9600); delay(100); Serial.println("Iniciando pantalla OLED"); #endif // Iniciar pantalla OLED en la dirección 0x3C if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { #ifdef __DEBUG__ Serial.println("No se encuentra la pantalla OLED"); #endif while (true); } } void loop() { // Recorrer pantalla for (int x = 0; x < ANCHO_PANTALLA; x++) { for (int y = 0; y < ALTO_PANTALLA; y++) { // Limpiar buffer display.clearDisplay(); // Dibujar un píxel display.drawPixel(x, y, SSD1306_WHITE); // Enviar a pantalla display.display(); } } } |
El código comienza con la típica directiva de pre-procesador para controlar el modo debug. Inmediatamente se importan todas las librerías necesarias.
Vamos a necesitar 2 constantes:
- ANCHO_PANTALLA: indica el ancho de la pantalla. Lo típico es que tenga 128.
- ALTO_PANTALLA: indica el alto de la pantalla. Los valores típicos son 64 y 32.
También hay que crear un objeto de la clase Adafruit_SSD1306. El constructor de esta clase admite 4 parámetros.
|
1 |
Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1); |
Donde:
- ANCHO_PANTALLA: es la constante donde se almacena el ancho de la pantalla.
- ALTO_PANTALLA: es la constante donde se almacena el alto de la pantalla.
- &Wire: el un puntero a la clase estática Wire.
- -1: es el pin de Arduino o ESP8266 que se utiliza para resetear la pantalla.
El último parámetro (-1) sólo se utiliza con pantallas que tienen un pin para resetear. Se debe conectar ese pin normalmente serigrafiado con RST al pin de Arduino o ESP8266 y luego poner en el constructor el número de pin utilizado.
Para iniciar la pantalla OLED en la función setup() hay que llamar a la función begin(…) de la clase Adafruit_SSD1306.
|
1 |
display.begin(SSD1306_SWITCHCAPVCC, 0x3C) |
Donde:
- SSD1306_SWITCHCAPVCC: indica que se activa el voltaje de 3,3V interno para la pantalla. Se puede utilizar una fuente externa utilizando la constante SSD1306_EXTERNALVCC.
- 0x3C: es la dirección I2C que utiliza la pantalla. Si no estás seguros te aconsejo que utilices este escáner I2C.
Ahora pasamos a la función loop() donde tienes dos bucles for anidados para recorrer la pantalla. Como ya te dije esta pantalla tiene 128 columnas y 64 filas.
Por eso el bucle exterior recorre el ancho (128) y el bucle interior recorre el alto (64).
Dentro lo único que hago es pintar un punto en la pantalla cada iteración de los dos bucles. Para pintar un punto (y cualquier cosa) hay que seguir un procedimiento.
- Limpiar el contenido del buffer de la pantalla es decir, poner todos los píxeles a off.
- Dibujar o pintar lo que quieras en la pantalla.
- Enviar los datos actuales a la RAM del SSD1306.
El primer paso se hace con la función display.clearDisplay() que no admite ningún parámetro. Si no haces esto, no borrarás la pantalla y escribirás sobre lo que ya esté dibujado.
La librería Adafruit SSD1306 por defecto carga el logotipo de Adafruit. Si no haces un display.clearDisplay() lo primero que verás será ese logotipo. Es normal, no te asustes si te pasa. Luego veremos cómo añadir nuestras propias imágenes.
El segundo paso, dibujar, puedes hacerlo con varias funciones. Por ejemplo, la función display,drawPixel(…) dibuja un pixel en la pantalla. Examinemos más en profundidad esta función.
|
1 |
display.drawPixel(x, y, SSD1306_WHITE) |
Donde:
- x: es la columna de entre 0 y 127 (128 columnas).
- y: es la fila de entre 0 y 63 (64 filas).
- SSD1306_WHITE: es el color del píxel. Este valor indica que está encendido y si lo queremos apagar, puedes poner SSD1306_BLACK.
El origen de coordenadas empieza arriba a la izquierda.
Si pruebas a cargar el código en la placa verás un punto que va recorriendo la pantalla de arriba a abajo y de izquierda a derecha. Ojo que es un punto muy pequeño.
El siguiente ejercicio lo que haremos será mostrar un texto en la pantalla OLED con Arduino.
Escribir texto en una pantalla OLED con Arduino
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
#define __DEBUG__ #include <SPI.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> // Definir constantes #define ANCHO_PANTALLA 128 // ancho pantalla OLED #define ALTO_PANTALLA 64 // alto pantalla OLED // Objeto de la clase Adafruit_SSD1306 Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1); void setup() { #ifdef __DEBUG__ Serial.begin(9600); delay(100); Serial.println("Iniciando pantalla OLED"); #endif // Iniciar pantalla OLED en la dirección 0x3C if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { #ifdef __DEBUG__ Serial.println("No se encuentra la pantalla OLED"); #endif while (true); } // Limpiar buffer display.clearDisplay(); // Tamaño del texto display.setTextSize(1); // Color del texto display.setTextColor(SSD1306_WHITE); // Posición del texto display.setCursor(10, 32); // Escribir texto display.println("¡¡Hola mundo!!"); // Enviar a pantalla display.display(); } void loop() {} |
El código es igual que en el ejercicio anterior lo único que he quitado todo lo que había dentro de la función loop() y ahora he metido nuevas líneas en la función setup().
Esto es precisamente lo que voy a analizar.
Empezamos limpiando el buffer con display.clearDisplay().
Las siguientes sentencias son las encargadas de escribir un texto en la pantalla y se hacen de siguiendo un orden.
Lo primero es establecer el tamaño con
|
1 |
display.setTextSize(1); |
El tamaño 1 indica que las letras ocupan una altura de 8 píxeles de la pantalla. Si pones 2 se multiplicará por dos el tamaño y ocuparán 16 píxeles. Y así sucesivamente.
Luego se establece el color.
|
1 |
display.setTextColor(SSD1306_WHITE); |
Si quieres que se vea utiliza SSD1306_WHITE y si quieres apagar los píxeles utiliza SSD1306_BLACK.
Para poder pintar el texto en la pantalla hay que situar el cursor. Eso se hace utilizando la siguiente función.
|
1 |
display.setCursor(10, 32); |
La posición indica dónde se sitúa la parte superior izquierda del texto es decir, si pones el cursor (0,0) el texto comenzará a pintarse a partir de las coordenadas (0,0) que se sitúan arriba y a la derecha.
Para escribir el texto en la pantalla OLED con Arduino hay que utilizar la función
|
1 |
display.println("¡¡Hola mundo!!"); |
Esta función hace lo mismo que cuando se utiliza con la clase Serial. Escribe la línea y si luego vuelves a utilizar la función display.print(…) o display.println(…), se escribirá en la siguiente línea.
Ahora prueba a cargar el código a la placa y mira el resultado en la pantalla.
¿Notas algo raro? Efectivamente, los signos de apertura de exclamación no los interpreta bien. ¿Por qué sucede esto?
Esto sucede porque no está interpretando correctamente este carácter ya que no es un carácter estándar. Para representar este tipo de caracteres es necesario hacerlo a través de su codificación ASCII.
En realidad se utiliza la página de código 437. Para mostrar este y otros caracteres tienes que escribir el siguiente código.
|
1 2 3 4 5 6 7 |
//Activar página de código 437 display.cp437(true); // Escribir el carácter ¡ dos veces display.write(173); display.write(173); // Escribir texto display.println("Hola mundo!!"); |
Lo primero es activar la página de código 437 llamando a la función display.cp437(true). Luego escribes el carácter a través de su código ASCII llamando a la función display.write(173) a la cual pasamos el código ASCII. Por último escribes el texto estándar display.println(«Hola mundo!!»).
Puedes consultar la tabla ASCII para conocer el código de cualquier carácter.
Ahora el resultado es el correcto.
Texto en movimiento en pantalla OLED con Arduino
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
#define __DEBUG__ #include <SPI.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> // Definir constantes #define ANCHO_PANTALLA 128 // ancho pantalla OLED #define ALTO_PANTALLA 64 // alto pantalla OLED // Objeto de la clase Adafruit_SSD1306 Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1); void setup() { #ifdef __DEBUG__ Serial.begin(9600); delay(100); Serial.println("Iniciando pantalla OLED"); #endif // Iniciar pantalla OLED en la dirección 0x3C if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { #ifdef __DEBUG__ Serial.println("No se encuentra la pantalla OLED"); #endif while (true); } // Limpir buffer display.clearDisplay(); // Tamaño del texto display.setTextSize(1); // Color del texto display.setTextColor(SSD1306_WHITE); // Posición del texto display.setCursor(10, 32); //Activar página de código 437 display.cp437(true); // Escribir el carácter ¡ dos veces display.write(173); display.write(173); // Escribir texto display.println("Hola mundo!!"); // Enviar a pantalla display.display(); delay(2000); // Mover texto de izquierda a derecha display.startscrollright(0x00, 0x0F); delay(5000); display.stopscroll(); // Mover texto de derecha a izquierda display.startscrollleft(0x00, 0x0F); delay(5000); display.stopscroll(); // Mover texto en diagonal hacia la derecha display.startscrolldiagright(0x00, 0x07); delay(5000); display.stopscroll(); // Mover texto en diagonal hacia la izquierda display.startscrolldiagleft(0x00, 0x07); delay(5000); display.stopscroll(); } void loop() {} |
Existen cuatro movimientos de texto.
- Movimiento de izquierda a derecha
- Movimiento de derecha a izquierda
- Movimiento diagonal hacia la derecha
- Movimiento diagonal hacia la izquierda
Empecemos con el movimiento de izquierda a derecha. Este movimiento mueve un texto de izquierda a derecha. Cuando sale por la derecha aparece de nuevo por la izquierda.
No puedes controlar hasta dónde puedes mover salvo por el tiempo.
Se utiliza la siguiente función.
|
1 |
display.startscrollright(inicio, fin); |
Donde:
- inicio: es la primera fila que se moverá.
- fin: es la última fila que se moverá.
Para mover todas las filas de la pantalla inicio tiene que ser igual a 0x00 y fin tiene que ser igual a 0x0F (son números en hexadecimal).
Si quieres mover unas filas concretas y no todas las filas tienes que indicar la fila de inicio y la fila de final. Puedes hacerlo con números hexadecimales o con números decimales. Si por ejemplo quieres mover la fila 2 y 3 tendrás que poner
|
1 |
display.startscrollright(2, 3); |
Para mover de derecha a izquierda funciona exactamente igual pero se utiliza la siguiente función
|
1 |
display.startscrollleft(inicio, fin); |
Donde:
- inicio: es la primera fila que se moverá.
- fin: es la última fila que se moverá.
Para mover en diagonal pasa lo mismo. Puedes mover de izquierda a derecha en diagonal
|
1 |
display.startscrolldiagright(inicio, fin); |
Donde:
- inicio: es la primera fila que se moverá.
- fin: es la última fila que se moverá.
O puedes mover de derecha a izquierda
|
1 |
display.startscrolldiagleft(inicio, fin); |
Donde:
- inicio: es la primera fila que se moverá.
- fin: es la última fila que se moverá.
Para mover todas las filas en diagonal tienes que pasar como parámetro inicio 0x00 y como fin 0x07.
Cuando utilizas una de estas funciones, se moverá cualquier texto que hayas pintado en la pantalla. Como has visto antes puedes mover unas filas concretas o todas las filas de la pantalla.
Dibujar figuras en pantalla OLED con Arduino
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
#define __DEBUG__ #include <SPI.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> // Definir constantes #define ANCHO_PANTALLA 128 // ancho pantalla OLED #define ALTO_PANTALLA 64 // alto pantalla OLED // Objeto de la clase Adafruit_SSD1306 Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1); void setup() { #ifdef __DEBUG__ Serial.begin(9600); delay(100); Serial.println("Iniciando pantalla OLED"); #endif // Iniciar pantalla OLED en la dirección 0x3C if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { #ifdef __DEBUG__ Serial.println("No se encuentra la pantalla OLED"); #endif while (true); } // Limpir buffer display.clearDisplay(); // Dibujar línea horizontal display.drawLine(0, 18, display.width(), 18, SSD1306_WHITE); // Dibujar línea vertical display.drawLine(63, 0, 63, display.height(), SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Limpir buffer display.clearDisplay(); // Dibujar un rectángulo display.drawRect(10, 18, 20, 28, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Rellenar rectángulo display.fillRect(10, 18, 20, 28, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Limpir buffer display.clearDisplay(); // Dibujar un ciículor display.drawCircle(64, 32, 10, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Rellenar cículo display.fillCircle(64, 32, 10, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Limpir buffer display.clearDisplay(); // Dibujar un rectángulo redondeado display.drawRoundRect(10, 18, 20, 28, 5, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Rellenar rectángulo redondeado display.fillRoundRect(10, 18, 20, 28, 5, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Limpir buffer display.clearDisplay(); // Dibujar un rectángulo redondeado display.drawTriangle(10, 18, 50, 18, 30, 58, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); // Rellenar rectángulo redondeado display.fillTriangle(10, 18, 50, 18, 30, 58, SSD1306_WHITE); // Enviar a pantalla display.display(); delay(2000); } void loop() {} |
Todas las figuras geométricas salvo la línea tienen una función para dibujar el contorno y otra función para dibujar la figura rellena.
Dibujar una línea en pantalla OLED con Arduino
Vamos a comenzar dibujando una línea.
|
1 |
display.drawLine(x0, y0, x1, y1, color); |
Donde:
- x0: es la coordenada X del punto de inicio.
- y0: es la coordenada Y del punto de inicio.
- x1: es la coordenada X del punto final.
- y1: es la coordenada Y del punto final.
- color: normalmente se utiliza SSD1306_WHITE.
La librería Adafruit SSD1306 tiene la función display.width() que devuelve el ancho y la función display.height() que devuelve el alto de la pantalla.
Para hacer líneas horizontales y0 tiene que ser igual a y1. Para hacer líneas verticales x0 tiene que ser igual a y1.
En la librería Adafruit SSD1306 puedes acceder a las funciones drawFastHLine(x0, y0, ancho, color) y drawFastVLine(x0, y0, alto, color) que dibujan líneas horizontales y verticales más rápido.
Dibujar un rectángulo en pantalla OLED con Arduino
Para dibujar el contorno de un rectángulo utiliza la siguiente función.
|
1 |
display.drawRect(x0, y0, w, h, SSD1306_WHITE); |
Para dibujar un rectángulo relleno utiliza la siguiente función.
|
1 |
display.fillRect(x0, y0, w, h, SSD1306_WHITE); |
Donde
- x0: es la coordenada X del punto de inicio.
- y0: es la coordenada Y del punto de inicio.
- w: ancho del rectángulo.
- h: alto del rectángulo.
- color: normalmente se utiliza SSD1306_WHITE.
Dibujar un círculo en pantalla OLED con Arduino
Para dibujar el contorno de un círculo utiliza la siguiente función.
|
1 |
display.drawCircle(x0, y0, radio, color); |
Para dibujar un cículo relleno utiliza la siguiente función.
|
1 |
display.fillCircle(x0, y0, radio, color); |
Donde
- x0: es la coordenada X del centro.
- y0: es la coordenada Y del centro.
- radio: es el radio del círculo.
- color: normalmente se utiliza SSD1306_WHITE.
Dibujar rectángulo redondeado en pantalla OLED con Arduino
Para dibujar un rectángulo con las esquinas redondeadas utiliza la siguiente función.
|
1 |
display.drawRoundRect(x0, y0, w, h, radio, color); |
Para dibujar un rectángulo con las esquinas redondeadas relleno utiliza la siguiente función.
|
1 |
display.fillRoundRect(x0, y0, w, h, radio, color); |
Donde
- x0: es la coordenada X del punto de inicio.
- y0: es la coordenada Y del punto de inicio.
- w: ancho del rectángulo.
- h: alto del rectángulo.
- radio: radio de la curva de las esquinas del rectángulo. Cuanto más grande el radio más redondeadas serán las esquinas.
- color: normalmente se utiliza SSD1306_WHITE.
Dibujar un triángulo en una pantalla OLED con Arduino
Para dibujar un triángulo utiliza la siguiente función.
|
1 |
display.drawTriangle(x0, y0, x1, y1, x2, y2, color); |
Para dibujar un triángulo relleno utiliza la siguiente función.
|
1 |
display.fillTriangle(x0, y0, x1, y1, x2, y2, color); |
Donde:
- x0: es la coordenada X del primer vértice del triángulo.
- y0: es la coordenada Y del primer vértice del triángulo.
- x1: es la coordenada X del segundo vértice del triángulo.
- y1: es la coordenada Y del segundo vértice del triángulo.
- x2: es la coordenada X del tercer vértice del triángulo.
- y2: es la coordenada Y del tercer vértice del triángulo.
- color: normalmente se utiliza SSD1306_WHITE.
Con esto doy por terminadas las figuras geométricas. Dentro de la librería Adafruit GFX puedes encontrar más funciones pero todas estas que hemos visto son las más importantes.
Mostrar la hora en tiempo real en pantalla OLED con Arduino
La idea detrás de esta sección no es mostrar cómo utilizar un reloj RTC con Arduino. La idea es enseñarte cómo mostrar información que se actualiza cada cierto intervalo de tiempo en la pantalla OLED.
Te puede servir para mostrar un reloj, un cronómetro o cualquier otra información relativa al tiempo.
En concreto voy a mostrar la información de la función millis() formateada en segundos, minutos, horas y días.
Este sería el código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
#define __DEBUG__ #include <SPI.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> // Definir constantes #define ANCHO_PANTALLA 128 // ancho pantalla OLED #define ALTO_PANTALLA 64 // alto pantalla OLED // Objeto de la clase Adafruit_SSD1306 Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1); // Temporizador unsigned long marcaTiempoDate = 0; unsigned long tiempoRefreshDate = 1000; // Variables almacena tiempo millis int dias; int horas; int minutos; int segundos; // Cadena para almacenar texto formateado char cadenaTiempo[16]; /* Función que convierte millis() a segundos, minutos, horas y días Almacena la información en variables globales */ void millisToTiempo(unsigned long valMillis) { // Se obtienen los segundos valMillis = valMillis / 1000; segundos = valMillis % 60; // se divide entre segundos por minuto y te quedas con el resto minutos = valMillis / 60; // Se convierte a minutos minutos = minutos % 60; // se divide entre minutos por hora y te quedas con el resto horas = (valMillis / 60) / 60; // Se convierte en horas horas = horas % 24; // se divide entre horas al día y te quedas con el resto dias = ((valMillis / 60) / 60) / 24; // Se convierte en días #ifdef __DEBUG__ Serial.print("Segundos = "); Serial.println(valMillis); Serial.print(dias); Serial.print(":"); Serial.print(horas); Serial.print(":"); Serial.print(minutos); Serial.print(":"); Serial.println(segundos); #endif } void setup() { #ifdef __DEBUG__ Serial.begin(9600); delay(100); Serial.println("Iniciando pantalla OLED"); #endif // Iniciar pantalla OLED en la dirección 0x3C if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { #ifdef __DEBUG__ Serial.println("No se encuentra la pantalla OLED"); #endif while (true); } } void loop() { // Protección overflow if (millis() < marcaTiempoDate) { marcaTiempoDate = millis(); } // Comprobar is hay que actualizar temperatura if (millis() - marcaTiempoDate >= tiempoRefreshDate) { // Actualizar variables de tiempo millisToTiempo(millis()); // Componer cadena con la información del tiempo formateada sprintf(cadenaTiempo, "%02d:%02d:%02d:%02d", dias, horas, minutos, segundos); // Marca de tiempo marcaTiempoDate = millis(); } // Limpiar buffer pantalla display.clearDisplay(); // Dibujar línea horizontal display.drawLine(0, 18, display.width(), 18, SSD1306_WHITE); // Dibujar texto tiempo display.setTextSize(1); display.setTextColor(SSD1306_WHITE); display.setCursor(0, 0); display.println(cadenaTiempo); // Enviar a pantalla display.display(); } |
El código siempre empieza igual con la importación de librerías y configuración de la pantalla OLED con Arduino.
En esta nueva versión he creado dos variables para gestionar el temporizador, marcaTiempoDate y tiempoRefreshDate.
Cuatro variables del tipo int que almacenan los días, horas, minutos y segundos que han transcurrido desde que se inició el programa de Arduino. Esta información se obtiene de la función millis().
Por último una cadena de caracteres para formatear la información del tiempo transcurrido para mostrarlo por pantalla.
La función millisToTiempo(millis()) calcula los días, horas, minutos y segundos que han transcurrido desde que se inició el programa. Recibe un único parámetro que es el valor de la función millis().
Dentro de la función loop() he creado un temporizador para que cada segundo obtenga los nuevos valores de días, horas, minutos y segundos. Luego se formatea con la función sprintf para que siempre tengan dos dígitos y que estén separados por dos puntos (:).
|
1 |
sprintf(cadenaTiempo, "%02d:%02d:%02d:%02d", dias, horas, minutos, segundos); |
Por último muestro la información en la pantalla OLED haciendo uso de las funciones que hemos visto ya, drwaLine para pintar una línea horizontal y println para mostrar el texto.
Si cargas el código a la placa verás algo parecido a esto.
Ya por último vamos a ver algo muy interesante que nos permiten hacer las pantallas OLED con Arduino, mostrar imágenes.
Cómo mostrar imágenes en pantalla OLED con Arduino
Mostrar imágenes en una pantalla OLED con Arduino es bastante sencillo. El único inconveniente es que el programa que conozco para convertir una imagen bitmap en un formato C para aplicaciones embebidas o para microcontroladores, está solo para Windows.
Bueno, realmente está en cualquier plataforma porque se trata de software libre. Lo que pasa es que si quieres utilizarlo en Linux tienes que descargarlo y compilar el código fuente.
Tomo nota porque me interesa este tema y creo que sería factible hacer un código simple que haga lo mismo pero en Python y que sea multiplataforma.
El software que vamos a utilizar para hacer la conversión se llama lcd-image-converter y lo puedes descargar desde aquí.
Descargas un archivo .zip que en el momento en que estoy escribiendo estas líneas, la versión más estable es la 20190317.
Una vez descargado descomprime el archivo ZIP. Encontrarás 4 archivos. El que nos interesa es el ejecutable lcd-image-converter.exe. Este será el que ejecutemos.
Pero antes, hay que adaptar la foto. No se puede subir cualquier foto, tiene que ser una foto BMP monocromático. Para crear este tipo de imágenes abre el Paint de Windows, por ejemplo, y carga la imagen.
Vamos a trabajar con el logotipo de Arduino
Redimensiona la imagen. No tiene porque ocupar toda la pantalla (128 por 64 píxeles). Lo que tiene que respetar es que no se salga de 128 de ancho y de 64 de alto.
Como mi pantalla tiene dos colores, voy a utilizar una imagen que entre en la parte azul que mide 128 por 46. Así que redimensiono el logotipo para que entre en ese rango.
El resultado es que se redimensiona en 69 por 46 píxeles. Esta imagen hay que guardarla como un BMP monocromático.
Como puedes comprobar se pierde bastante información.
Ahora abre el programa lcd-image-converter. En la pantalla que aparece pulsa New Image.
Te pedirá un nombre. Pon el que quieras.
Ahora abre la opción del menú Options/Conversion
Esto abre una nueva pantalla de configuración. En la opción de Scanning selecciona Top to Bottom y Forward.
En la opción de Preprocessing selecciona Monochrome y Diffuse Dither. Y luego pulsa OK.
Carga la imagen desde la opción del menú Image/Import…
Y una vez esté cargada ya la puedes convertir a código C para cargarla en el programa de Arduino. Eso se hace con la opción del menú File/Convert… donde abrirá una nueva ventana para que selecciones la carpeta donde guardar el archivo con extensión .c
Abre el archivo con un editor de textos cualquiera. Puede servir el Bloc de notas pero te recomiendo que utilices el Sublime Text por ejemplo. Tienes que tener algo parecido a esto
Luego volveremos a este archivo. Ahora vamos a ver el código que necesitamos para poder mostrar una imagen en una pantalla OLED Arduino.
Programación para mostrar imagen en pantalla OLED con Arduino
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
#define __DEBUG__ #include <SPI.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> // Definir constantes #define ANCHO_PANTALLA 128 // ancho pantalla OLED #define ALTO_PANTALLA 64 // alto pantalla OLED // Objeto de la clase Adafruit_SSD1306 Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1); static const unsigned char PROGMEM datos_imagen[414] = { 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xf0, 0x03, 0xff, 0xff, 0xfe, 0x00, 0x7f, 0xf8, 0xff, 0xc0, 0x00, 0x7f, 0xff, 0xf0, 0x00, 0x1f, 0xf8, 0xff, 0x00, 0x00, 0x1f, 0xff, 0xc0, 0x00, 0x07, 0xf8, 0xfc, 0x00, 0x00, 0x0f, 0xff, 0x80, 0x00, 0x01, 0xf8, 0xf8, 0x00, 0x00, 0x03, 0xff, 0x00, 0x00, 0x00, 0xf8, 0xf0, 0x03, 0xf8, 0x01, 0xfc, 0x00, 0xff, 0x00, 0x78, 0xf0, 0x1f, 0xfe, 0x00, 0xfc, 0x03, 0xff, 0xc0, 0x38, 0xe0, 0x3f, 0xff, 0x80, 0xf8, 0x0f, 0xff, 0xe0, 0x38, 0xc0, 0x7f, 0xff, 0xc0, 0x70, 0x1f, 0xff, 0xf0, 0x18, 0xc0, 0xff, 0xff, 0xe0, 0x20, 0x3f, 0xff, 0xf8, 0x18, 0xc1, 0xff, 0xff, 0xf0, 0x00, 0x7f, 0xff, 0xfc, 0x08, 0x81, 0xff, 0xff, 0xf8, 0x00, 0xff, 0xc7, 0xfc, 0x08, 0x83, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xc7, 0xfe, 0x08, 0x83, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xc7, 0xfe, 0x08, 0x83, 0xf0, 0x01, 0xfe, 0x03, 0xfe, 0x00, 0xfe, 0x08, 0x83, 0xf0, 0x01, 0xfe, 0x03, 0xfe, 0x00, 0xfe, 0x08, 0x83, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xc7, 0xfe, 0x08, 0x83, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xc7, 0xfe, 0x08, 0x83, 0xff, 0xff, 0xf8, 0x00, 0xff, 0xc7, 0xfe, 0x08, 0x81, 0xff, 0xff, 0xf8, 0x00, 0x7f, 0xff, 0xfc, 0x08, 0xc1, 0xff, 0xff, 0xf0, 0x20, 0x7f, 0xff, 0xfc, 0x18, 0xc0, 0xff, 0xff, 0xe0, 0x30, 0x3f, 0xff, 0xf8, 0x18, 0xc0, 0x7f, 0xff, 0xc0, 0x70, 0x1f, 0xff, 0xf0, 0x18, 0xe0, 0x3f, 0xff, 0x80, 0xf8, 0x0f, 0xff, 0xe0, 0x38, 0xf0, 0x0f, 0xfe, 0x01, 0xfc, 0x03, 0xff, 0x80, 0x78, 0xf8, 0x03, 0xf8, 0x03, 0xfe, 0x00, 0xfe, 0x00, 0x78, 0xfc, 0x00, 0x00, 0x07, 0xff, 0x00, 0x00, 0x00, 0xf8, 0xfe, 0x00, 0x00, 0x0f, 0xff, 0x80, 0x00, 0x03, 0xf8, 0xff, 0x00, 0x00, 0x1f, 0xff, 0xc0, 0x00, 0x07, 0xf8, 0xff, 0xc0, 0x00, 0x7f, 0xff, 0xf0, 0x00, 0x1f, 0xf8, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xfe, 0x00, 0xff, 0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xf8, 0xff, 0xcf, 0x07, 0x07, 0x7b, 0x03, 0x3b, 0x07, 0xf8, 0xff, 0x87, 0x73, 0x73, 0x7b, 0xcf, 0x3b, 0x73, 0xf8, 0xff, 0xb7, 0x73, 0x7b, 0x7b, 0xcf, 0x1a, 0x7b, 0xf8, 0xff, 0xb7, 0x07, 0x7b, 0x7b, 0xcf, 0x5a, 0x7b, 0xf8, 0xff, 0x33, 0x0f, 0x7b, 0x7b, 0xcf, 0x4a, 0x7b, 0xf8, 0xff, 0x03, 0x67, 0x7b, 0x7b, 0xcf, 0x62, 0x7b, 0xf8, 0xff, 0x73, 0x73, 0x73, 0x73, 0xcf, 0x63, 0x33, 0xf8, 0xfe, 0x79, 0x33, 0x07, 0x07, 0x03, 0x73, 0x07, 0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8 }; void setup() { #ifdef __DEBUG__ Serial.begin(9600); delay(100); Serial.println("Iniciando pantalla OLED"); #endif // Iniciar pantalla OLED en la dirección 0x3C if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { #ifdef __DEBUG__ Serial.println("No se encuentra la pantalla OLED"); #endif while (true); } // Clear the buffer. display.clearDisplay(); // Draw bitmap on the screen display.drawBitmap(29, 18, datos_imagen, 69, 46, SSD1306_WHITE); display.display(); } void loop() {} |
Vamos a empezar por la imagen. Se almacena en la variable datos_imagen que es una constante unsigned char que se almacena en la memoria Flash. Por eso tiene el modificador PROGEM.
¿De dónde se obtienen los datos de esta variable? Del archivo con extensión .c que has generado con el software lcd-image-converter. Si lo abres, podrás ver el siguiente código.
Eso es lo que tienes que copiar en el código de arriba. Además tienes que poner el tamaño del array que viene en el archivo .c.
Luego, en la función setup() para mostrar la imagen se utiliza la siguiente función.
|
1 |
display.drawBitmap(x0, y0, datos_imagen, ancho, alto, color); |
- x0: coordenada X donde empieza a dibujarse la imagen.
- y0: coordenada Y donde empieza a dibujarse la imagen.
- datos_imagen: la información de la imagen obtenida de lcd-image-converter.
- ancho: ancho de la imagen.
- alto: alto de la imagen.
- color: normalmente se utiliza SSD1306_WHITE.
Para obtener los datos del ancho y el alto te puedes fijar en el archivo .c en la parte de abajo.
Ahora solo queda una cosa y es cargar el código en el Arduino. Obtendrás un resultado parecido a la siguiente imagen.
Y con esto doy por finalizado este tutorial. Si tienes alguna duda o alguna pregunta puedes dejar tus comentarios justo aquí abajo. Gracias.
