ESP32 Oled kijelzővel - Folyamatjelző: 6 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Az ESP32, amelyről ma beszélni fogunk, már rendelkezik beépített Display Oled-el. Ez a funkció nagyon megkönnyíti az életünket, mert benyomást kelthetünk a megjelenő változó értékéről. Még csak hibakeresési ablakot sem kell nézni. Emellett összeállíthat ábrázolásokat és rajzolhat teljesítménydiagramokat, többek között. Ezen előnyök miatt fantasztikus terméknek tartom ezt a modellt, és ma az Arduino IDE segítségével programozzuk.

Tehát ebben a videóban előrehaladási sávot programozunk. Fontos megjegyezni, hogy ha az ESP32 készüléken nincs kijelző, akkor azt külön is meg lehet vásárolni. Továbbá, ha még soha nem programozott ESP32 -t, javaslom, hogy nézze meg ezt a videót: VIDEÓ BEVEZETÉS AZ ESP32 -hez, amely részletesebben foglalkozik a témával.

1. lépés: Könyvtár

Az OLED kijelző használatához konfigurálnunk kell a könyvtárat az Arduino IDE -ben. Ehhez töltse le a könyvtárat a linken keresztül.

Csomagolja ki a fájlt, és illessze be az Arduino IDE könyvtárak mappájába.

C:/ProgramFiles (x86)/Arduino/libraries

2. lépés: Wemos Lolin ESP32 OLED

Wemos Lolin a neve ennek az ESP -nek. A képen a fekete rész a kijelző, a készülék mellett pedig a teljes pinoutot jelenítjük meg. Amint az látható, számos IO létezik, amelyek lehetővé teszik a különböző elemek be- és kikapcsolását. Ezenkívül ez a modell a legújabb generációs WiFi és Bluetooth funkcióval rendelkezik.

3. lépés: Példa

A videóban megtekintheti a kész projektünket, és hogyan használhatja az oled kijelzőt a potenciométerrel vezérelt folyamatjelző sáv megjelenítésére.

4. lépés: Összeszerelés

Az összeállításhoz 10k potenciométert használtam, és bekapcsoltam a kurzor GPIO25 -öt. Nálunk is van 3v3 és GND, ahogy az alábbi ábrán is látható. A tápellátást maga az USB biztosítja.

5. lépés: Kód

Először hozzáadjuk az "SSD1306.h" könyvtárat. Ezzel elérjük az oled kijelzőt. Ezt követően létrehozunk egy SSD1306 típusú megjelenítési objektumot, amely felelős lesz az OLED kijelzőn megjelenített tartalom vezérléséért.

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

Beállít

A setup () függvényben inicializáljuk megjelenítési objektumunkat, hogy szabályozni tudjuk a megjelenítendő tartalmat. Ezen az objektumon keresztül konfiguráljuk a megjelenített szövegek írási forrását is. Végül pedig beállítottuk a csapot (pontosabban azt a csapot, ahol a potenciométert forgattuk) INPUT értékre, hogy leolvassuk az értéket.

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

Hurok

A loop () függvényben leolvassuk az aktuális potenciométer értékét. Észrevehetjük, hogy az érték elolvasása után hamarosan a "térkép" függvényt használjuk, mert az olvasási érték túl magas ahhoz, hogy egy folyamatjelzőt helyezzünk el, ezért leképezzük az értéket 0 és 100 közötti tartományba.

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 (); // ++ számláló; // számláló> 100? számláló = 0: számláló = számláló; // desenha a progress bar drawProgressBar (); // exibe na tela o que foi configurado até então. screen.display (); késleltetés (10); }

A "drawProgress ()" függvényben a potenciométerből kiolvasott értéket használjuk, amely a "percProgress" változóban van mentve, hogy beállítsa a folyamatjelző sávot. Szintén a haladási sáv fölé helyezünk egy szöveget, amely jelzi az aktuális százalékot.

// função para desenhar a progress bar no displayvoid drawProgressBar () {Serial.print (">>"); Serial.println (contador); // desenha a progress bar / * * drawProgressBar (x, y, width, height, value); paraméterek (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 progressso 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 porcentagem / * * drawString (x, y, text); paraméterek (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, sztring "valor máximo" else if (contador == 100) {screen.drawString (64, 45, "Valor máximo"); }}

6. lépés: Néhány más érdekes funkció

Kijelző

// fejjel lefelé teszi a kijelzőt

void flipScreenVertically ();

Rajz

// egyetlen képpontot rajzol a képernyőről

void setPixel (int16_t x, int16_t y);

// húzz egy vonalat

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

// rajzoljon egy téglalapot

void drawRect (int16_t x, int16_t y, int16_t szélesség, int16_t magasság);

// rajzolj egy kört

void drawCircle (int16_t x, int16_t y, int16_t sugár);

// kitölteni egy kört

void fillCircle (int16_t x, int16_t y, int16_t sugár);

// rajzoljon vízszintes vonalat

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

// rajzoljon függőleges vonalat

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

Szöveg

// beállítja az írandó szöveg igazítását

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);