Pantalla remota Wifi Oled y terminal Web Serial en el navegador ESP8266 Wemos D1 Mini NodeMCU

Vamos a armar un letrero con texto en movimiento usando una pequeña pantalla OLED usando la red local Wifi una tarjeta basada en esp8266 y el navegador. Para este caso he optado por usar la placa Wemos D1 mini debido a su reducido tamaño. 

Recuerden que el programa es compatible con las diferentes tarjetas de desarrollo basadas en esp8266, aquí les dejo un tutorial de como programarlas con el Arduino IDE: https://youtu.be/L1dfXQkyBp4 

El montaje es muy simple y les dejo las imágenes con el esquemático del circuito dentro de la carpeta del proyecto. La alimentación la tomamos de un power bank usando el conector microusb. 

Aquí les dejo la carpeta del proyecto: http://hinafinea.com/3Pj 

Este código es la aplicación de varias librerías para el manejo de la pantalla, los gráficos para el escalado del texto y cambio de fuente. 

La librería WebSerial nos permite integrar de forma fácil a nuestros ESP una terminal web, que funciona de manera similar a la terminal serial de Arduino, con la diferencia de que podemos acceder a través de la red local inalambrica al dispositivo. Nuestra tarjeta opera como cliente Wifi recuerden cambiar el nombre de su red y la clave en el código. 

Materiales: 

Display OLED 128x64 I2C SSD1306 

Wemos D1 mini o cualquier otra tarjeta esp8266 

Power bank y cable microusb Cables y protoboard

Código:

/*
Ejemplo basico de texto en movimiento para la pantalla OLED 128x64 I2C con el driver SSD1306
Los datos del display se envian a travez del navegador de cualquier dispositivo que se encuentre
conectado a la misma red Wifi. Esp8266 a 80Mhz. 

Este ejemplo es de dominio publico hagan lo que quieran con el :D
Autor: Sergio A. Yañez M.
Año: 2020
Tutorial para el canal AQUILES VAESA 
youtube.com/aqulesvaesa

***** CONEXIONES *****

DISPLAY - ESP8266
    GND = GND
    VCC = 3.3V
    SCL = D1 (GPIO5)
    SDA = D2 (GPIO4)

Importante!!! necesitas instalar estas librerias:

https://github.com/me-no-dev/ESPAsyncWebServer
https://github.com/me-no-dev/ESPAsyncTCP
https://github.com/ayushsharma82/WebSerial
https://github.com/adafruit/Adafruit-GFX-Library
https://github.com/adafruit/Adafruit_SSD1306
*/

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

#include <Adafruit_SSD1306.h>  // incluye la libreria de adafruit para el driver del display OLED
#include <Fonts/FreeSansBold12pt7b.h>
Adafruit_SSD1306 display(128, 32);  // declara la resolucion del display 128x32 pixeles

String d = "";
AsyncWebServer server(80);
const char* ssid = "wifiCASA"; // Your WiFi SSID
const char* password = "AQUILESVaEsA_1234"; // Your WiFi Password


//funcion para mostrar el texto en movimiento

void marquesina(String texto){
  
  int longitud =  texto.length();
  for(int i=0;i<((14*longitud)+128);i++){ 
  display.clearDisplay();  
  display.setCursor(128-i, 22);  
  display.print(texto); 
  display.display(); 
  }

}

//eco del mensaje recibido 
//con esto podemos ver que nuestro mensaje 
//ha llegado correctamente al esp866

void recvMsg(uint8_t *data, size_t len){
  WebSerial.println("Datos recibidos...");
  d = "";
  for(int i=0; i < len; i++){
    d += char(data[i]);
  }
  WebSerial.println(d);
}


void setup(){    
  Serial.begin(115200);
  delay(100); // se da una espera de 100ms para que el display inicie correctamente           
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  // inicia la comunicacion I2C con el display que tiene la direccion 0x3C
  display.setRotation(0);  // selecciona la orientacion del display puede ser 0, 1, 2 o 3
  display.setTextColor(WHITE);  // el texto que se va a desplegar es en color blanco 
  display.dim(true); //dejamos el brillo en minimo 
  display.setTextSize(1); // selecciona el tamaño de la letra puede ser u entre 1 y 10
  display.setCursor(0, 0);  // (x,y) pone el cursor en el origen del display


  display.clearDisplay();  //limpia el buffer del display
  display.setTextSize(1); // selecciona el tamaño de la letra puede ser u entre 1 y 10
  display.setCursor(0, 0);  // (x,y) pone el cursor en el origen del display
 

  //esto solo es visible al iniciar el programa:

  // primera pantalla de presentacion 
  display.clearDisplay();  
  display.setTextSize(1); // selecciona el tamaño de la letra puede ser u entre 1 y 10
  display.setCursor(0, 0);  // (x,y) pone el cursor en el origen del display
  display.println("CANAL AQUILES VAESA"); 
  display.println("youtube.com/aquilesvaesa");
  display.println(">  Suscribete  <");
  display.display(); 
  delay(5000); //pausa de 5 segundos o 5000 milisegundos

  //configura el esp8266 en modo estacion y lo conecta a nuestra red
  WiFi.mode(WIFI_STA);
    WiFi.begin(ssid, password);
    if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.printf("WiFi no conectado!\n");
        
        return;
    }
    Serial.print("IP: ");
    Serial.print(WiFi.localIP());
    Serial.println("/webserial"); // muesta el acceso a travez del puerto serial fisico
    //inicia el servidor y la funcion de eco
    WebSerial.begin(&server);
    WebSerial.msgCallback(recvMsg);
    server.begin();
  //despliega el acceso en el display  
  display.clearDisplay();  
  display.setTextSize(1); // selecciona el tamaño de la letra puede ser u entre 1 y 10
  display.setCursor(0, 0);  // (x,y) pone el cursor en el origen del display
  display.print(WiFi.localIP()); //despliega la ip del esp8266
  display.print("/webserial"); 
  display.display(); 
  delay(5000); //pausa de 5 segundos o 5000 milisegundos
  display.setTextWrap(false); // desactiva el desborde de texto
  display.setFont(&FreeSansBold12pt7b);
  display.setTextSize(1);  // cambia tamaño de letra a 2 
} 

void loop(){
  if(d!=""){ //si el String tiene algun texto entonces...
  marquesina(d); //...llamamos la funcion de texto en movimiento y ponemos la cadena String recibida
  }
}  // Final de la funcion principal, salta al inicio del "void loop"