ESP8266 вэб сервер ашиглан 7 сегментийн LED дэлгэцийг удирдах: 8 алхам (зурагтай)

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:03

Миний төсөл нь Nodemcu ESP8266-тай бөгөөд html хэлбэрийг ашиглан http серверээр дамжуулан 7 сегментийн дэлгэцийг хянадаг.

Алхам 1: ЭНЭ ТӨСЛИЙН ТУХАЙ

Энэ бол ESP8266 (NodeMCU) wifi модулийг ашиглан боловсруулсан IOT төсөл юм. Төслийн зорилго нь сүлжээгээр олон үйлчлүүлэгч хүлээн авах боломжтой модуль дээр вэб сервер үүсгэх явдал юм. Энд миний төслийг ойлгохын тулд html болон javaScript -ийн анхан шатны мэдлэг шаардлагатай байна. ESP8266 болон javaScript -ийн талаар энд хэлэлцэх зарим урьдчилсан сэдэв бол:

1. ESP8266 -ийн SPIFFS файлуудыг манай arduino код дээр илүү үр дүнтэй ашиглахын тулд файлуудыг байршуулж байна.

2. javaScript ашиглан вэб хадгалалт

SPIFFS

Өнөөг хүртэл бид вэб хуудсуудынхаа HTML -ийг ноорог дээрээ string үсэг болгон оруулсан болно. Энэ нь манай кодыг уншихад маш хэцүү болгодог бөгөөд таны санах ой хурдан дуусах болно.

SPIFFS нь SPI флаш чиптэй микроконтроллеруудад зориулсан хөнгөн жинтэй файлын систем юм. ESP8266-ийн самбар дээрх флаш чип нь таны вэб хуудсанд хангалттай зайтай байдаг, ялангуяа танд 1MB, 2MB эсвэл 4MB хувилбар байгаа бол. Та дараах линкээр дамжуулан SPIFFS -д файл байршуулах arduino програм хангамжид хэрхэн хэрэгслүүд оруулахаа ойлгох боломжтой:

Энэ төсөлд надад 2 html файл болон javascript файл байна. Эдгээр бүх файлыг ноорогоос тусад нь SPIFFS -д байршуулдаг бөгөөд ингэснээр эдгээр файлын өөрчлөлт нь үндсэн ноорогоос үл хамаарна.

Html файлуудыг хоёуланг нь доор харуулсны дагуу PreparFile () ашиглан татаж авдаг.

void PreparFile () {

bool ok = SPIFFS.begin (); if (ok) {File f = SPIFFS.open ("/index.html", "r"); Файл f1 = SPIFFS.open ("/index1.html", "r"); өгөгдөл = f.readString (); data1 = f1.readString (); f. ойрхон (); f1. ойрхон (); } else Serial.println ("Ийм файл олдсонгүй."); }

javascript файлыг доор үзүүлсэн шиг loadScript () ашиглан уншдаг.

void loadScript (мөрийн зам, мөрийн төрөл) {

if (SPIFFS.exists (path)) {Файлын файл = SPIFFS.open (зам, "r"); server.streamFile (файл, төрөл); }}

ВЭБ ХЭРЭГЛЭЭД ОРОН НУТГИЙН ХАДГАЛАЛТ

Та HTML5 дахь өөр өөр объект, аргуудыг JavaScript ашиглан хэрхэн ашиглахыг дараах нийтлэлээс ойлгож болно: https://diveintohtml5.info/storage.html. Би ажлын хэсэгт өөрийн төсөлд орон нутгийн хадгалах санг ашиглах талаар ярилцах болно.

Алхам 2: Тоног төхөөрөмж шаардлагатай

NodeMCU ESP8266 12E Wifi модуль

Гагнуургүй талхны хавтан

Холбогч утас

7 сегментийн дэлгэц (нийтлэг катод)

1K ом эсэргүүцэл

Микро USB кабель (NodeMCU-ийг компьютертэйгээ холбох зориулалттай)

Алхам 3: Хэлхээ ба холболт

Холболтууд үнэхээр амархан. Дээрх хэлхээний диаграммд nodemcu -ийн тээглүүрийг дараах байдлаар холбосон болно.

A D1

B D2

C D3

D D4

E D6

F D7

G D8

Энд A, B, C, D, E & F нь 7 сегментийн дэлгэцийн сегментүүд юм

. 7 сегментийн дэлгэцийн DP -ийг үл тоомсорлоорой. Үүнийг ESP -ийн D5 зүүгээр бүү холбоорой

Алхам 4: АЖИЛЛАХ

Өмнө дурьдсанчлан бидэнд хоёр html файл байна. Үүний нэг нь ESP8266 серверийг хүлээн авахад дуудагдсан html хуудас юм "/" өөрөөр хэлбэл хэрэв URI '/' хүсвэл сервер нь HTTP статусын код 200 (Ok) -оор хариулж, дараа нь "индексээр хариу илгээнэ үү. html "файл.

Хоёр дахь html файлыг үйлчлүүлэгч маягт дээр оролт оруулах замаар үндсэн хуудаснаас хүсэлт гаргах үед илгээх болно. Сервер нь маягтаас POSTED оролтыг авмагц үүнийг тогтмол мөрийн утгатай харьцуулж, хариуд нь хоёр дахь html хуудсыг илгээдэг.

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

2 -р хуудасны html нь ноорог дээр тодорхойлогдоогүй байгаа тул эндээс бид SPIFFS.readString () ашиглан html кодыг уншсан "data1" -ийг энд дурдаж байна.

Файл f1 = SPIFFS.open ("/index1.html", "r"); data1 = f1.readString ();

Энд sevenSeg () -ийг мөн "0" аргументаар дууддаг бөгөөд ингэснээр өөр өөр сегментийг АСАХ, ХААХ замаар "0" -ийг харуулах боломжтой болно. Энд би fuction -ийн нэрийг өөрөө тайлбарлаж өгсөн, өөрөөр хэлбэл onA () нь 7 сегментийн A сегментийг талхны самбар дээр асаах болно.

Тиймээс, энэ тохиолдолд "0" -ийг харуулахын тулд бид G -ээс бусад бүх сегментийг солих ёстой (DP нь ESP8266 -ийн ямар ч зүүтэй холбогдоогүй тул үүнийг үл тоомсорлодог). Тиймээс миний функц дараах байдлаар харагдаж байна.

хэрэв (тоо == 0) {onA (); onB (); onC (); onD (); onE (); onF (); offG (); }

Алхам 5: HTML ба JAVASCRIPT КОД

Index.html нь унтраалттай горимд 7 сегментийн дэлгэцтэй зурагтай бөгөөд доор нь хэлбэртэй байна. Үүнийг нээсний дараа дараах зүйлийг харж болно.

Хэрэв бид вэбсайтаа ESP8266 -гүйгээр ашиглахыг хүсвэл таны маягтын action шинж чанар дахь линкийг өөрчилснөөр боломжтой болно.

Энд байгаа линк нь ямар ч wifi (эсвэл халуун цэг) -д холбогдсоны дараа таны nodeMCU -д хуваарилагдсан ижил IP хаяг болохыг эндээс харж болно. Тохируулга хийсний дараа маягтын шошго дараах байдалтай байна.

Энд би хэрэглэгчийн оролтын утгыг хадгалахын тулд вэб хөтчийн вэб хөтчийг ашиглаж байгаа бөгөөд ингэснээр index.html -д оруулсан утга нь хөтөч дотор (күүки гэх мэт) хадгалагдах болно. Энэ утгыг index1.html -ээр авч, html canvas дээрх 7 сегментийн дэлгэц дээр дугаарыг харуулна. Та дараах видеог үзээд энэ процедурыг ойлгож болно.

видео хавсралт

Алхам 6: ҮНДСЭН ТАЙЛБАР

Хэрэв та дараахь зүйлийг анхаарч үзвэл энэ төсөл нь таны nodemcu -тэй ажиллах болно.

1. Root html файлын үйлдэл шинж чанар дахь холбоос нь "https:// (Цуваа монитор дээрх IP эсвэл таны ESP -д хуваарилагдсан IP)/оруулах" байх ёстой.

2. HTML5 болон шинэ хаяг, функцийг дэмждэг хөтөчийн хамгийн сүүлийн хувилбарыг ашиглах.

3. SPIFFS нь таны index.html, index1.html болон main.js файлуудыг өгөгдлийн хавтсанд нэгтгэсэн тохиолдолд л ажиллах болно. Та миний github -аас кодын файлыг хуулбарлах боломжтой

Алхам 7: КОД

Энэ бол миний төслийн кодын агуулах холбоос юм. Хэрэв та ESP8266 дээр SPIFFS -тэй ажиллаж байгаа бол яагаад html болон javascript файлуудыг өгөгдлийн хавтсанд байршуулснаа ойлгож болно.

GitHub репозиторын холбоос

Алхам 8: Видео заавар

Хэрэв энэ нь тусалсан бол бүртгүүлнэ үү