Panduan dasar menggambar sebuah bentuk pada SSD1306 0.96 inch Oled Display dangan ESP8266 menggunakan Arduino IDE. Parts yang digunakan, wiring diagram dan library dapat dilihat di ESP8266 OLED Display.
Draw a pixel
![Draw a pixel](/pimg/esp8266-oled-display_06.webp)
Metode ini digunakan untuk menyalakan 1 titik (pixel) pada Oled display, dengan memasukkan koordinat X
dan Y
. Karena resolusi Oled display kita adalah 126 x 64 pixel, maka untuk membuat 1 titik di tengah-tengah Oled display, kita bisa menggunakan perintah berikut:
display.setPixel(64, 32);
Draw a line
![Draw a line](/pimg/esp8266-oled-display_07.webp)
Metode pertama untuk membuat garis adalah dengan perintah drawLine(x0, y0, x1, y1)
. Kita cukup memasukan koordinat X
awal, Y
awal, X
akhir dan Y
akhir.
display.drawLine(10, 54, 118, 10);
![Draw horizontal line](/pimg/esp8266-oled-display_12.webp)
Metode berikutnya adalah untuk menggambar garis horizontal dengan perintah drawHorizontalLine(x, y, length)
. Informasi yang diperlukan adalah koordinat awal dan panjang garis.
display.drawHorizontalLine(10, 32, 108);
![Draw vertical line](/pimg/esp8266-oled-display_13.webp)
Metode berikutnya adalah untuk menggambar garis secara vertical dengan perintah drawVerticalLine(x, y, length)
. Informasi yang diperlukan adalah koordinat awal dan panjang garis.
display.drawVerticalLine(64, 10, 44);
Draw a rectangle
![Draw rectangle](/pimg/esp8266-oled-display_08.webp)
Untuk menggambar persegi atau persegi panjang, bisa menggunakan perintah drawRect(x, y, width, height)
dengan memasukkan koordinat X
dan Y
selanjutnya panjang
dan tinggi
persegi.
display.drawRect(10, 10, 108, 44);
![Draw filled rectangle](/pimg/esp8266-oled-display_09.webp)
Untuk menggambar persegi solid, bisa menggunakan perintah fillRect(x, y, width, height)
dengan memasukkan koordinat X
dan Y
selanjutnya panjang
dan tinggi
persegi.
display.fillRect(10, 10, 108, 44);
Draw a circle
![Draw a circle](/pimg/esp8266-oled-display_10.webp)
Untuk menggambar lingkaran, bisa menggunakan perintah drawCircle(x, y, radius)
dengan memasukkan koordinat X
, Y
dan radius
lingkaran.
display.drawCircle(64, 32, 22);
![Draw filled circle](/pimg/esp8266-oled-display_11.webp)
Untuk menggambar lingkaran solid, bisa menggunakan perintah fillCircle(x, y, radius)
dengan memasukkan koordinat X
, Y
dan radius
lingkaran.
display.fillCircle(64, 32, 22);
Draws progress bar
![Draw progress bar](/pimg/esp8266-oled-display_14.webp)
Metode berikut bisa digunakan untuk menggambar progress bar drawProgressBar(x, y, width, height, progress)
dengan memasukkan koordinat X
dan Y
, kemuadian informasi panjang
, tinggi
dan progress
. Contoh berikut untuk menggambar progress bar dengan progress 60%.
display.drawProgressBar(10, 32, 108, 10, 60);