Mengontrol Tampilan LED 7-Segmen Menggunakan Server Web ESP8266: 8 Langkah (dengan Gambar)

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Proyek saya memiliki Nodemcu ESP8266 yang mengontrol tampilan 7-segmen melalui server http menggunakan formulir html.

Langkah 1: TENTANG PROYEK INI

Ini adalah proyek IOT yang dikembangkan menggunakan modul wifi ESP8266 (NodeMCU). Motif proyek ini adalah untuk membuat server web pada modul yang dapat menampung banyak klien melalui jaringan. Di sini, pengetahuan dasar tentang html dan javaScript diperlukan untuk memahami proyek saya. Beberapa topik lanjutan yang akan saya bahas disini mengenai ESP8266 dan javaScript adalah:

1. Mengunggah file pada SPIFFS dari ESP8266 untuk menggunakan file tersebut secara lebih efisien dalam kode arduino kami.

2. Penyimpanan web menggunakan javaScript

SPIFFS

Sampai sekarang, kami selalu menyertakan HTML untuk halaman web kami sebagai literal string dalam sketsa kami. Ini membuat kode kami sangat sulit dibaca, dan Anda akan cepat kehabisan memori.

SPIFFS sistem file ringan untuk mikrokontroler dengan chip flash SPI. Chip flash on-board ESP8266 memiliki banyak ruang untuk halaman web Anda, terutama jika Anda memiliki versi 1MB, 2MB, atau 4MB. Anda dapat memahami cara menambahkan alat di perangkat lunak arduino Anda untuk mengunggah file ke SPIFFS dengan mengikuti tautan:

Dalam proyek ini, saya memiliki 2 file html dan file javascript. Semua file ini diunggah ke SPIFFS terpisah dari sketsa sehingga perubahan dalam file ini tidak tergantung pada sketsa utama.

Kedua file html diambil oleh prepareFile() seperti yang ditunjukkan di bawah ini:

batal siapkanFile(){

bool ok = SPIFFS.begin(); if (ok) { File f = SPIFFS.open("/index.html", "r"); Berkas f1=SPIFFS.open("/index1.html", "r"); data = f.readString(); data1=f1.readString(); f.tutup(); f1.close(); } else Serial.println("Tidak ada file yang ditemukan."); }

sedangkan file javascript dibaca menggunakan loadScript() seperti gambar di bawah ini:

void loadScript(Jalur string, tipe String){

if(SPIFFS.exists(path)){ File file=SPIFFS.open(path, "r"); server.streamFile(berkas, ketik); } }

PENYIMPANAN LOKAL UNTUK APLIKASI WEB

Anda dapat memahami cara menggunakan berbagai objek dan metode penyimpanan lokal di HTML5 menggunakan javascript dari artikel berikut: https://diveintohtml5.info/storage.html. Saya akan membahas penggunaan penyimpanan lokal di proyek saya di bagian kerja.

Langkah 2: Diperlukan Perangkat Keras

Modul Wifi NodeMCU ESP8266 12E

Papan tempat memotong roti tanpa solder

Kawat jumper

7 Tampilan Segent (Katoda Umum)

Resistor 1K ohm

Kabel Micro-USB (untuk menghubungkan NodeMCU dengan komputer Anda)

Langkah 3: Sirkuit & Koneksi

Koneksinya sangat mudah. Dalam diagram rangkaian di atas, pin nodemcu terhubung dengan cara berikut:

D1

B D2

C D3

D D4

E D6

F D7

G D8

di mana A, B, C, D, E & F adalah segmen Tampilan 7 Segmen

. Abaikan DP Tampilan 7 segmen. Jangan hubungkan dengan pin D5 dari ESP

Langkah 4: BEKERJA

Seperti yang telah dibahas sebelumnya, kami memiliki dua file html. Salah satunya adalah halaman html root yang dipanggil ketika server ESP8266 menerima "/" yaitu Jika URI '/' diminta, server harus membalas dengan kode status HTTP 200 (Ok) dan kemudian mengirim respons dengan "index. html" file.

File html kedua akan dikirim ketika klien meminta dari halaman root dengan mengirimkan input pada formulir. Segera setelah, server mendapatkan input POSTED dari formulir, ia membandingkannya dengan nilai string tetap dan mengirim halaman html kedua sebagai tanggapan.

if(server.arg("nam") == "0") { server.send(200, "text/html", data1); tujuhSeg(0); }

Karena html untuk halaman ke-2 tidak didefinisikan dalam sketsa, jadi di sini kita merujuk "data1" yang sudah membaca kode html menggunakan SPIFFS.readString()

Berkas f1=SPIFFS.open("/index1.html", "r");data1=f1.readString();

Di sini sevenSeg() juga dipanggil dengan argumen "0" sehingga dapat digunakan untuk menampilkan "0" dengan mengalihkan segmen yang berbeda ON dan OFF. Di sini, saya membuat nama fungsi cukup jelas yaitu onA() akan mengaktifkan segmen A tampilan 7 seg di papan tempat memotong roti, begitu pula offA akan mematikannya.

Jadi, dalam hal ini untuk menampilkan "0", kita harus mengganti semua segmen kecuali G (DP diabaikan karena tidak terhubung ke pin ESP8266). Jadi fungsi saya terlihat seperti:

if(angka==0){ padaA(); padaB(); padaC(); padaD(); satu(); padaF(); offG(); }

Langkah 5: KODE HTML & JAVASCRIPT

Index.html memiliki kanvas yang memiliki tampilan 7 segmen dalam mode mati dan formulir di bawahnya. Inilah yang Anda lihat setelah membukanya:

Jika kami ingin menggunakan halaman web kami tanpa ESP8266, itu dimungkinkan dengan mengubah tautan di atribut tindakan formulir Anda. Saat ini ini adalah tautan yang sedang beraksi:

Di sini Anda dapat melihat bahwa tautan yang beraksi adalah alamat ip yang sama yang dialokasikan ke nodeMCU Anda setelah terhubung ke wifi (atau hotspot) apa pun. Tag formulir setelah penyesuaian terlihat seperti:

Di sini, saya menggunakan web stroge browser untuk menyimpan nilai input pengguna sedemikian rupa sehingga nilai yang dimasukkan dalam index.html disimpan di browser secara lokal (seperti cookie). Nilai tersebut diambil oleh index1.html dan nomor ditampilkan pada tampilan 7 segmen pada kanvas html. Anda mungkin memahami prosedur ini dengan mengikuti video:

video_attach

Langkah 6: CATATAN KUNCI

Proyek ini akan bekerja dengan nodemcu Anda jika Anda memperhatikan poin-poin berikut:

1. Tautan dalam atribut tindakan file html root harus "https://(IP pada monitor Serial atau IP yang dialokasikan untuk ESP Anda)/kirim".

2. Gunakan browser versi terbaru yang mendukung html5 dan tag serta fungsionalitas baru.

3. SPIFFS hanya akan berfungsi jika index.html, index1.html, dan main.js Anda disatukan dalam folder data. Anda dapat mengkloning file kode dari github saya

Langkah 7: KODE

Ini adalah tautan repositori dari kode proyek saya. Jika Anda bekerja dengan SPIFFS di ESP8266, Anda dapat memahami mengapa saya menempatkan file html dan javascript di folder data. Gunakan itu sebagaimana adanya.

Tautan Repositori GitHub

Langkah 8: Video Tutorial

Jika Bermanfaat Silahkan Berlangganan