Mengawal Paparan LED 7-Segmen Menggunakan Pelayan Web ESP8266: 8 Langkah (dengan Gambar)

2025 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2025-01-23 15:01

Projek saya mempunyai Nodemcu ESP8266 yang mengendalikan paparan 7 segmen melalui pelayan http menggunakan borang html.

Langkah 1: MENGENAI PROJEK INI

Ini adalah projek IOT yang dibangunkan menggunakan modul wifi ESP8266 (NodeMCU). Motif projek ini adalah untuk membuat pelayan web pada modul yang dapat menampung banyak pelanggan melalui rangkaian. Di sini, pengetahuan asas mengenai html dan javaScript diperlukan untuk memahami projek saya. Beberapa topik awal yang akan saya bincangkan di sini mengenai ESP8266 dan javaScript adalah:

1. Memuat naik fail pada SPIFFS ESP8266 untuk menggunakan fail tersebut dengan lebih berkesan dalam kod arduino kami.

2. Storan web menggunakan javaScript

SPIFFS

Hingga kini, kami selalu memasukkan HTML untuk laman web kami sebagai literal string dalam lakaran kami. Ini menjadikan kod kami sukar dibaca, dan memori anda akan habis dengan cepat.

SPIFFS sistem fail ringan untuk pengawal mikro dengan cip kilat SPI. Cip kilat on-board ESP8266 mempunyai banyak ruang untuk laman web anda, terutamanya jika anda mempunyai versi 1MB, 2MB atau 4MB. Anda boleh memahami cara menambahkan alat dalam perisian arduino anda untuk memuat naik fail ke SPIFFS dengan mengikuti pautan:

Dalam projek ini, saya mempunyai 2 fail html dan fail javascript. Semua fail ini dimuat ke SPIFFS yang dipisahkan dari lakaran sehingga perubahan dalam fail ini tidak bergantung pada lakaran utama.

Kedua-dua fail html diambil oleh prepile () seperti yang ditunjukkan di bawah:

kosongkanFile () {

bool ok = SPIFFS.begin (); jika (ok) {Fail f = SPIFFS.open ("/ index.html", "r"); Fail f1 = SPIFFS.open ("/ index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.tutup (); f1. tutup (); } lain Serial.println ("Tidak terdapat fail seperti itu."); }

semasa fail javascript dibaca menggunakan loadScript () seperti yang ditunjukkan di bawah:

loadScript kosong (String path, String type) {

if (SPIFFS.exists (path)) {Fail fail = SPIFFS.open (jalan, "r"); server.streamFile (fail, jenis); }}

PENYIMPANAN TEMPATAN UNTUK APLIKASI WEB

Anda boleh memahami cara menggunakan objek dan kaedah penyimpanan tempatan yang berbeza dalam HTML5 menggunakan javascript dari artikel berikut: https://diveintohtml5.info/storage.html. Saya akan membincangkan penggunaan penyimpanan tempatan dalam projek saya di bahagian kerja.

Langkah 2: Perkakasan Diperlukan

Modul Wifi NodeMCU ESP8266 12E

Papan roti tanpa solder

Kawat pelompat

Paparan 7 Segmen (Katod Biasa)

Perintang 1K ohm

Kabel USB mikro (untuk menyambungkan NodeMCU dengan komputer anda)

Langkah 3: Litar & Sambungan

Sambungannya sangat mudah. Dalam rajah litar di atas, pin nodemcu dihubungkan dengan cara berikut:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

di mana A, B, C, D, E & F adalah segmen 7Segment Display

. Abaikan DP Paparan segmen 7. Jangan sambungkannya dengan pin D5 ESP

Langkah 4: KERJA

Seperti yang dibincangkan sebelumnya, kami mempunyai dua fail html. Salah satunya adalah halaman html root yang dipanggil ketika pelayan ESP8266 menerima "/" iaitu. Sekiranya URI '/' diminta, pelayan harus membalas dengan kod status HTTP 200 (Ok) dan kemudian mengirim respons dengan "indeks. fail html ".

Fail html kedua akan dikirim ketika klien meminta dari halaman root dengan mengirimkan input pada formulir. Sebaik sahaja pelayan mendapat input POSTED dari borang, ia membandingkannya dengan nilai rentetan tetap dan menghantar halaman html kedua sebagai tindak balas.

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

Oleh kerana html untuk halaman 2 tidak ditentukan dalam lakaran, jadi di sini kita merujuk "data1" yang sudah membaca kod html menggunakan SPIFFS.readString ()

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

Di sini sevenSeg () juga disebut dengan argumen "0" sehingga dapat digunakan untuk memaparkan "0" dengan menukar segmen yang berbeza ON dan OFF. Di sini, saya membuat nama fuction yang cukup jelas iaitu onA () akan menghidupkan paparan segmen A 7 seg di papan roti, juga matiA akan mematikannya.

Jadi, dalam kes ini untuk menampilkan "0", kita harus menukar semua segmen kecuali G (DP diabaikan kerana tidak disambungkan ke pin ESP8266). Jadi fungsi saya kelihatan seperti:

jika (num == 0) {onA (); onB (); onC (); onD (); onE (); onF (); offG (); }

Langkah 5: KOD HTML & JAVASCRIPT

Index.html mempunyai kanvas dengan paparan 7 segmen dalam mod mati dan bentuk di bawahnya. Inilah yang anda lihat setelah membukanya:

Sekiranya kami ingin menggunakan laman web kami tanpa ESP8266, ini mungkin dilakukan dengan menukar pautan dalam atribut tindakan borang anda. Pada masa ini, ini adalah pautan dalam tindakan:

Di sini anda dapat melihat bahawa pautan dalam tindakan adalah alamat ip yang sama yang diperuntukkan ke nodeMCU anda setelah menyambung ke wifi (atau hotspot). Tag borang selepas penyesuaian kelihatan seperti:

Di sini, saya menggunakan strog web penyemak imbas untuk menyimpan nilai input pengguna sehingga nilai yang dimasukkan dalam index.html disimpan dalam penyemak imbas secara tempatan (seperti kuki). Nilai itu diambil oleh index1.html dan nombor dipaparkan pada paparan segmen 7 di kanvas html. Anda mungkin memahami prosedur ini dengan mengikuti video:

video_tekat

Langkah 6: CATATAN UTAMA

Projek ini akan berfungsi dengan nodemcu anda jika anda menjaga perkara berikut:

1. Pautan dalam atribut tindakan fail html root harus "https:// (IP pada Serial monitor atau IP yang diperuntukkan untuk ESP anda) / hantar".

2. Gunakan penyemak imbas versi terbaru yang menyokong html5 dan tag serta fungsi baru.

3. SPIFFS akan berfungsi hanya jika index.html, index1.html dan main.js anda disatukan dalam folder data. Anda boleh mengklon fail kod dari github saya

Langkah 7: KOD

Ini adalah pautan repositori kod projek saya. Sekiranya anda bekerja dengan SPIFFS di ESP8266, anda dapat memahami mengapa saya meletakkan fail html dan javascript dalam folder data. Gunakan seperti itu.

Pautan Repositori GitHub

Langkah 8: Tutorial Video

Sekiranya Ia Membantu, Sila Langgan