Server Web ESP32/ESP8266: Kontrol Output dengan Timer

Elga Aris Prastyo Juli 15, 2022

Dalam tutorial ini Anda akan membangun server web untuk mengontrol output NodeMCU ESP32 atau ESP8266 dengan pulsa menggunakan Arduino IDE. Lebar pulsa (“timer”) dapat diatur menggunakan slider di halaman web. Saat Anda mengklik tombol ON, ESP mengatur status output ke HIGH untuk jumlah detik yang ditentukan dalam slider. Ini dapat berguna secara khusus untuk mengontrol peranti yang membutuhkan sinyal TINGGI selama beberapa detik yang telah ditentukan untuk digerakkan.

Ulasan Proyek

Gambar berikut menunjukkan gambaran umum tentang cara kerja proyek ini.

- ESP32/ESP8266 menghosting server web yang memungkinkan Anda mengontrol output dengan pulsa;

- Server web berisi penggeser yang memungkinkan Anda menentukan lebar pulsa (berapa detik output harus TINGGI);

- Ada tombol ON/OFF. Atur ke ON untuk mengirim pulsa. Setelah itu, Anda akan melihat timer berkurang selama durasi lebar pulsa;

- Server web ini dapat berguna untuk mengontrol perangkat yang membutuhkan pulsa untuk diaktifkan seperti pembuka pintu garasi, misalnya.

Memasang Library – Server Web Async

Untuk membangun server web, Anda perlu menginstal pustaka berikut:

- ESP32: instal  ESPAsyncWebServer  dan  perpustakaan AsyncTCP.

- ESP8266: instal  pustaka ESPAsyncWebServer  dan  ESPAsyncTCP.

Library ini tidak tersedia untuk diinstal melalui Arduino Library Manager, jadi Anda perlu menyalin file library ke folder Library 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 Program

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 LED on-board GPIO 2 – Anda dapat mengubah kode untuk mengontrol GPIO lai\nya.

Cara Kerja Kode

Kami telah menjelaskan dengan sangat rinci bagaimana server web seperti ini bekerja di tutorial sebelumnya ( Server Web Suhu DHT  atau  Server Web Relay ), jadi kami hanya akan melihat bagian yang relevan untuk proyek ini.

Kredensial Jaringan

Seperti yang dikatakan sebelumnya, masukkan kredensial jaringan Anda di baris berikut:

Label Penggeser

Di atas penggeser, ada angka yang menunjukkan nilai penggeser saat ini.

Secara default, nilai penggeser diatur ke%TIMERVALUE%pengganti.

 

Itu%TIMERVALUE%adalah placeholder yang akan diganti dengan nilai yang disimpan ditimerSliderNilaivariabel yang diatur ke 10 secara default. Tetapi Anda dapat mengubahnya di baris berikut:

Ini juga akan berubah saat Anda menggerakkan penggeser. Saat penggeser dipindahkan, ia memanggil fungsi JavaScript yang memperbarui nilai penggeser.

Penggeser

Baris berikut membuat slider.

Mari kita uraikan ini menjadi bagian-bagian yang lebih kecil.

 

Dalam HTML, slider adalah tipe input. Tag <input> menentukan bidang input tempat pengguna dapat memasukkan data. Slider adalah bidang input tipejangkauan. Ada banyak jenis bidang input lainnya.

Mari kita uraikan ini menjadi bagian-bagian yang lebih kecil.

 

Dalam HTML, slider adalah tipe input. Tag <input> menentukan bidang input tempat pengguna dapat memasukkan data. Slider adalah bidang input tipejangkauan. Ada banyak jenis bidang input lainnya. Rentang default penggeser adalah 0 hingga 100. Anda dapat menggunakan atribut berikut untuk menyesuaikan pengaturan penggeser:

- maksimal: menentukan nilai maksimum yang diizinkan. Dalam contoh kami, kami menyetelnya ke 20, tetapi Anda dapat mengubah nilai itu.

- min: menentukan nilai minimum. Dalam hal ini, kami menyetelnya ke 1.

- melangkah: menentukan interval angka. Ini disetel ke 1.

- nilai: menentukan nilai default penggeser. Dalam hal ini, sama dengan%TIMERVALUE%.

Itu%TIMERVALUE%adalah placeholder yang akan diganti dengan nilai sebenarnya. Dalam kode, itu akan diganti dengan nilai timer SliderNilai variabel yang diatur ke 10 secara default. Tetapi Anda dapat mengubahnya di baris berikut:

Slider memiliki dua atribut lagi:Indodandalam perubahan.

- Id: menentukan id unik untuk elemen HTML (slider). Id memungkinkan kita untuk memanipulasi elemen menggunakan CSS atau JavaScript.

- dalam perubahan: adalah atribut event yang terjadi ketika kita mengubah nilai elemen (slider). Saat Anda menggerakkan penggeser, itu akan memanggil perbarui SliderTimer()fungsi.

Perbarui Nilai Slider (JavaScript)

Saat Anda menggerakkan penggeser, tombol perbarui SliderTimer() fungsi dijalankan.

Itu mendapat nilai slider saat ini dengan mengacu pada id-nyapengatur waktu Slider:

Perbarui label penggeser ke nilai penggeser saat ini dengan mengacu pada id-nyanilai waktu:

Kemudian, ia membuat permintaan pada /slider?value=sliderValue URL. DimanasliderNilaisama dengan nilai slider saat ini.

 

Kemudian, ESP32/ESP8266 menangani apa yang terjadi ketika menerima permintaan pada URL tersebut.

Kontrol Output dengan Timer (JavaScript)

Ketika Anda mengklik tombol ON/OFF untuk mengontrol output, ini akan memanggilkotak centang toogle()fungsi JavaScript.

 

Fungsi ini mendapatkan nilai saat ini dari label penggeser:

Membuat permintaan pada /update?state= 1 URL sehingga ESP mengetahui bahwa ia perlu menyetel output ke TINGGI.

Baris berikut mengurangi nilai label penggeser setiap detik membuat penghitung waktu mundur.

Ketika timer mencapai nol, nilai label akan kembali ke nilai aslinya dan permintaan dibuat pada URL /update?state= 0 , sehingga ESP tahu sudah waktunya untuk mengatur output ke RENDAH. Tombol pada server web akan kembali ke keadaan mati.

Menangani Permintaan

ESP32/ESP8266 perlu menangani apa yang terjadi saat menerima permintaan pada URL tertentu.

URL

Saat Anda mengakses URL root/, kirim teks HTML yang disimpan diindex_html variabel. Semua placeholder diganti dengan nilai sebenarnya oleh prosesor() fungsi.

Kontrol Status Keluaran

Baris berikut menangani apa yang terjadi ketika Anda menerima permintaan pada /update?state= 1 dan /update?state= 0 URL. Ini mengatur status output ke TINGGI atau RENDAH demikian.

Status keluaran diperbarui di baris berikut:

Perbarui Nilai Penggeser

Setiap kali Anda menyeret penggeser, ESP menerima permintaan dengan nilai baru. Kami menyimpan nilai slider baru dan mencetaknya di Serial Monitor.

Demonstrasi

Unggah kode ke papan NodeMCU ESP32 atau ESP8266 Anda. Kemudian, buka Serial Monitor dan tekan tombol RST/EN on-board untuk mendapatkan alamat IP.

 

Buka browser di jaringan lokal Anda dan ketik alamat IP ESP. Halaman berikut harus dimuat.

Seret penggeser untuk menyesuaikan lebar pulsa, lalu, klik tombol ON/OFF. Outputnya (dalam hal iniGPIO 2– LED internal) akan tetap menyala selama jangka waktu yang telah Anda atur pada penggeser.

Sumber: randomnerdtutorials.com  

 

 

 

 

 


Siap Belajar & Bangun Proyek IoT?

KLIK GAMBAR DI BAWAH INI UNTUK BELI TRAINER KIT ESP32


Klik gambar untuk pembelian

Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.

Tags:

Posting Komentar

0 Komentar