Tutorial ini menunjukkan cara membangun server web ESP32 dengan penggeser untuk mengontrol kecerahan LED. Anda akan belajar cara menambahkan slider ke proyek server web Anda, mendapatkan nilainya dan menyimpannya dalam variabel yang dapat digunakan ESP32. Kami akan menggunakan nilai itu untuk mengontrol siklus tugas sinyal PWM dan mengubah kecerahan LED. Alih-alih LED, Anda dapat mengontrol motor servo, misalnya.
Selain itu, Anda juga dapat memodifikasi kode dalam tutorial ini untuk menambahkan penggeser ke proyek Anda untuk menetapkan nilai ambang batas atau nilai lain yang perlu Anda gunakan dalam kode Anda.
Ulasan Projek
• ESP32 menghosting server web yang menampilkan halaman web dengan penggeser;
• Saat Anda memindahkan penggeser, Anda membuat permintaan HTTP ke ESP32 dengan nilai penggeser baru;
• Permintaan HTTP datang dalam format berikut: GET/slider?value=SLIDERVALUE, di mana SLIDERVALUE adalah angka antara 0 dan 255. Anda dapat memodifikasi slider untuk menyertakan rentang lainnya;
• Dari permintaan HTTP, ESP32 mendapatkan nilai slider saat ini;
• ESP32 menyesuaikan siklus tugas PWM sesuai dengan nilai slider;
• Ini berguna untuk mengontrol kecerahan LED (seperti yang akan kita lakukan dalam contoh ini), motor servo, pengaturan nilai ambang batas, atau aplikasi lain.
Prasyarat
Sebelum melanjutkan dengan proyek ini, pastikan Anda memeriksa prasyarat berikut.
Arduino IDE
Kami akan memprogram papan ESP32 menggunakan Arduino IDE, jadi sebelum melanjutkan dengan tutorial ini, pastikan Anda telah memasang papan ESP32 di Arduino IDE Anda.
• Memasang Board ESP32 di Arduino IDE(Windows, Mac OS X, dan Linux)
Pustaka Server Web Async
Kami akan membangun server web menggunakan pustaka berikut:
• AsyncTCP
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
Kode berikut mengontrol kecerahan LED bawaan ESP32 menggunakan penggeser di server web. Dengan kata lain, Anda dapat mengubah siklus tugas PWM dengan penggeser. Ini dapat berguna untuk mengontrol kecerahan LED atau mengontrol motor servo, misalnya.
Salin kode ke Arduino IDE Anda. Masukkan kredensial jaringan Anda dan kode akan langsung berfungsi.
Cara Kerja Kode
Lanjutkan membaca untuk mempelajari cara kerja kode atau lewati ke bagian berikutnya.
Mengimpor Libraries
Pertama, impor perpustakaan yang diperlukan. WiFi, ESPAsyncWebServer dan ESPAsyncTCP diperlukan untuk membangun server web.
Mengatur Kredensial Jaringan Anda
Masukkan kredensial jaringan Anda di variabel berikut, sehingga ESP32 dapat terhubung ke jaringan lokal Anda.
Definisi Variabel
Kami akan mengontrol kecerahan LED built-in ESP32. Built-in LED sesuai dengan GPIO 2. Simpan GPIO yang ingin kita kontrol pada variabel output.
Variabel sliderValue akan menahan nilai slider. Pada awalnya, itu diatur ke nol.
Setel Properti PWM
Baris berikut mendefinisikan properti PWM untuk mengontrol LED.
Kami akan menggunakan resolusi 8-bit, yang berarti Anda dapat mengontrol kecerahan LED menggunakan nilai dari 0 hingga 255.
Untuk mempelajari lebih lanjut tentang properti PWM dengan ESP32, baca panduan kami: ESP32 PWM dengan Arduino IDE (Output Analog).
Parameter Masukan
Variabel PARAM_INPUT akan digunakan untuk "mencari" nilai slider pada permintaan yang diterima oleh ESP32 saat slider dipindahkan. (Ingat: ESP32 akan menerima permintaan seperti ini GET/slider?value=SLIDERVALUE)
Ini akan mencari nilai pada URL dan mendapatkan nilai yang diberikan padanya.
Membangun Halaman Web
Sekarang mari kita lanjutkan ke halaman server web.
Halaman web untuk proyek ini cukup sederhana. Ini berisi satu judul, satu paragraf dan satu input dari rentang jenis.
Mari kita lihat bagaimana halaman web dibuat.
Semua teks HTML dengan gaya yang disertakan disimpan dalam variabel index_html. Sekarang kita akan melihat teks HTML dan melihat apa yang dilakukan setiap bagian.
Tag <meta> berikut membuat halaman web Anda responsif di browser apa pun.
Di antara tag <title> </title> ada judul server web kami. Judul adalah teks yang muncul di tab browser web.
Styles
Di antara tag <style></style>, kita menambahkan beberapa CSS untuk menata halaman web.
Pada dasarnya, kami mengatur halaman HTML untuk menampilkan teks dengan font Arial di blok tanpa margin, dan rata di tengah.
Baris berikut mengatur ukuran font untuk heading (h2) dan paragraf (p).
Setel properti tubuh HTML.
Baris berikut menyesuaikan penggeser:
Body HTML
Di dalam tag <body></body> adalah tempat kita menambahkan konten halaman web.
Tag <h2></h2> menambahkan heading ke halaman web. Dalam hal ini, teks "ESP Web Server", tetapi Anda dapat menambahkan teks lainnya.
Paragraf pertama akan berisi nilai slider saat ini. Tag HTML tertentu memiliki id textSliderValue yang ditetapkan padanya, sehingga kita dapat merujuknya nanti.
%SLIDERVALUE% adalah pengganti untuk nilai penggeser. Ini akan digantikan oleh ESP32 dengan nilai aktual saat mengirimkannya ke browser. Ini berguna untuk menunjukkan nilai saat ini saat Anda mengakses browser untuk pertama kalinya.
Membuat Slider
Untuk membuat slider di HTML Anda menggunakan tag <input>. Tag <input> menentukan bidang tempat pengguna dapat memasukkan data.
Ada berbagai macam jenis input. Untuk menentukan slider, gunakan atribut "type" dengan nilai "range". Dalam penggeser, Anda juga perlu menentukan rentang minimum dan maksimum menggunakan atribut “min” dan “maks” (dalam hal ini, masing-masing 0 dan 255).
Anda juga perlu mendefinisikan atribut lain seperti:
• Atribut langkah menentukan interval antara angka yang valid. Dalam kasus kami, ini diatur ke 1;
• Kelas untuk mengatur gaya slider (class="slider");
• Id untuk memperbarui posisi saat ini yang ditampilkan di halaman web;
• Atribut onchange untuk memanggil fungsi (updateSliderPWM(this)) untuk mengirim permintaan HTTP ke ESP32 saat slider bergerak. Kata kunci this mengacu pada nilai slider saat ini.
Menambahkan JavaScript ke File HTML
Selanjutnya, Anda perlu menambahkan beberapa kode JavaScript ke file HTML Anda menggunakan tag <script> dan </script>. Anda perlu menambahkan fungsi updateSliderPWM() yang akan membuat permintaan ke ESP32 dengan nilai slider saat ini.
Baris berikutnya ini mendapatkan nilai slider saat ini dengan id-nya dan menyimpannya di variabel JavaScript sliderValue. Sebelumnya, kami telah menetapkan id penggeser ke pwmSlider. Jadi, kita mendapatkannya sebagai berikut:
Setelah itu, kita atur label slider (yang idnya adalah textSliderValue) ke nilai yang disimpan pada variabel sliderValue.
Terakhir, buat permintaan HTTP GET.
Misalnya, saat bilah geser berada di 0, Anda membuat permintaan HTTP GET di URL berikut:
Dan ketika nilai penggeser adalah 200, Anda akan memiliki permintaan di URL ikuti.
Dengan cara ini, ketika ESP32 menerima permintaan GET, ia dapat mengambil parameter nilai di URL dan mengontrol sinyal PWM yang sesuai seperti yang akan kita lihat di bagian selanjutnya.
Prosesor
Sekarang, kita perlu membuat fungsi processor(), yang akan menggantikan placeholder dalam teks HTML kita dengan nilai slider saat ini saat Anda mengaksesnya untuk pertama kali di browser.
Saat halaman web diminta, kami memeriksa apakah HTML memiliki placeholder. Jika menemukan %SLIDERVALUE% placeholder, kami mengembalikan nilai yang disimpan pada variabel sliderValue.
setup()
Di setup(), inisialisasi Serial Monitor untuk keperluan debugging.
Konfigurasikan properti PWM LED yang ditentukan sebelumnya.
Lampirkan saluran ke GPIO yang ingin Anda kontrol.
Atur siklus tugas sinyal PWM ke nilai yang disimpan di sliderValue (saat ESP32 dimulai, diatur ke 0).
Hubungkan ke jaringan lokal Anda dan cetak alamat IP ESP32.
Menangani Permintaan
Terakhir, tambahkan baris kode berikutnya untuk menangani server web.
Saat kami membuat permintaan pada URL root, kami mengirim teks HTML yang disimpan pada variabel index_html. Kita juga harus melewati fungsi prosesor, yang akan menggantikan semua placeholder dengan nilai yang tepat.
Kami membutuhkan penangan lain yang akan menyimpan nilai penggeser saat ini dan mengatur kecerahan LED yang sesuai.
Pada dasarnya, kami mendapatkan nilai slider pada baris berikut:
Kemudian, perbarui kecerahan LED (siklus tugas PWM) menggunakan fungsi ledcWrite() yang menerima sebagai argumen saluran yang ingin Anda kontrol dan nilainya.
Terakhir, mulai server.
Karena ini adalah server web asinkron, kita tidak perlu menulis apa pun di loop().
Kurang lebih seperti itulah cara kerja kode.
Unggah Kode
Sekarang, unggah kode ke ESP32 Anda. Pastikan Anda memilih papan dan port COM yang tepat.
Setelah mengunggah, buka Serial Monitor dengan baud rate 115200. Tekan tombol reset ESP32. Alamat IP ESP32 harus dicetak di monitor serial.
Demonstrasi Web Server
Buka browser dan ketik alamat IP ESP32. Server web Anda harus menampilkan bilah geser dan nilainya saat ini.
Gerakkan penggeser dan lihat LED bawaan ESP32 meningkat dan menurun kecerahannya.
Membungkus
Dengan tutorial ini Anda telah belajar cara menambahkan slider ke proyek server web Anda dan mendapatkan serta menyimpan nilainya pada variabel yang dapat digunakan ESP32. Sebagai contoh, kami mengontrol sinyal PWM untuk mengontrol kecerahan LED. Alih-alih LED, Anda dapat mengontrol motor servo, misalnya.
Selain itu, penggeser juga dapat digunakan untuk mengatur ambang batas atau nilai lain yang perlu Anda atur dan kemudian digunakan oleh ESP32 untuk memutuskan sesuatu.
Jika Anda menggunakan papan ESP8266, bacaESP8266 NodeMCU Web Server dengan Slider Control LED Brightness (PWM).
Kami harap proyek ini bermanfaat bagi Anda. Anda mungkin juga menyukai tutorial berikut:
• Server Web Async ESP32 – Output Kontrol
• ESP Web Server – Mengontrol Output denganTimer
• Server Web ESP32 DHT11/DHT22 – Suhu danKelembaban
Pelajari lebih lanjut tentang ESP32 dengan sumber daya kami:
• Belajar ESP32 dengan Arduino IDE (eBook +Video Course)
• Proyek dan Tutorial ESP32 lainnya…
Sumber : randomnerdtutorials.com
){kind=link}
0 Komentar