asynchronous web controlled thermostat

ESP32 Thermostat yang dikendalikan web asinkron

Proyek ini keluar dari diskusi yang saya lakukan dengan Yves Bourdon, di Forum Lab Tutorial Nerd Acak, tentang cara mengimplementasikan antarmuka web yang diperbarui untuk mengontrol ESP32, tanpa perlu memuat ulang seluruh halaman atau mengirimkan formulir. Dengan kata lain, idenya di sini adalah untuk melakukan permintaan asinkron dari browser klien untuk menanyakan mikrokontroler pada status data yang akan ditampilkan, dan kemudian untuk melakukan pembaruan lokal antarmuka pengguna segera setelah data yang disediakan oleh ESP32 diterima.

Ada beberapa teknik untuk mencapai ini, termasuk penggunaan websockets, yang saya lebih suka metode tradisional yang bergantung pada AJAX. Namun demikian, Yves ingin memahami cara menerapkan teknik ini dengan Ajax. Ini adalah tujuan dari proyek ini. Satu lagi akan mengikuti untuk menggambarkan cara melanjutkan dengan websockets ...

Tinjauan Proyek

Untuk menjawab permintaan awal Yves untuk termostat yang terhubung, saya memilih untuk mengatur sirkuit yang cukup sederhana dengan ESP32 dan sensor suhu DHT11 (tetapi sensor apa pun dapat melakukan pekerjaan itu). Saya juga menambahkan LED untuk menunjukkan dengan flash saat -saat ketika navigator menginterogasi ESP32 untuk mendapatkan suhu saat ini. Dan antarmuka pengguna untuk mengontrol ESP32 kompatibel dengan browser modern apa pun. Terutama di smartphone:

Antarmuka web memungkinkan pengguna untuk menyesuaikan kisaran suhu termostat. Segera setelah salah satu ambang batas diubah, permintaan HTTP asinkron dikirim ke ESP32 untuk menyimpan kisaran suhu baru dalam memori EEPROM -nya. Dengan cara ini, jika ESP32 akan memulai kembali dengan alasan apa pun (setelah kegagalan daya misalnya), termostat akan diinisialisasi dengan kisaran suhu terakhir yang tercatat. Tombol Reboot memungkinkan fitur ini diuji dengan memulai kembali perintah ESP32.

Setiap kali pembacaan suhu saat ini diambil, antarmuka diperbarui dengan cara yang benar -benar transparan, tanpa perlu memuat ulang halaman. Dan tampilan suhu secara otomatis beradaptasi dengan situasi dengan mengubah warna untuk menunjukkan apakah semuanya baik -baik saja atau jika Anda berada di luar kisaran yang diizinkan. Kesalahan membaca pada sensor juga dapat terjadi. Layar akan memperhitungkan ini:

Bacaan pendahuluan

Untuk memahami sepenuhnya apa yang kami lakukan di sini, saya sarankan Anda melihat tutorial berikut tentang tutorial nerd acak:

ESP32/ESP8266 Thermostat Web Server - Kontrol Output Berdasarkan Suhu

Jika Anda tidak terbiasa dengan penggunaan spiff, saya mendorong Anda untuk juga membaca tutorial ini:

Server Web ESP32 Menggunakan SPIFFS (SPI Flash File System)

Bagian yang diperlukan

• 1 ESP32
• Sensor Suhu 1 DHT11
• 1 LED
• 2 resistor (220 Ω dan 4,7 kΩ)

Diagram dan pining kabel

• GPIO23 terhubung ke anoda LED
• Katoda LED terhubung ke tanah melalui resistor 220 Ω
• GPIO32 terhubung ke pin data sensor suhu DHT11
• DHT11 adalah pull-up pada pin datanya dengan resistor 4,7 kΩ

Kode

Saya mengembangkan kode saya dengan editor kode Paltformio IDE dan Visual Studio. Oleh karena itu, program utama disebut main.cpp dan terletak di direktori src . Jika Anda menggunakan IDE Arduino, Anda harus memindahkan program ini ke akar proyek dan mengganti nama seperti itu:

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

Struktur kode

Kode ini dibagi menjadi tiga direktori:

• src berisi kode C ++ untuk dikompilasi dan diunggah ke ESP32
• data berisi kode sumber antarmuka pengguna web untuk mengunggah ke spiff ESP32
• scss berisi kode sumber lembaran gaya CSS dalam format SCSS

Antarmuka pengguna web akan disimpan pada sistem file memori Flash ESP32 sebagai 5 file terpisah:

• index.html (struktur antarmuka)
• index.css (tata letak grafis antarmuka)
• index.js (Program Manajemen Antarmuka Dinamis)
• D7MR.woff2 (font yang digunakan untuk tampilan numerik)
• favicon.ico (ikon kecil untuk browser)

Antarmuka web diformat secara grafis oleh stylesheet CSS. Kode sumber ditulis dalam format SCSS (Sassy CSS) dan dikompilasi menggunakan program sass untuk mendapatkan file CSS. Lihat situs web resmi Sass untuk mempelajari lebih lanjut.

Secara umum, sintaks SCSS sangat dekat dengan CSS. Jika Anda ingin memodifikasi file sumber, Anda harus menginstal alat sass dan mengkompilasi ulang file CSS sebagai berikut:

 sass -t compressed --sourcemap=none --update scss:data

Tetapi Anda juga dapat secara langsung memodifikasi file CSS jika Anda tidak ingin menginstal alat tambahan.

Implementasi AJAX

Saya mengusulkan di sini dua teknik untuk mengimplementasikan pertukaran asinkron antara browser klien dan server web yang berjalan di ESP32:

• Metode klasik yang menggunakan objek JavaScript XMLHttpRequest dari JavaScript
• Metode yang lebih modern yang menggunakan protokol JavaScript Async/Await

Jadi Anda punya pilihan untuk menggunakan satu atau yang lain.

Saya telah dengan hati -hati mengomentari seluruh kode untuk memudahkan Anda memahami. Jangan ragu untuk datang dan mengajukan pertanyaan di forum dengan menjawab posting ini yang didedikasikan untuk proyek.

Kredit

• Saya terutama ingin mengucapkan terima kasih kepada saya No Dev , penulis Perpustakaan ESP32Asyncebeber yang fantastis yang membuat hidup kita lebih mudah ketika kita ingin berinteraksi dengan ESP32 melalui aplikasi web.

• Saya juga ingin mengucapkan terima kasih kepada Keshikan untuk font reguler DSEG7 Modern Mini yang saya gunakan untuk tampilan digital antarmuka.