ESP32 con display Oled - Barra di avanzamento: 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

L'ESP32 di cui parleremo oggi è già dotato di Display Oled integrato. Questa funzione rende la nostra vita molto più facile, perché possiamo avere un'impressione sul valore della variabile che appare. Non devi nemmeno guardare una finestra di debug. Inoltre, puoi assemblare rappresentazioni e disegnare grafici delle prestazioni, tra le altre cose. A causa di questi vantaggi, considero questo modello un prodotto fantastico e lo programmeremo oggi utilizzando Arduino IDE.

Quindi, in questo video programmeremo una barra di avanzamento. È importante ricordare che se il tuo ESP32 non ha il display oled, è possibile acquistarlo separatamente. Inoltre, se non hai mai programmato un ESP32, ti consiglio di guardare questo video: VIDEO INTRODUZIONE A ESP32, che tratta l'argomento in modo più dettagliato.

Passaggio 1: libreria

Per utilizzare il display oled, dobbiamo configurare la libreria nell'IDE di Arduino. Per fare ciò, scarica la libreria tramite il link.

Decomprimi il file e incollalo nella cartella delle librerie dell'IDE di Arduino.

C: /ProgramFiles(x86)/Arduino/librerie

Passaggio 2: Wemos Lolin ESP32 OLED

Wemos Lolin è il nome di questo ESP. Nell'immagine, la parte nera è il display e, accanto al dispositivo, mostriamo l'intero pinout. Come mostrato, ci sono diversi IO che ci consentono di attivare e disattivare vari elementi. Inoltre, questo modello dispone di WiFi e Bluetooth di ultima generazione.

Passaggio 3: esempio

Nel video puoi vedere il nostro progetto pronto e come utilizzare il display oled per visualizzare una barra di avanzamento controllata da un potenziometro.

Passaggio 4: assemblaggio

Per il nostro assemblaggio ho usato un potenziometro da 10k, e ho acceso il GPIO25 del cursore. Abbiamo anche 3v3 e GND, come puoi vedere nella figura qui sotto. L'alimentazione verrà dalla stessa USB.

Passaggio 5: codice

Innanzitutto, aggiungiamo la libreria "SSD1306.h". Con questo, accederemo al display oled. Successivamente, creiamo un oggetto di visualizzazione del tipo SSD1306 che sarà responsabile del controllo del contenuto mostrato nel display oled.

#include "SSD1306.h" // alias per #include "SSD1306Wire.h" //oggetto di controllo del display del led /* 0x3c: è un identificatore unico per la comunicazione del display pino 5 e 4 in modalità di comunicazione (SDA, SDC) */Schermo SSD1306 (0x3c, 5, 4); //pino que ligamos o potenciometro #define PINO_POTENCIOMETRO 25 //utilizado para fazer o contador de porcentagem int contador;

Impostare

Nella funzione setup(), inizializzeremo il nostro oggetto di visualizzazione in modo da poter controllare cosa verrà visualizzato. Tramite questo oggetto configureremo anche la sorgente di scrittura per i testi che verranno visualizzati. E, infine, impostiamo il pin (nello specifico, il pin dove abbiamo girato il potenziometro) su INPUT per leggere il valore.

void setup() { Serial.begin(115200); Serial.println(); Serial.println(); // Inicializa o objeto que controlará o que será exibido na tela screen.init(); //gira o display 180º (deixa de ponta cabeça) // display.flipScreenVerticalmente(); //configura una fonte di scrittura "ArialMT_Plain_10" screen.setFont(ArialMT_Plain_10); //configura o pino para fazer a leitura do potenciômetro. pinMode(PINO_POTENCIOMETRO, INGRESSO); }

Ciclo continuo

Nella funzione loop(), leggeremo il valore corrente del potenziometro. Possiamo notare che stiamo utilizzando la funzione "map" subito dopo aver letto il valore, perché il valore letto è troppo alto per essere inserito in una barra di avanzamento, quindi mapperemo il valore in modo che sia compreso nell'intervallo da 0 a 100.

void loop() { //leitura do valor do potenciometro int valor = analogRead(PINO_POTENCIOMETRO); //Serial.println(valore); //mapeando o valor do potenciometro para o valor da barra de progresso //potenciometro faz a leitura do valor no intervallo 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(); // ++contatore; // contatore > 100? contatore = 0: contatore = contatore; //desenha una barra di avanzamento drawProgressBar(); //esibire la tela o que foi configurado até então. schermo.display(); ritardo(10); }

Nella funzione "drawProgress()", utilizzeremo il valore letto dal potenziometro che viene salvato nella variabile "percProgress" da impostare nella barra di avanzamento. Metteremo anche un testo appena sopra la barra di avanzamento, che indica la percentuale corrente.

//funzione per visualizzare una barra di avanzamento no displayvoid drawProgressBar() { Serial.print(">> "); Serial.println(contatore); // desenha una barra di avanzamento /* * drawProgressBar(x, y, larghezza, altezza, valore); 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 assumir */ screen.drawProgressBar(10, 32, 100, 10, contador); // configura o alinhamento do texto que será escrito //nesse case ainharemos o texto ao 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 texto que será exibido */ screen.drawString(64, 15, String(contador) + "%"); //se o contador está em zero, escreve a string "valor mínimo" if(contador == 0){ screen.drawString(64, 45, "Valor mínimo"); } //se o contador está em 100, escreve a string "valor máximo" else if(contador == 100){ screen.drawString(64, 45, "Valor máximo"); } }

Passaggio 6: alcune altre funzioni interessanti

Schermo

// capovolge il display

void flipScreenVerticalmente ();

Disegno

// disegna un singolo pixel dallo schermo

void setPixel (int16_t x, int16_t y);

// disegna una linea

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

//disegna un rettangolo

void drawRect (int16_t x, int16_t y, int16_t larghezza, int16_t altezza);

// disegna un cerchio

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

// riempi un cerchio

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

// disegna una linea orizzontale

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

// disegna una linea verticale

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

Testo

// imposta l'allineamento del testo da scrivere

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);