Tutorial ini menunjukkan cara menampilkan gambar (.png dan .jpg) di server web ESP32 atau ESP8266 Anda menggunakan Arduino IDE. Kami membahas cara menyematkan gambar di server web asinkron menggunakan perpustakaan ESPAsyncWebServer atau di server HTTP sederhana.
Tampilkan Gambar di Server Web ESP
Ada berbagai cara untuk menampilkan gambar di server web ESP32/ESP8266 Anda. Dalam artikel ini, kami akan membahas metode berikut:
1. Sematkan gambar dengan merujuk ke URL-nya (hyperlink ke tempat gambar disimpan);
2. Simpan gambar dalam sistem file ESP32/ESP8266 (SPIFFS);
3. Konversikan gambar ke base64.
Opsi #1: URL Gambar
Untuk memasukkan gambar dalam HTML, Anda menggunakan tag <img> dengan atribut src, sebagai berikut:
Anda dapat menggunakan URL yang menautkan ke sumber gambar apa pun yang disimpan di internet.
Jadi, untuk menampilkan gambar, Anda hanya perlu menyertakan teks HTML sebelumnya di kode server web Anda.
Untuk contoh server web, Anda dapat membaca artikel berikut:
• ESP8266:
• ESP32:
Opsi #2: Simpan Gambar di ESP32/ESP8266 SPIFFS
SPIFFS adalah singkatan dari Serial Peripheral Interface Flash File System dan merupakan sistem file ringan yang dibuat untuk mikrokontroler dengan chip flash seperti ESP32 dan ESP8266.
Ini memungkinkan Anda mengakses memori flash seperti yang Anda lakukan di sistem file normal di komputer Anda. Anda dapat menyimpan file HTML dan CSS di SPIFSS untuk membangun server web, termasuk gambar dan ikon kecil.
Di bagian ini kami akan menunjukkan cara menyimpan gambar pada memori flash dan menyajikan gambar ke klien di server webasinkron.
Plugin Pengunggah Sistem File
Untuk mengunggah gambar ke memori flash ESP32 dan ESP8266, kami akan menggunakan plugin untuk Arduino IDE: Pengunggah sistem file. Ikuti salah satu tutorial berikutnya untuk menginstal pengunggah sistem file tergantung pada papan yang Anda gunakan:
• ESP32: Instal FileSystem Uploader Pluginuntuk Arduino
• ESP8266: Instal Plugin PengunggahFileSystem untuk Arduino
Setelah menginstal plugin, Anda dapat melanjutkan dengan tutorial.
Memasang Pustaka untuk Server Web Asinkron
Bagian ini menunjukkan cara menampilkan gambar yang disimpan di memori flash ESP32 atau ESP8266 di server web menggunakan pustaka ESPAsyncWebServer. Untuk membangun server web ini, Anda perlu menginstal pustaka berikut:
• Jika Anda menggunakan ESP32: Anda perlu menginstal ESPAsyncWebServer dan pustaka AsyncTCP.
• Jika Anda menggunakan ESP8266: Anda perlu menginstal ESPAsyncWebServer dan perpustakaan ESPAsyncTCP.
Kode – Menampilkan Gambar di Server Web Asinkron
Buat sketsa baru di Arduino IDE dan salin kode berikut. Kode ini berfungsi baik dengan ESP32 dan ESP8266. Ini termasuk perpustakaan yang tepat tergantung pada papan yang Anda gunakan.
Masukkan kredensial jaringan Anda dalam variabel berikut:
Simpan kode Anda, tetapi jangan mengunggahnya dulu. Pertama, Anda perlu mengunggah gambar ke sistem file ESP.
Unggah Gambar ke ESP32/ESP8266 SPIFFS
Dengan sketsa Anda terbuka, buka Sketch > Show Sketch Folder. Folder tempat sketsa Anda disimpan akan terbuka.
Di dalam folder itu, buat folder baru bernama data.
Di dalam folder data adalah tempat Anda harus meletakkan gambar yang ingin ditampilkan di server web. Dalam kasus kami, kami memiliki gambar berikut.
Catatan: pastikan ukuran file tidak melebihi ukuran memori flash.
Jika Anda ingin bereksperimen dengan gambar-gambar ini, Anda dapat mengunduhnya di sini.
Kemudian, di Arduino IDE Anda, unggah gambar ke papan Anda. Buka menu Tools dan pilih “ESP32 Sketch Data Upload” atau “ESP8266 Sketch Data Upload” tergantung pada papan yang Anda gunakan.
Anda harus mendapatkan pesan serupa di jendela debugging. File berhasil diunggah ke sistem file ESP32.
Unggah Kode
Selanjutnya, Anda dapat mengunggah kode ke papan Anda. Jangan lupa untuk memilih board dan COM port yang tepat di menu Tools.
Juga, jangan lupa bahwa Anda perlu menyertakan kredensial jaringan Anda dalam variabel berikut:
Akses Server Web
Setelah mengupload kode, buka Serial Monitor dengan baud rate 115200 dan tekan tombol ESP RST. Alamat IP harus dicetak (dalam kasus kami, ini adalah 192.168.1.71).
Akses server web di browser web apa pun dan semua gambar harus ditampilkan.
Cara Kerja Kode
Lanjutkan membaca bagian ini untuk mempelajari cara kerja kode.
Sertakan Perpustakaan
Kode dimulai dengan memasukkan pustaka yang diperlukan. Jika Anda menggunakan ESP32, itu termasuk perpustakaan berikut:
Jika Anda menggunakan ESP8266, sertakan pustaka berikut ini:
Kredensial Jaringan
Masukkan kredensial jaringan Anda dalam variabel berikut agar ESP dapat terhubung ke jaringan Anda:
Buat objek AsyncWebServer pada port 80:
Kode HTML untuk membangun server web disimpan pada variabel index_html. Untuk memasukkan gambar pada teks HTML, Anda hanya perlu menggunakan tag <img> dan meneruskan sumber gambar, sebagai berikut:
Dalam kasus kami, kami menampilkan semua gambar berikut:
Saat browser membaca teks HTML ini, browser akan membuat permintaan di /image_source. Misalnya, itu akan membuat permintaan di /sun URL. Jadi, kita perlu menangani permintaan itu nanti.
Sambungkan ke Wi-Fi
Di setup(), sambungkan ke Wi-Fi dan cetak alamat IP ESP Anda:
Menangani Permintaan
Karena ini adalah server web asinkron, kami perlu mengirim teks HTML ketika kami menerima permintaan di URL root sebagai berikut:
Setelah mendapatkan teks HTML, Anda akan menerima permintaan di /image_ source. Jadi, Anda perlu menangani semua permintaan itu. Berikut adalah contoh untuk salah satu gambar:
Ketika menerima permintaan di /sun URL, kami mengirim gambar yang disimpan di jalur /sun.png di ESP32/ESP8266 SPIFFS (sistem file) dan bertipe image/png.
Terakhir, mulai server menggunakan metode begin().
Opsi #3: Pengkodean Base64
Bagian ini menunjukkan cara mengonversi gambar Anda ke base64 untuk menyertakannya di server web ESP32/ESP8266. Kami akan menunjukkan cara menampilkan gambar di server web asinkron dan di server HTTP sederhana.
Konversikan gambar Anda ke pengkodean base64. Buka situs web berikut:
Seret dan jatuhkan gambar Anda. Anda dapat mengunggah hingga 20 gambar sekaligus. Untuk contoh ini kita akan menggunakan enam gambar berikut.
Klik tombol “show kode” untuk setiap file gambar yang Anda unggah:
Kemudian, salin data dari bidang pertama. Itulah yang perlu Anda gunakan sebagai sumber di tag HTML <img src="”> Anda.
Kode – Server Web Async ESP
Kode berikut membuat server web yang menampilkan gambar apa pun di halaman web Anda. Kode berfungsi dengan ESP32 dan ESP8266:
Cara Kerja Kode
Lanjutkan membaca untuk mempelajari cara kerja kode atau lewati ke bagian “Demonstrasi”.
Sertakan Perpustakaan
Kode dimulai dengan memasukkan pustaka yang diperlukan. Jika Anda menggunakan ESP32, itu termasuk perpustakaan berikut:
Jika Anda menggunakan ESP8266, sertakan pustaka berikut ini:
Kredensial Jaringan
Masukkan kredensial jaringan Anda dalam variabel berikut agar ESP dapat terhubung ke jaringan Anda:
Buat objek AsyncWebServer pada port 80:
Sertakan gambar
Kemudian, sertakan teks HTML Anda dalam variabel index_html. Di sinilah Anda akan memiliki gambar Anda.
Untuk memasukkan gambar dalam HTML, Anda menggunakan tag <img> dengan atribut src, sebagai berikut:
Anda harus mengganti your_image_encoded dengan kode yang telah Anda salin sebelumnya dari situs penyandian base64. Dalam kasus kami, kami memiliki yang berikut untuk semua 6 gambar:
Sambungkan ke Wi-Fi
Di setup() sambungkan ke Wi-Fi dan cetak alamat IP ESP Anda:
Menangani Permintaan
Karena ini adalah server web asinkron, kami perlu mengirim teks HTML ketika kami menerima permintaan di URL root sebagai berikut:
Mulai server menggunakan metode begin().
Demonstrasi
Unggah kode ke papan ESP32 atau ESP8266 Anda. Jangan lupa untuk memilih board dan COM port yang tepat di menu Tools.
Setelah mengupload kode, buka Serial Monitor dengan baud rate 115200 dan tekan tombol ESP RST. Alamat IP harus dicetak (dalam kasus kami, ini adalah 192.168.1.71).
Akses server web di browser web apa pun dan semua gambar harus ditampilkan.
ESP32/ESP8266 Server Web HTTP Sederhana
Di bagian ini kami menunjukkan cara menampilkan gambar di Server Web HTTP sederhana.
Catatan: untuk menampilkan gambar, lebih baik menggunakan metode dengan server web Asynchronous (contoh sebelumnya). Anda mungkin mengalami masalah dengan metode ini jika mencoba menampilkan banyak gambar atau menggunakan file besar. Namun, cara ini bekerja dengan baik jika Anda hanya ingin menampilkan gambar atau ikon kecil.
Kode berikut menunjukkan cara menampilkan gambar jika Anda menggunakan server web HTTP sederhana (tanpa pustaka ESPAsyncWebServer):
Kode ini berfungsi baik dengan ESP32 dan ESP8266. Kode menggunakan perpustakaan Wi-Fi yang tepat tergantung pada papan yang Anda gunakan.
Proses untuk menampilkan gambar semuanya serupa: Anda harus menyertakan pengkodean base64 gambar dalam atribut src dari tag <img>.
Kemudian, kirim teks HTML ke klien menggunakan metode client.println() sebagai berikut:
Kami telah menjelaskan dengan sangat rinci bagaimana server web semacam ini bekerja di tutorial sebelumnya. Untuk mempelajari lebih lanjut, Anda dapat membaca artikel berikut:
• Server Web ESP32 dengan Arduino IDE
• Server Web ESP8266 dengan Arduino IDE
• Server Web Asinkron ESP32 DHT11/DHT22
• Server Web Asinkron ESP8266 DHT11/DHT22
Setelah mengupload kode, gambar akan ditampilkan di server web Anda.
Membungkus
Dalam artikel ini kami telah menunjukkan kepada Anda berbagai cara untuk menampilkan gambar di server web ESP32/ESP8266 Anda. Jika Anda tahu metode lain yang cocok, Anda dapat membagikannya dengan menulis komentar di bawah.
Kami harap tutorial ini bermanfaat bagi Anda. Anda mungkin juga merasa berguna menggunakan gambar yang disertakan dalam contoh ini di stasiun cuaca ESP untuk menunjukkan status cuaca saat ini.
Jika Anda ingin mempelajari lebih lanjut tentang ESP32 atau ESP8266, Anda dapat mendaftar di kursus kami:
• Belajar ESP32 dengan Arduino IDE
• Otomatisasi Rumah menggunakan ESP8266
• Pemrograman MicroPython dengan ESP32 danESP8266
Anda juga dapat melihat sumber daya gratis kami:
• Proyek dan Tutorial ESP32 Gratis
• Proyek dan Tutorial ESP8266 Gratis
Sumber : randomnerdtutorials.com
0 Komentar