- Layar OLED
- Komponen Diperlukan
- Koneksi Pin SPI antara NodeMCU dan Layar OLED
- Pemrograman NodeMCU untuk menghubungkan OLED
- Ubah gambar menjadi Nilai Bitmap
Dalam tutorial ini kita akan menghubungkan Tampilan OLED dengan NodeMCU ESP8266. NodeMCU adalah platform IoT open source yang mencakup firmware yang berjalan pada SoC Wi-Fi ESP8266 berkemampuan Wi-Fi berbiaya rendah dari Espressif Systems. Ini memiliki pin GPIO untuk menghubungkan periferal lain dan mendukung komunikasi serial menggunakan pin SPI, I2C dan UART. Ia juga memiliki pin untuk ADC dan PWM. Kami sebelumnya menghubungkan OLED dengan mikrokontroler lain termasuk pengontrol keluarga ESP (ESP32):
- Antarmuka Tampilan OLED SSD1306 dengan Raspberry Pi
- Menghubungkan Layar OLED SSD1306 dengan Arduino
- Bangun Jam Tangan Cerdas dengan Menghubungkan Layar OLED dengan Ponsel Android menggunakan Arduino
- Jam Internet menggunakan ESP32 dan Layar OLED
Dalam tutorial ini kita akan menggunakan protokol SPI untuk menghubungkan Layar OLED Monokrom 7-pin SSD1306 0,96 dengan NodeMCU dan akan belajar menampilkan gambar pada layar OLED dengan NodeMCU ESP8266.
Layar OLED
Organic Light Emitting Diode (OLED) adalah salah satu jenis Light Emitting Diode dimana lapisan pemancar cahaya yang terbuat dari senyawa organik memancarkan cahaya saat arus listrik disuplai. Lapisan ini ditempatkan di antara dua elektroda. Teknologi ini digunakan pada layar tampilan seperti komputer, televisi, smartphone dll. Layar OLED memiliki cahaya sendiri dan tidak memerlukan lampu latar seperti pada LCD, oleh karena itu hemat daya dan digunakan dengan banyak mikrokontroler. Satu lagi keuntungan menggunakan layar OLED daripada LCD adalah menampilkan grafis yang besar dan kualitas yang lebih baik pada OLED. Pelajari lebih lanjut tentang teknologi Layar OLED di sini.
Ada berbagai macam OLED Display yang tersedia di pasaran. Tampilan ini dikarakterisasi berdasarkan warna, jumlah pin, IC pengontrol, dan ukuran layar. Berdasarkan warna, OLED tersedia dalam warna biru monokrom, putih monokrom, dan warna kuning / biru. Dan atas dasar komunikasi, terutama tersedia dua jenis OLED - 3pin dan 7pin. OLED 3 pin dapat digunakan dalam mode komunikasi I2C dan OLED 7 pin dapat digunakan dalam mode SPI atau dalam mode I2C.
Dalam tutorial ini kita akan menggunakan layar OLED " Monochrome 7-pin SSD1306 0.96 " yang memiliki lebar 128 piksel dan panjang 64 piksel. Tampilan ini dapat bekerja pada protokol komunikasi SPI dan I2C. Kami akan menggunakan protokol SPI dalam tutorial ini. IC SSD1306 hadir pada OLED ini yang membantu menampilkan piksel di layar.
Komponen Diperlukan
- Layar OLED Monokrom 7-pin SSD1306 0,96 inci
- NodeMCU ESP8266
- Kabel USB mikro
- Papan tempat memotong roti
- Kabel Jumper Pria ke Pria
Koneksi Pin SPI antara NodeMCU dan Layar OLED
Di bawah ini adalah Diagram Sirkuit untuk menghubungkan Layar OLED 7 pin dengan NodeMCU untuk berkomunikasi menggunakan protokol komunikasi serial SPI.
Tabel di bawah ini menunjukkan koneksi antara Layar OLED dan NodeMCU ESP8266. Pin GND masuk ke NodeMCU GND, pin VDD dapat dihubungkan ke 3.3V atau 5V, SCK adalah pin jam pada Layar OLED yang terhubung ke D5 dari NodeMCU untuk jam SPI. Pin SDA yang merupakan pin MOSI pada OLED antarmuka SPI menuju ke D7 dari NodeMCU. Pin RESET menuju ke D3. DC, pin perintah data terhubung ke D2 dari NodeMCU. Pin terakhir adalah CS menuju ke D8, pilih chip NodeMCU.
|
Tidak. |
Layar Oled |
NodeMCU |
|
1 |
GND |
GND |
|
2 |
VDD |
3.3V |
|
3 |
SCK |
D5 |
|
4 |
MOSI (SPI) atau SDA (I2C) |
D7 |
|
5 |
SETEL ULANG |
D3 |
|
6 |
DC |
D2 |
|
7 |
CS |
D8 |
Di sini kita akan menggunakan pustaka " Adafruit _SSD1306.h" dan " Adafruit_GFX.h " untuk menghubungkan OLED dengan NodeMCU. Buka Arduino IDE dan instal versi terbaru dari Arduino IDE ( Sketch> Include Library> Manage Libraries atau Ctrl + Shift_I ).
Karena ukuran piksel layar OLED kami id 128x64, oleh karena itu kami harus melakukan perubahan pada file header Adafruit_SSD1306. Buka perpustakaan Arduino, buka Adafruit_SSD1306 dan buka file headernya ( Adafruit _SSD1306.h ). Komentari baris “ #define SSD1306_128_32 ” dan hapus komentar pada baris “#define SSD1306_128_64 ” seperti yang ditunjukkan pada gambar di bawah dan kemudian simpan file. Secara default pustaka ini dilengkapi dengan "# define SSD1306_128_32 ".
Terakhir ubah nomor pin pada contoh “ ssd1306_128x64_spi ” Adafruit SSD1306 sesuai dengan tabel yang ditunjukkan di atas. Sekarang ketika Anda menjalankan sketsa setelah membuat koneksi yang tepat dari Layar OLED dengan NodeMCU Anda akan melihat logo Adafruit pada layar OLED yang secara default disimpan di perpustakaan. Setelah logo Adafruit menampilkan banyak grafik lain seperti garis, persegi panjang, segitiga, lingkaran, string, angka, animasi dan bitmap. Di sini Dalam tutorial ini kita akan belajar cara menampilkan gambar apa pun di OLED dengan NodeMCU ESP8266.
Pemrograman NodeMCU untuk menghubungkan OLED
Seperti biasa, kode lengkap diberikan di bagian akhir, di sini kami telah menjelaskan kode tersebut secara rinci.
Mulai kode dengan mengimpor pustaka yang diperlukan. Karena kita menggunakan protokol SPI maka kita akan mengimpor library “SPI.h” dan juga mengimpor “Adafruit_GFX.h” dan “Adafruit_SSD1306.h” untuk OLED Display.
#include
Ukuran OLED kami adalah 128x64 jadi kami menyetel lebar dan tinggi layar masing-masing 128 dan 64. Jadi tentukan variabel untuk pin OLED yang terhubung ke NodeMCU untuk komunikasi SPI.
#define SCREEN_WIDTH 128 // OLED display width, dalam piksel #define SCREEN_HEIGHT 64 // OLED display height, dalam piksel // Deklarasi untuk tampilan SSD1306 yang terhubung menggunakan software SPI (case default): #define OLED_MOSI D7 #define OLED_CLK D5 #define OLED_DC D2 # Tentukan OLED_CS D8 # Tentukan OLED_RESET D3 Adafruit_SSD1306 tampilan (SCREEN_WIDTH, SCREEN_HEIGHT, OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);
Inisialisasi tampilan OLED dengan menggunakan SSD1306_SWITCHCAPVCC untuk menghasilkan 3.3V secara internal untuk menginisialisasi tampilan.
if (! display.begin (SSD1306_SWITCHCAPVCC)) { Serial.println (F ("alokasi SSD1306 gagal")); untuk(;;); // Jangan lanjutkan, ulangi selamanya }
Tampilan layar OLED dibersihkan sebelum menampilkan apapun dengan memanggil function display.clearDisplay (). Kami mengatur ukuran font untuk 2 dengan memanggil fungsi setTextSize (font-size), dan mengatur warna teks dan posisi kursor dengan menggunakan setTextColor dan setCursor fungsi . Perintah Display.display () digunakan untuk mentransfer data ke memori internal pengontrol SSD1306. Setelah transfer, piksel muncul di layar. Sekarang kita dapat mulai menggulir teks dengan berbagai cara dengan memanggil display.startscrollright (x-pos, y-pos) dan display.startscrollleft (x-pos, y-pos) untuk waktu yang diberikan dalam fungsi penundaan. Pengguliran teks dapat dihentikan menggunakan function display.stopscroll ().
void testscrolltext (void) {display.clearDisplay (); // bersihkan tampilan layar OLED display.setTextSize (2); // Gambarlah tampilan teks skala 2X.setTextColor (WHITE); display.setCursor (0, 0); display.println (F ("CIRCUIT")); display.println (F ("DIGEST")); display.display (); // Tampilkan penundaan teks awal (100); // Gulir ke berbagai arah, jeda di antara: display.startscrollright (0x00, 0x0F); penundaan (2000); display.stopscroll (); penundaan (1000); display.startscrollleft (0x00, 0x0F); penundaan (2000); display.stopscroll (); penundaan (1000); display.startscrolldiagright (0x00, 0x07); penundaan (2000); display.startscrolldiagleft (0x00, 0x07); penundaan (2000); display.stopscroll (); penundaan (1000); }
Kami memanggil fungsi display.drawBitmap () yang membutuhkan 6 parameter (koordinat x, koordinat y, array bitmap, lebar, tinggi dan warna) untuk menggambar gambar pada OLED. Karena ukuran tampilan kami adalah 128x64, maka lebar dan tinggi kami atur masing-masing 128 dan 64. Di sini, bitmap array berisi informasi piksel untuk menggambar piksel di layar untuk membuat gambar. Array bitmap ini dapat dibuat secara online seperti yang dijelaskan di bawah ini atau ada banyak software yang tersedia untuk mengubah gambar menjadi array bitmap.
const unsigned char myBitmap PROGMEM = { 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0x7, 0xff, 0xc0x7, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf7, 0xc0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc7, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0x01, 0xc0, 0x00, 0x01, 0xc0, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x0f, 0x03, 0xff, 0xc0, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1e, 0x03, 0x3f, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x3e, 0x03, 0x3f, 0xfc, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x3c, 0x03, 0x7f, 0xfe, 0x03, 0x7f, 0xfe, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7c, 0x03, 0xf0, 0x3f, 0x83, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x78, 0x00, 0xc0, 0x0f, 0xc1, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xf8, 0x00, 0x00, 0x07, 0xe0, 0xff, 0xff, 0xe0, 0xff, 0xf8 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xf0, 0x00, 0x00, 0x03, 0xf8, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xfc, 0x01, 0xff 0x00, 0x00, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x03, 0xe0, 0x00, 0x0f, 0x00, 0x7e, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x07, 0xff,ff, 0x3f, 0xff, 0x80, 0x3f, 0xff, 0x80, 0x3f 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7f, 0xf9, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xf9, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xff, 0x80, 0x03, 0xff, 0xff, 0x03, 0xff, 0xff, 0x03 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x01, 0xf0, 0x1f, 0x80, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0xff, 0xc0, 0x00, 0xff 0x06, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x03, 0xc0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x0ff, 0xc0, 0x00, 0x00, 0xc0 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0x80, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80 , 0xff, 0xff, 0x80 0x0f, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0x00, 0x80, 0x00, 0x00, 0x01, 0xff, 0x00, 0x01, 0xff, 0x00 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x1e, 0x01, 0xe0, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00 , 0xff, 0x00, 0x00 , 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3c, 0x03, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x7c, 0x03, 0x3f, 0xff, 0xff, 0x00 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xf8, 0x01, 0xe0, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0xc0ff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x01, 0xf0, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80 , 0xff, 0xff, 0x80 , 0xff 0x03, 0xb0, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0x18, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xbc, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0xff 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1f, 0xff, 0x00, 0x00, 0xff, 0x00, 0x00, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x07, 0xfc, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0x80, 0x03, 0xf0, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x01, 0xc0, 0xff00, 0x00, 0x0ff, 0xff00, 0x00, 0x0ff, 0xe0 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8 , 0xff, 0xff, 0xf8, 0x03, 0xff 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xff, 0xe0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x3f, 0xeff, 0x00, 0x1ff, 0xeff, 0x00, 0x1ff, 0xfc 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x0e, 0x30, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0x07, 0x70, 0x00, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x03, 0xe0, 0x1b, 0xff, 0x01, 0xff, 0xff, 0x01 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x01, 0xc0, 0x7f, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0xff, 0xff, 0xe0, 0xff 0x7f, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x67, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x66, 0x00, 0x1f, 0x66, 0x00, 0x1f, 0x66 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x7e, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0x00, 0x00, 0x3c, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xff 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff }; display.drawBitmap (35, 0, myBitmap, 128, 64, BLACK, WHITE); display.display ();
Ubah gambar menjadi Nilai Bitmap
Bitmap online dapat dibuat dari http://javl.github.io/image2cpp/. Unggah file gambar yang ingin Anda tampilkan pada OLED dan atur ukurannya sebagai 128x64. Gambar pratinjau akan ditampilkan dan kemudian array bitmap akan dibuat.
Tangkapan layar di bawah ini menunjukkan proses untuk menghasilkan nilai bitmap dari gambar apa pun.
Terakhir unggah kode lengkap ke NodeMCU ESP8266 dan Anda akan melihat gambar yang ditampilkan di Layar OLED. Di sini kami menampilkan logo CircuitDigest pada layar OLED.
