{"id":2116,"date":"2025-05-23T09:46:18","date_gmt":"2025-05-23T02:46:18","guid":{"rendered":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/?p=2116"},"modified":"2025-05-23T09:48:18","modified_gmt":"2025-05-23T02:48:18","slug":"esp32-dan-oled-0-91-display-image","status":"publish","type":"post","link":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/2025\/05\/23\/esp32-dan-oled-0-91-display-image\/","title":{"rendered":"ESP32 dan OLED 0.91 (display Image)"},"content":{"rendered":"<p>OLED 0.91 inch dengan resolusi 128x32 pixel merupakan modul tampilan kecil yang hemat daya dan sangat cocok untuk berbagai proyek mikrokontroler. Dengan menggunakan ESP32, kita bisa menampilkan teks, ikon, hingga gambar (bitmap) untuk memperkaya tampilan user interface.<\/p>\n<p>Manfaat menampilkan gambar di OLED:<\/p>\n<ul>\n<li>Menampilkan logo atau branding produk<\/li>\n<li>Simbol status perangkat (WiFi, baterai, dsb)<\/li>\n<li>Memperindah tampilan antarmuka mikrokontroler<\/li>\n<\/ul>\n<p><u>Pentingnya Mengecek Alamat I2C<\/u><\/p>\n<p>Salah satu penyebab umum OLED tidak menampilkan karakter atau gambar adalah kesalahan alamat I2C. Alamat I2C bisa berbeda tergantung pabrik pembuat modul OLED.<\/p>\n<p>Contoh koding untuk scan I2C:<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-2117 aligncenter\" src=\"http:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture7.png\" alt=\"\" width=\"247\" height=\"195\" \/>Gambar 1. Koding untuk scan I2C Address<\/p>\n<p>Note: jangan lupa menghubungkan oled ke esp32 (SDA:5 dan SCL:18)<\/p>\n<p><u>Wiring OLED dan Sintaks Dasar<\/u><\/p>\n<p>Tabel 1. Wiring OLED - ESP32<\/p>\n<table style=\"height: 304px\">\n<thead>\n<tr style=\"height: 80px\">\n<td style=\"height: 80px;width: 74px;text-align: center\"><strong>OLED Pin<\/strong><\/td>\n<td style=\"height: 80px;width: 121px;text-align: center\"><strong>ESP32 Pin<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 56px\">\n<td style=\"height: 56px;width: 74px\">VCC<\/td>\n<td style=\"height: 56px;width: 121px\">3.3V<\/td>\n<\/tr>\n<tr style=\"height: 56px\">\n<td style=\"height: 56px;width: 74px\">GND<\/td>\n<td style=\"height: 56px;width: 121px\">GND<\/td>\n<\/tr>\n<tr style=\"height: 56px\">\n<td style=\"height: 56px;width: 74px\">SDA<\/td>\n<td style=\"height: 56px;width: 121px\">GPIO 5<\/td>\n<\/tr>\n<tr style=\"height: 56px\">\n<td style=\"height: 56px;width: 74px\">SCL<\/td>\n<td style=\"height: 56px;width: 121px\">GPIO 18<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Contoh koding untuk menampilkan text pada OLED Display:<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2118 aligncenter\" src=\"http:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture8.png\" alt=\"\" width=\"554\" height=\"263\" srcset=\"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture8.png 554w, https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture8-480x228.png 480w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/>Gambar 2. Contoh koding untuk menampilkan text pada OLED Display<\/p>\n<p><u>Konversi Gambar ke Array<\/u><\/p>\n<p>Untuk menampilkan gambar pada OLED 0.91, gambar harus diubah menjadi array bitmap (monokrom hitam-putih). Ada beberapa tools yang dapat digunakan, salah satunya adalah tools online pada link berikut: <a href=\"https:\/\/www.teachmemicro.com\/lcd-bitmap-converter-online\/\">https:\/\/www.teachmemicro.com\/lcd-bitmap-converter-online\/<\/a>.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2120 aligncenter\" src=\"http:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture9.png\" alt=\"\" width=\"366\" height=\"207\" \/>Gambar 3. Konversi Gambar ke LCD Array (1)<\/p>\n<p>Pada bagian ini dapat diatur besaran pixel gambar yg akan di convert. Kemudian upload file gambar yang diinginkan.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2121 aligncenter\" src=\"http:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture10.png\" alt=\"\" width=\"553\" height=\"293\" srcset=\"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture10.png 553w, https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture10-480x254.png 480w\" sizes=\"(max-width: 553px) 100vw, 553px\" \/>Gambar 4. Konversi Gambar ke LCD Array (2)<\/p>\n<p>Kemudian tekan tombol Export Bitmap, dan akan tambil nilai array dari gambar yang diupload. Array ini nanti yang akan dimasukkan ke dalam koding ESP32 supaya gambar tersebut dapat ditampilkan pada OLED (hitam putih).<\/p>\n<p>Contoh implementasi ke koding ESP32<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2122 aligncenter\" src=\"http:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture11.png\" alt=\"\" width=\"507\" height=\"446\" srcset=\"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture11.png 507w, https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture11-480x422.png 480w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/>Gambar 5. Contoh implementasi ke koding untuk menampilkan gambar pada OLED<\/p>\n<p>note: array logo adalah output dari hasil convert image sebelumnya. Dalam screenshot ini masih sebagian yg digunakan supaya tidak terlalu besar screenshotnya. (harap dimasukkan semuanya ya hasil convertnya).<\/p>\n<p><u>Contoh implementasi hardware dan hasilnya<br \/>\n<\/u>Berikut adalah contoh implementasi yang telah digabungkan antara menampilkan image (40x32), text dan fillrectangle pada OLED 0.91.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-2123 aligncenter\" src=\"http:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture12-640x479.jpg\" alt=\"\" width=\"640\" height=\"479\" srcset=\"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture12-640x479.jpg 640w, https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture12-480x360.jpg 480w, https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture12-768x575.jpg 768w, https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture12.jpg 881w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/>Gambar 6. Contoh implementasi pada hardware dan hasilnya<\/p>\n<p>Keywords: ESP32, OLED 0.91, Image to LCD Converter, Arduino<\/p>\n<p>SDG: 9 \u201cIndustry, Innovation and Infrastructure\u201d<\/p>\n<p>Referensi:<\/p>\n<ol>\n<li><a href=\"https:\/\/randomnerdtutorials.com\">https:\/\/randomnerdtutorials.com<\/a><\/li>\n<li><a href=\"https:\/\/www.teachmemicro.com\/lcd-bitmap-converter-online\">https:\/\/www.teachmemicro.com\/lcd-bitmap-converter-online<\/a><\/li>\n<li><a href=\"https:\/\/chatgpt.com\/\">https:\/\/chatgpt.com\/<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>OLED 0.91 inch dengan resolusi 128x32 pixel merupakan modul tampilan kecil yang hemat daya dan sangat cocok untuk berbagai proyek mikrokontroler. Dengan menggunakan ESP32, kita bisa menampilkan teks, ikon, hingga gambar (bitmap) untuk memperkaya tampilan user interface. Manfaat menampilkan gambar di OLED: Menampilkan logo atau branding produk Simbol status perangkat (WiFi, baterai, dsb) Memperindah tampilan [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2123,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article"],"featured_image":{"phone":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture12-480x360.jpg","tablet":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-content\/uploads\/sites\/2\/2025\/05\/Picture12-768x575.jpg"},"_links":{"self":[{"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/posts\/2116"}],"collection":[{"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/comments?post=2116"}],"version-history":[{"count":4,"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/posts\/2116\/revisions"}],"predecessor-version":[{"id":2126,"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/posts\/2116\/revisions\/2126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/media\/2123"}],"wp:attachment":[{"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/media?parent=2116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/categories?post=2116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/base.binus.ac.id\/automotive-robotics-engineering\/wp-json\/wp\/v2\/tags?post=2116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}