ESP32 amb pantalla Oled - Barra de progrés: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

L’ESP32 de què parlarem avui és un dels que ja inclou el Display Oled integrat. Aquesta funció ens facilita la vida, ja que podem tenir una impressió sobre el valor de la variable que apareix. Ni tan sols cal mirar una finestra de depuració. A més, podeu muntar representacions i dibuixar gràfics de rendiment, entre altres coses. Per aquests avantatges, considero que aquest model és un producte fantàstic i el programarem avui amb Arduino IDE.

Per tant, en aquest vídeo programarem una barra de progrés. És important recordar que si el vostre ESP32 no té la pantalla oled, és possible comprar-lo per separat. A més, si mai heu programat un ESP32, us proposo que vegeu aquest vídeo: VIDEO INTRODUCTION TO ESP32, que tracta el tema amb més detall.

Pas 1: biblioteca

Per utilitzar la pantalla oled, hem de configurar la biblioteca a l'IDE Arduino. Per fer-ho, descarregueu la biblioteca a través de l’enllaç.

Descomprimiu el fitxer i enganxeu-lo a la carpeta de biblioteques de l'IDE Arduino.

C: / ProgramFiles (x86) / Arduino / libraries

Pas 2: Wemos Lolin ESP32 OLED

Wemos Lolin és el nom d’aquest ESP. A la imatge, la part negra és la pantalla i, al costat del dispositiu, mostrem tot el pinout. Com es mostra, hi ha diverses E / S que ens permeten activar i desactivar diversos elements. A més, aquest model té WiFi i Bluetooth d’última generació.

Pas 3: Exemple

Al vídeo, podeu veure el nostre projecte preparat i com utilitzar la pantalla oled per mostrar una barra de progrés controlada per un potenciòmetre.

Pas 4: Muntatge

Per al nostre muntatge he utilitzat un potenciòmetre de 10 k i he activat el GPIO25 del cursor. També tenim 3v3 i GND, com podeu veure a la figura següent. L’alimentació provindrà del propi USB.

Pas 5: Codi

En primer lloc, afegim la biblioteca "SSD1306.h". Amb això, accedirem a la pantalla oled. Després, creem un objecte de visualització del tipus SSD1306 que s’encarregarà de controlar el contingut que es mostra a la pantalla oled.

#include "SSD1306.h" // àlies per a #include "SSD1306Wire.h" // objectiu controlador do display de led / * 0x3c: és un identificador únic per a la comunicació del display 5 i 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ó

A la funció setup (), inicialitzarem el nostre objecte de visualització per poder controlar el que es mostrarà. A través d’aquest objecte, també configurarem la font d’escriptura dels textos que es mostraran. I, finalment, vam establir el pin (concretament, el pin on hem girat el potenciòmetre) a INPUT per llegir el valor.

configuració nul·la () {Serial.begin (115200); Serial.println (); Serial.println (); // Inicializa o objeto que controlará o que será exibido en tela screen.init (); // gira o display 180º (deixa de ponta cabeça) // display.flipScreenVertically (); // configurar una font d’escriptura "ArialMT_Plain_10" screen.setFont (ArialMT_Plain_10); // configura o pino para fazer a leitura do potenciômetro. pinMode (PINO_POTENCIOMETRO, INPUT); }

Bucle

A la funció loop (), llegirem el valor actual del potenciòmetre. Podem notar que utilitzem la funció "mapa" poc després de llegir el valor, perquè el valor de lectura és massa alt per posar-lo en una barra de progrés, de manera que assignarem el valor entre 0 i 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 progreso // 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 tot o display, apaga o contúdo da tela screen.clear (); // ++ comptador; // comptador> 100? comptador = 0: comptador = comptador; // desenha una barra de progrés drawProgressBar (); // exibe na tela o que foi configurado até então. screen.display (); retard (10); }

A la funció "drawProgress ()", utilitzarem el valor llegit del potenciòmetre que es desa a la variable "percProgress" per establir a la barra de progrés. També col·locarem un text just a sobre de la barra de progrés, que indica el percentatge actual.

// funció per desenvolupar una barra de progrés no displayvoid drawProgressBar () {Serial.print (">>"); Serial.println (contador); // desenha una barra de progrés / * * drawProgressBar (x, y, amplada, alçada, valor); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: width comprimento da barra de progresso p4: height altura da barra de progresso p5: value valor que a barra de progresso deve assumeir * / screen.drawProgressBar (10, 32, 100, 10, contador); // configura o alineamento del texto que será escrito // nesse caso alinharemos o texto al centro screen.setTextAlignment (TEXT_ALIGN_CENTER); // escreve o texto de porcentagem / * * drawString (x, y, text); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: string text que serà exibido * / screen.drawString (64, 15, String (contador) + "%"); // se o contador está em zero, escreve una cadena "valor mínim" if (contador == 0) {screen.drawString (64, 45, "Valor mínim"); } // se o contador está em 100, escreve una cadena "valor màxim" else if (contador == 100) {screen.drawString (64, 45, "Valor màxim"); }}

Pas 6: algunes altres funcions interessants

Visualització

// posa la pantalla al revés

void flipScreenVertically ();

Dibuix

// dibuixa un sol píxel de la pantalla

void setPixel (int16_t x, int16_t y);

// traça una línia

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1);

// dibuixa un rectangle

void drawRect (int16_t x, int16_t y, int16_t amplada, int16_t alçada);

// dibuixar un cercle

void drawCircle (int16_t x, int16_t y, int16_t radi);

// omplir un cercle

void fillCircle (int16_t x, int16_t y, int16_t radi);

// traça una línia horitzontal

void drawHorizontalLine (int16_t x, int16_t y, int16_t longitud);

// traça una línia vertical

void drawVerticalLine (int16_t x, int16_t y, int16_t longitud);

Text

// estableix l'alineació del text que s'ha d'escriure

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);