ESP32 met display Oled - voortgangsbalk - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18

De ESP32 waar we het vandaag over gaan hebben, is er een die al wordt geleverd met Display Oled ingebouwd. Deze functie maakt ons leven een stuk makkelijker, omdat we een indruk kunnen krijgen van de waarde van de variabele die verschijnt. U hoeft niet eens naar een foutopsporingsvenster te kijken. Ook kunt u onder andere representaties samenstellen en prestatiegrafieken tekenen. Vanwege deze voordelen beschouw ik dit model als een fantastisch product en we zullen het vandaag programmeren met Arduino IDE.

Dus in deze video zullen we een voortgangsbalk programmeren. Het is belangrijk om te onthouden dat als je ESP32 het display niet heeft oled, het mogelijk is om het apart te kopen. Als je nog nooit een ESP32 hebt geprogrammeerd, raad ik je aan om deze video te bekijken: VIDEO INTRODUCTION TO ESP32, waarin het onderwerp meer in detail wordt behandeld.

Stap 1: Bibliotheek

Om het oled-display te gebruiken, moeten we de bibliotheek in de Arduino IDE configureren. Download hiervoor de bibliotheek via de link.

Pak het bestand uit en plak het in de bibliothekenmap van de Arduino IDE.

C: /ProgramFiles(x86)/Arduino/bibliotheken

Stap 2: Wemos Lolin ESP32 OLED

Wemos Lolin is de naam van deze ESP. In de afbeelding is het zwarte gedeelte het display en naast het toestel geven we de gehele pinout weer. Zoals getoond, zijn er verschillende IO's waarmee we verschillende elementen kunnen in- en uitschakelen. Daarnaast beschikt dit model over de nieuwste generatie wifi en bluetooth.

Stap 3: Voorbeeld

In de video kunt u ons kant-en-klare project zien en hoe u het oled-display kunt gebruiken om een voortgangsbalk weer te geven die wordt bestuurd door een potentiometer.

Stap 4: Montage

Voor onze montage gebruikte ik een potentiometer van 10k en zette ik de GPIO25 van de cursor aan. We hebben ook 3v3 en GND, zoals je kunt zien in de onderstaande afbeelding. De stroom komt van de USB zelf.

Stap 5: Coderen

Eerst voegen we de bibliotheek "SSD1306.h" toe. Hiermee krijgen we toegang tot het oled-scherm. Daarna maken we een weergaveobject van het type SSD1306 dat verantwoordelijk is voor het regelen van de inhoud die wordt weergegeven op het oled-scherm.

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

Opstelling

In de functie setup () zullen we ons weergaveobject initialiseren, zodat we kunnen bepalen wat er wordt weergegeven. Via dit object zullen we ook de schrijfbron configureren voor de teksten die worden weergegeven. En ten slotte stellen we de pin (met name de pin waar we de potentiometer hebben gedraaid) in op INPUT om de waarde te lezen.

void setup() { Serial.begin(115200); Serieel.println(); Serieel.println(); // Begin met het controleren van de controle of het beantwoorden van vragen over screen.init(); //gira o display 180º (deixa de ponta cabeça) // display.flipScreenVertical(); //configureer een fonte de escrita "ArialMT_Plain_10" screen.setFont (ArialMT_Plain_10); //configur o pino para fazer a leitura do potenciômetro. pinMode (PINO_POTENCIOMETRO, INPUT); }

Lus

In de lusfunctie () zullen we de huidige potentiometerwaarde aflezen. We kunnen merken dat we de "map"-functie al snel na het lezen van de waarde gebruiken, omdat de leeswaarde te hoog is om in een voortgangsbalk te plaatsen, dus we zullen de waarde in kaart brengen binnen het bereik van 0 tot 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(); // ++teller; // teller > 100 ? teller = 0: teller = teller; // desenha een voortgangsbalk drawProgressBar(); //exibe na tela o que foi configurado até então. scherm(); vertraging(10); }

In de functie "drawProgress ()" zullen we de waarde uit de potentiometer die is opgeslagen in de variabele "percProgress" gebruiken om in de voortgangsbalk in te stellen. We zullen ook een tekst net boven de voortgangsbalk plaatsen, die het huidige percentage aangeeft.

//função para desenhar a voortgangsbalk geen displayvoid drawProgressBar() { Serial.print(">> "); Serial.println(contador); // desenha een voortgangsbalk /* * drawProgressBar (x, y, breedte, hoogte, waarde); parametros (p): p1: x gecoördineerd X geen plano cartesiano p2: y gecoördineerd Y geen plano cartesiano p3: breedte comprimento da barra de progresso p4: hoogte altura da barra de progresso p5: value valor que a barra de progresso deve assumir */ screen.drawProgressBar(10, 32, 100, 10, contador); // configuratie van tekst en tekst naar escrito //nesse caso alinharemos of tekst en centro screen.setTextAlignment (TEXT_ALIGN_CENTER); //escreve o texto de porcentagem /* * drawString(x, y, tekst); parametros (p): p1: x coördinaat X geen plano cartesiano p2: y coördinaat Y geen plano cartesiano p3: string texto que será exibido */ screen.drawString(64, 15, String(contador) + "%"); //se o contador está em nul, escreve een string "valor minimo" if (contador == 0) {screen.drawString (64, 45, "Valor minimo"); } //se o contador está em 100, escreve een string "valor máximo" else if(contador == 100){ screen.drawString(64, 45, "Valor máximo"); } }

Stap 6: Enkele andere interessante functies

Weergave

// zet het scherm ondersteboven

void flipScreenVerticaal ();

Tekening

// tekent een enkele pixel van het scherm

void setPixel (int16_t x, int16_t y);

// teken een lijn

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

// teken een rechthoek

void drawRect (int16_t x, int16_t y, int16_t breedte, int16_t hoogte);

// teken een cirkel

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

// vul een cirkel in

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

// teken een horizontale lijn

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

// teken een verticale lijn

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

Tekst

// stelt de tekstuitlijning in die moet worden geschreven

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);