ESP32 z wyświetlaczem Oled - pasek postępu: 6 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:32

ESP32, o którym dzisiaj porozmawiamy, jest już wyposażony w wyświetlacz Display Oled. Funkcja ta znacznie ułatwia nam życie, ponieważ możemy mieć wrażenie co do wartości pojawiającej się zmiennej. Nie musisz nawet patrzeć na okno debugowania. Możesz także między innymi zestawiać reprezentacje i rysować wykresy wydajności. Ze względu na te zalety uważam ten model za fantastyczny produkt i będziemy go dzisiaj programować przy użyciu Arduino IDE.

Tak więc w tym filmie zaprogramujemy pasek postępu. Należy pamiętać, że jeśli ESP32 nie ma wyświetlacza, można go dokupić osobno. Ponadto, jeśli nigdy nie programowałeś ESP32, proponuję obejrzeć ten film: WIDEO WPROWADZENIE DO ESP32, który bardziej szczegółowo omawia ten temat.

Krok 1: Biblioteka

Aby korzystać z wyświetlacza oled, musimy skonfigurować bibliotekę w środowisku Arduino IDE. Aby to zrobić, pobierz bibliotekę przez link.

Rozpakuj plik i wklej go do folderu bibliotek Arduino IDE.

C: /ProgramFiles(x86)/Arduino/biblioteki

Krok 2: Wemos Lolin ESP32 OLED

Wemos Lolin to nazwa tego ESP. Na obrazku czarna część to wyświetlacz, a obok urządzenia wyświetlamy cały pinout. Jak pokazano, istnieje kilka IO, które pozwalają nam włączać i wyłączać różne elementy. Dodatkowo model ten posiada najnowszą generację WiFi i Bluetooth.

Krok 3: Przykład

Na filmie możecie zobaczyć nasz gotowy projekt oraz sposób wykorzystania wyświetlacza oled do wyświetlania paska postępu sterowanego potencjometrem.

Krok 4: Montaż

Do naszego montażu użyłem potencjometru 10k i włączyłem GPIO25 kursora. Mamy też 3v3 i GND, jak widać na poniższym rysunku. Zasilanie będzie pochodzić z samego USB.

Krok 5: Kod

Najpierw dodajemy bibliotekę "SSD1306.h". Dzięki temu uzyskamy dostęp do wyświetlacza oled. Następnie tworzymy obiekt wyświetlający typu SSD1306, który będzie odpowiedzialny za sterowanie treścią wyświetlaną na wyświetlaczu oled.

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

Ustawiać

W funkcji setup() zainicjujemy nasz obiekt wyświetlany, abyśmy mogli kontrolować, co będzie wyświetlane. Za pomocą tego obiektu skonfigurujemy również źródło zapisu tekstów, które będą wyświetlane. I na koniec ustawiamy pin (a konkretnie pin, w którym obróciliśmy potencjometr) na INPUT, aby odczytać wartość.

void setup() { Serial.begin(115200); Serial.println(); Serial.println(); // Inicializa o objeto que controlará o que será exibido na tela screen.init(); //gira o wyświetl 180º (deixa de ponta cabeça) // display.flipScreenVertically(); //skonfiguruj czcionkę "ArialMT_Plain_10" screen.setFont(ArialMT_Plain_10); //configura o pino para fazer a leitura do potenciômetro. pinMode(PINO_POTENCIOMETRO, WEJŚCIE); }

Pętla

W funkcji pętli () odczytamy aktualną wartość potencjometru. Możemy zauważyć, że używamy funkcji „map” zaraz po odczytaniu wartości, ponieważ odczytana wartość jest zbyt wysoka, aby umieścić ją w pasku postępu, więc zmapujemy wartość tak, aby mieściła się w zakresie 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); // nie ma rzeczy do zrobienia o wyświetlanie, apaga o kontynuację o tela screen.clear(); // ++licznik; // licznik > 100 ? licznik = 0: licznik = licznik; //desenha pasek postępu drawProgressBar(); //exibe na tela o que foi configurado até então. wyświetlacz(); opóźnienie(10); }

W funkcji „drawProgress()” użyjemy wartości odczytanej z potencjometru, która jest zapisana w zmiennej „percProgress” do ustawienia w pasku postępu. Umieścimy również tekst tuż nad paskiem postępu, wskazując aktualny procent.

//função para desenhar pasek postępu nie displayvoid drawProgressBar() { Serial.print(">> "); Serial.println(contador); // desenha pasek postępu /* * drawProgressBar(x, y, width, height, value); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: width comprimento da barra de progresso p4: wysokość altura da barra de progresso p5: value valor que a barra de progresso deve assumir */ screen.drawProgressBar(10, 32, 100, 10, contador); // skonfiguruj tekst o alinhamento que será escrito //se caso alinharemos o texto ao centro screen.setTextAlignment(TEXT_ALIGN_CENTER); //napisz tekst z porcentagem /* * drawString(x, y, text); parametros (p): p1: x coordenada X brak planu karty p2: y coordenada Y brak planu karty p3: string texto que será exibido */ screen.drawString(64, 15, String(contador) + "%"); //se o contador está em zero, usuń napis "valor minimo" if(contador == 0){ screen.drawString(64, 45, "Valor minimo"); } //se o contador está em 100, napisz łańcuch "valor máximo" else if(contador == 100){ screen.drawString(64, 45, "Valor máximo"); } }

Krok 6: Inne ciekawe funkcje

Wyświetlacz

// ustawia wyświetlacz do góry nogami

void flipScreenPionowo ();

Rysunek

// rysuje pojedynczy piksel z ekranu

void setPixel (int16_t x, int16_t y);

// Narysuj linię

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

// narysuj prostokąt

void drawRect (int16_t x, int16_t y, int16_t szerokość, int16_t wysokość);

// narysuj okrąg

void drawCircle (int16_t x, int16_t y, int16_t promień);

// wypełnij kółko

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

// narysuj poziomą linię

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

// narysuj pionową linię

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

Tekst

// ustawia wyrównanie tekstu do pisania

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);