Tutorial ini menunjukkan cara mengontrol output ESP32 atau ESP8266 menggunakan server web dan tombol fisik secara bersamaan. Status keluaran diperbarui pada halaman web apakah itu diubah melalui tombol fisik atau server web.
Papan ESP32/ESP8266 akan diprogram menggunakan Arduino IDE. Jadi, pastikan Anda memasang papan ini:
• Memasang Board ESP32 di Arduino IDE(Windows, Mac OS X, dan Linux)
• Memasang Papan ESP8266 di Arduino IDE(Windows, Mac OS X, Linux)
Ulasan Proyek
Mari kita lihat sekilas bagaimana proyek ini bekerja.
• ESP32 atau ESP8266 menghosting server web yang memungkinkan Anda mengontrol status keluaran;
• Status keluaran saat ini ditampilkan di server web;
• ESP juga terhubung ke tombol tekan fisik yang mengontrol output yang sama;
• Jika Anda mengubah status keluaran menggunakan tombol puhs fisik, status saat ini juga diperbarui di server web.
Singkatnya, proyek ini memungkinkan Anda untuk mengontrol output yang sama menggunakan server web dan tombol tekan secara bersamaan. Setiap kali status keluaran berubah, server web diperbarui.
Diagram Skematik
Sebelum melanjutkan, Anda perlu merakit sirkuit dengan LED dan tombol tekan. Kami akan menghubungkan LED ke GPIO 2 dan tombol tekan ke GPIO 4.
Bagian yang Diperlukan
Berikut daftar bagian yang Anda perlukan untuk membangun sirkuit:
• ESP32 (baca Best ESP32 Dev Boards) atau ESP8266
• LED 5mm
Memasang Pustaka – Server Web Async
Untuk membangun server web, Anda perlu menginstal pustaka berikut:
• ESP32: instal ESPAsyncWebServer dan perpustakaan AsyncTCP.
• ESP8266: instal pustaka ESPAsyncWebServer dan ESPAsyncTCP.
Pustaka ini tidak tersedia untuk diinstal melalui Manajer Perpustakaan Arduino, jadi Anda perlu menyalin file perpustakaan ke folder Perpustakaan Instalasi Arduino. Atau, di Arduino IDE Anda, Anda bisa pergi ke Sketch > Include Library > Add .zip Library dan pilih library yang baru saja Anda unduh.
Kode Server Web ESP
Salin kode berikut ke Arduino IDE Anda.
Anda hanya perlu memasukkan kredensial jaringan Anda (SSID dan kata sandi) dan server web akan langsung bekerja. Kode ini kompatibel dengan papan ESP32 dan ESP8266 dan mengontrol GPIO 2 – Anda dapat mengubah kode untuk mengontrol GPIO lainnya.
Cara Kerja Kode
Kami telah menjelaskan dengan sangat rinci bagaimana server web seperti ini bekerja di tutorial sebelumnya (Server Web Suhu DHT), jadi kami hanya akan melihat bagian yang relevan untuk proyek ini.
Kredensial Jaringan
Seperti yang dikatakan sebelumnya, Anda perlu memasukkan kredensial jaringan Anda di baris berikut:
Status Tombol dan Status Output
Variabel ledState menyimpan status keluaran LED. Untuk default, ketika server web dimulai, itu RENDAH.
ButtonState dan lastButtonState digunakan untuk mendeteksi apakah tombol ditekan atau tidak.
Tombol (server web)
Kami tidak menyertakan HTML untuk membuat tombol pada variabel index_html. Itu karena kami ingin dapat mengubahnya tergantung pada status LED saat ini yang juga dapat diubah dengan tombol.
Jadi, kami telah membuat placeholder untuk tombol %BUTTONPLACEHOLDER% yang akan diganti dengan teks HTML untuk membuat tombol nanti pada kode (ini dilakukan di fungsi prosesor()).
prosesor()
Fungsi processor() menggantikan placeholder pada teks HTML dengan nilai sebenarnya. Pertama, ia memeriksa apakah teks HTML berisi placeholder %BUTTONPLACEHOLDER%.
Kemudian, panggil fungsi outputState() yang mengembalikan status output saat ini. Kami menyimpannya di variabel outputStateValue.
Setelah itu, gunakan nilai tersebut untuk membuat teks HTML untuk menampilkan tombol dengan status yang benar:
HTTP GET Permintaan untuk Mengubah Status Output (JavaScript)
Saat Anda menekan tombol, fungsi toggleCheckbox() dipanggil. Fungsi ini akan membuat permintaan pada URL yang berbeda untuk menyalakan atau mematikan LED.
Untuk menyalakan LED, itu membuat permintaan pada /update?state=1 URL:
Jika tidak, itu membuat permintaan pada /update?state=0 URL.
HTTP GET Permintaan untuk Memperbarui Status (JavaScript)
Untuk menjaga status keluaran diperbarui di server web, kami memanggil fungsi berikut yang membuat permintaan baru di /status URL setiap detik.
Menangani Permintaan
Kemudian, kita perlu menangani apa yang terjadi ketika ESP32 atau ESP8266 menerima permintaan pada URL tersebut.
Ketika permintaan diterima di root / URL, kami mengirim halaman HTML serta prosesor.
Baris berikut memeriksa apakah Anda menerima permintaan pada /update?state=1 atau /update?state=0 URL dan mengubah ledState yang sesuai.
Saat permintaan diterima di /state URL, kami mengirim status keluaran saat ini:
loop()
Di loop(), kami mendebounce tombol tekan dan menyalakan atau mematikan LED tergantung pada nilai variabel ledState.
Demonstrasi
Unggah kode ke papan ESP32 atau ESP8266 Anda.
Kemudian, buka Serial Monitor pada baud rate 115200. Tekan tombol EN/RST on-board untuk mendapatkan alamat IP.
Buka browser di jaringan lokal Anda, dan ketik alamat IP ESP. Anda harus memiliki akses ke server web seperti yang ditunjukkan di bawah ini.
Anda dapat mengaktifkan tombol di server web untuk menyalakan LED.
Anda juga dapat mengontrol LED yang sama dengan tombol tekan fisik. Statusnya akan selalu terupdate secara otomatis di web server.
Membungkus
Dalam tutorial ini Anda telah mempelajari cara mengontrol output ESP32/ESP8266 dengan server web dan tombol fisik secara bersamaan. Status keluaran selalu diperbarui apakah itu diubah melalui server web atau dengan tombol fisik.
Proyek lain yang mungkin Anda sukai:
• Server Web ESP32/ESP8266: Kontrol Outputdengan Sakelar Sesaat
• Tampilkan Gambar di Server Web ESP32 danESP8266
• Input Data pada HTML Form ESP32/ESP8266Web Server
• ESP32 Web Server menggunakan SPIFFS (SPIFlash File System)
Pelajari lebih lanjut tentang ESP32 dan ESP8266 dengan sumber daya kami:
• Belajar ESP32 menggunakan Arduino IDE
• Otomatisasi Rumah menggunakan ESP8266
Sumber : randomnerdtutorials.com
0 Komentar