Interface OLED Graphic Display Dengan Menggunakan Module ESP32

Leave a Comment / ESP32 / By

Ingin menambahkan pizzazz grafis kecil ke proyek ESP32 IoT Anda? Atau mungkin Anda ingin menampilkan alamat IP ESP32 Anda tanpa menggunakan output serial. Tampilan OLED (Organic Light-Emitting Diode) yang sangat keren ini mungkin sangat cocok! Mereka sangat ringan, hampir setipis kertas, secara teoritis fleksibel, dan menghasilkan gambar yang lebih cerah dan tajam.

Ikhtisar Modul Tampilan OLED

Modul tampilan OLED memecah tampilan OLED monokrom kecil. Ini lebar 128 piksel dan tinggi 64 piksel, berukuran 0,96″. Ini mikro, tetapi tetap menarik – layar OLED sangat mudah dibaca karena kontrasnya yang tinggi, dan Anda dapat memuat sejumlah besar gambar yang menipu di sana.

Karena layar membuat cahayanya sendiri, tidak diperlukan lampu latar. Hal ini secara signifikan mengurangi daya yang dibutuhkan untuk menjalankan OLED dan itulah sebabnya layar memiliki kontras yang sangat tinggi, sudut pandang yang sangat lebar, dan dapat menampilkan tingkat hitam pekat .

Inti dari modul ini adalah pengontrol driver CMOS OLED chip tunggal yang kuat – SSD1306, yang menangani semua buffering RAM, sehingga sangat sedikit pekerjaan yang perlu dilakukan oleh ESP32 Anda. Juga tegangan operasi pengontrol SSD1306 adalah dari 1,65V hingga 3,3V – Sempurna untuk berinteraksi dengan mikrokontroler 3.3V seperti ESP32.

Peta Memori OLED

Untuk memiliki kontrol mutlak atas modul tampilan OLED Anda, penting untuk mengetahui tentang peta memorinya.

Terlepas dari ukuran modul OLED, driver SSD1306 memiliki RAM Data Tampilan Grafis (GDDRAM) 1KB bawaan untuk layar yang menyimpan pola bit yang akan ditampilkan. Area memori 1K ini diatur dalam 8 halaman (dari 0 hingga 7). Setiap halaman berisi 128 kolom/segmen (blok 0 sampai 127). Dan setiap kolom dapat menyimpan 8 bit data (dari 0 hingga 7). Itu pasti memberitahu kita bahwa kita punya

8 halaman x 128 segmen x 8 bit data = 8192 bit = 1024 byte = memori 1KB

Seluruh memori 1K dengan halaman, segmen, dan data disorot di bawah ini.

Setiap bit mewakili piksel OLED tertentu pada layar yang dapat AKTIF atau MATI secara terprogram.

Layar OLED 128×64 menampilkan semua isi RAM sedangkan layar OLED 128×32 hanya menampilkan 4 halaman (setengah konten) RAM.

Menghubungkan modul tampilan OLED ke ESP32

Cukup teorinya, Ayo Praktik! Mari kita kaitkan layar ke ESP32.

Koneksi cukup sederhana. Mulailah dengan menghubungkan pin VCC ke output 3.3V pada ESP32 dan menghubungkan GND ke ground.

Selanjutnya Hubungkan pin SCL ke pin I2C clock D22 pada ESP32 anda dan sambungkan pin SDA ke pin I2C data D21 pada ESP32 anda. Lihat Pinout ESP32 .

Diagram berikut menunjukkan cara menghubungkan semuanya.

untuk Modul Tampilan OLED dengan ESP32

Dengan itu, Anda sekarang siap untuk mengunggah beberapa kode dan mendapatkan pencetakan tampilan.

Install library untuk Modul Tampilan OLED

Kontroler SSD1306 dari layar OLED memiliki driver yang fleksibel namun kompleks. Pengetahuan yang luas tentang pengalamatan memori diperlukan untuk menggunakan pengontrol SSD1306. Untungnya, perpustakaan SSD1306 Adafruit ditulis untuk menyembunyikan kerumitan pengontrol SSD1306 sehingga kami dapat mengeluarkan perintah sederhana untuk mengontrol tampilan.

Untuk menginstal perpustakaan, navigasikan ke the Sketch > Include Library > Manage Libraries … Tunggu Manajer Perpustakaan mengunduh indeks perpustakaan dan memperbarui daftar perpustakaan yang diinstal.

Saring pencarian Anda dengan mengetik ‘adafruit ssd1306’. Harus ada beberapa entri. Cari Adafruit SSD1306 oleh Adafruit. Klik entri itu, lalu pilih Install.

Pustaka Adafruit SSD1306 ini adalah pustaka khusus perangkat keras yang menangani fungsi tingkat rendah. Perlu dipasangkan dengan Adafruit GFX Library untuk menampilkan grafik primitif seperti titik, garis, lingkaran, persegi panjang, dll. Instal juga library ini.

CATATAN

Perpustakaan mengalokasikan 1KB (128x64)/8 bit) memori dari ESP32 sebagai buffer. Jadi, ia dapat memanipulasi buffer layar dan kemudian melakukan transfer massal dari memori ESP32 ke memori internal pengontrol SSD1306.

Memodifikasi Perpustakaan Adafruit SSD1306

Pustaka SSD1306 Adafruit tidak diatur untuk tampilan OLED 128×64 (yang kami gunakan saat ini). Ukuran tampilan harus diubah di file header Adafruit_SSD1306.h agar berfungsi untuk kita. Jika tidak diubah, akan muncul pesan error #error (“Tinggi salah, perbaiki Adafruit_SSD1306.h!”); mungkin muncul saat mencoba memverifikasi sketsa contoh di Arduino IDE:

Untuk mengubah file header Adafruit_SSD1306.h, buka lokasi sketchbook Anda. Ini umumnya Dokumen Saya> Arduino. Sekarang pergi ke perpustakaan > Adafruit_SSD1306

Buka file Adafruit_SSD1306.h di editor teks. Gulir ke bawah file untuk menemukan bagian dengan Tampilan SSD1306 atau langsung ke baris no. 73. Beri komentar #define SSD1306_128_32 dan batalkan komentar #define SSD1306_128_64 sehingga kode pada bagian ini terlihat seperti ini:

Itu dia. Sekarang simpan file dan restart IDE Arduino Anda.

Kode ESP32 – Menampilkan Teks

Sekarang datang hal-hal yang menarik!

Sketsa tes berikut akan mencetak ‘Hello World!’ pesan di layar. Ini juga termasuk

  • Menampilkan teks terbalik
  • Menampilkan Angka
  • Menampilkan Angka dengan basis (Hex, Des)
  • Menampilkan simbol ASCII
  • Menggulir Teks Secara Horizontal & Vertikal
  • Menggulir bagian layar

Ini akan memberi Anda pemahaman lengkap tentang cara menggunakan layar OLED dan dapat berfungsi sebagai dasar untuk eksperimen dan proyek yang lebih praktis.

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

Adafruit_SSD1306 display(-1);

void setup()   
{                
	// initialize with the I2C addr 0x3C
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  

	// Clear the buffer.
	display.clearDisplay();

	// Display Text
	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,28);
	display.println("Hello world!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display Inverted Text
	display.setTextColor(BLACK, WHITE); // 'inverted' text
	display.setCursor(0,28);
	display.println("Hello world!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Changing Font Size
	display.setTextColor(WHITE);
	display.setCursor(0,24);
	display.setTextSize(2);
	display.println("Hello!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display Numbers
	display.setTextSize(1);
	display.setCursor(0,28);
	display.println(123456789);
	display.display();
	delay(2000);
	display.clearDisplay();

	// Specifying Base For Numbers
	display.setCursor(0,28);
	display.print("0x"); display.print(0xFF, HEX); 
	display.print("(HEX) = ");
	display.print(0xFF, DEC);
	display.println("(DEC)"); 
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display ASCII Characters
	display.setCursor(0,24);
	display.setTextSize(2);
	display.write(3);
	display.display();
	delay(2000);
	display.clearDisplay();

	// Scroll full screen
	display.setCursor(0,0);
	display.setTextSize(1);
	display.println("Full");
	display.println("screen");
	display.println("scrolling!");
	display.display();
	display.startscrollright(0x00, 0x07);
	delay(2000);
	display.stopscroll();
	delay(1000);
	display.startscrollleft(0x00, 0x07);
	delay(2000);
	display.stopscroll();
	delay(1000);    
	display.startscrolldiagright(0x00, 0x07);
	delay(2000);
	display.startscrolldiagleft(0x00, 0x07);
	delay(2000);
	display.stopscroll();
	display.clearDisplay();

	// Scroll part of the screen
	display.setCursor(0,0);
	display.setTextSize(1);
	display.println("Scroll");
	display.println("some part");
	display.println("of the screen.");
	display.display();
	display.startscrollright(0x00, 0x00);
}

void loop() {}

Sketsa dimulai dengan memasukkan empat perpustakaan yaitu. SPI.h, Wire.h, Adafruit_GFX.h dan Adafruit_SSD1306.h. Meskipun pustaka SPI.h tidak diperlukan untuk tampilan OLED I2C, kita perlu menambahkannya demi mengkompilasi program kita.

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

Selanjutnya, kita perlu membuat objek Adafruit_SSD1306.h. Konstruktor Adafruit_SSD1306 menerima nomor pin ESP32 yang terhubung dengan pin reset layar. Karena tampilan OLED yang kami gunakan tidak memiliki pin RESET, kami akan mengirimkan -1 ke konstruktor sehingga tidak ada pin ESP32 yang digunakan sebagai reset untuk tampilan.

Adafruit_SSD1306 display(-1);

Dalam fungsi setup: kita perlu menginisialisasi objek OLED menggunakan fungsi begin() . Fungsi membutuhkan dua parameter. Parameter pertama SSD1306_SWITCHCAPVCC menghidupkan sirkuit pompa pengisian daya internal sementara parameter kedua memberikan alamat I2C dari tampilan OLED. Alamat I2C dari modul tampilan OLED tersebut umumnya 0x3C. Itu tetap dan tidak dapat diubah.

Selanjutnya, kami menghapus buffer sebelum mencetak pesan pertama kami di layar.

// initialize with the I2C addr 0x3C
display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

// Clear the buffer.
display.clearDisplay();

Menampilkan Teks sederhana (Hello World)

// Display Text
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,28);
display.println("Hello world!");
display.display();
delay(2000);

Untuk menampilkan teks di layar, kita perlu mengatur ukuran font. Ini dapat dilakukan dengan memanggil setTextSize(font-size) dan meneruskan ukuran font (mulai dari 1) sebagai parameter.

Selanjutnya, kita perlu mengatur warna font dengan memanggil fungsi setTextColor(color) . Lewati parameter PUTIH untuk latar belakang gelap dan berikan HITAM untuk latar belakang terang. Sekarang sebelum mencetak pesan kita perlu mengatur posisi kursor dengan memanggil fungsi setCursor(X,Y) . Piksel pada layar dialamatkan oleh koordinat horizontal (X) dan vertikal (Y). Sistem koordinat menempatkan titik asal (0,0) di sudut kiri atas, dengan X positif bertambah ke kanan dan Y positif bertambah ke bawah.

Kita dapat menggunakan fungsi simple print(“ ”) atau println(“ ”) untuk mencetak pesan pada layar seperti halnya kita mencetak data pada serial monitor. Ingat, println() akan memindahkan kursor ke baris baru.

Agar perpustakaan melakukan operasi matematika yang sangat cepat pada penyangga layar (lebih dari 100 bingkai per detik), panggilan ke fungsi cetak tidak segera mentransfer konten penyangga layar ke pengontrol SSD1306. Perintah display() diperlukan untuk menginstruksikan perpustakaan untuk melakukan transfer massal dari buffer layar di ESP32 ke memori internal pengontrol SSD1306. Segera setelah memori ditransfer, piksel yang sesuai dengan buffer layar akan muncul di layar OLED.

Menampilkan Teks Terbalik

// Display Inverted Text
display.clearDisplay();
display.setTextColor(BLACK, WHITE); // 'inverted' text
display.setCursor(0,28);
display.println("Hello world!");
display.display();
delay(2000);

Untuk menampilkan teks terbalik, kita akan memanggil fungsi setTextColor(FontColor,BackgroundColor) lagi. Jika Anda memperhatikan, Anda tahu kami hanya meneruskan satu parameter ke fungsi ini sebelumnya, tetapi sekarang kami melewati dua parameter. Hal ini dimungkinkan karena sesuatu yang disebut fungsi overloading . Fungsi overloading adalah kemampuan untuk membuat beberapa fungsi dengan nama yang sama tetapi dengan set parameter yang berbeda. Panggilan ke fungsi yang kelebihan beban akan menjalankan implementasi spesifik dari fungsi itu tergantung pada parameter yang diteruskan.

Dalam kasus kami, melewati setTextColor(BLACK, WHITE) akan membuat teks hitam pada latar belakang yang terisi.

Skala Ukuran Font

// Changing Font Size
display.clearDisplay();
display.setTextColor(WHITE);
display.setCursor(0,24);
display.setTextSize(2);
display.println("Hello!");
display.display();
delay(2000);

Sebelumnya dalam tutorial ini, kami memanggil fungsi setTextSize(font-size) untuk mengatur ukuran font dan meneruskan 1 sebagai parameter. Anda dapat menggunakan fungsi ini untuk menskalakan font dengan melewatkan bilangan bulat non-negatif apa pun.

Karakter ditampilkan dalam rasio 7:10. Artinya, melewati ukuran font 1 akan membuat teks pada 7×10 piksel per karakter, melewati 2 akan membuat teks pada 14×20 piksel per karakter dan seterusnya.

Pustaka Adafruit_GFX bertanggung jawab untuk merender font. Secara default font mono-spasi dipilih. Namun, versi perpustakaan Adafruit GFX yang lebih baru menawarkan kemampuan untuk menggunakan font alternatif. Beberapa font alternatif datang dengan perpustakaan, ditambah ada kemampuan untuk menambahkan yang baru.

Menampilkan Angka

// Display Numbers
display.clearDisplay();
display.setTextSize(1);
display.setCursor(0,28);
display.println(123456789);
display.display();
delay(2000);

Angka dapat ditampilkan pada layar OLED hanya dengan memanggil fungsi print() atau println() . Implementasi yang kelebihan beban dari fungsi-fungsi ini menerima 32-bit unsigned int, sehingga Anda hanya dapat menampilkan angka dari 0 hingga 4.294.967.295.

Menentukan Basis Untuk Angka

// Specifying Base For Numbers
display.clearDisplay();
display.setCursor(0,28);
display.print("0x"); display.print(0xFF, HEX); 
display.print("(HEX) = ");
display.print(0xFF, DEC);
display.println("(DEC)"); 
display.display();
delay(2000);

Fungsi print() & println() memiliki parameter opsional kedua yang menentukan basis (format) yang akan digunakan; nilai yang diizinkan adalah BIN (biner, atau basis 2), OCT (oktal, atau basis 8), DEC (desimal, atau basis 10), HEX (heksadesimal, atau basis 16). Untuk angka floating point, parameter ini menentukan jumlah tempat desimal yang akan digunakan. Sebagai contoh:

  • print(78, BIN) memberikan “1001110”
  • print(78, OCT) memberikan “116”
  • print(78, DEC) memberikan “78”
  • print(78, HEX) memberikan “4E”
  • println(1.23456, 0) memberikan “1”
  • println(1.23456, 2) memberikan “1.23”
  • println(1.23456, 4) memberikan “1.2346”

Menampilkan Simbol ASCII

// Display ASCII Characters
display.clearDisplay();
display.setCursor(0,24);
display.setTextSize(2);
display.write(3);
display.display();
delay(2000);

Fungsi print() & println() mengirim data ke tampilan sebagai teks ASCII yang dapat dibaca manusia sementara fungsi write() mengirimkan data biner ke tampilan. Jadi, Anda dapat menggunakan fungsi ini untuk menampilkan simbol ASCII. Dalam contoh kami mengirim nomor 3 akan menampilkan simbol hati.

Pengguliran Layar Penuh

// Scroll full screen
display.clearDisplay();
display.setCursor(0,0);
display.setTextSize(1);
display.println("Full");
display.println("screen");
display.println("scrolling!");
display.display();
display.startscrollright(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);    
display.startscrolldiagright(0x00, 0x07);
delay(2000);
display.startscrolldiagleft(0x00, 0x07);
delay(2000);
display.stopscroll();

Anda dapat menggulir layar secara horizontal dengan memanggil fungsi startcrollright(halaman awal, halaman berhenti) & startcrollleft(halaman awal, halaman berhenti) dan secara diagonal dengan memanggil startcrolldiagright(halaman awal, halaman berhenti) & startcrolldiagleft(halaman awal, halaman berhenti) . Semua fungsi ini menerima dua parameter yaitu. halaman awal dan halaman berhenti. Lihat bagian Peta Memori OLED untuk penjelasan halaman. Karena ada delapan halaman dalam tampilan dari 0 hingga 7, Anda dapat menggulir seluruh layar dengan menggulir semua halaman yaitu melewati parameter 0x00 dan 0x07.

Untuk menghentikan tampilan dari pengguliran, Anda dapat menggunakan fungsi stopscroll() .

Menggulir Bagian Tertentu

// Scroll part of the screen
display.setCursor(0,0);
display.setTextSize(1);
display.println("Scroll");
display.println("some part");
display.println("of the screen.");
display.display();
display.startscrollright(0x00, 0x00);

Terkadang kita tidak ingin menggulir seluruh tampilan. Anda dapat melakukannya dengan meneruskan halaman awal yang tepat dan menghentikan informasi halaman ke fungsi pengguliran. Lihat bagian Peta Memori OLED untuk penjelasan halaman. Karena ada delapan halaman dalam tampilan dari 0 hingga 7, Anda dapat menggulir beberapa bagian layar dengan melewatkan nomor halaman tertentu sebagai parameter.

Dalam contoh kami, kami melewati kedua parameter sebagai 0x00. Ini hanya akan menggulir halaman pertama (8 baris pertama) dari tampilan.

Kode ESP32 – Gambar Dasar

Dalam contoh ini, kita akan mencoba beberapa gambar dasar. Sketsa ini menunjukkan banyak fungsi menggambar, termasuk persegi panjang, persegi panjang bulat, lingkaran dan segitiga. Coba sketsanya dan kemudian kami akan membedahnya dengan beberapa detail.

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

Adafruit_SSD1306 display(-1);

void setup()   
{                
	// initialize with the I2C addr 0x3C
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  

	// Clear the buffer.
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Rectangle");
	display.drawRect(0, 15, 60, 40, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Rectangle");
	display.fillRect(0, 15, 60, 40, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Round Rectangle");
	display.drawRoundRect(0, 15, 60, 40, 8, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Round Rectangl");
	display.fillRoundRect(0, 15, 60, 40, 8, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Circle");
	display.drawCircle(20, 35, 20, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Circle");
	display.fillCircle(20, 35, 20, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Triangle");
	display.drawTriangle(30, 15, 0, 60, 60, 60, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Triangle");
	display.fillTriangle(30, 15, 0, 60, 60, 60, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();
}

void loop() {}

Sebagian besar kode (Termasuk perpustakaan dan tampilan inisialisasi) sama seperti contoh kode di atas, kecuali potongan kode berikut untuk menggambar gambar dasar.

Menggambar Persegi Panjang

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Rectangle");
display.drawRect(0, 15, 60, 40, WHITE);
display.display();
delay(2000);

display.clearDisplay();  
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Rectangle");
display.fillRect(0, 15, 60, 40, WHITE);
display.display();
delay(2000);

Anda dapat menggambar persegi panjang di layar dengan menggunakan fungsi drawRect(koordinat X, koordinat Y, Lebar, Tinggi, warna) . Sebenarnya fungsi ini menggambar persegi panjang berongga dengan batas 1 piksel. Anda dapat menggambar persegi panjang yang diisi menggunakan fungsi fillRect() .

Menggambar Persegi Panjang Bulat

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Round Rectangle");
display.drawRoundRect(0, 15, 60, 40, 8, WHITE);
display.display();
delay(2000);

display.clearDisplay();  
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Round Rectangl");
display.fillRoundRect(0, 15, 60, 40, 8, WHITE);
display.display();
delay(2000);

Anda dapat menggambar persegi panjang bulat pada tampilan dengan menggunakan fungsi drawRoundRect(koordinat X, koordinat Y, Lebar, Tinggi, warna) . Fungsi ini mengambil parameter yang sama dengan fungsi drawRect() kecuali satu parameter tambahan – Radius pembulatan sudut. Sebenarnya fungsi ini menggambar persegi panjang bulat berongga dengan batas 1 piksel. Anda dapat menggambar persegi panjang bulat yang diisi menggunakan fungsi fillRoundRect() .

Menggambar Lingkaran

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Circle");
display.drawCircle(20, 35, 20, WHITE);
display.display();
delay(2000);

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Circle");
display.fillCircle(20, 35, 20, WHITE);
display.display();
delay(2000);

Anda dapat menggambar lingkaran di layar dengan menggunakan fungsi drawCircle (koordinat X pusat, koordinat Y pusat, jari-jari, warna) . Fungsi ini menggambar lingkaran berongga dengan batas 1 piksel. Anda dapat menggambar lingkaran penuh menggunakan fungsi fillCircle() .

Menggambar Segitiga

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Triangle");
display.drawTriangle(30, 15, 0, 60, 60, 60, WHITE);
display.display();
delay(2000);

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Triangle");
display.fillTriangle(30, 15, 0, 60, 60, 60, WHITE);
display.display();
delay(2000);

Anda dapat menggambar segitiga di layar dengan menggunakan fungsi drawTriangle(x0, y0, x1, y1, x2, y2, color) . Fungsi ini mengambil tujuh parameter yaitu. 3 Koordinat X & Y dari simpul segitiga dan warna. (X0,y0) mewakili simpul atas, (x1,y1) mewakili simpul kiri dan (x2,y2) mewakili simpul kanan.

Fungsi ini menggambar segitiga berongga dengan batas 1 piksel. Anda dapat menggambar segitiga isi menggunakan fungsi fillTriangle() .

Kode ESP32 – Menampilkan Bitmap

Contoh terakhir ini menunjukkan cara menggambar gambar bitmap ke Layar OLED. Ini berguna untuk membuat layar splash logo perusahaan, membuat sprite atau hanya membuat grafik yang menyenangkan untuk menampilkan informasi. Copy kode berikut, paste ke Arduino IDE dan klik upload.

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

Adafruit_SSD1306 display(-1);

// Bitmap of MarilynMonroe Image
const unsigned char MarilynMonroe [] PROGMEM = {
	0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x1f, 0xff, 0xff, 0xf0, 0x41, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x7f, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xf9, 0xff, 0xff, 0xff, 0xe0, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x87, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x07, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xf1, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xf8, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xbf, 0xff, 0xff, 0xff, 0xfc, 0x02, 0x78, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x3f, 0xff, 0xff, 0xfe, 0x03, 0x7c, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff, 0xfe, 0x01, 0xfe, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xfd, 0xe0, 0x03, 0xff, 0xff, 0xfc, 0x00, 0xfe, 0x0f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xfe, 0x87, 0xe0, 0xff, 0xff, 0xfc, 0x00, 0x06, 0x07, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xfc, 0x1f, 0xf9, 0xff, 0xff, 0xfc, 0x00, 0x02, 0x07, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xc3, 0xc3, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf0, 0x3f, 0xff, 0xff, 0xe0, 0x0c, 0x00, 0xe7, 0x81, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xe0, 0x02, 0x00, 0x02, 0x00, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xe0, 0x01, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x3f, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x1e, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x0f, 0xff, 0x3f, 0xf8, 0x00, 0x18, 0x7f, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xf8, 0x01, 0x80, 0x03, 0xfc, 0x3f, 0xfc, 0x00, 0x70, 0xfe, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xf0, 0x43, 0xff, 0xff, 0xf8, 0x7f, 0xf8, 0x00, 0x00, 0x7e, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x07, 0xff, 0xff, 0xf0, 0xff, 0xfc, 0x00, 0x00, 0x7c, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xf1, 0xef, 0xf8, 0x00, 0x01, 0xfc, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe4, 0xff, 0xff, 0xff, 0xf3, 0x80, 0xa0, 0x00, 0x07, 0xfc, 0xaf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xec, 0x5f, 0xff, 0xff, 0xe7, 0xf0, 0x00, 0x00, 0x03, 0xfe, 0xdf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xee, 0x7f, 0xff, 0xff, 0xc7, 0xf8, 0x00, 0x00, 0x03, 0xff, 0xdf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xf7, 0xc7, 0xff, 0x06, 0x00, 0x03, 0xff, 0xbf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0x5f, 0xff, 0xc7, 0x07, 0xff, 0x80, 0x00, 0x07, 0xdb, 0xbf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xee, 0xff, 0xff, 0x80, 0x03, 0xff, 0xc0, 0x00, 0x03, 0xc3, 0x0f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0xff, 0xff, 0x98, 0x03, 0xff, 0xf8, 0x00, 0x07, 0xe0, 0x0f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xef, 0xff, 0xff, 0xf8, 0x01, 0xff, 0xfc, 0x01, 0x07, 0xfc, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xcf, 0xef, 0xff, 0xff, 0xe1, 0xff, 0xfc, 0x01, 0x07, 0xf8, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x9f, 0xff, 0xff, 0x7f, 0xf1, 0xff, 0xf8, 0x02, 0x07, 0x88, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xcf, 0xef, 0xf8, 0x0f, 0xff, 0xff, 0xe0, 0x00, 0x07, 0x84, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe7, 0xef, 0xf0, 0x04, 0x7f, 0xff, 0xc0, 0x00, 0x07, 0x84, 0x7f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x3f, 0xff, 0xe0, 0x00, 0x1f, 0xff, 0x80, 0x00, 0x06, 0x04, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x3f, 0x7f, 0xe1, 0xf0, 0x07, 0xff, 0x80, 0x00, 0x07, 0x06, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xc3, 0xfe, 0x03, 0xff, 0x00, 0x00, 0x03, 0x80, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xf2, 0x3f, 0xc6, 0x7f, 0x81, 0xce, 0x00, 0x00, 0x01, 0xc1, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x3f, 0xc0, 0x07, 0xc1, 0xfe, 0x00, 0x00, 0x0d, 0xc0, 0x7f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x3f, 0xc0, 0x01, 0xe0, 0xfc, 0x00, 0x00, 0x0f, 0xc0, 0x7f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x3f, 0xc0, 0x00, 0x50, 0xfc, 0x00, 0x00, 0x0e, 0xc0, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x3f, 0xc0, 0x00, 0x18, 0xf8, 0x00, 0x00, 0x0e, 0xc1, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x3f, 0xc0, 0x00, 0x00, 0xf8, 0x00, 0x00, 0x66, 0x81, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x1f, 0xc7, 0x80, 0x00, 0xf8, 0x00, 0x01, 0xe0, 0x00, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x1f, 0xc1, 0xe0, 0x01, 0xf8, 0x00, 0x03, 0xf0, 0x01, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1f, 0xc0, 0x3e, 0x03, 0xf0, 0x00, 0x00, 0xe0, 0x03, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x1f, 0xe0, 0xe0, 0x03, 0xf2, 0x00, 0x00, 0xc0, 0x03, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1f, 0xf0, 0x00, 0x07, 0xe6, 0x00, 0x00, 0xc0, 0x03, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1f, 0xff, 0x00, 0x1f, 0xee, 0x00, 0x00, 0x80, 0x07, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xb8, 0x0f, 0xff, 0xf0, 0x3f, 0xdc, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xbc, 0x0f, 0xff, 0xff, 0xff, 0xdc, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x9e, 0x0f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x08, 0x0f, 0xff, 0xff, 0xff, 0x70, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x0b, 0xff, 0xff, 0xfe, 0xe0, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x0b, 0xff, 0xff, 0xf9, 0xc0, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x3c, 0x09, 0xff, 0xff, 0xf1, 0x80, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x1e, 0x08, 0x3f, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x1f, 0x08, 0x03, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xce, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0x7e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff
};

void setup()   
{                
	// initialize with the I2C addr 0x3C
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  

	// Clear the buffer.
	display.clearDisplay();

	// Display bitmap
	display.drawBitmap(0, 0,  MarilynMonroe, 128, 64, WHITE);
	display.display();

	// Invert Display
	//display.invertDisplay(1);
}

void loop() {}

Ini adalah bagaimana output terlihat seperti.

Untuk menampilkan gambar bitmap pada tampilan OLED kita perlu memanggil fungsi drawBitmap(koordinat X, koordinat Y, larik bitmap, lebar, tinggi, warna) . Dibutuhkan enam parameter yaitu. Koordinat X sudut kiri atas, koordinat Y sudut kiri atas, array byte bitmap monokrom, lebar bitmap dalam piksel, tinggi bitmap dalam piksel dan Warna.

Dalam contoh kita, gambar bitmap berukuran 128×64. Jadi, koordinat X & Y diatur ke 0 sedangkan lebar & tinggi diatur ke 128 & 64.

// Display bitmap
display.drawBitmap(0, 0,  MarilynMonroe, 128, 64, WHITE);
display.display();

Namun, sebelum kita dapat memanggil fungsi drawBitmap(), kita membutuhkan gambar terlebih dahulu untuk menggambar. Ingat, resolusi layar layar OLED adalah 128×64 piksel, sehingga gambar yang lebih besar dari itu tidak akan ditampilkan dengan benar. Untuk mendapatkan gambar dengan ukuran yang benar, Anda dapat menggunakan program menggambar favorit Anda seperti Inkscape, Photoshop, Paint, dll., dengan mengatur ukuran kanvas menjadi 128×64 piksel.

Kami mengambil gambar Marilyn Monroe yang tertawa sebagai contoh dan diubah menjadi 128×64 piksel menggunakan Paint dan disimpan sebagai .bmp.

Setelah Anda memiliki bitmap, saatnya untuk mengubahnya menjadi array yang dapat dipahami oleh pengontrol OLED SSD1306. Ini dapat dilakukan dengan dua cara: Metode online menggunakan image2cpp dan metode Offline menggunakan LCD Assistant.

Generator Array Bitmap Online – image2cpp

Ada aplikasi online bernama image2cpp – http://javl.github.io/image2cpp/ yang dapat mengubah gambar Anda menjadi array. Image2cpp lebih baru dan jauh lebih kuat daripada Asisten LCD (solusi nanti). Ini akan memungkinkan Anda untuk:

  • Mengkonversi beberapa gambar secara bersamaan.
  • Skala file gambar Anda – Regangkan/Skala agar pas/Asli
  • Sesuaikan ambang Kecerahan antara hitam dan putih.
  • Pusatkan ulang gambar secara vertikal dan/atau horizontal.
  • Warna gambar terbalik

Alat ini sangat kuat sehingga dapat bekerja secara offline juga. Cukup simpan halaman ke PC Anda dan buka di browser Anda. Terima kasih kepada Jasper van Loenen atas kontribusinya yang luar biasa.

Untuk memulainya, buka image2cpp di browser Anda dan pilih gambar apa pun yang ingin Anda tampilkan di layar OLED.

Dimensi gambar Anda akan terisi dalam opsi Ukuran kanvas di bawah Pengaturan gambar. Jika Anda telah memilih gambar yang lebih besar dari 128×64, ubah ke 128×64 dan pilih opsi Penskalaan yang tepat. Anda dapat melihat output di bagian Pratinjau.

Anda dapat mengubah warna Latar Belakang atau Membalikkan warna gambar jika perlu.

Terakhir, ubah opsi yang paling penting – Ambang kecerahan sesuai kebutuhan Anda. Menetapkan ambang batas akan membuat piksel di atas level ini menjadi putih dan di bawah hitam. Dalam kasus kami, kami telah mengaturnya ke 171 untuk mendapatkan detail yang bagus tentang Marilyn Monroe.

Pratinjau kecil ini mencerminkan perubahan apa pun yang Anda buat dalam pengaturan Anda. Anda dapat mengubah pengaturan sambil mengawasinya.

Setelah Anda puas dengan hasilnya, Anda dapat melanjutkan pembuatan larik data. Cukup pilih format keluaran Kode sebagai Kode Arduino dan klik tombol Hasilkan kode.

Sekadar informasi, ada opsi yang disebut mode Draw. Ini benar-benar menciptakan gambar sesuai dengan pola pemindaian layar. Jika gambar Anda terlihat kacau di layar Anda, coba ubah modenya.

Itu dia. Array byte bitmap Anda akan dibuat. Anda dapat menggunakan output secara langsung dengan kode contoh kami. Pastikan untuk menamainya dengan tepat. Kemudian panggil array Anda di dalam fungsi drawBitmap() .

Generator Array Bitmap Offline – Asisten LCD

Ada aplikasi lain yang disebut asisten LCD – http://en.radzio.dxp.pl/bitmap_converter/ yang dapat mengubah gambar bitmap Anda menjadi array data. Ini tidak sekuat image2cpp tetapi masih populer di kalangan penggemar.

Untuk memulainya, Anda perlu mengonversi gambar Anda menjadi 128×64 bitmap monokrom 1-bit. Anda dapat menggunakan program menggambar favorit Anda seperti Inkscape, Photoshop, Paint, dll. untuk melakukannya, seperti yang kami lakukan di MS Paint.

Buka file Anda di MS Paint dan ubah ukurannya menjadi 128 × 64.

Sekarang, simpan file Anda sebagai bitmap. Saat menyimpan file pilih Save as type : Monochrome Bitmap(*.bmp;*.dib). Ini akan menghasilkan gambar bitmap 1-bit/biner yang hanya memiliki dua kemungkinan nilai untuk setiap piksel yaitu 0 (hitam) atau 1 (putih).

Satu-satunya downside di sini adalah Anda tidak dapat mengatur tingkat ambang kecerahan. Ini diatur ke 50% secara default dan tidak dapat diubah.

Bagaimanapun sekarang, unduh program asisten LCD. Buka executable dan muat bitmap Anda dari menu File.

Tidak banyak yang dapat Anda lakukan dengan alat ini. Jadi, cukup buka menu File dan klik opsi Simpan keluaran. Simpan file sebagai file teks.

Sekadar informasi, ada opsi yang disebut Orientasi Byte. Ini benar-benar menciptakan gambar sesuai dengan pola pemindaian layar. Jika gambar Anda terlihat kacau di layar Anda, coba ubah modenya.

Itu dia. Dengan array Anda dibuat, rekatkan ke dalam kode Anda.

Pastikan untuk menamainya dengan tepat. Kemudian panggil array Anda di dalam fungsi drawBitmap() .

Copyright © 2021 LastMinuteEngineers.com. All rights reserved.

Leave a Comment

Your email address will not be published. Required fields are marked *

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • Description
  • Capacitance
  • Diameter
  • Height
  • Leakage Current
  • Length
  • Max Operating Temperature
  • Min Operating Temperature
  • Operating temp
  • Operating Temperature Range
  • Operation voltage
  • Power Rating
  • Rated current
  • Rated voltage
  • Resistance
  • Resonant freq
  • Sound output
  • Storage temp
  • Tebal
  • Temperature Coefficient
  • Tolerance
  • Tone
  • Voltage Rating
  • Voltage Rating DC
  • Weight
Compare