Pendahuluan ESP32 Lora OLED Display: 8 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Ini adalah video lain tentang Pengenalan ESP32 LoRa. Kali ini, kami akan berbicara secara khusus tentang tampilan grafis (dengan 128x64 piksel). Kami akan menggunakan perpustakaan SSD1306 untuk menampilkan informasi pada tampilan OLED ini dan menyajikan contoh animasi menggunakan gambar XBM.

Langkah 1: Sumber Daya yang Digunakan

1 Heltec WiFi LoRa 32

Protoboard

Langkah 2: Tampilan

Layar yang digunakan pada papan pengembangan adalah OLED 0,96 inci.

Ini memiliki 128x64 dan monokrom.

Ini memiliki komunikasi I2C dan terhubung ke ESP32 melalui 3 kabel:

SDA pada GPIO4 (untuk data)

SCL pada GPIO15 (untuk jam)

RST pada GPIO16 (untuk reset dan tampilan awal)

Langkah 3: Perpustakaan SSD1306

Ini dapat ditemukan bersama dengan kumpulan perpustakaan yang disediakan oleh Heltec-Aaron-Lee.

Ini memiliki beberapa fungsi untuk menulis string, menggambar garis, persegi panjang, lingkaran, dan menampilkan gambar.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Langkah 4: File Animasi dan XBM

Kami akan menggunakan fungsi drawXbm perpustakaan untuk menampilkan animasi.

Format gambar XBM terdiri dari array karakter di mana setiap elemen secara tekstual mewakili satu set piksel monokrom (masing-masing 1 bit), melalui nilai heksadesimal. Ini setara dengan satu byte.

Karena beberapa karakter digunakan untuk mewakili satu byte, file-file ini cenderung lebih besar daripada format yang diadopsi saat ini. Keuntungannya adalah mereka dapat dikompilasi secara langsung tanpa perlu perawatan sebelumnya.

Selain array, dua pengaturan yang menentukan ukuran gambar disertakan.

Untuk membangun animasi, kita membutuhkan gambar yang akan membentuk frame.

Kita dapat menggunakan perangkat lunak pengedit gambar apa pun untuk mulai bekerja. Satu-satunya tindakan pencegahan yang harus kita ambil adalah pertama-tama menjaga ukuran yang kompatibel dengan tampilan dan menggunakan file monokrom.

Untuk menghasilkan file, kita dapat menggambarnya atau mengimpor gambar. Di sini, kami memutuskan untuk mengedit gambar berwarna menggunakan PaintBrush, dan kami menggambar masing-masing bingkai

Gambar asli - 960x707 piksel - format PNG

Langkah selanjutnya adalah membuatnya menjadi monokrom dengan menyimpannya sebagai bitmap monokrom.

Kemudian, kami mengubah ukurannya ke ukuran yang kompatibel dengan tampilan.

Berikan perhatian khusus pada satuan ukuran. Dalam hal ini, kami menyesuaikan gambar sehingga memenuhi seluruh ketinggian tampilan (vertikal = 64 piksel).

Dengan gambar dalam ukuran yang benar, kami akan mengeditnya untuk membentuk bingkai. Di sini, kami menghapus setiap busur level sinyal dan menyimpannya sebagai bingkai yang sesuai.

Sekarang, kita harus mengonversi file BMP ke format XBM.

Ada beberapa pilihan software yang dapat melakukan konversi ini. Kami juga memilih GIMP sebagai opsi editor.

Dalam contoh kami, kami menggunakan PaintBrush untuk menghasilkan dan mengedit file. Namun, setiap proses ini dapat dilakukan di Gimp (atau editor lainnya).

Untuk mengonversi, pertama kita buka file.

Dengan gambar terbuka, kita dapat memilih File => Ekspor sebagai…

Di jendela Ekspor Gambar, kita harus mengubah ekstensi file tujuan untuk XBM. Gimp akan bertugas mengidentifikasi format yang diinginkan dan menyajikan lebih banyak opsi…

Saat mengekspor, Gimp akan menghadirkan opsi lain. Kita bisa meninggalkan nilai default.

Setelah mengonversi semua file, kita akan memiliki empat file XBM, satu untuk setiap frame.

Sekarang mari kita salin ke folder kode sumber dan ganti namanya dengan mengubah ekstensinya menjadi.h.

Langkah 5: Keluar dari File XBM

Kita dapat membuka file XBM di editor teks apa pun, di mana kita akan melihat matriks gambar dan informasi ukuran gambar yang sudah ditentukan.

Langkah 6: Kode Sumber

Kode Sumber: Pernyataan

Kami akan menyertakan perpustakaan yang diperlukan, serta file gambar. Kami menentukan posisi gambar dan interval transisi. Kami juga mengarahkan pin OLED yang terhubung ke ESP32. Terakhir, kita membuat dan menyesuaikan objek Display.

//Incluindo as bibliotecas need#include #include "SSD1306.h" //Incluindo os arquivos de imagem #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" //menentukan posio da imagem e intervalo de transição #define posX 21 #define posY 0 #define intervalo 500 //Pino melakukan OLED dan conctados ao ESP32: I2C //OLED_SDA -- GPIO4 //OLED_SCL -- GPIO15 //OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 //O kontrol pengembang RST untuk perangkat lunak tampilan SSD1306 (0x3c, SDA, SCL, RST); //Cria e ajusta o Objeto display

Kode Sumber: Pengaturan ()

Inisialisasi tampilan dan balikkan layar secara vertikal. Tindakan adalah opsional.

void setup() { tampilan.init(); //inicia o display display.flipScreenVertically(); //membalikkan vertikal menjadi tela (opsional) }

Kode Sumber: Lingkaran ()

Hal pertama yang harus dilakukan dalam loop adalah membersihkan layar. Kami memuat frame 1 ke dalam buffer menggunakan posisi awal posX dan posY. Kami menginformasikan ukuran gambar dengan frame1_width dan frame1_height, dan nama array yang berisi bit gambar. Kami menunjukkan buffer di layar dan menunggu jeda sebelum menampilkan frame berikutnya.

void loop() { tampilan.clear(); //limpa tela //carrega para o buffer o frame 1 //gunakan sebagai posies posX e posY //informasi o tamanho da imagem com frame1_width e frame1_height //informa o nome da matriz que contem os bits da imagem, no caso frame1_bits display.drawXbm(posX, posY, frame1_width, frame1_height, frame1_bits); //paling banyak buffer tidak ada tampilan display.display(); //aguarda um intervalo antes de mostrar atau próximo frame delay(intervalo);

Kami mengulangi proses untuk semua frame lainnya.

//mengulangi proses untuk melakukan semua frame di luar display.clear(); display.drawXbm(posX, posY, frame2_width, frame2_height, frame2_bits); tampilan.tampilan(); penundaan (interval); tampilan.clear(); display.drawXbm(posX, posY, frame3_width, frame3_height, frame3_bits); tampilan.tampilan(); penundaan (interval); tampilan.clear(); display.drawXbm(posX, posY, frame4_width, frame4_height, frame4_bits); tampilan.tampilan(); penundaan (interval); }

Langkah 7: Melakukan Pengunggahan Kode

Dengan IDE terbuka, buka file dengan kode sumber dengan mengklik dua kali file.ino, atau dengan masuk ke menu File.

Dengan Heltec terhubung ke USB, pilih menu Tools => Card: "Heltec_WIFI_LoRa_32"

Masih di menu Tools, pilih COM port tempat Heltec terhubung.

Klik tombol Unggah…

… Dan tunggu kesimpulannya.

Langkah 8: File

Unduh file:

PDF

SAYA TIDAK