Conectar una pantalla OLED SSD1306 (o dos) a ESPEasy fácilmente

Vamos a ver, paso a paso, como añadir una pantalla a tu proyecto con NodeMCU o Wemos D1 Mini y ESP Easy.

En este caso, voy a tomar como ejemplo el medidor de CO2, pero se puede hacer con cualquier otro tipo de proyecto.

Una de las ventajas de ESP Easy (y mi favorita, sin duda), es que nos permite conectar a nuestro proyecto muchos accesorios diferentes sin tener que programar ni complicarnos la vida con modificaciones o adaptaciones de firmware. Uno de los elementos más interesantes son las pantallas, o «displays«.

Y no es solo que nos permita conectar muy fácilmente «una pantalla«, es que son muchas las pantallas diferentes que podemos conectar casi sin esfuerzo.

En este caso he decidido añadir al medidor de CO2 una pantalla de tipo SSD1306 OLED monocromo (caracteres en azul sobre fondo negro) de 0.96 pulgadas (0.96″).

Me he decidido por esta pantalla por estas dos ventajas, aunque no son las únicas:

• Utiliza solamente dos cables de datos (más los dos de alimentación). Lo que supone que es extremadamente fácil de conectar y, además, al utilizar solo dos pines, deja un montón de pines libres para conectar otros sensores y accesorios.
• La tecnología OLED tiene muy bajo consumo. Importante para quien quiera utilizar la pantalla en un proyecto portable con baterías.
• Se ve bastante bien en exteriores. Cosa muy importante en determinadas ocasiones.
• Bajo precio. Estas pantallas se pueden conseguir por unos 3€ con envío desde China o unos 7€ desde España.

Conexión de la pantalla SSD1306 al NodeMCU

La conexión no puede ser más fácil. Tienes que hacer cuatro conexiones. Dos para la alimentación y dos para los datos.

Solamente tienes que conectar:

• VDD de SSD1306 a Vin de NodeMCU
• GND de SSD1306 a GND de NodeMCU
• SCL de SSD1306 a D1 de NodeMCU
• SDA de SSD1306 a D2 de NodeMCU

Si tu placa NodeMCU tiene un pin VU, conecta VDD a ese pin en lugar de Vin. No todas las placas NodeMCU tienen ese pin.

IMPORTANTE: No te fíes del orden de las conexiones y compruébalas dos veces en tu placa. Algunas veces diferentes fabricantes hacen cambios de ese tipo que nos pueden amargar el día, si no tenemos cuidado.

IMPORTANTE: Estas instrucciones son para pantallas que funcionan con 5V de alimentación. Asegúrate de que tu pantalla se alimente a 5V. Si tu pantalla se alimenta a 3.3V tendrás que conectar el pin VDD de la pantalla a uno de los pines marcados 3.3V en tu NodeMCU o Wemos D1 Mini (en algunas placas la serigrafía de este pin puede ser «3V» o «3V3»).

La conexión a otra placa, diferente al NodeMCU basada en ESP8266, u otra basada en ESP32, será muy parecida. Solamente tendremos que estar atentos al cambio en los pines. Aquí te dejo el diagrama de conexión con la Wemos D1 Mini, por ejemplo:

Configuración

La configuración es, igualmente, muy sencilla.

Tienes que seguir los siguientes pasos (pulsa en cada imagen para verla más grande):

---

---

---

---

---

Mostrando texto en la pantalla SSD1306

La pantalla SSD1306 te permite mostrar, en la configuración que has visto anteriormente, ocho líneas de texto.

Estas ocho líneas de texto pueden contener los siguientes tipos de datos:

• Un texto fijo
• El valor de un sensor
• Una variable de ESP Easy como, por ejemplo, la hora actual o su dirección IP.

Mostrando texto fijo

Como has visto en el punto anterior, tienes ocho líneas de texto en las que puedes mostrar tanto un texto fijo (en el ejemplo anterior, en la línea 1 se muestra el texto fijo «MEDIDOR CO2» con dos espacios por delante para que aparezca centrado en la pantalla).

Para mostrar texto fijo, simplemente tienes que teclear el texto que quieres mostrar en la línea correspondiente.

Puedes añadir mayúsculas, minúsculas y algunos caracteres especiales mediante la inclusión de ciertos códigos (fíjate en que no es posible escribir vocales acentuadas):

Nombre	Caracter	Código
Grados	˚	{D}
Grados centígrados	˚C	degreeC degree_C
Comillas francesas	« »	{<<} {>>}
Letra griega Micro	µ	{u}
Moneda	€ ¥ £ ¢	{E} {Y} {P} {c}
Símbolos matemáticos	x¹ x² x³ ¼ ½ ¾ ± × ÷	{^1} {^2} {^3} {1_4} {1_2} {3_4} {+-} {x} {..}

Mostrando el valor de los dispositivos

Para mostrar el valor de un dispositivo (un sensor de temperatura, humedad, CO2 o cualquier otra cosa) solamente tienes que incluir el nombre de dispositivo y el valor que quieres que se muestre en el formato [DISPOSITIVO#VALOR]

En el ejemplo he mostrado el valor PPM del dispositivo CO2.

Si te fijas en la configuración de ese dispositivo (desde la pestaña Devices y seleccionando el dispositivo que queremos ver):

Puedes ver ver que el nombre del dispositivo es «CO2» y el valor que queremos mostrar en pantalla es «PPM«, por tanto, tendremos que poner en la línea en la que queramos mostrarlo [CO2#PPM].

Fíjate que tienes una columna para indicar el número de decimales que quieres que se muestren. Sí el valor debe ser un entero sin decimales puedes poner un 0.

Mostrando variables del sistema

Existen un número de variables que actualiza el propio ESP Easy y que puedes mostrar.

Estas variables son las siguientes:

• %sysname% – Se sustituye por el nombre de la unidad de ESP Easy (definido en la pestaña Config).
• %ip% – Se sustituye por la IP del ESP Easy
• %systime% – Se sustituye por la hora actual

Combinando los tres

Puedes combinar en una misma línea texto fijo, valores de sensores y variables de ESP Easy, lo que te permite por ejemplo poner en una línea «CO2: [CO2#PPM] ppm» para poder incluir un título, antes del valor del sensor, y las unidades después.

También podrías escribir «HORA: %systime%» o «IP: %ip%»

Configuración de NTP en ESP Easy, o «poniendo el ESP8266 en hora»

Si quieres mostrar la hora actual en pantalla, mediante %systime%», o la necesitas por algún otro motivo, tienes que tener en cuenta que el ESP8266 no tiene reloj interno por lo que necesita consultar la hora de internet.

Esto lo hace mediante el protocolo NTP (Network Time Protocol, o Protocolo de Tiempo de Red, en español), que es un sistema de uso muy habitual en equipos informáticos (probablemente tu equipo lo utilice, aunque tú no lo sepas, como es el caso de Windows y de Mac OS) y ESP Easy está preparado para utilizarlo muy fácilmente.

Para configurarlo tendrás que seguir una serie de pasos:

1. Vete a la pestaña «Tools» (Herramientas)
2. Selecciona la opción «Advanced Settings» (Ajustes Avanzados)
3. Activa el uso del protocolo NTP y asigna como servidor de tiempo europe.pool.ntp.org (o el que prefieras)
4. Activa la opción DST para que ESP Easy realice automáticamente el cambio de hora de verano e invierno
5. Introduce la diferencia horaria que corresponda. En España 60 minutos, excepto Canarias que son 0.

Instrucciones paso a paso en video

Aunque el proceso es sencillo, y no debería dar demasiados quebraderos de cabeza a nadie, he grabado un video con las instrucciones paso a paso para añadir la pantalla.

Aún más opciones «Display – OLED SSD1306/SH1106 Framed«

Si quieres, todavía más opciones de visualización, te recomiendo que al seleccionar el display en el desplegable de ESP Easy pruebes el «Display – OLED SSD1306/SH1106 Framed» (en lugar del «Display – OLED SSD1306» que hemos utilizado antes).

Ten en cuenta que «Display – OLED SSD1306/SH1106 Framed» consume algo más de memoria del ESP8266 que el «Display – OLED SSD1306«, por lo que en dispositivos con muchos sensores conectados o muchas reglas extensas podría llegar a darte problemas de memoria (normalmente no debería darte ningún problema).

Yo lo he utilizado para escribir el artículo Sensores de CO2 MH-Z19B FALSOS y en el video que le acompaña, con dos sensores MH-Z19B conectados (uno original y otro falso), el display SSD1306 y tres LED WS2812B sin ningún problema, y todavía queda memoria libre para más cosas.

La puesta en marcha es prácticamente igual. Así es como lo tengo configurado yo:

Y así el contenido (en este caso le digo que oculte la cabecera (donde podría salir el SSID de la red wifi, entre otros muchos datos), le digo que si hay alguna línea demasiado larga haga scroll, que encienda el display al llegar nuevo texto -por si lo hubiera apagado desde alguna regla-, y el Line 1 y Line 2 pongo que me muestre los datos de los dos sensores que tengo conectados.

Escribir al «Display – OLED SSD1306/SH1106 Framed» mediante reglas:

En el ejemplo anterior la pantalla se actualiza cada 60 segundos, por lo que cualquier texto o valor mostrado solamente se actualizará cada 60 segundos.

Si quieres puedes escribir directamente en la pantalla desde las reglas mediante el comando oledframedcmd,<line>,<text> (el comando <text> tiene que ser un único parámetro por lo que si incluye espacios o comas tendrás que escribirlo entre paréntesis, como en el siguiente ejemplo), lo que te proporciona mucho más control.

En la siguiente regla de ejemplo, el valor CO2#PPM se actualiza instantáneamente en la pantalla cada vez que cambia. Además, si CO2#PPM es inferior a 400, muestra el mensaje «Inicializando…», en lugar de su valor.

On CO2#PPM do  
  If [CO2#PPM] > 399
    oledframedcmd,1,"[CO2#PPM] ppm"
  Else
    oledframedcmd,1,"Inicializando..."
  Endif
Endon

Por supuesto, puedes combinarlo en las reglas como quieras. Por ejemplo, en el siguiente ejemplo utilizo un temporizador de ESP Easy para actualizar en la misma regla el valor mostrado en el display y el color de un LED «semáforo» intermitente dependiendo del nivel de CO2.

On Rules#Timer=1 do  
  if [CM1106#PPM]>1500
    NeoPixelAll,32,0,0 // LED red
    oledframedcmd,1,"[CM1106#PPM] ppm"
  Elseif [CM1106#PPM] > 1000
    NeoPixelAll,16,9,0 // LED orange
    oledframedcmd,1,"[CM1106#PPM] ppm"
  Elseif [CM1106#PPM] > 399
    NeoPixelAll,0,32,0 // LED green
    oledframedcmd,1,"[CM1106#PPM] ppm"
  Else
    NeoPixelAll,0,0,0 // LED off
    oledframedcmd,1,"Inicializando..."
  Endif
  looptimerset_ms,2,100
Endon

On Rules#Timer=2 do
  NeoPixelAll,0,0,0 // LEDS APAGADOS
  looptimerset_ms,2,0
  timerSet,1,2
endon


On System#Boot do
  NeoPixelAll,0,0,0 // LEDS APAGADOS
  timerSet,1,2
EndOn

El tamaño de los textos en pantalla

La pantalla ajustará automáticamente el tamaño de los textos al número de líneas que configures. Solamente tienes que seleccionar el número de líneas que deseas mostrar, en la opción “Lines per Frame”.

Si pone más líneas de las que la pantalla es capaz de mostrar, irá mostrando las diferentes líneas en diferentes pantallas que irán pasando una tras otra (puedes cambiar el tiempo entre salto de pantallas).

También puedes hacer que las pantallas vayan pasando al pulsar un botón e incluso cambiar la pantalla que se muestra desde las reglas.

Como ves las opciones de visualización son muchas y, como siempre, sin necesidad de programar nada. Solo haciendo los cambios que quieras desde una cómoda página web.

Conectar dos pantallas OLED

En algunos proyectos puede ser interesante conectar dos pantallas OLED (o más de dos) simultáneamente.

No hay problema para hacerlo y es muy fácil.

Aquí puedes ver un prototipo de medidor de CO2 con dos pantallas OLED de 1.3″, en las que una muestra la concentración de CO2 de forma permanente y la otra puede ir mostrando distintos datos, como temperatura, humedad, etc.

Como hemos visto antes, la pantalla OLED tiene una dirección I2C que el microcontrolador ESP8266, ESP32 u otro utiliza para comunicarse con ella. Lo que necesitamos para conectar dos pantallas a un solo microcontrolador es que cada pantalla tenga su propia dirección I2C y, simplemente, las conectaremos en paralelo y las utilizaremos como si fueran dos pantallas completamente independientes.

Cambiar la dirección I2C de la pantalla OLED

IMPORTANTE: Es muy importante que te asegures de usar pantallas OLED que permitan cambiar la dirección I2C (muchas no lo permiten), si no, no podrás hacerlo de esta forma (necesitarías un multiplexor I2C, lo que complica un poco las cosas). Un poco más abajo te dejo los enlaces a las pantallas que yo uso y que permiten cambio de dirección I2C.

Por ejemplo, esta pantalla OLED de 1.3″ (un poco más grande que las normales, que son de 0.96″) permite cambiar la dirección I2C, entre 0x78 y 0x7A, cambiando de sitio una resistencia:

Puedes encontrar esta pantalla SSD1306 de 1.3″ en AliExpress pulsando aquí. Si prefieres una pantalla SSD1306 de 0.96″ que permita cambiar la dirección I2C, yo he comprado esta. Ambas permiten cambiar la dirección I2C.

Conexión de dos pantallas OLED I2C

Si estás utilizando una placa ModeMCU para conectar las dos pantallas OLED SSD1306 en paralelo quedaría así:

Si vas a conectar las pantallas OLED SSD1306 a una placa Wemos D1 Mini las conexiones quedarían de la siguiente manera:

Solo faltaría configurar ESP Easy para utilizar las dos pantallas OLED.

Configurar ESP Easy para usar dos pantallas OLED I2C SSD1306

Simplemente tienes que agregar en la configuración (pestaña Devices) dos dispositivos «Display – OLED SSD1306/SH1106 Framed» (exactamente igual que hemos visto antes con una sola pantalla) y configurar cada uno independientemente, con los datos que queramos:

En ocasiones, las direcciones I2C pueden no coincidir con lo que pone en la pantalla (por ejemplo, en esta pantalla que yo he utilizado, en la serigrafía pone que las direcciones son 0x78 y 0x7A pero las direcciones reales son 0x3C y 0x3D.

Recuerda que puedes averiguar las direcciones de los dispositivos conectados mediante I2C con el «Scanner I2C» en la pestaña «Tools»).