ESP32 con pantalla Oled - Barra de progreso: 6 pasos

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:40

El ESP32 del que vamos a hablar hoy es uno que ya viene con Display Oled incorporado. Esta función nos facilita mucho la vida, porque podemos tener una impresión sobre el valor de la variable que aparece. Ni siquiera tiene que mirar una ventana de depuración. Además, puede ensamblar representaciones y dibujar gráficos de rendimiento, entre otras cosas. Debido a estos beneficios, considero que este modelo es un producto fantástico, y lo programaremos hoy usando Arduino IDE.

Entonces, en este video programaremos una barra de progreso. Es importante recordar que si su ESP32 no tiene la pantalla oled, es posible comprarlo por separado. Además, si nunca ha programado un ESP32, le sugiero que vea este video: VIDEO INTRODUCCIÓN AL ESP32, que trata el tema con más detalle.

Paso 1: biblioteca

Para usar la pantalla oled, necesitamos configurar la biblioteca en el IDE de Arduino. Para hacer esto, descargue la biblioteca a través del enlace.

Descomprima el archivo y péguelo en la carpeta de bibliotecas del IDE de Arduino.

C: / ProgramFiles (x86) / Arduino / bibliotecas

Paso 2: Wemos Lolin ESP32 OLED

Wemos Lolin es el nombre de este ESP. En la imagen, la parte negra es la pantalla y, junto al dispositivo, mostramos el pinout completo. Como se muestra, existen varios IO que nos permiten encender y apagar varios elementos. Además, este modelo cuenta con WiFi y Bluetooth de última generación.

Paso 3: Ejemplo

En el video, puede ver nuestro proyecto listo y cómo usar la pantalla oled para mostrar una barra de progreso controlada por un potenciómetro.

Paso 4: Montaje

Para nuestro montaje utilicé un potenciómetro de 10k y encendí el GPIO25 del cursor. También tenemos 3v3 y GND, como puede ver en la siguiente figura. La energía provendrá del propio USB.

Paso 5: Código

Primero, agregamos la biblioteca "SSD1306.h". Con esto accederemos a la pantalla oled. Después, creamos un objeto de visualización del tipo SSD1306 que se encargará de controlar el contenido que se muestra en la pantalla oled.

#include "SSD1306.h" // alias para #include "SSD1306Wire.h" // objeto controlador do display de led / * 0x3c: é um identificador único para comunicação do display pino 5 e 4 são os de comunicação (SDA, SDC) * / Pantalla SSD1306 (0x3c, 5, 4); // pino que ligamos o potenciometro #define PINO_POTENCIOMETRO 25 // utilizado para fazer o contador de porcentagem int contador;

Configuración

En la función setup (), inicializaremos nuestro objeto de visualización para que podamos controlar lo que se mostrará. A través de este objeto, también configuraremos la fuente de escritura de los textos que se mostrarán. Y, finalmente, configuramos el pin (específicamente, el pin donde giramos el potenciómetro) en INPUT para leer el valor.

configuración vacía () {Serial.begin (115200); Serial.println (); Serial.println (); // Inicializa o objeto que controlará o que será exibido en la pantalla screen.init (); // gira o muestra 180º (deixa de ponta cabeça) // display.flipScreenVertically (); // configura una fuente escrita "ArialMT_Plain_10" screen.setFont (ArialMT_Plain_10); // configura o pino para fazer a leitura do potenciômetro. pinMode (PINO_POTENCIOMETRO, ENTRADA); }

Círculo

En la función loop (), leeremos el valor actual del potenciómetro. Podemos notar que estamos usando la función "mapa" poco después de leer el valor, porque el valor leído es demasiado alto para ponerlo en una barra de progreso, por lo que asignaremos el valor para que esté dentro del rango de 0 a 100.

void loop () {// leitura do valor do potenciometro int valor = analogRead (PINO_POTENCIOMETRO); //Serial.println(valor); // mapeando o valor do potenciometro para o valor da barra de progresso // potenciometro faz a leitura do valor no intervalo de 0 a 4095 // a barra de progresso espera um valor entre 0 e 100 contador = map (valor, 0, 4095, 0, 100); // limpa todo o display, apaga o contúdo da tela screen.clear (); // ++ contador; // contador> 100? contador = 0: contador = contador; // desenhace una barra de progreso drawProgressBar (); // exibe na tela o que foi establecido até então. visualización de la pantalla(); retraso (10); }

En la función "drawProgress ()", usaremos el valor leído del potenciómetro que está guardado en la variable "percProgress" para configurar en la barra de progreso. También colocaremos un texto justo encima de la barra de progreso, indicando el porcentaje actual.

// función para desenhar una barra de progreso no displayvoid drawProgressBar () {Serial.print (">>"); Serial.println (contador); // desenhacer una barra de progreso / * * drawProgressBar (x, y, width, height, value); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: ancho comprimento da barra de progresso p4: altura altura da barra de progresso p5: valor valor que a barra de progresso deve assumir * / screen.drawProgressBar (10, 32, 100, 10, contador); // configura o alinhamento do texto que será escrito // nesse caso alinharemos o texto ao centro screen.setTextAlignment (TEXT_ALIGN_CENTER); // escreve o texto de porcentajem / * * drawString (x, y, text); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: string texto que será exibido * / screen.drawString (64, 15, String (contador) + "%"); // si el contador está en cero, escreve una cadena "valor mínimo" if (contador == 0) {screen.drawString (64, 45, "Valor mínimo"); } // se o contador está em 100, cree una cadena "valor máximo" else if (contador == 100) {screen.drawString (64, 45, "Valor máximo"); }}

Paso 6: Algunas otras funciones interesantes

Monitor

// pone la pantalla al revés

void flipScreenVertically ();

Dibujo

// dibuja un solo píxel de la pantalla

void setPixel (int16_t x, int16_t y);

// Dibuja una línea

línea de dibujo vacía (int16_t x0, int16_t y0, int16_t x1, int16_t y1);

// dibuja un rectángulo

vacío drawRect (int16_t x, int16_t y, int16_t ancho, int16_t alto);

// dibuja un circulo

vacío drawCircle (int16_t x, int16_t y, int16_t radio);

// rellena un círculo

círculo de relleno vacío (int16_t x, int16_t y, int16_t radio);

// dibuja una línea horizontal

vacío drawHorizontalLine (int16_t x, int16_t y, int16_t longitud);

// dibuja una línea vertical

vacío drawVerticalLine (int16_t x, int16_t y, int16_t longitud);

Texto

// establece la alineación del texto que se escribirá

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);