Tutorial ini menunjukkan cara membangun server web ESP32 yang menampilkan halaman web dengan beberapa bilah geser. Slider mengontrol siklus tugas saluran PWM yang berbeda untuk mengontrol kecerahan beberapa LED. Alih-alih LED, Anda dapat menggunakan proyek ini untuk mengontrol motor DC atau aktuator lain yang memerlukan sinyal PWM. Komunikasi antara klien dan ESP32 dilakukan menggunakan protokol WebSocket. Selain itu, setiap kali ada perubahan, semua klien memperbarui nilai slider mereka secara bersamaan.
Anda juga dapat memodifikasi kode yang disajikan dalam tutorial ini untuk menambahkan bilah geser ke proyek Anda untuk menetapkan nilai ambang batas atau nilai lain yang perlu Anda gunakan dalam kode Anda
Untuk proyek ini, papan ESP32 akan diprogram menggunakan inti Arduino. Anda dapat menggunakan Arduino IDE, VS Code dengan PlatformIO, atau IDE lain yang sesuai.
Untuk lebih memahami cara kerja proyek ini, kami sarankan untuk melihat tutorial berikut:
• ESP32 PWM dengan Arduino IDE (OutputAnalog)
• Server WebSocket ESP32: Output Kontrol(Arduino IDE)
• Server Web ESP32 dengan Slider: KontrolKecerahan LED (PWM)*
* Proyek ini menunjukkan cara membangun server web dengan satu penggeser, tetapi menggunakan permintaan HTTP—dalam tutorial ini, kita akan menggunakan protokol WebSocket.
Kami memiliki tutorial serupa untuk papan NodeMCU ESP8266:
• Server Web NodeMCU ESP8266 (WebSocket)dengan Beberapa Slider: Kontrol Kecerahan LED (PWM)
Ulasan Proyek
Gambar berikut menunjukkan halaman web yang akan kami buat untuk proyek ini:
• Halaman web berisi tiga kartu;
• Setiap kartu memiliki paragraf untuk menampilkan judul kartu (Fader 1, Fader 2, Fader 3);
• Ada penggeser rentang di setiap kartu yang dapat Anda pindahkan untuk mengatur kecerahan LED yang sesuai;
• Di setiap kartu, paragraf lain menampilkan kecerahan LED saat ini (dalam persentase);
• Saat Anda menetapkan posisi baru untuk penggeser, ini memperbarui semua klien (jika Anda membuka beberapa tab browser web (atau beberapa perangkat), mereka memperbarui hampir secara bersamaan setiap kali ada perubahan).
Bagaimana itu bekerja?
• ESP menghosting server web yang menampilkan halaman web dengan tiga bilah geser;
• Saat Anda menetapkan posisi baru untuk slider, klien mengirimkan nomor slider dan nilai slider ke server melalui protokol WebSocket. Misalnya, jika Anda mengatur slider nomor 3 ke posisi nomor 40, itu akan mengirim pesan ini 3s40 ke server.
• Server (ESP) menerima nomor slider dan nilai yang sesuai dan menyesuaikan siklus tugas PWM yang sesuai. Selain itu, ini juga memberi tahu semua klien lain dengan nilai slider baru saat ini—ini memungkinkan kami untuk memperbarui semua klien hampir secara instan.
• ESP32 mengeluarkan sinyal PWM dengan siklus tugas yang sesuai untuk mengontrol kecerahan LED. Siklus kerja 0% berarti LED benar-benar mati, siklus kerja 50% berarti LED setengah menyala, dan siklus kerja 100% berarti LED menyala;
• Setiap kali Anda membuka jendela browser web baru (ini adalah saat klien baru terhubung), itu akan mengirim pesan ke ESP32 (juga melalui protokol WebSocket) dengan pesan getValues. Ketika ESP32 mendapatkan pesan ini, ia mengirimkan nilai slider saat ini. Dengan cara ini, setiap kali Anda membuka tab baru, itu selalu menunjukkan nilai saat ini dan yang diperbarui.
Prasyarat
Sebelum melanjutkan dengan tutorial ini, pastikan Anda memeriksa semua prasyarat berikut.
1) Bagian yang Diperlukan
Untuk mengikuti proyek ini Anda perlu:
• Papan ESP32 – baca Ulasan danPerbandingan Papan Pengembangan ESP32
• 3x LED
• 3x 220 Ohm Resistor
Anda tidak memerlukan tiga LED untuk menguji proyek ini, Anda cukup melihat hasilnya di Serial Monitor atau menggunakan aktuator lain yang memerlukan sinyal PWM untuk beroperasi.
2) Pengaya Papan Arduino IDE dan ESP32
Kami akan memprogram ESP32 menggunakan Arduino IDE. Jadi, Anda harus menginstal add-on ESP32. Ikuti tutorial berikutnya jika Anda belum melakukannya:
• Memasang Board ESP32 di Arduino IDE(Windows, Mac OS X, Linux)
Jika Anda ingin menggunakan Kode VS dengan ekstensi PlatformIO, ikuti tutorial berikutnya untuk mempelajari cara memprogram ESP32:
• Memulai dengan Kode VS dan PlatformIO IDEuntuk ESP32 dan ESP8266 (Windows, Mac OS X, Linux Ubuntu)
3) Plugin Pengunggah Sistem File
Untuk mengunggah file HTML, CSS, dan JavaScript yang diperlukan untuk membangun proyek ini ke memori flash ESP32 (SPIFFS), kami akan menggunakan plugin untuk Arduino IDE: Pengunggah Sistem File SPIFFS. Ikuti tutorial berikutnya untuk menginstal plugin pengunggah sistem file jika Anda belum melakukannya:
• ESP32: Instal Plugin Pengunggah SistemFile SPIFFS di Arduino IDE
Jika Anda menggunakan Kode VS dengan ekstensi PlatformIO, baca tutorial berikut untuk mempelajari cara mengunggah file ke sistem file:
• ESP32 dengan Kode VS dan PlatformIO:Unggah File ke Sistem File (SPIFFS)
4) Libraries
Untuk membangun proyek ini, Anda perlu menginstal pustaka berikut:
• Library Arduino_JSON oleh Arduinoversi 0.1.0 (Arduino Library Manager)
• ESPAsyncWebServer (folder .zip);
• AsyncTCP (folder .zip).
Anda dapat menginstal perpustakaan pertama menggunakan Arduino Library Manager. Buka Sketch > Include Library > Manage Libraries dan cari nama perpustakaan.
Pustaka ESPAsyncWebServer dan AsynTCP tidak tersedia untuk diinstal melalui Manajer Perpustakaan Arduino, jadi Anda perlu menyalin file pustaka 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.
Memasang Libraries (Kode VS + PlatformIO)
Jika Anda memprogram ESP32 menggunakan PlatformIO, Anda harus menambahkan baris berikut ke file platformio.ini untuk menyertakan pustaka (ubah juga kecepatan Serial Monitor ke 115200):
Diagram Skematik
Hubungkan tiga LED ke ESP32. Kami menggunakan GPIO 12, 13, dan 14. Anda dapat menggunakan GPIO lain yang sesuai.
Mengatur File Anda
Untuk menjaga agar proyek tetap teratur dan membuatnya lebih mudah dipahami, kami akan membuat empat file untuk membangun server web:
• sketsa Arduino yang menangani server web;
• index.html: untuk menentukan konten halaman web;
• style.css: untuk menata halaman web;
• script.js: untuk memprogram perilaku halaman web—menangani apa yang terjadi saat Anda menggerakkan penggeser, mengirim, menerima, dan menafsirkan pesan yang diterima melalui protokol WebSocket.
Anda harus menyimpan file HTML, CSS, dan JavaScript di dalam folder bernama data di dalam folder sketsa Arduino, seperti yang ditunjukkan pada diagram sebelumnya. Kami akan mengunggah file-file ini ke sistem file ESP32 (SPIFFS).
Anda dapat mengunduh semua file proyek:
• Unduh Semua File Proyek Arduino
Berkas HTML
Salin yang berikut ini ke file index.html.
Mari kita lihat sekilas bagian paling relevan dari file HTML.
Membuat Slider
Tag berikut membuat kartu untuk slider pertama (Fader 1).
Paragraf pertama menampilkan judul kartu (Fader 1). Anda dapat mengubah teks menjadi apa pun yang Anda inginkan.
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 max (dalam hal ini, masing-masing 0 dan 100).
Anda juga perlu mendefinisikan atribut lain seperti:
• Atribut langkah menentukan interval antara angka yang valid. Dalam kasus kami, kami mengaturnya ke 1;
• Kelas untuk mengatur gaya slider (class="slider");
• Id sehingga kita dapat memanipulasi nilai slider menggunakan JavaScript (id="slider1″);
• Atribut onchange untuk memanggil fungsi (updateSliderPWM(this)) saat Anda menetapkan posisi baru untuk slider. Fungsi ini (didefinisikan dalam file JavaScript) mengirimkan nilai slider saat ini melalui protokol WebSocket ke klien. Kata kunci this mengacu pada elemen slider HTML.
Slider ada di dalam paragraf dengan nama kelas sakelar. Jadi, inilah tag yang sebenarnya membuat slider.
Terakhir, ada paragraf dengan tag <span>, sehingga kita dapat memasukkan nilai slider saat ini dalam paragraf tersebut dengan mengacu pada id-nya (id=”sliderValue1″).
Membuat Lebih Banyak Slider
Untuk membuat lebih banyak penggeser, Anda perlu menyalin semua tag HTML yang membuat kartu lengkap. Namun, pertama-tama, Anda perlu mempertimbangkan bahwa Anda memerlukan id unik untuk setiap slider dan nilai slider. Dalam kasus kami, kami memiliki tiga slider dengan id berikut: slider1, slider2, slider3, dan tiga placeholder untuk nilai slider dengan id berikut: sliderValue1, sliderValue2, sliderValue3.
Misalnya, inilah kartu untuk slider nomor 2.
File CSS
Salin yang berikut ini ke file style.css.
Mari kita lihat sekilas bagian relevan dari file CSS yang memberi gaya pada penggeser. Dalam contoh ini, kita perlu menggunakan awalan vendor untuk atribut penampilan.
Awalan Penjual
Awalan vendor memungkinkan browser mendukung fitur CSS baru sebelum didukung sepenuhnya. Browser yang paling umum digunakan menggunakan awalan berikut:
• -webkit- Chrome, Safari, Opera versi terbaru, hampir semua browser iOS,
• -moz- Firefox,
• -o- Opera versi lama,
• -ms- Microsoft Edge dan Internet Explorer.
Awalan vendor bersifat sementara. Setelah properti sepenuhnya didukung oleh browser yang Anda gunakan, Anda tidak membutuhkannya. Anda dapat menggunakan referensi berikut untuk memeriksa apakah properti yang Anda gunakan memerlukan awalan: http://shouldiprefix.com/
Mari kita lihat selektor .slider (menggayakan penggeser itu sendiri):
Menyetel -webkit-appearance ke none mengesampingkan gaya CSS default yang diterapkan ke penggeser di browser Google Chrome, Safari, dan Android.
Mengatur margin ke 0 secara otomatis menyelaraskan penggeser di dalam wadah induknya.
Lebar penggeser diatur ke 100% dan tinggi ke 15px. Batas-radius diatur ke 10px.
Atur warna latar belakang untuk penggeser dan atur garis luarnya menjadi tidak ada.
Kemudian, format gagang penggeser. Gunakan -webkit- untuk browser web Chrome, Opera, Safari dan Edge dan -moz- untuk Firefox.
Setel properti -webkit-appearance dan penampilan ke none untuk mengganti properti default.
Tetapkan lebar, tinggi, dan radius batas tertentu untuk handler. Mengatur lebar dan tinggi yang sama dengan radius batas 50% akan membuat lingkaran.
Kemudian, atur warna untuk latar belakang dan atur kursor ke pointer.
Jangan ragu untuk bermain dengan properti slider untuk memberikan tampilan yang berbeda.
File JavaScript
Salin yang berikut ini ke file script.js.
Berikut daftar apa yang dilakukan kode ini:
• Menginisialisasi koneksi WebSocket dengan server;
• Mengirim pesan ke server untuk mendapatkan nilai slider saat ini;
• Menggunakan respons untuk memperbarui nilai penggeser di halaman web;
• Menangani pertukaran data melalui protokol WebSocket.
Mari kita lihat kode JavaScript ini untuk melihat cara kerjanya.
Gateway adalah titik masuk ke antarmuka WebSocket. window.location.hostname mendapatkan alamat halaman saat ini (alamat IP server web).
Buat variabel global baru yang disebut websocket.
Tambahkan event listener yang akan memanggil fungsi onload saat halaman web dimuat.
Fungsi onload() memanggil fungsi initWebSocket() untuk menginisialisasi koneksi WebSocket dengan server.
Fungsi initWebSocket() menginisialisasi koneksi WebSocket pada gateway yang ditentukan sebelumnya. Kami juga menetapkan beberapa fungsi panggilan balik saat koneksi WebSocket dibuka, ditutup, atau saat pesan diterima.
Perhatikan bahwa ketika koneksi websocket terbuka, kami akan memanggil fungsi getValues.
Fungsi getValues() mengirim pesan ke server getValues untuk mendapatkan nilai saat ini dari semua slider. Kemudian, kita harus menangani apa yang terjadi ketika kita menerima pesan itu di sisi server (ESP32).
Kami menangani pesan yang diterima melalui protokol websocket pada fungsi onMessage().
Server mengirimkan status dalam format JSON, misalnya:
Fungsi onMessage() hanya menelusuri semua nilai dan menempatkannya di tempat yang sesuai pada halaman HTML.
Fungsi updateSliderPWM() berjalan saat Anda memindahkan slider.
Fungsi ini mendapatkan nilai dari penggeser dan memperbarui paragraf yang sesuai dengan nilai yang tepat. Fungsi ini juga mengirimkan pesan ke server agar ESP32 memperbarui kecerahan LED.
• slidernumbersslidervalue
Misalnya, jika Anda memindahkan slider
nomor 3 ke posisi 40, itu akan mengirim pesan berikut:
Sketsa Arduino
Salin kode berikut ke Arduino IDE Anda atau ke file main.cpp jika Anda menggunakan PlatformIO.
Cara Kerja Kode
Mari kita lihat sekilas bagian yang relevan untuk proyek ini. Untuk lebih memahami cara kerja kode, kami sarankan untuk mengikuti tutorial tentang protokol WebSocket dengan ESP32 dan tutorial ini tentang PWM dengan ESP32.
Masukkan kredensial jaringan Anda dalam variabel berikut untuk menghubungkan ESP32 ke jaringan lokal Anda:
Fungsi getSliderValues() membuat string JSON dengan nilai slider saat ini.
Fungsi notifyClients() memberi tahu semua klien dengan nilai slider saat ini. Memanggil fungsi ini memungkinkan kami untuk memberi tahu perubahan di semua klien setiap kali Anda menetapkan posisi baru untuk slider.
HandleWebSocketMessage(), seperti namanya, menangani apa yang terjadi ketika server menerima pesan dari klien melalui protokol WebSocket. Kami telah melihat di file JavaScript, bahwa server dapat menerima pesan getValues atau pesan dengan nomor slider dan nilai slider.
Ketika menerima pesan getValues, ia mengirimkan nilai slider saat ini.
Jika menerima pesan lain, kami memeriksa penggeser mana yang sesuai dengan pesan dan memperbarui nilai siklus tugas yang sesuai. Terakhir, kami memberi tahu semua klien bahwa terjadi perubahan. Berikut ini contoh untuk penggeser 1:
Di loop(), kami memperbarui siklus tugas saluran PWM untuk menyesuaikan kecerahan LED.
Unggah Kode dan File
Setelah memasukkan kredensial jaringan Anda, simpan kodenya. Buka Sketch > Show Sketch Folder, dan buat folder bernama data.
Di dalam folder itu Anda harus menyimpan file HTML, CSS dan JavaScript.
Kemudian, unggah kode ke papan ESP32 Anda. Pastikan Anda memilih papan dan port COM yang tepat. Juga, pastikan Anda telah menambahkan kredensial jaringan Anda.
Setelah mengunggah kode, Anda perlu mengunggah file. Buka Alat > Unggah Sketsa Data ESP32 dan tunggu file diunggah.
Ketika semuanya berhasil diunggah, buka Serial Monitor pada baud rate 115200. Tekan tombol ESP32 EN/RST, dan itu akan mencetak alamat IP ESP32.
Demonstrasi
Buka browser di jaringan lokal Anda dan rekatkan alamat IP ESP32. Anda harus mendapatkan akses ke halaman server web untuk mengontrol kecerahan LED.
Gerakkan penggeser untuk mengontrol kecerahan LED.
Buka beberapa tab atau sambungkan ke server web menggunakan perangkat lain, dan perhatikan bahwa nilai penggeser diperbarui hampir secara instan setiap kali ada perubahan.
Membungkus
Dalam tutorial ini, Anda telah belajar bagaimana membangun server web dengan ESP32 yang melayani halaman web dengan beberapa slider. Slider memungkinkan Anda untuk mengontrol kecerahan LED yang terhubung ke ESP32. Selain itu, kami telah menggunakan protokol WebSocket untuk berkomunikasi antara ESP32 dan klien.
Kami harap Anda telah belajar banyak dari tutorial ini. Beri tahu kami di komentar di bawah jika Anda berhasil mengikuti tutorial ini dan membuat proyek berfungsi.
Untuk mempelajari lebih lanjut tentang membangun server web dengan ESP32, kami sangat menyarankan untuk melihat e-book kami:
• Bangun Server Web dengan eBook ESP32 danESP8266
Pelajari lebih lanjut tentang ESP32 dengan sumber daya kami:
• Belajar ESP32 dengan Arduino IDE (eBook +kursus video)
• Lebih banyak tutorial dan proyek ESP32…
Sumber : randomnerdtutorials.com
 dengan Beberapa Slider: Kontrol Kecerahan LED (PWM)){kind=link}
0 Komentar