ESP32 z zaslonom Oled - vrstica napredka: 6 korakov

2025 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2025-01-23 15:09

ESP32, o katerem bomo danes govorili, je tisti, ki že prihaja z vgrajenim zaslonom Oled. Ta funkcija nam olajša življenje, saj imamo lahko vtis glede vrednosti spremenljivke, ki se pojavi. Niti okna za odpravljanje napak vam ni treba pogledati. Med drugim lahko sestavite tudi predstavitve in narišete tabele uspešnosti. Zaradi teh prednosti se mi zdi ta model fantastičen izdelek, danes pa ga bomo programirali z uporabo Arduino IDE.

Tako bomo v tem videoposnetku programirali vrstico napredka. Pomembno si je zapomniti, da ga je mogoče kupiti ločeno, če vaš ESP32 nima oljenega zaslona. Če še nikoli niste programirali ESP32, predlagam, da si ogledate ta video: VIDEO UVOD V ESP32, ki podrobneje obravnava temo.

1. korak: Knjižnica

Za uporabo olednega zaslona moramo konfigurirati knjižnico v Arduino IDE. Če želite to narediti, prenesite knjižnico prek povezave.

Razpakirajte datoteko in jo prilepite v mapo knjižnice Arduino IDE.

C:/ProgramFiles (x86)/Arduino/knjižnice

2. korak: Wemos Lolin ESP32 OLED

Wemos Lolin je ime tega ESP. Na sliki je črni del zaslon in poleg naprave prikažemo celoten pinout. Kot je prikazano, obstaja več IO, ki nam omogočajo vklop in izklop različnih elementov. Poleg tega ima ta model najnovejšo generacijo WiFi in Bluetooth.

3. korak: Primer

V videoposnetku si lahko ogledate naš pripravljen projekt in kako z olednim zaslonom prikazati vrstico napredka, ki jo nadzira potenciometer.

4. korak: Montaža

Za našo montažo sem uporabil potenciometer 10k in vklopil kurzor GPIO25. Imamo tudi 3v3 in GND, kot lahko vidite na spodnji sliki. Napajanje bo prišlo iz samega USB -ja.

5. korak: Koda

Najprej dodamo knjižnico "SSD1306.h". S tem bomo dostopali do oled zaslona. Nato ustvarimo prikazovalni objekt tipa SSD1306, ki bo odgovoren za nadzor vsebine, prikazane na oljnem zaslonu.

#include "SSD1306.h" // vzdevek za #include "SSD1306Wire.h" // cilj kontrolnika za prikaz LED /* 0x3c: é um identifikator único para comunicação do display pino 5 e 4 são os de comunicação (SDA, SDC) */ Zaslon SSD1306 (0x3c, 5, 4); // pino que ligamos o potenciometro #define PINO_POTENCIOMETRO 25 // izkoristimo para fazer o contador de porcentagem int contador;

Nastaviti

V funkciji setup () bomo inicializirali naš prikazovalni objekt, da bomo lahko nadzirali, kaj bo prikazano. S tem predmetom bomo konfigurirali tudi vir pisanja za besedila, ki bodo prikazana. In na koncu nastavimo zatič (natančneje zatič, na katerem smo obrnili potenciometer) na INPUT, da prebere vrednost.

void setup () {Serial.begin (115200); Serial.println (); Serial.println (); // Inicializa o objeto que controlará o que será exibido na tela screen.init (); // prikaz 180º (deixa de ponta cabeça) // prikaz.flipScreenVertical (); // konfigurira zaslon fonte de escrita "ArialMT_Plain_10". setFont (ArialMT_Plain_10); // konfiguracija pino para fazer a leitura do potenciômetro. pinMode (PINO_POTENCIOMETRO, VHOD); }

Zanka

V funkciji loop () bomo prebrali trenutno vrednost potenciometra. Opazimo lahko, da funkcijo "map" uporabljamo kmalu po branju vrednosti, ker je odčitana vrednost previsoka, da bi jo vnesli v vrstico napredka, zato bomo vrednost preslikali v območje od 0 do 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 (); // ++ števec; // števec> 100? števec = 0: števec = števec; // desenha vrstica napredka drawProgressBar (); // exibe na tela o que foi configurado até então. screen.display (); zamuda (10); }

V funkciji "drawProgress ()" bomo za nastavitev v vrstici napredka uporabili vrednost, prebrano s potenciometra, ki je shranjena v spremenljivki "percProgress". Prav tako bomo postavili besedilo tik nad vrstico napredka in navedli trenutni odstotek.

// função para desenhar vrstica napredka brez displayvoid drawProgressBar () {Serial.print (">>"); Serial.println (kontador); // desenha bar napredka / * * drawProgressBar (x, y, širina, višina, vrednost); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: comprimento width 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, kontador); // konfiguracija o alinhamento do texto que será escrito // nesse caso alinharemos o texto ao centro screen.setTextAlignment (TEXT_ALIGN_CENTER); // escreve o texto de porcentagem / * * drawString (x, y, besedilo); parametros (p): p1: x coordenada X brez 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 niz "valor mínimo" if (contador == 0) {screen.drawString (64, 45, "Valor mínimo"); } // se o contador está em 100, escreve niz "valor máximo" else if (contador == 100) {screen.drawString (64, 45, "Valor máximo"); }}

6. korak: Nekaj drugih zanimivih funkcij

Zaslon

// postavi zaslon na glavo

void flipScreenVertical ();

Risba

// nariše en sam piksel z zaslona

void setPixel (int16_t x, int16_t y);

// potegnemo črto

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

// narišemo pravokotnik

void drawRect (int16_t x, int16_t y, int16_t širina, int16_t višina);

// narišemo krog

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

// zapolni krog

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

// narišemo vodoravno črto

void drawHorizontalLine (int16_t x, int16_t y, int16_t dolžina);

// narišemo navpično črto

void drawVerticalLine (int16_t x, int16_t y, int16_t dolžina);

Besedilo

// nastavi poravnavo besedila

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);