ESP8266 veb-serveri yordamida 7 segmentli LED displeyni boshqarish: 8 qadam (rasmlar bilan)

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:26

Mening loyihamda Nodemcu ESP8266 bor, u html formasi yordamida http-server orqali 7 segmentli displeyni boshqaradi.

1 -qadam: BU LOYIHA HAQIDA

Bu ESP8266 (NodeMCU) wifi moduli yordamida ishlab chiqilgan IOT loyihasi. Loyihaning maqsadi modulda tarmoq orqali bir nechta mijozlarni qabul qila oladigan veb -server yaratishdir. Bu erda mening loyihamni tushunish uchun html va javaScript haqida asosiy bilimlar kerak. Men bu erda ESP8266 va javaScript haqida muhokama qiladigan ba'zi oldingi mavzular:

1. Arduino kodimizda ushbu faylni yanada samarali ishlatish uchun ESP8266 SPIFFS -ga fayllarni yuklash.

2. JavaScript yordamida veb -saqlash

SPIFFS

Hozirgacha biz har doim veb -sahifalarimiz uchun HTML -ni eskizimizga string harflari sifatida kiritganmiz. Bu bizning kodni o'qishni qiyinlashtiradi va siz xotiradan tezda chiqib ketasiz.

SPIFFS SPI flesh-chipli mikrokontrollerlar uchun engil vaznli fayl tizimi. ESP8266 bortli flesh-chipida veb-sahifalaringiz uchun juda ko'p joy mavjud, ayniqsa sizda 1MB, 2MB yoki 4MB versiyasi bo'lsa. Siz fayllarni SPIFFS -ga yuklash uchun arduino dasturiy ta'minotiga qanday vositalarni qo'shishni quyidagi havola orqali tushunishingiz mumkin:

Ushbu loyihada menda 2 html fayli va javascript fayli bor. Bu fayllarning barchasi eskizdan ajratilgan SPIFFS -ga yuklanadi, shuning uchun bu fayllardagi o'zgarish asosiy eskizga bog'liq emas.

Ikkala html fayllari ham quyida ko'rsatilganidek, PreparFile () yordamida olinadi:

void tayyorgarlikFile () {

bool ok = SPIFFS.begin (); agar (ok) {Fayl f = SPIFFS.open ("/index.html", "r"); Fayl f1 = SPIFFS.open ("/index1.html", "r"); ma'lumotlar = f.readString (); ma'lumotlar1 = f1.readString (); f.kop (); f1.close (); } else Serial.println ("Bunday fayl topilmadi."); }

javascript fayli quyida ko'rsatilgan loadScript () yordamida o'qiladi:

void loadScript (String yo'l, String turi) {

if (SPIFFS.exists (path)) {{Fayl fayli = SPIFFS.open (yo'l, "r"); server.streamFile (fayl, tur); }}

Veb -ilovalar uchun mahalliy saqlash

Siz HTML5 -dagi turli xil ob'ektlar va mahalliy saqlash usullarini JavaScript yordamida qanday ishlatishni quyidagi maqoladan bilib olishingiz mumkin: https://diveintohtml5.info/storage.html. Men ishchi bo'limda o'z loyihamda mahalliy saqlashdan foydalanishni muhokama qilaman.

2 -qadam: Uskuna kerak

NodeMCU ESP8266 12E Wifi moduli

Lehimsiz non paneli

Jumper sim

7 segmentli displey (umumiy katod)

1K ohmli qarshilik

Micro-USB kabeli (NodeMCU-ni kompyuteringizga ulash uchun)

3 -qadam: O'chirish va ulanishlar

Ulanishlar haqiqatan ham oson. Yuqoridagi sxemada nodemcu pinlari quyidagi tarzda ulanadi:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

bu erda A, B, C, D, E & F - 7 segmentli displey segmentlari

. 7 segmentli DP displeyiga e'tibor bermang. Uni ESP d5 piniga ulamang

4 -qadam: Ishlash

Yuqorida aytib o'tilganidek, bizda ikkita html fayli bor. Ulardan biri - bu ESP8266 serveri "/" ni qabul qilganda chaqiriladigan html ildiz sahifasi, agar URI '/' so'ralsa, server HTTP holat kodi 200 (Ok) bilan javob berishi va keyin "indeksi" bilan javob yuborishi kerak. html "fayli.

Ikkinchi html -fayl, mijoz so'rovnomaga kirishni yuborish orqali yuboriladi. Server formadan POSTED kirishini olgach, uni belgilangan satr qiymati bilan solishtiradi va javob sifatida ikkinchi html sahifasini yuboradi.

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

Ikkinchi sahifa uchun html eskizda aniqlanmaganligi sababli, biz bu erda SPIFFS.readString () yordamida html kodlarini o'qilgan "data1" ga havola qilamiz.

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

Bu erda sevenSeg () "0" argumenti bilan ham chaqiriladi, shuning uchun uni har xil segmentlarni ON va O'chirish orqali "0" ni ko'rsatish uchun ishlatish mumkin. Bu erda men o'zimni tushunarli deb nomladim, ya'ni onA () non panelidagi 7 segmentli A segmentini yoqadi, xuddi shu tarzda o'chiriladi.

Shunday qilib, bu holda "0" ni ko'rsatish uchun biz G dan boshqa barcha segmentlarni almashtirishimiz kerak (DP e'tiborga olinmaydi, chunki u ESP8266 piniga ulanmagan). Shunday qilib, mening vazifam quyidagicha ko'rinadi:

agar (son == 0) {onA (); onB (); onC (); onD (); onE (); onF (); offG (); }

5 -qadam: HTML va JAVASCRIPT KODI

Index.html -da 7 segmentli displey yopiq rejimda va uning ostida joylashgan tuval mavjud. Buni ochgandan keyin ko'rasiz:

Agar biz ESP8266 -dan foydalanmasdan veb -sahifamizdan foydalanishni xohlasak, bu sizning shaklingizning harakat atributidagi havolani o'zgartirish orqali amalga oshadi.

Bu erda siz amaldagi havola har qanday Wi -Fi (yoki ulanish nuqtasi) ga ulanganingizdan keyin nodeMCU -ga ajratilgan IP -manzil ekanligini ko'rishingiz mumkin. Sozlamadan so'ng shakl yorlig'i quyidagicha ko'rinadi:

Men bu erda brauzerning veb -chizig'idan foydalanaman, shuning uchun index.html -ga kiritilgan qiymat brauzerda saqlanadi (cookie fayllari kabi). Bu qiymat index1.html tomonidan olinadi va raqam html canvas -dagi 7 segmentli displeyda ko'rsatiladi. Siz bu jarayonni quyidagi video orqali tushunishingiz mumkin:

video_uzatish

6 -qadam: ASOSIY QAYDLAR

Agar siz quyidagi fikrlarga e'tibor bersangiz, ushbu loyiha sizning nodemcu bilan ishlaydi:

1. root html faylining harakat atributidagi havola "https:// (ketma -ket monitordagi IP yoki ESP -ga ajratilgan IP)/yuborish" bo'lishi kerak.

2. HTML5 va yangi teglar va funksiyalarni qo'llab -quvvatlaydigan brauzerning so'nggi versiyasidan foydalaning.

3. SPIFFS faqat index.html, index1.html va main.js ma'lumotlar papkasida joylashtirilganda ishlaydi. Siz kod faylini mening github -dan klonlashingiz mumkin

7 -qadam: KOD

Bu mening loyiham kodining havola havolasi. Agar siz ESP8266 da SPIFFS bilan ishlayotgan bo'lsangiz, nima uchun html va javascript fayllarini ma'lumotlar papkasida joylashtirganimni tushunishingiz mumkin.

GitHub havzasi havolasi

8 -qadam: video darslik

Agar yordam bersa, obuna bo'ling