ESP32 Dengan Tampilan Oled - Bilah Kemajuan: 6 Langkah

2025 Pengarang: John Day | [email protected]. Terakhir diubah: 2025-01-23 14:49

ESP32 yang akan kita bicarakan hari ini adalah yang sudah dilengkapi dengan Display Oled bawaan. Fungsi ini membuat hidup kita jauh lebih mudah, karena kita dapat memiliki kesan tentang nilai variabel yang muncul. Anda bahkan tidak perlu melihat jendela debug. Selain itu, Anda dapat menyusun representasi dan menggambar bagan kinerja, antara lain. Karena manfaat ini, saya menganggap model ini sebagai produk yang fantastis, dan kami akan memprogramnya hari ini menggunakan Arduino IDE.

Jadi, di video ini kita akan memprogram progress bar. Penting untuk diingat bahwa jika ESP32 Anda tidak memiliki tampilan layar, Anda dapat membelinya secara terpisah. Juga, jika Anda belum pernah memprogram ESP32, saya sarankan Anda menonton video ini: VIDEO INTRODUCTION TO ESP32, yang membahas subjek secara lebih rinci.

Langkah 1: Perpustakaan

Untuk menggunakan tampilan oled, kita perlu mengkonfigurasi library di Arduino IDE. Untuk melakukan ini, unduh perpustakaan melalui tautan.

Buka zip file dan tempel ke folder perpustakaan Arduino IDE.

C: /ProgramFiles(x86)/Arduino/libraries

Langkah 2: Wemos Lolin ESP32 OLED

Wemos Lolin adalah nama dari ESP ini. Pada gambar, bagian hitam adalah tampilan dan, di sebelah perangkat, kami menampilkan seluruh pinout. Seperti yang ditunjukkan, ada beberapa IO yang memungkinkan kita untuk menghidupkan dan mematikan berbagai elemen. Selain itu, model ini memiliki WiFi dan Bluetooth generasi terbaru.

Langkah 3: Contoh

Dalam video, Anda dapat melihat proyek siap kami, dan cara menggunakan layar oled untuk menampilkan bilah kemajuan yang dikendalikan oleh potensiometer.

Langkah 4: Perakitan

Untuk perakitan kami, saya menggunakan potensiometer 10k, dan saya menyalakan GPIO25 kursor. Kami juga memiliki 3v3 dan GND, seperti yang Anda lihat pada gambar di bawah ini. Daya akan datang dari USB itu sendiri.

Langkah 5: Kode

Pertama, kita tambahkan library "SSD1306.h". Dengan ini, kita akan mengakses tampilan lama. Setelah itu, kami membuat objek tampilan jenis SSD1306 yang akan bertanggung jawab untuk mengontrol konten yang ditampilkan di layar lama.

#include "SSD1306.h" // alias untuk #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)) */ Layar SSD1306 (0x3c, 5, 4); //pino que ligamos atau potenciometro #define PINO_POTENCIOMETRO 25 //utilizado para fazer atau contador de porcentagem int contador;

Mempersiapkan

Dalam fungsi setup(), kita akan menginisialisasi objek tampilan kita sehingga kita dapat mengontrol apa yang akan ditampilkan. Melalui objek ini, kita juga akan mengkonfigurasi sumber penulisan untuk teks yang akan ditampilkan. Dan, akhirnya, kami mengatur pin (khususnya, pin tempat kami memutar potensiometer) ke INPUT untuk membaca nilainya.

void setup() { Serial.begin(115200); Serial.println(); Serial.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(); //mengonfigurasi fonte de escrita "ArialMT_Plain_10" screen.setFont(ArialMT_Plain_10); //configura o pino para fazer dan leitura do potenciômetro. pinMode(PINO_POTENCIOMETRO, INPUT); }

Lingkaran

Dalam fungsi loop (), kita akan membaca nilai potensiometer saat ini. Kita dapat melihat bahwa kita menggunakan fungsi "peta" segera setelah membaca nilainya, karena nilai bacanya terlalu tinggi untuk dimasukkan ke dalam bilah kemajuan, jadi kita akan memetakan nilainya agar berada dalam kisaran 0 hingga 100.

void loop() { //leiura do valor do potenciometro int valor = analogRead(PINO_POTENCIOMETRO); //Serial.println(keberanian); //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(); // ++penghitung; // penghitung > 100 ? penghitung = 0: penghitung = penghitung; //desenha bilah kemajuan drawProgressBar(); //exibe na tela o que foi configurado até então. tampilan layar(); penundaan (10); }

Dalam fungsi "drawProgress ()", kita akan menggunakan nilai yang dibaca dari potensiometer yang disimpan dalam variabel "percProgress" untuk diatur di bilah kemajuan. Kami juga akan menempatkan teks tepat di atas bilah kemajuan, yang menunjukkan persentase saat ini.

//função para desenhar a progress bar no displayvoid drawProgressBar() { Serial.print(">> "); Serial.println(kontador); // desenha bilah kemajuan /* * drawProgressBar(x, y, lebar, tinggi, nilai); parametro (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: lebar comprimento da barra de progresso p4: tinggi altura da barra de progresso p5: nilai valor que a barra de progresso deve assumir */ screen.drawProgressBar(10, 32, 100, 10, contador); // mengonfigurasi alinhamento melakukan texto que será escrito //mengkonfigurasi alinharemos o texto ao centro screen.setTextAlignment(TEXT_ALIGN_CENTER); //escreve o texto de porcentagem /* * drawString(x, y, teks); parametros (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 nol, escreve string "valor mínimo" if(contador == 0){ screen.drawString(64, 45, "Valor mínimo"); } //se o contador está em 100, escreve string "valor máximo" else if(contador == 100){ screen.drawString(64, 45, "Valor máximo"); } }

Langkah 6: Beberapa Fungsi Menarik Lainnya

Menampilkan

// menempatkan tampilan terbalik

void flipScreenVertikal ();

Menggambar

// menggambar satu piksel dari layar

void setPixel (int16_t x, int16_t y);

// menggambar garis

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

// menggambar persegi panjang

void drawRect (int16_t x, int16_t y, lebar int16_t, tinggi int16_t);

// menggambar lingkaran

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

// isi lingkaran

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

// menggambar garis horizontal

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

// menggambar garis vertikal

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

Teks

// mengatur perataan teks yang akan ditulis

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);