ESP32 mit Display Oled - Fortschrittsbalken - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:21

Der ESP32, über den wir heute sprechen werden, ist bereits mit integriertem Display Oled ausgestattet. Diese Funktion erleichtert uns das Leben erheblich, da wir uns einen Eindruck über den Wert der angezeigten Variablen machen können. Sie müssen nicht einmal in ein Debug-Fenster schauen. Außerdem können Sie unter anderem Darstellungen zusammenstellen und Leistungsdiagramme zeichnen. Aufgrund dieser Vorteile halte ich dieses Modell für ein fantastisches Produkt, und wir werden es heute mit der Arduino IDE programmieren.

In diesem Video programmieren wir also einen Fortschrittsbalken. Es ist wichtig, sich daran zu erinnern, dass Sie es separat kaufen können, wenn Ihr ESP32 kein Display hat. Wenn Sie noch nie einen ESP32 programmiert haben, empfehle ich Ihnen, sich dieses Video anzusehen: VIDEO EINFÜHRUNG IN ESP32, in dem das Thema ausführlicher behandelt wird.

Schritt 1: Bibliothek

Um das Oled-Display zu verwenden, müssen wir die Bibliothek in der Arduino IDE konfigurieren. Laden Sie dazu die Bibliothek über den Link herunter.

Entpacken Sie die Datei und fügen Sie sie in den Bibliotheksordner der Arduino IDE ein.

C: /ProgramFiles(x86)/Arduino/libraries

Schritt 2: Wemos Lolin ESP32 OLED

Wemos Lolin ist der Name dieses ESP. Im Bild ist der schwarze Teil das Display und neben dem Gerät zeigen wir die gesamte Pinbelegung an. Wie gezeigt, gibt es mehrere IOs, mit denen wir verschiedene Elemente ein- und ausschalten können. Darüber hinaus verfügt dieses Modell über WLAN und Bluetooth der neuesten Generation.

Schritt 3: Beispiel

Im Video sehen Sie unser fertiges Projekt und wie Sie das Oled-Display verwenden, um einen von einem Potentiometer gesteuerten Fortschrittsbalken anzuzeigen.

Schritt 4: Montage

Für unsere Montage habe ich ein Potentiometer von 10k verwendet und den GPIO25 des Cursors eingeschaltet. Wir haben auch 3v3 und GND, wie Sie in der Abbildung unten sehen können. Der Strom kommt vom USB selbst.

Schritt 5: Code

Zuerst fügen wir die Bibliothek "SSD1306.h" hinzu. Damit greifen wir auf das alte Display zu. Anschließend erstellen wir ein Anzeigeobjekt vom Typ SSD1306, das für die Steuerung der im alten Display angezeigten Inhalte verantwortlich ist.

#include "SSD1306.h" // Alias für #include "SSD1306Wire.h" //objeto controlador do display de led /* 0x3c: é um identificador único para comunicação do display pino 5 e 4 são os de comunicação (SDA, SDC) */ SSD1306-Bildschirm (0x3c, 5, 4); //pino que ligamos oder potenciometro #define PINO_POTENCIOMETRO 25 //utilizado para fazer oder contador de porcentagem int contador;

Aufstellen

In der Funktion setup() initialisieren wir unser Anzeigeobjekt, damit wir steuern können, was angezeigt wird. Über dieses Objekt konfigurieren wir auch die Schreibquelle für die angezeigten Texte. Und schließlich setzen wir den Pin (insbesondere den Pin, an dem wir das Potentiometer gedreht haben) auf INPUT, um den Wert abzulesen.

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

Schleife

In der Funktion loop() lesen wir den aktuellen Potentiometerwert. Wir können feststellen, dass wir die Funktion "map" kurz nach dem Lesen des Werts verwenden, da der gelesene Wert zu hoch ist, um in einen Fortschrittsbalken eingefügt zu werden, sodass wir den Wert auf einen Bereich von 0 bis 100 abbilden.

Void loop () {//leitura do valor do potenciometro int valor = analogRead (PINO_POTENCIOMETRO); //Seriell.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(); // ++Zähler; // Zähler > 100 ? Zähler = 0: Zähler = Zähler; // desenha einen Fortschrittsbalken drawProgressBar(); //exibe na tela o que foi configurado até então. Bildschirmanzeige(); Verzögerung(10); }

In der Funktion "drawProgress()" verwenden wir den vom Potentiometer gelesenen Wert, der in der Variablen "percProgress" gespeichert ist, um in den Fortschrittsbalken zu setzen. Wir platzieren auch einen Text direkt über dem Fortschrittsbalken, der den aktuellen Prozentsatz angibt.

// função para desenhar ein Fortschrittsbalken kein displayvoid drawProgressBar () { Serial.print (">> "); Serial.println (Kontador); // desenha einen Fortschrittsbalken /* * drawProgressBar(x, y, width, height, value); Parameteros (p): p1: x coordenada X kein plano cartesiano p2: y coordenada Y kein plano cartesiano p3: Breite comprimento da barra de progresso p4: Höhe altura da barra de progresso p5: Wert valor que a barra de progresso deve assumir */ screen.drawProgressBar(10, 32, 100, 10, Kontador); // configura oder alinhamento do texto que será escrito //nesse caso alinharemos oder texto ao centro screen.setTextAlignment(TEXT_ALIGN_CENTER); // o Texto de porcentagem /* * drawString(x, y, text); parametros (p): p1: x coordenada X kein plano cartesiano p2: y coordenada Y kein plano cartesiano p3: string texto que será exibido */ screen.drawString(64, 15, String(contador) + "%"); // se o contador está em null, escreve eine Zeichenfolge "valor minimo" if(contador == 0){ screen.drawString(64, 45, "Valor minimo"); } //se o contador está em 100, escreve eine Zeichenfolge "valor máximo" else if(contador == 100){ screen.drawString(64, 45, "Valor máximo"); } }

Schritt 6: Einige andere interessante Funktionen

Anzeige

// stellt das Display auf den Kopf

void flipScreenVertically();

Zeichnung

// zeichnet ein einzelnes Pixel vom Bildschirm

void setPixel (int16_t x, int16_t y);

// zeichne eine Linie

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

// ein Rechteck zeichnen

void drawRect (int16_t x, int16_t y, int16_t Breite, int16_t Höhe);

// zeichne einen Kreis

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

// einen Kreis ausfüllen

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

// eine horizontale Linie zeichnen

void drawHorizontalLine (int16_t x, int16_t y, int16_t Länge);

// eine vertikale Linie zeichnen

void drawVerticalLine (int16_t x, int16_t y, int16_t Länge);

Text

// setzt die zu schreibende Textausrichtung

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);