ESP32 Web Server menggunakan SPIFFS (SPI Flash File System)

Dalam tutorial ini, kami akan menunjukkan cara membuat server web yang melayani file HTML dan CSS yang disimpan di sistem file ESP32. Daripada harus menulis teks HTML dan CSS ke dalam sketsa Arduino, kami akan membuat file HTML dan CSS yang terpisah. Untuk tujuan demonstrasi, server web kami akan membuat kontrol output ESP32, tetapi dapat dengan mudah diadaptasi untuk keperluan lain seperti menampilkan pembacaan sensor.

ESP32 Filesystem Uploader Plugin

Untuk mengikuti tutorial ini Anda harus memiliki ESP32 Filesystem Plugin pengunggah dipasang di Arduino IDE Anda. Jika belum, ikuti tutorial berikutnya untuk menginstalnya terlebih dahulu:

Catatan: pastikan Anda memiliki Arduino IDE terbaru yang diinstal, dan Anda memiliki add-on ESP32 untuk Arduino IDE. Jika tidak, ikuti salah satu tutorial berikut untuk menginstalnya:

Ikhtisar Proyek

Sebelum langsung menuju ke proyek, penting untuk menjelaskan apa yang akan dilakukan oleh server web kami, sehingga lebih mudah dipahami.

  • Server web yang Anda buat akan mengontrol LED yang terhubung ke ESP32 GPIO 2. Ini adalah LED on-board ESP32. Anda dapat mengontrol GPIO lainnya;
  • Halaman web server menampilkan dua tombol: ON dan OFF – untuk mengaktifkan dan menonaktifkan GPIO 2;
  • Halaman web server juga menunjukkan status GPIO saat ini.

Gambar berikut menunjukkan diagram yang disederhanakan untuk menunjukkan bagaimana semuanya bekerja.

  • ESP32 menjalankan kode server web berdasarkan ESPAsyncWebServer library ;
  • File HTML dan CSS disimpan pada ESP32 SPIFFS (Serial Peripheral Interface Flash File System);
  • Ketika Anda membuat permintaan pada URL tertentu menggunakan browser Anda, ESP32 merespon dengan file yang diminta;
  • Ketika Anda mengklik tombol ON, Anda akan diarahkan ke URL root diikuti oleh / pada dan LED dihidupkan;
  • Ketika Anda mengklik tombol MATI, Anda dialihkan ke URL root diikuti oleh / off dan LED dimatikan;
  • Di halaman web, ada placeholder untuk negara GPIO. Placeholder untuk negara GPIO ditulis langsung dalam file HTML di antara tanda%, misalnya % STATE% .

Memasang Perpustakaan

Di sebagian besar proyek kami, kami telah membuat HTML dan CSS file untuk server web sebagai String langsung pada sketsa Arduino. Dengan SPIFFS, Anda dapat menulis HTML dan CSS dalam file terpisah dan menyimpannya di filesystem ESP32.

Salah satu cara termudah untuk membangun server web menggunakan file dari sistem file adalah dengan menggunakan pustaka ESPAsyncWebServer. Pustaka ESPAsyncWebServer didokumentasikan dengan baik di halaman GitHub-nya. Untuk informasi lebih lanjut tentang perpustakaan itu, periksa tautan berikut:

Memasang pustaka ESPAsyncWebServer

Ikuti langkah selanjutnya untuk menginstal pustaka [ESPAsyncWebServer :

  1. Klik di sini untuk mengunduh Perpustakaan ESPAsyncWebServer. Anda harus memiliki folder .zip di folder Unduhan
  2. Unzip folder .zip dan Anda harus mendapatkan folder ESPAsyncWebServer-master
  3. Ganti nama folder Anda dari ESPAsyncWebServer-master menjadi ESPAsyncWebServer
  4. Pindahkan ESPAsyncWebServer folder untuk folder instalasi instalasi Arduino IDE Anda

Memasang Perpustakaan TCP Async untuk ESP32

Perpustakaan ESPAsyncWebServer membutuhkan AsyncTCP perpustakaan untuk bekerja. Ikuti langkah selanjutnya untuk menginstal pustaka itu:

  1. Klik di sini untuk mengunduh pustaka [AsyncTCP . Anda harus memiliki folder .zip di folder Unduhan
  2. Unzip folder .zip dan Anda harus mendapatkan folder AsyncTCP-master
  3. Ganti nama folder Anda dari AsyncTCP-master menjadi AsyncTCP
  4. Pindahkan AsyncTCPfolder ke folder instalasi instalasi Arduino IDE
  5. Akhirnya, buka kembali Arduino IDE

Mengatur File Anda

Untuk membangun server web, Anda memerlukan tiga file berbeda. Sketsa Arduino, file HTML dan file CSS. File HTML dan CSS harus disimpan di dalam folder bernama data di dalam folder sketsa Arduino, seperti yang ditunjukkan di bawah ini:

Membuat File HTML

HTML untuk proyek ini sangat sederhana. Kita hanya perlu membuat heading untuk halaman web, paragraf untuk menampilkan negara GPIO dan dua tombol.

Buat file index.html dengan konten berikut atau unduh semua proyek file di sini :

Karena kami menggunakan CSS dan HTML dalam file yang berbeda, kami perlu mereferensikan file CSS pada teks HTML. Baris berikut harus ditambahkan antara tag :

Tag memberi tahu file HTML bahwa Anda menggunakan style sheet eksternal untuk memformat tampilan halaman. Atribut menentukan sifat file eksternal, dalam hal ini adalah stylesheet —file CSS — yang akan digunakan untuk mengubah tampilan halaman.

Atribut disetel ke “text / css” untuk menunjukkan bahwa Anda menggunakan file CSS untuk gaya. Atribut href menunjukkan lokasi file; karena baik file CSS dan HTML akan berada di folder yang sama, Anda hanya perlu merujuk nama file: style.css .

Pada baris berikutnya, kita menulis judul pertama dari halaman web kita. Dalam hal ini kami memiliki “ESP32 Web Server”. Anda dapat mengubah judul ke teks yang Anda inginkan:

Server Web ESP32

Kemudian, kami menambahkan paragraf dengan teks “negara GPIO:” diikuti oleh negara GPIO. Karena negara GPIO berubah sesuai dengan keadaan GPIO, kita dapat menambahkan placeholder yang kemudian akan diganti untuk nilai apa pun yang kita tetapkan pada sketsa Arduino.

Untuk menambahkan placeholder kita menggunakan tanda % . Untuk membuat placeholder untuk negara, kita dapat menggunakan % STATE% misalnya.

GPIO: % STATE%

Mengaitkan nilai ke placeholder NEGARA dilakukan di Arduino sketsa.

Kemudian, kami membuat tombol AKTIF dan NONAKTIF. Ketika Anda mengklik tombol on, kami mengarahkan halaman web ke ke root diikuti oleh / di url. Ketika Anda mengklik tombol off Anda diarahkan ke / off url.

href="http://randomnerdtutorials.com/on">

href = "http://randomnerdtutorials.com/off" >

Membuat file CSS

Membuat file style.css dengan konten berikut atau unduh semua file proyek di sini :

Ini hanya file CSS dasar untuk mengatur ukuran font, gaya dan warna tombol dan menyelaraskan halaman. Kami tidak akan menjelaskan cara kerja CSS. Tempat yang baik untuk belajar tentang CSS adalah situs web W3Schools .

Arduino Sketch

Salin kode berikut ke Arduino IDE atau unduh semua file proyek di sini . Kemudian, Anda perlu mengetik kredensial jaringan Anda (SSID dan kata sandi) untuk membuatnya berfungsi.

Cara Kerja Kode

Pertama, sertakan pustaka yang diperlukan:

 #include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include "SPIFFS.h" 

Anda perlu mengetik kredensial jaringan Anda dalam variabel-variabel berikut:

 const char * ssid = " REPLACE_WITH_YOUR_SSID ";
const char * password = " REPLACE_WITH_YOUR_PASSWORD "; 

Selanjutnya, buat variabel yang mengacu pada GPIO 2 disebut ledPin dan variabel String untuk memegang status yang dipimpin: ledState .

 const int ledPin = 2;
String ledState; 

Buat AsynWebServer objek yang disebut server yang mendengarkan pada port 80.

 AsyncWebServer server (80); 

processor ()

The prosesor () fungsi adalah apa yang akan mengaitkan nilai ke placeholder yang telah kita buat pada file HTML. Ini menerima sebagai argumen placeholder dan harus mengembalikan String yang akan menggantikan placeholder. The processor () fungsi harus memiliki struktur berikut:

 String processor (const String & var) {
  Serial.println (var);
  if (var == "STATE") {
    if (digitalRead (ledPin)) {
      ledState = "ON";
    }
    lain{
      ledState = "OFF";
    }
    Serial.print (ledState);
    kembali ledState;
  }
  return String ();
} 

Fungsi ini pertama-tama memeriksa apakah placeholder adalah STATE yang telah kita buat pada file HTML.

 if (var == "STATE") {

Jika ya, maka, sesuai dengan status LED , kami menetapkan variabel ledState menjadi ON atau OFF.

 if (digitalRead (ledPin)) {
  ledState = "ON";
}
lain{
  ledState = "OFF";
} 

Akhirnya, kami mengembalikan variabel ledState . Ini menggantikan placeholder dengan nilai string ledState .

 mengembalikan ledState; 

setup ()

Pada pengaturan () mulailah dengan menginisialisasi Monitor Serial dan pengaturan GPIO sebagai output.

 Serial.begin (115200);
pinMode (ledPin, OUTPUT); 

Inisialisasi SPIFFS:

 jika (! SPIFFS.begin (benar)) {
  Serial.println ("Kesalahan telah terjadi saat memasang SPIFFS");
  kembali;
} 

Koneksi Wi-Fi

Hubungkan ke Wi-Fi dan cetak alamat IP ESP32:

 WiFi.begin (ssid, kata sandi);
while (WiFi.status ()! = WL_CONNECTED) {
  penundaan (1000);
  Serial.println ("Menghubungkan ke WiFi ..");
}
Serial.println (WiFi.localIP ()); 

Async Web Server

Perpustakaan ESPAsyncWebServer memungkinkan kita untuk mengkonfigurasi rute di mana server akan mendengarkan permintaan HTTP yang masuk dan menjalankan fungsi ketika permintaan diterima di rute itu. Untuk itu, gunakan pada () metode pada objek server sebagai berikut:

 server.on (" / ", HTTP_GET, [] (permintaan AsyncWebServerRequest *) {
  request-> send (SPIFFS, "/index.html", String (), false, prosesor);
}); 

Ketika server menerima permintaan pada root “ / ” URL, itu akan mengirim file index.html ke klien. Argumen terakhir fungsi send () adalah prosesor, sehingga kita dapat mengganti placeholder untuk nilai yang kita inginkan – dalam hal ini ledState .

Karena kami telah mereferensikan file CSS pada file HTML, klien akan membuat permintaan untuk file CSS. Ketika itu terjadi, file CSS dikirim ke klien:

 server.on (" /style.css ", HTTP_GET, [] (Permintaan AsyncWebServerRequest *) {
  request-> send (SPIFFS, "/style.css","text/css");
}); 

Akhirnya, Anda perlu menentukan apa yang terjadi pada rute “/ on ” dan “ / off “. Ketika sebuah permintaan dibuat pada rute-rute itu, LED akan dihidupkan atau dimatikan, dan ESP32 melayani file HTML.

 server.on (" / pada ", HTTP_GET, [] ( Permintaan AsyncWebServerRequest *) {
 digitalWrite (ledPin, HIGH);
 permintaan-> kirim (SPIFFS, " /index.html ", String (), salah, prosesor);
});
server.on (" / off ", HTTP_GET, [] (Permintaan AsyncWebServerRequest *) {
 digitalWrite (ledPin, LOW);
 permintaan-> kirim (SPIFFS, " /index.html ", String (), salah, prosesor);
}); 

Pada akhirnya, kami menggunakan metode begin () pada server objek, sehingga server mulai mendengarkan klien masuk.

 server.begin (); 

Karena ini adalah server web asynchronous, Anda dapat menentukan semua permintaan dalam setup () . Kemudian, Anda dapat menambahkan kode lain ke l oop () ketika server mendengarkan klien yang masuk.

Mengunggah Kode dan File

Simpan kode sebagai Async_ESP32_Web_Server atau unduh semua file proyek di sini . Pergi ke Sketch > Tampilkan Sketch Folder dan buat folder bernama data . Di dalam folder itu Anda harus menyimpan file HTML dan CSS.

Kemudian, unggah kode ke papan ESP32 Anda. Pastikan Anda memiliki papan kanan dan port COM yang dipilih. Selain itu, pastikan Anda menambahkan kredensial jaringan Anda ke kode.

Setelah mengunggah kode, Anda perlu mengunggah file. Pergi ke Tools > ESP32 Data Sketch Upload dan tunggu file yang akan diunggah.

Ketika semuanya berhasil diunggah, buka Monitor Serial pada baud rate 115200. Tekan tombol ESP32 “ ENABLE “, dan harus mencetak alamat IP ESP32.

Demonstrasi

Buka browser Anda dan ketik alamat IP ESP32 . Tekan tombol ON dan OFF untuk mengontrol ESP32 on-board LED. Juga, periksa bahwa negara GPIO sedang diperbarui dengan benar.

Membungkus Up

Menggunakan SPI Flash File System (SPIFFS) secara khusus berguna untuk menyimpan file HTML dan CSS untuk melayani klien – bukan harus menulis semua kode di dalam sketsa Arduino.

Perpustakaan ESPAsyncWebServer memungkinkan Anda membangun server web dengan menjalankan fungsi tertentu sebagai tanggapan atas permintaan khusus. Anda juga dapat menambahkan placeholder ke file HTML yang dapat diganti dengan variabel – seperti pembacaan sensor, atau status GPIO, misalnya.

Jika Anda menyukai proyek ini, Anda mungkin juga menyukai:

Ini adalah kutipan dari kursus kami: Pelajari ESP32 dengan Arduino IDE . Jika Anda menyukai ESP32 dan Anda ingin mempelajari lebih lanjut, kami sarankan mendaftar di Pelajari ESP32 dengan kursus Arduino IDE .


Leave a Reply

Your email address will not be published. Required fields are marked *