Interfaz de pantalla oled con nodemcu esp8266: visualización de imagen de mapa de bits en oled

En este tutorial interactuaremos la pantalla OLED con NodeMCU ESP8266. NodeMCU es una plataforma IoT de código abierto que incluye firmware que se ejecuta en el SoC Wi-Fi ESP8266 habilitado para Wi-Fi de bajo costo de Espressif Systems. Tiene pines GPIO para conectar otros periféricos y admite comunicación en serie mediante pines SPI, I2C y UART. También tiene pines para ADC y PWM. Anteriormente conectamos OLED con otro microcontrolador, incluido el controlador de la familia ESP (ESP32):

Interfaz de pantalla OLED SSD1306 con Raspberry Pi
Interfaz de pantalla OLED SSD1306 con Arduino
Construya un reloj inteligente interconectando la pantalla OLED con un teléfono Android usando Arduino
Reloj de Internet usando ESP32 y pantalla OLED

En este tutorial usaremos el protocolo SPI para conectar la pantalla OLED monocromática de 7 pines SSD1306 0.96 con NodeMCU y aprenderemos a mostrar imágenes en la pantalla OLED con NodeMCU ESP8266.

Pantalla OLED

El diodo emisor de luz orgánico (OLED) es un tipo de diodo emisor de luz donde una capa emisora de luz que está hecha de un compuesto orgánico emite luz cuando se suministra corriente eléctrica. Esta capa se coloca entre dos electrodos. Esta tecnología se usa en pantallas de visualización como computadoras, televisores, teléfonos inteligentes, etc. Las pantallas OLED tienen su propia luz y no necesitan luz de fondo como en LCD, por lo tanto, son energéticamente eficientes y se usan con muchos microcontroladores. Una ventaja más de utilizar pantallas OLED en lugar de LCD es la visualización de gráficos grandes y de mejor calidad en OLED. Obtenga más información sobre la tecnología de pantalla OLED aquí.

Hay varios tipos de pantallas OLED disponibles en el mercado. Estas pantallas se caracterizan por el color, el número de pines, el controlador IC y el tamaño de la pantalla. En función del color, los OLED están disponibles en azul monocromo, blanco monocromo y color amarillo / azul. Y sobre la base de la comunicación, están disponibles principalmente dos tipos de OLED: 3 pines y 7 pines. El OLED de 3 pines se puede usar en el modo de comunicación I2C y el OLED de 7 pines se puede usar en el modo SPI o en el modo I2C.

En este tutorial usaremos una pantalla OLED monocromática de 7 pines SSD1306 de 0.96 ”que tiene 128 píxeles de ancho y 64 píxeles de largo. Esta pantalla puede funcionar en los protocolos de comunicación SPI e I2C. Usaremos el protocolo SPI en este tutorial. SSD1306 IC está presente en este OLED que ayuda a mostrar los píxeles en la pantalla.

Componentes requeridos

Pantalla OLED monocromática de 7 pines SSD1306 de 0,96 "
NodeMCU ESP8266
Cable micro USB
Tablero de circuitos
Cables de puente macho a macho

Conexiones de clavija SPI entre NodeMCU y pantalla OLED

A continuación se muestra el diagrama de circuito para conectar la pantalla OLED de 7 pines con NodeMCU para comunicarse mediante el protocolo de comunicación en serie SPI.

La siguiente tabla muestra las conexiones entre la pantalla OLED y NodeMCU ESP8266. El pin GND va a NodeMCU GND, el pin VDD se puede conectar a 3.3V o 5V, SCK es el pin de reloj en la pantalla OLED que está conectado a D5 de NodeMCU para el reloj SPI. El pin SDA que es el pin MOSI en OLED de la interfaz SPI va a D7 de NodeMCU. El pin RESET va a D3. DC, el pin de comando de datos está conectado a D2 de NodeMCU. El último pin es CS va a D8, selección de chip de NodeMCU.

No.	Pantalla Oled	NodeMCU
1	GND	GND
2	VDD	3,3 V
3	SCK	D5
4	MOSI (SPI) o SDA (I2C)	D7
5	REINICIAR	D3
6	corriente continua	D2
7	CS	D8

Aquí usaremos la biblioteca " Adafruit _SSD1306.h" y " Adafruit_GFX.h " para la interfaz OLED con NodeMCU. Abra Arduino IDE e instale la última versión de Arduino IDE ( Sketch> Incluir biblioteca> Administrar bibliotecas o Ctrl + Shift_I ).

Dado que el tamaño de píxel de nuestra identificación de pantalla OLED es 128x64, tenemos que hacer un cambio en el archivo de encabezado de Adafruit_SSD1306. Abra las bibliotecas de Arduino, vaya a Adafruit_SSD1306 y abra su archivo de encabezado ( Adafruit _SSD1306.h ). Comente la línea “ #define SSD1306_128_32 ” y descomente la línea “#define SSD1306_128_64 ” como se muestra en la imagen de abajo y luego guarde el archivo. De forma predeterminada, esta biblioteca viene con "# define SSD1306_128_32 ".

Finalmente cambie los números de pin en el ejemplo de Adafruit SSD1306 “ ssd1306_128x64_spi ” de acuerdo con la tabla que se muestra arriba. Ahora, cuando ejecute el boceto después de realizar la conexión adecuada de la pantalla OLED con NodeMCU, verá el logotipo de Adafruit en la pantalla OLED, que se guarda de forma predeterminada en la biblioteca. Después del logotipo de Adafruit, muestra muchos otros gráficos como líneas, rectángulos, triángulos, círculos, cadenas, números, animaciones y mapas de bits. Aquí, en este tutorial, aprenderemos cómo mostrar cualquier imagen en OLED con NodeMCU ESP8266.

Programación de NodeMCU para interfaz OLED

Como siempre se proporciona el código completo al final, aquí hemos explicado el código en detalle.

Inicie el código importando las bibliotecas necesarias. Como estamos usando el protocolo SPI, importaremos la biblioteca "SPI.h" y también importaremos "Adafruit_GFX.h" y "Adafruit_SSD1306.h" para la pantalla OLED.

#incluir #incluir #incluir

Nuestro tamaño OLED es 128x64, por lo que estamos configurando el ancho y la altura de la pantalla en 128 y 64 respectivamente. Por lo tanto, defina las variables para los pines OLED conectados a NodeMCU para la comunicación SPI.

#define SCREEN_WIDTH 128 // Ancho de la pantalla OLED, en píxeles #define SCREEN_HEIGHT 64 // Altura de la pantalla OLED, en píxeles // Declaración para la pantalla SSD1306 conectada mediante el software SPI (caso predeterminado): #define OLED_MOSI D7 #define OLED_CLK D5 #define OLED_DC D2 #define OLED_CS D8 #define OLED_RESET D3 Pantalla Adafruit_SSD1306 (SCREEN_WIDTH, SCREEN_HEIGHT, OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);

Inicialice la pantalla OLED usando SSD1306_SWITCHCAPVCC para generar 3.3V internamente para inicializar la pantalla.

if (! display.begin (SSD1306_SWITCHCAPVCC)) { Serial.println (F ("Falló la asignación SSD1306")); para(;;); // No continúes, repite para siempre }

La visualización de la pantalla OLED se borra antes de mostrar cualquier cosa llamando a la función display.clearDisplay (). Nos fijamos el tamaño de la fuente a 2 llamando a la función SetTextSize (font-size), y establecemos el color del texto y la posición del cursor mediante el uso de SetTextColor y setCursor función . El comando Display.display () se utiliza para transferir datos a la memoria interna del controlador SSD1306. Después de la transferencia, el píxel aparece en la pantalla. Ahora podemos empezar a desplazar el texto de varias formas llamando a display.startscrollright (x-pos, y-pos) y display.startscrollleft (x-pos, y-pos) por el tiempo dado en la función de retardo. El desplazamiento del texto se puede detener usando la función display.stopscroll ().

anular texto de desplazamiento de pruebas (vacío) {display.clearDisplay (); // limpia la pantalla de visualización del OLED display.setTextSize (2); // Dibujar texto en escala 2X display.setTextColor (WHITE); display.setCursor (0, 0); display.println (F ("CIRCUITO")); display.println (F ("DIGEST")); display.display (); // Muestra el retraso del texto inicial (100); // Desplácese en varias direcciones, haciendo una pausa en el medio: display.startscrollright (0x00, 0x0F); retraso (2000); display.stopscroll (); retraso (1000); display.startscrollleft (0x00, 0x0F); retraso (2000); display.stopscroll (); retraso (1000); display.startscrolldiagright (0x00, 0x07); retraso (2000); display.startscrolldiagleft (0x00, 0x07); retraso (2000); display.stopscroll (); retraso (1000); }

Llamamos a la función display.drawBitmap () que toma 6 parámetros (coordenada x, coordenada y, matriz de mapa de bits, ancho, alto y color) para dibujar la imagen en OLED. Dado que nuestro tamaño de pantalla es 128x64, establecemos el ancho y el alto en 128 y 64 respectivamente. Aquí, la matriz de mapa de bits contiene la información de píxeles para dibujar el píxel en la pantalla para crear la imagen. Esta matriz de mapa de bits se puede generar en línea, como se explica a continuación, o hay muchos programas disponibles para convertir imágenes en una matriz de mapa de bits.

const unsigned char myBitmap PROGMEM = { 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf7, 0xc0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xffx, 0xff, 0xff,, 0xff, 0xff, 0xff, 0xc7, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0x01, 0xc0x, 0x00f,, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x0F, 0x03, 0xff, 0xC0, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1e, 0x03, 0x3f, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x3e, 0x03, 0x3f, 0xfc, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x3c, 0x03, 0x7fx, 0xfe, 0xff, 0x7fx, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7c, 0x03, 0xf0, 0x3f, 0x83, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x78, 0x00, 0xc0, 0x0f, 0xc1, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xf8, 0x00, 0x00, 0x07, 0xe0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xf0, 0x00, 0x00, 0x03, 0xf8, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xfc, 0x01 0x00, 0x00, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x03, 0xe0, 0x00, 0x0f, 0x00, 0x7e, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x07, 0xc0, 0x3f, 0xffx, 0xfx80, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7f, 0xf9, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xf9, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xff, 0x80, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x01, 0xf0, 0x1f, 0x80, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0x, 03x00, 0xe, 0x06, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x03, 0xc0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x07, 0xc0, 0x00, 0x00x0, 0x00, 0x00x0 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0x80, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80 0x0f, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0x00, 0x80, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x1e, 0x01, 0xe0, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x0x1e, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3c, 0x03, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x7c, 0x03, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xe0, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0xc0, 0x00, 0x00, 0x00, 0x00 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x01, 0xf0, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80 0x03, 0xb0, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0x18, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xbc, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x01ff, 0xc0, 0x00x, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1f, 0xff, 0x00, 03x00, 0xff, 0x00, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x07, 0xfc, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x03, 0xf0, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x01, 0xc0, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x03x, 0xff, 0xf8, 0x03x, 0xff 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xff, 0xe0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x3f, 0xe0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x0e, 0x30, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x07, 0x70, 0x00, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x03, 0xe0, 0x1b, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x01, 0xc0, 0x7f, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0x00, 0xe0x 0x7f, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x67, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x66, 0x00, 0x1fx, 0xff, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x7e, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3c, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff }; display.drawBitmap (35, 0, myBitmap, 128, 64, NEGRO, BLANCO); display.display ();

Convertir imagen en valores de mapa de bits

El mapa de bits en línea se puede generar desde http://javl.github.io/image2cpp/. Cargue el archivo de imagen que desea mostrar en el OLED y establezca el tamaño en 128x64. Se mostrará una imagen de vista previa y luego se generará una matriz de mapa de bits.

Las capturas de pantalla siguientes muestran el proceso para generar el valor de mapa de bits de cualquier imagen.

Finalmente cargue el código completo en NodeMCU ESP8266 y verá la imagen que se muestra en la pantalla OLED. Aquí mostramos el logotipo de CircuitDigest en la pantalla OLED.