ჩატვირთეთ თქვენი Arduino/ESP კონფიგურაციის ვებ გვერდი ღრუბლიდან: 7 ნაბიჯი

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

Arduino / ESP (ESP8266 / ESP32) პროექტის შექმნისას თქვენ უბრალოდ შეძლებთ ყველაფრის მყარ კოდს. მაგრამ უფრო ხშირად რაღაც გამოჩნდება და თქვენ კვლავ ხელახლა მიამაგრებთ თქვენს IoT მოწყობილობას თქვენს IDE– ზე. ან თქვენ უბრალოდ უფრო მეტმა ადამიანმა მიიღო წვდომა კონფიგურაციაზე და თქვენ გსურთ უზრუნველყოთ ინტერფეისი, იმის ნაცვლად, რომ ელოდოთ მათ შინაგანი მუშაობის გაგებას.

ეს ინსტრუქცია გეტყვით, თუ როგორ უნდა დააყენოთ UI– ს უმეტესი ნაწილი ღრუბელში, Arduino / ESP– ის ნაცვლად. ამის გაკეთება დაზოგავთ სივრცესა და მეხსიერებას. სერვისი, რომელიც უზრუნველყოფს უფასო სტატიკურ ვებ გვერდებს, განსაკუთრებით შესაფერისია როგორც „ღრუბელი“, მაგალითად GitHub Pages, მაგრამ სხვა ვარიანტებიც ასევე იმუშავებს.

ვებგვერდის ამ გზით შესაქმნელად საჭიროა მომხმარებლის ბრაუზერმა გაიაროს 4 ნაბიჯი:

1. მოითხოვეთ ძირეული URL Arduino / ESP– დან
2. მიიღეთ ძალიან მარტივი ვებ გვერდი, რომელიც ეუბნება:
3. მოითხოვეთ JavaScript ფაილი ღრუბლიდან
4. მიიღეთ კოდი, რომელიც ქმნის ნამდვილ გვერდს

ეს ინსტრუქცია ასევე განმარტავს, თუ როგორ უნდა ითანამშრომლოთ Arduino / ESP– სთან ერთად, როდესაც გვერდი მზად იქნება ზემოთ მოყვანილი ნაბიჯების შესაბამისად.

ამ ინსტრუქციის საფუძველზე შექმნილი კოდი შეგიძლიათ იხილოთ GitHub– ზეც.

წინაპირობები

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

• Arduino (ქსელის წვდომით) / ESP
• კომპიუტერი ზემოაღნიშნულის დასაკავშირებლად
• Wi -Fi წვდომა ინტერნეტთან
• Arduino IDE დაინსტალირებული (ასევე ESP32– ისთვის)
• თქვენ იცით როგორ ატვირთოთ ესკიზი თქვენს IoT მოწყობილობაზე
• თქვენ იცით როგორ გამოიყენოთ Git & GitHub

ნაბიჯი 1: დაიწყეთ ვებ სერვერის მარტივი ესკიზით

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

#ჩართეთ

const char* ssid = "Yoursid"; const char* პაროლი = "yourpasswd"; WiFiServer სერვერი (80); void setup () {// სერიალის ინიციალიზაცია და დაველოდოთ პორტის გახსნას: Serial.begin (115200); ხოლო (! სერიული) {; // დაელოდეთ სერიული პორტის დაკავშირებას. საჭიროა მხოლოდ მშობლიური USB პორტისთვის} WiFi.begin (ssid, პაროლი); while (WiFi.status ()! = WL_CONNECTED) {დაგვიანებით (500); Serial.print ("."); } Serial.println ("WiFi დაკავშირებულია."); Serial.println ("IP მისამართი:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// მოუსმინეთ შემომავალ კლიენტებს WiFiClient client = server.available (); // მოუსმინეთ შემომავალ კლიენტებს bool sendResponse = false; // დაყენებულია ჭეშმარიტად, თუ გვსურს გამოვაგზავნოთ პასუხი String urlLine = ""; // გააკეთეთ სიმებიანი მოთხოვნილი URL- ის შესანახად, თუ (კლიენტი) // თუ მიიღებთ კლიენტს, {Serial.println ("ახალი კლიენტი"); // დაბეჭდეთ შეტყობინება სერიული პორტიდან String currentLine = ""; // გააკეთეთ სტრიქონი კლიენტისგან შემომავალი მონაცემების შესანახად (client.connected ()) // მარყუჟის დროს, როდესაც კლიენტი დაკავშირებულია {if (client.available ()) // თუ კლიენტისგან წაკითხული ბაიტებია, {char c = client.read (); // წაიკითხეთ ბაიტი, შემდეგ თუ (c == '\ n') // თუ ბაიტი არის ახალი ხაზის სიმბოლო {// თუ მიმდინარე ხაზი ცარიელია, თქვენ მიიღეთ ორი ახალი ხაზის სიმბოლო ზედიზედ. // ეს არის კლიენტის HTTP მოთხოვნის დასრულება, ასე რომ გამოაგზავნეთ პასუხი: if (currentLine.length () == 0) {sendResponse = true; // ყველაფერი კარგადაა! შესვენება; // გარღვევა while მარყუჟიდან} სხვა // თუ თქვენ გაქვთ ახალი ხაზი, მაშინ გაასუფთავეთ currentLine: {if (currentLine.indexOf ("GET /")> = 0) // ეს უნდა იყოს URL ხაზი {urlLine = currentLine; // შეინახეთ მოგვიანებით გამოყენებისათვის} currentLine = ""; // გადატვირთეთ currentLine String}} სხვა შემთხვევაში (c! = '\ r') // თუ თქვენ გაქვთ რაიმე სხვა გარდა ვაგონის დაბრუნების სიმბოლო, {currentLine += c; // დაამატეთ მიმდინარე ხაზის ბოლოს}}} if (sendResponse) {Serial.print ("კლიენტი მოთხოვნილია"); Serial.println (urlLine); // HTTP სათაურები ყოველთვის იწყება პასუხის კოდით (მაგ. HTTP/1.1 200 OK) // და შინაარსის ტიპი, რათა კლიენტმა იცოდეს რა მოდის, შემდეგ ცარიელი ხაზი: client.println ("HTTP/1.1 200 OK"); client.println ("შინაარსის ტიპი: ტექსტი/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // თუ URL არის მხოლოდ " /" {// HTTP პასუხის შინაარსი მიჰყვება სათაურს: client.println ("გამარჯობა სამყარო!"); } // HTTP პასუხი მთავრდება სხვა ცარიელი ხაზით: client.println (); } // კავშირის დახურვა: client.stop (); Serial.println ("კლიენტი გათიშულია."); }}

დააკოპირეთ ზემოთ მოყვანილი კოდი, ან გადმოწერეთ GitHub– ის ჩანაწერიდან.

არ დაგავიწყდეთ SSID და პაროლის შეცვლა თქვენი ქსელის შესატყვისად.

ესკიზი იყენებს კარგად ცნობილ არდუინოს

აწყობა()

და

მარყუჟი ()

ფუნქციები. იმ

აწყობა()

ფუნქციონირებს სერიული კავშირი IDE– სთან და ასევე WiFi. მას შემდეგ, რაც WiFi დაკავშირებულია აღნიშნულ SSID– თან, IP იბეჭდება და იწყება ვებ სერვერი. თითოეული გამეორებისას

მარყუჟი ()

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

გაფრთხილება! ეს კოდი იყენებს Arduino String კლასს მისი სიმარტივის შესანარჩუნებლად. სიმებიანი ოპტიმიზაცია არ არის ამ ინსტრუქციის ფარგლებში. წაიკითხეთ ამის შესახებ ინსტრუქციულად Arduino სიმებიანი მანიპულირების შესახებ მინიმალური რამის გამოყენებით.

ნაბიჯი 2: შექმენით დისტანციური JavaScript

Arduino / ESP ეუბნება ვიზიტორთა ბრაუზერს ჩატვირთოს ეს ერთი ფაილი. ყველა დანარჩენი გაკეთდება ამ JavaScript კოდით.

ამ ინსტრუქციაში ჩვენ გამოვიყენებთ jQuery– ს, ეს არ არის მკაცრად აუცილებელი, მაგრამ საქმეს გაადვილებს.

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

gh- გვერდები

ფილიალი. მოათავსეთ შემდეგი კოდი ა

.ჯს

შეინახეთ საცავში, სწორ ფილიალში.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (ფუნქცია () {var script = document.createElement ('სკრიპტი'); // შექმენით ელემენტი script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // დააყენეთ src = "" ატრიბუტი script.onload = ფუნქცია () // გამოძახების ფუნქცია, რომელსაც ეწოდება ერთხელ jquery ფაილი იტვირთება {$ = window.jQuery; // გახადეთ jQuery ხელმისაწვდომი როგორც გლობალური $ ცვლადი init (); // დარეკეთ init ფუნქცია}; დოკუმენტი. getElementsByTagName ('თავი') [0].appendChild (სკრიპტი); // დაამატეთ შექმნილი ტეგი დოკუმენტს, ეს დაიწყებს jQuery lib} - ის ჩატვირთვას) (); ფუნქცია init () {// დასრულებულია jQuery ჩატვირთვა, კოდს დაამატებთ აქ მოგვიანებით…}

დააკოპირეთ ზემოთ მოყვანილი კოდი, ან გადმოწერეთ GitHub– ის ჩანაწერიდან.

შეამოწმეთ არის თუ არა ხელმისაწვდომი თქვენი ფაილი. GitHub გვერდების შემთხვევაში გადადით https://username.github.io/repository/your-file.j… (შეცვალეთ

მომხმარებლის სახელი

,

საცავი

და

your-file.js

სწორი პარამეტრებისთვის).

ნაბიჯი 3: ჩატვირთეთ დისტანციური JavaScript ფაილი სტუმრების ბრაუზერში

ახლა, როდესაც ჩვენ ყველაფერი დავადგინეთ, დროა გავაკეთოთ, რომ ვებ გვერდი ჩავტვირთოთ დისტანციური JavaScript ფაილი.

ამის გაკეთება შეგიძლიათ ესკიზის 88 -ე ხაზის შეცვლით

client.println ("გამარჯობა სამყარო!"); ტ

client.println ("");

(შეცვალე

src

ატრიბუტი მიუთითეთ თქვენს JavaScript ფაილზე).ეს არის პატარა html ვებ გვერდი, რასაც აკეთებს ეს არის JavaScript ფაილის ჩატვირთვა ვიზიტორთა ბრაუზერში.

შეცვლილი ფაილი ასევე შეგიძლიათ ნახოთ GitHub– ის შესაბამის ჩადენაში.

ატვირთეთ მორგებული ესკიზი თქვენს Arduino / ESP– ში.

ნაბიჯი 4: ახალი ელემენტების დამატება გვერდზე

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

დაამატეთ კოდის შემდეგი ხაზი

მასში()

ფუნქცია:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({სიგანე: '608 პიქსელი', სიმაღლე: '342px'}). AppendTo ('სხეული');

ეს შექმნის

iframe

ელემენტი, დააყენეთ სწორი

src

მიანიჭეთ და დაადგინეთ ზომა css- ის გამოყენებით და დაამატეთ ელემენტი გვერდის სხეულს.

jQuery გვეხმარება ვებ გვერდის ელემენტების მარტივად შერჩევაში და შეცვლაში, რამდენიმე ძირითადი რამ, რაც უნდა ვიცოდეთ:

• $ ("სხეული")

• ირჩევს უკვე არსებულ ელემენტს, სხვა css სელექტორების გამოყენებაც შეიძლება

• $(' ')

  ქმნის ახალს

• ელემენტი (მაგრამ არ დაამატებს მას დოკუმენტს)

• .appendTo ('. მთავარი')

• ამატებს შერჩეულ/შექმნილ ელემენტს ელემენტს css კლასის 'main'

• ელემენტების დამატების სხვა ფუნქციაა

  .დამატებული ()

  ,

  .დამატება ()

  ,

  .prependTo ()

  ,

  . ჩასმა ()

  ,

  .insertAfter ()

  ,

  . ჩასმა ადრე ()

  ,

  . მას შემდეგ ()

  ,

  . ადრე ()

გადახედეთ შესაბამის ჩადენას GitHub– ზე, თუ რამე გაუგებარია.

ნაბიჯი 5: ინტერაქტიული ელემენტები

ვიდეო სახალისოა, მაგრამ ამ ინსტრუქციის მიზანია Arduino / ESP– სთან ურთიერთობა. მოდით შევცვალოთ ვიდეო ღილაკით, რომელიც აგზავნის ინფორმაციას Arduino / ESP– ში და ასევე ელოდება პასუხს.

ჩვენ დაგვჭირდება ა

$('')

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

$ (''). ტექსტი ('ღილაკი'). on ('დაწკაპუნება', ფუნქცია ()

{// კოდი აქ შესრულდება, როდესაც ღილაკს დააჭერთ}). appendTo ('body');

და დაამატეთ AJAX მოთხოვნა გამოძახების ფუნქციას:

$.get ('/ajax', ფუნქცია (მონაცემები)

{// კოდი აქ შესრულდება, როდესაც AJAX მოთხოვნა დასრულდება});

მოთხოვნის დასრულების შემდეგ, დაბრუნებული მონაცემები დაემატება გვერდს:

$('

').ტექსტი (მონაცემები).appendTo (' სხეული ');

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

თუ პირველად იყენებთ უკუკავშირს, შეიძლება გინდათ შეამოწმოთ ვალდებულება GitHub– ზე, რომ ნახოთ თუ როგორ არის ყველაფერი ჩადგმული.

ნაბიჯი 6: უპასუხეთ ინტერაქტიულ ელემენტს

რა თქმა უნდა, AJAX მოთხოვნა მოითხოვს პასუხს.

სწორი პასუხის შესაქმნელად

/აიაქსი

url ჩვენ უნდა დავამატოთ

სხვა თუ ()

if განცხადების დახურვის ფრჩხილის შემდეგ, რომელიც ამოწმებს

/

url

else if (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("გამარჯობა!"); }

GitHub– ის ჩადენისას მე ასევე დავამატე მრიცხველი ბრაუზერის საჩვენებლად, რომ ყველა მოთხოვნა უნიკალურია.

ნაბიჯი 7: დასკვნა

ეს არის ამ სასწავლო ინსტრუქციის დასასრული. ახლა თქვენ გაქვთ Arduino / ESP, რომელიც ემსახურება პატარა ვებგვერდს, რომელიც ეუბნება ვიზიტორთა ბრაუზერს, ჩამოტვირთოს JavaScript ფაილი ღრუბლიდან. JavaScript- ის დატვირთვისთანავე იგი ქმნის ვებგვერდის დანარჩენ შინაარსს, რაც უზრუნველყოფს მომხმარებლის ინტერფეისს Arduino / ESP– თან კომუნიკაციისთვის.

ახლა თქვენს ფანტაზიაზეა დამოკიდებული შექმნათ მეტი ელემენტი ვებგვერდზე და შეინახოთ პარამეტრები ადგილობრივად რაიმე სახის ROM- ზე (EEPROM / NVS / etc).

გმადლობთ რომ კითხულობთ და გთხოვთ მოგერიდებათ გამოხმაურება!