7 სეგმენტიანი LED ჩვენების კონტროლი ESP8266 ვებ სერვერის გამოყენებით: 8 ნაბიჯი (სურათებით)

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:18

ჩემს პროექტს აქვს Nodemcu ESP8266, რომელიც აკონტროლებს 7 სეგმენტის ჩვენებას http სერვერის საშუალებით html ფორმის გამოყენებით.

ნაბიჯი 1: ამ პროექტის შესახებ

ეს არის IOT პროექტი, რომელიც შემუშავებულია ESP8266 (NodeMCU) wifi მოდულის გამოყენებით. პროექტის მოტივია მოდულის ვებ სერვერის შექმნა, რომელსაც შეუძლია ქსელში მრავალი კლიენტის მასპინძლობა. აქ, html და javaScript– ის ძირითადი ცოდნაა საჭირო ჩემი პროექტის გასაგებად. ზოგიერთი წინასწარი თემა, რომელსაც აქ განვიხილავ ESP8266- თან და javaScript- თან დაკავშირებით არის:

1. ფაილების ატვირთვა ESP8266– ის SPIFFS– ზე, რომ ეს ფაილი უფრო ეფექტურად გამოიყენოთ ჩვენს არდუინოს კოდში.

2. ვებ საცავი javaScript– ის გამოყენებით

SPIFFS

აქამდე, ჩვენ ყოველთვის ვამატებდით HTML ჩვენს ვებ გვერდებს, როგორც სტრიქონის ლიტერატურა ჩვენს ესკიზში. ეს ძალიან ართულებს ჩვენს კოდს და მეხსიერებას საკმაოდ სწრაფად ამოიწურავთ.

SPIFFS მსუბუქი წონის ფაილური სისტემა მიკროკონტროლერებისთვის SPI ფლეშ ჩიპით. ESP8266– ის ბორტ ფლეშ ჩიპს აქვს უამრავი ადგილი თქვენი ვებ გვერდებისათვის, განსაკუთრებით თუ თქვენ გაქვთ 1 მბ, 2 მბ ან 4 მბ ვერსია. თქვენ შეგიძლიათ გაიგოთ, თუ როგორ დაამატოთ ინსტრუმენტები თქვენს arduino პროგრამულ უზრუნველყოფაში ფაილების ატვირთვისთვის SPIFFS შემდეგ ბმულზე:

ამ პროექტში მაქვს 2 html ფაილი და javascript ფაილი. ყველა ეს ფაილი აიტვირთება ესკიზისგან გამოყოფილ SPIFFS- ში ისე, რომ ამ ფაილების ცვლილება დამოუკიდებელი იყოს მთავარი ესკიზისგან.

ორივე html ფაილი ამოღებულია prepaFile () - ით, როგორც ნაჩვენებია ქვემოთ:

void PrepaFile () {

bool ok = SPIFFS. დაწყება (); if (ok) {ფაილი f = SPIFFS.open ("/index.html", "r"); ფაილი f1 = SPIFFS.open ("/index1.html", "r"); მონაცემები = f.readString (); data1 = f1.readString (); ვ. დახურვა (); f1. დახურვა (); } else Serial.println ("ასეთი ფაილი არ მოიძებნა."); }

ხოლო javascript ფაილი იკითხება loadScript () - ის გამოყენებით, როგორც ნაჩვენებია ქვემოთ:

void loadScript (სიმებიანი გზა, სიმების ტიპი) {

if (SPIFFS.exists (path)) {File file = SPIFFS.open (path, "r"); server.streamFile (ფაილი, ტიპი); }}

ლოკალური შენახვა ვებ აპლიკაციებისთვის

თქვენ შეგიძლიათ გაიგოთ, თუ როგორ გამოიყენოთ HTML5– ში ადგილობრივი შენახვის სხვადასხვა ობიექტი და მეთოდი javascript– ის გამოყენებით შემდეგი სტატიიდან: https://diveintohtml5.info/storage.html. მე განვიხილავ ჩემს პროექტში ადგილობრივი საცავის გამოყენებას სამუშაო ნაწილში.

ნაბიჯი 2: საჭიროა აპარატურა

NodeMCU ESP8266 12E Wifi მოდული

შედუღების გარეშე დაფა

ჯუმბერის მავთული

7 სეგმენტური ჩვენება (საერთო კათოდი)

1K ohm რეზისტორი

მიკრო USB კაბელი (NodeMCU კომპიუტერთან დასაკავშირებლად)

ნაბიჯი 3: წრე და კავშირი

კავშირები მართლაც ადვილია. ზემოთ სქემის დიაგრამაში ნოდემკუს ქინძისთავები დაკავშირებულია შემდეგნაირად:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

სადაც A, B, C, D, E & F არის 7 სეგმენტის ჩვენების სეგმენტები

რა იგნორირება DP 7 სეგმენტის ჩვენების. არ დააკავშიროთ იგი ESP– ის pin D5– თან

ნაბიჯი 4: მუშაობა

როგორც ზემოთ განვიხილეთ, ჩვენ გვაქვს ორი html ფაილი. რომელთაგან ერთ -ერთი არის html- ის ძირითადი გვერდი, რომელსაც ეწოდება ESP8266 სერვერის მიღებისას "/" ანუ თუ URI '/' არის მოთხოვნილი, სერვერმა უნდა უპასუხოს HTTP სტატუსის კოდს 200 (Ok) და შემდეგ გამოაგზავნოს პასუხი "ინდექსით". html "ფაილი.

მეორე html ფაილი გაიგზავნება, როდესაც კლიენტი ითხოვს ფესვის გვერდიდან ფორმით შეყვანის წარდგენით. როგორც კი, სერვერი მიიღებს ფორმას გამოქვეყნებულ შეყვანას, ადარებს მას ფიქსირებული სიმებიანი მნიშვნელობით და საპასუხოდ აგზავნის მეორე html გვერდს.

if (server.arg ("nam") == "0") {server.send (200, "text/html", data1); შვიდი სექ (0); }

მას შემდეგ, რაც html მე -2 გვერდზე ესკიზში არ არის განსაზღვრული, ამიტომ აქ ჩვენ მივმართავთ "data1" - ს, რომელიც უკვე წაკითხულია html კოდების გამოყენებით SPIFFS.readString ()

ფაილი f1 = SPIFFS.open ("/index1.html", "r"); data1 = f1.readString ();

აქ შვიდი Seg () ასევე არის არგუმენტით "0", ასე რომ ის შეიძლება გამოყენებულ იქნას "0" - ის საჩვენებლად სხვადასხვა სეგმენტის ჩართვასა და გამორთვაში. აქ, მე გავაკეთე სახელი fuction თვითმმართველობის განმარტებითი ანუ onA () ჩართავს A სეგმენტს 7 seg ჩვენების breadboard, ანალოგიურად offA გამორთავს მას.

ამრიგად, ამ შემთხვევაში "0" ჩვენების მიზნით, ჩვენ უნდა შევცვალოთ ყველა სეგმენტი G- ს გარდა (DP იგნორირებულია, რადგან ის არ არის დაკავშირებული ESP8266– ის ნებისმიერ პინთან). ასე რომ, ჩემი ფუნქცია ასე გამოიყურება:

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

ნაბიჯი 5: HTML & JAVASCRIPT კოდი

Index.html აქვს ტილო, რომელსაც აქვს 7 სეგმენტის ჩვენება გამორთულ რეჟიმში და მის ქვემოთ. აი რას ხედავთ გახსნის შემდეგ:

თუ ჩვენ გვსურს ჩვენი ვებგვერდის გამოყენება ESP8266 გარეშე, ეს შესაძლებელი იქნება თქვენი ფორმის სამოქმედო ატრიბუტის ბმულის შეცვლით. ამჟამად ეს არის მოქმედი ბმული:

აქ თქვენ ხედავთ, რომ მოქმედი ბმული არის იგივე ip მისამართი, რომელიც გამოყოფილია თქვენს nodeMCU ნებისმიერ wifi (ან ცხელ წერტილთან) დაკავშირების შემდეგ. ფორმის ტეგი კორექტირების შემდეგ ასე გამოიყურება:

აქ, მე ვიყენებ ბრაუზერის ვებ -სტრიქონს მომხმარებლის შესასვლელი მნიშვნელობის შესანახად ისე, რომ ინდექსში შესული მნიშვნელობა. Html ინახება ბრაუზერში ადგილობრივად (ქუქი -ფაილების მსგავსად). ეს მნიშვნელობა მიიღება ინდექსით 1. html და ნომერი ნაჩვენებია 7 სეგმენტის ეკრანზე html ტილოზე. თქვენ შეიძლება გაიგოთ ეს პროცედურა შემდეგი ვიდეოთი:

ვიდეო_დაერთება

ნაბიჯი 6: ძირითადი შენიშვნები

ეს პროექტი იმუშავებს თქვენს ნოდემკუზე, თუ გაითვალისწინებთ შემდეგ პუნქტებს:

1. ბმული root html ფაილის მოქმედების ატრიბუტში უნდა იყოს "https:// (IP სერიულ მონიტორზე ან IP გამოყოფილი თქვენს ESP- ზე)/წარდგენა".

2. გამოიყენეთ ბრაუზერის უახლესი ვერსია, რომელიც მხარს უჭერს html5 და ახალ ტეგებს და ფუნქციონირებას.

3. SPIFFS იმუშავებს მხოლოდ იმ შემთხვევაში, თუ თქვენი index.html, index1.html და main.js მოთავსებულია მონაცემთა საქაღალდეში. შეგიძლიათ კოდის კლონირება ჩემი github– დან

ნაბიჯი 7: კოდი

ეს არის ჩემი პროექტის კოდის საცავის ბმული. თუ თქვენ მუშაობთ SPIFFS– ში ESP8266– ში, თქვენ გესმით, რატომ მოვათავსე html და javascript ფაილები მონაცემთა საქაღალდეში. გამოიყენეთ ეს ისე, როგორც ეს.

GitHub საცავის ბმული

ნაბიჯი 8: ვიდეო გაკვეთილი

თუ ეს დაგეხმარებათ, გთხოვთ გამოიწეროთ