აკონტროლეთ თქვენი არდუინო HTML/Javascript მარტივი გზით: 8 ნაბიჯი

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

ეს გაკვეთილი გიჩვენებთ თუ როგორ უნდა აკონტროლოთ არდუინო აიაქსის ზარით adafruit Huzzah– დან მხოლოდ javascript ფუნქციების გამოყენებით. ძირითადად თქვენ შეგიძლიათ გამოიყენოთ javascript html გვერდზე, რომელიც საშუალებას მოგცემთ ადვილად დაწეროთ html ინტერფეისები მარტივი javascript ფუნქციებით, რომლებიც იყენებენ ajax– ის უკუკავშირს. მიეცით საშუალება ESP8266 დაუკავშირდეს არდუინოს. ამრიგად, ყველა ქინძისთავის დაყენება შესაძლებელია javascript ფუნქციადან. ანალოგიურად, ჩვენ ასევე შეგვიძლია წავიკითხოთ მნიშვნელობა ნებისმიერი პინიდან javascript ფუნქციის გამოყენებით. ვიმედოვნებ, რომ ეს ხელს უწყობს გაუადვილოს არდუინოს კონტროლი html დოკუმენტიდან. მივხვდი, რომ ბევრი ადამიანია, ვისაც შეუძლია html დაწეროს. მათ უმეტესობას არ სურს შეწუხდეს მობილური ტელეფონის პროგრამის შექმნა java ან xcode ან სხვა ჩარჩოებით. ეს ძალიან გაუადვილებს ხალხს, რადგან მათ მხოლოდ უნდა გამოიყენონ javascript ფუნქცია ქინძისთავებიდან მნიშვნელობების დასაყენებლად და წასაკითხად. მაგალითად, წერა არც ისე ადვილია

Ჩართვა

იმისათვის, რომ ჩართოთ ღილაკი. სილამაზე ის არის, რომ არ არსებობს სხვა არდუინოს პროგრამირება, გარდა pinMode- ის გამოცხადებისა (12, INPUT); თქვენს დაყენებულ ფუნქციაში. სანამ pin გამოცხადებულია, javascript შეიძლება გამოყენებულ იქნას ყველაფრისთვის.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

ეს არის ყველაფერი რაც თქვენ გჭირდებათ რომ მიიღოთ ანალოგური pin 0 -ის მნიშვნელობა და დააბრუნოთ შედეგი div- ში. ასე რომ, ეს უნდა იყოს მარტივი გზა ადამიანებისთვის, რომ შეძლონ შექმნან html გვერდები, რომლებიც აკონტროლებენ arduino- ს. ასევე შექმენით ინტერფეისი ისე, რომ არდუინოს ქინძისთავების დაყენება და წაკითხვა შესაძლებელია JavaScript– ით.

ნაბიჯი 1: რაც დაგჭირდებათ

მე შევქმენი ეს პროექტი იმ მომხმარებლებისთვის, რომელთაც სურთ აკონტროლონ თავიანთი arduino html გვერდით ESP8266– ზე. ამ პროექტის მიზანია შექმნას მარტივი მეთოდი თქვენს არდუინოს ქინძისთავების მნიშვნელობების დასადგენად javascript ფუნქციით. For examplate onclick = "SetPin (12, 1, 0)" თქვენს არდუინოს პინ 12 დააყენებს მაღალზე.

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

Arduino Uno - უნდა იმუშაოს ნებისმიერ arduino თავსებადთან, რომელსაც აქვს სერიული Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 დაბალი სიმძლავრის LED- ს ანალოგური გამჭვირვალე ტესტორი - ნებისმიერი ანალოგური სენსორი, რომელიც უზრუნველყოფს ანალოგურ გამომუშავებას, შეასრულებს Wire Wifi Router მობილურ ტელეფონს მობილური ბრაუზერის Arduino ბიბლიოთეკებით.

ნაბიჯი 2: არდუინოს ID- ის მომზადება

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

კოდი იყენებს უამრავ ბიბლიოთეკას სამუშაოდ. პირველ რიგში ჩვენ ყურადღებას გავამახვილებთ arduino– ს დაყენებაზე ESP8266– ისთვის მე ვიყენებ Adafruit Huzzah– ს ამ მაგალითში, რადგან მიმაჩნია, რომ adafruit პროდუქტები არის ყველაზე საიმედო და საუკეთესო მხარდაჭერა. სანამ არ შეეცდებით Adafruit Discord სერვერის მხარდაჭერას. თქვენ გექნებათ ბევრად უკეთესი იღბალი დახმარების ფორუმებში.

ყოველ შემთხვევაში, მე ვიყენებ შემდეგ ბიბლიოთეკებს ESP8266– ზე

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT ეს არ არის სახელმძღვანელო ბიბლიოთეკების გადმოტვირთვისა და ინსტალაციის შესახებ, თუმცა, ეს არის ბიბლიოთეკები, რომლებიც გამოიყენება HUZZAH– ში. ასე რომ, გთხოვთ იპოვოთ ისინი და დააინსტალიროთ. თქვენ ასევე უნდა დააინსტალიროთ დაფის განმარტებები HUZZAH– სთვის, ასე რომ, თუ გადახვალთ ფაილზე> პარამეტრები, იმ ყუთში, სადაც ნათქვამია დამატებითი დაფების მენეჯერის მისამართები, დაამატეთ შემდეგი: https://arduino.esp8266.com/stable/package_esp8266c… თუ უკვე გაქვთ რაღაც ამ სფეროში, ვიდრე დარწმუნდით, რომ თქვენ დაამატებთ მძიმით იქ დამატებით დაფის url. დააწკაპუნეთ კარგი, წადი

ინსტრუმენტები> დაფა> დაფების მენეჯერი ვიდრე მოძებნეთ ESP8266 ვიდრე დააინსტალირეთ ESP8266 ESP8266 საზოგადოების მიერ.

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

პროგრამული უზრუნველყოფა სერიული Arduino JSON რომელიც თქვენ უკვე უნდა გქონდეთ.

ნაბიჯი 3: ESP8266- ის მომზადება

ახლა ჩვენ ვაპირებთ ჩავდოთ კოდი ESP8266 (Adafruit HUZZAH) და მოვამზადოთ იგი არდუინოსთან დასაკავშირებლად. გახსენით კოდი HUZZAH– ისთვის და გახსენით ესკიზი. მე -11 და მე -12 ხაზებზე შეცვალეთ ssid და პაროლი თქვენს WIFI კავშირზე თქვენს ადგილობრივ ქსელში. თქვენ შეამჩნევთ, რომ არის 2 ფაილი ესკიზის ფაილი და index.h ფაილი. Index.h ფაილი არის იქ, სადაც ინახება html, რომელიც გამოჩნდება თქვენს ტელეფონში.

მას შემდეგ რაც თქვენს wifi– ზე დააყენეთ სწორი SSID და პაროლი, შეგიძლიათ შეადგინოთ კოდი და ჩატვირთოთ იგი თქვენს ESP8266– ზე. HUZZAH– ზე თქვენ უნდა დააჭიროთ ღილაკს GPIO0, შემდეგ დააწკაპუნეთ დანარჩენი ღილაკზე, ვიდრე გაუშვებთ GPIO0 ღილაკს ჩიპის ჩატვირთვის რეჟიმში ჩასასმელად. თუ ჩიპი წარმატებით იქნა ჩართული ჩატვირთვის რეჟიმში, წითელი შუქი აინთება იმის მითითებით, რომ ჩიპი ჩატვირთვის რეჟიმშია.

ESP8266– თან დასაკავშირებლად დაგჭირდებათ სერიული კაბელი ან USB სერიული ადაპტერი, ან FDTI ჩიპი. ამ შემთხვევაში მე ვიყენებ ადაფრუტის კაბელს, როგორც ეს მითითებულია ინსტრუქციებში. თუმცა, თქვენ შეგიძლიათ შეუერთდეთ ჩიპს რამდენიმე გზით, TTL გამოყენებით Tx და Rx ქინძისთავებზე. რისი იმედიც მაქვს, რომ ადამიანებმა, რომლებმაც ეს ნახეს, იციან როგორ დაუკავშირდნენ ჩიპს, რომ მასზე კოდი ჩატვირთოს. ნებისმიერ შემთხვევაში, წადით წინ და ააფეთქეთ ჩიპი კოდით zip ფაილში, რომელიც თან ერთვის ამ ნაბიჯს.

ნაბიჯი 4: არდუინოს მომზადება

კოდის ჩატვირთვა არდუინოზე, შეცვალეთ დაფის განმარტება Arduino/Genuino Uno. ვიდრე unzip ფაილი, რომელიც ერთვის ამ ნაბიჯს. ვიდრე ატვირთო არდუნიოზე. საკმაოდ მარტივი ნამდვილად, ყველა მძიმე სამუშაო უკვე შესრულებულია თქვენთვის. მე უკვე გავიარე საცდელი შეცდომის პროცესი, ასე რომ თქვენ მხოლოდ უნდა ატვირთოთ კოდი.

ნაბიჯი 5: ყველაფრის ერთად გაყვანილობა

კარგი, ასე რომ გაყვანილობისთვის მე მაქვს სურათი, რაც აქ მაქვს.

შეაერთეთ Tx Huzzah– ზე Pin 2 arduino– ზე. დააკავშირეთ Rx Huzzah– ზე Pin 3 – ზე arduino– ზე. მე შევქმენი კიდევ ერთი სერიული ბუდე არდუინოს 2 და 3 ქინძისთავებზე, რომ გავათავისუფლო ნაგულისხმევი სერიული კონსოლი.

შეაერთეთ Pin V+ და En 5v arduino– დან. - adafruit Huzzah– ს აქვს ჩაშენებული 3.3 ვ ძაბვის მარეგულირებელი, ასე რომ ამ ქინძისთავების ასე ჩართვა შეიძლება არ იმუშაოს ყველა ESP8266 მოდულთან. შეიძლება დაგჭირდეთ თქვენი საკუთარი ძაბვის რეგულატორის მიერთება. მე გირჩევთ გამოიყენოთ Huzzah, თუ უბრალოდ გსურთ საგნის მარტივად მუშაობა. შეაერთეთ GND არდუინოს GND– თან

თქვენს LED- ებში არდუინოს მავთულზე 12, 11, 9, 8 ქინძისთავებზე აქ გამოვიყენე დაბალი ენერგიის მქონე LED- ები, რადგან ის, ვინც ძალიან ბევრ დენს ამახვილებს, შეიძლება ზედმეტი ენერგიის მოზიდვა ამ ექსპერიმენტის სიმარტივის მიზნით.

ვიდრე A0 ანალოგურ Pin 0 -ზე arduino- ზე მე ჩავრთე ჩემი Turpitity ტესტერის გამომავალი ხაზი. ამასთან, შეგიძლიათ შეაერთოთ ძირითადად ნებისმიერი სენსორის გამომავალი, რომელიც მოგცემთ ანალოგიურ კითხვას. ეს არის ყველაფერი რაც თქვენ გჭირდებათ რომ გააკეთოთ ეს.

ნაბიჯი 6: წვდომა ვებ გვერდზე

მას შემდეგ რაც arduino დაყენებულია და ყველაფერი დატვირთულია თქვენს დაფებზე, თქვენ უნდა გქონდეთ საშუალება ნახოთ html თქვენს მობილურ ტელეფონში. ახლა მე მინდა, რომ თქვენ დაუკავშირდეთ იმავე wifi როუტერს, რომელზეც დააყენეთ SSID და პაროლი Huzzah– ის კოდში. თქვენ უნდა გაარკვიოთ რა IP მისამართი აქვს თქვენს როუტერს თქვენს მოწყობილობას. ჩვეულებრივ, თუ შეხვალთ როუტერის კონფიგურაციაში, უნდა იყოს კლიენტების სია. ეს აჩვენებს თქვენს Wifi კავშირთან დაკავშირებული ყველა მოწყობილობის IP მისამართებს. თუმცა, თუ თქვენ ვერ იპოვით ამ IP მისამართს, შეგიძლიათ გამორთოთ იგი arduino– დან და კვლავ გაუშვათ სერიული კაბელით. თუ თქვენ გახსნით სერიულ კონსოლს მოწყობილობაზე, ის დაბეჭდავს IP მისამართს მოწყობილობაზე სერიულ კონსოლში, თუ სხვაგვარად ვერ იპოვით. ნებისმიერ შემთხვევაში, როდესაც თქვენ დაუკავშირდებით იმავე Wifi ქსელს თქვენი მობილური ტელეფონით. შემდეგ მიუთითეთ თქვენი მობილური ბრაუზერი Huzzah– ის ip მისამართზე. რაც, ალბათ, მსგავსი რამ აქვს. https://192.168.0.107 ან რაღაც ძალიან მსგავსი. იქ დავდე ძირითადი გვერდი, რომელიც საშუალებას მოგცემთ ჩართოთ და გამორთოთ 4 Led, ასევე წაიკითხოთ ანალოგური სენსორის მნიშვნელობა.

ნაბიჯი 7: Javascipt– ის გამოყენება

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

SetPin (12, 1, 0); SetPin ({პინის ნომერი}, {მნიშვნელობა 1 მაღალი 0 დაბალი}, {ის ანალოგი 1 დიახ 0 არა})

ეს დააყენებს ციფრული პინ 12 -ის მნიშვნელობას მაღალზე

SetPin (4, 0, 0);

ეს დააყენებს ციფრული პინ 4 -ის მნიშვნელობას დაბალ დონეზე

SetPin (A2, 439, 1) ეს განსაზღვრავს ანალოგური პინ 2 -ის მნიშვნელობას 439 -მდე

ანალოგიურად, ფუნქცია GetJSON დააბრუნებს მოთხოვნილ მნიშვნელობას პინიდან და განათავსებს მას html- ში, შერჩეული დივიდის Id- ით.

GetJSON ('A0', 1, 'resp_i') GetJSON ({პინ ნომერი}, {IsAnalog 1 დიახ 0 არა}, {HTML Element ID შედეგის დასაბრუნებლად})

ეს გაუგზავნის მოთხოვნას arduino– ს, რომელიც ითხოვს ანალოგური pin 0 – ის მნიშვნელობას და შედეგს დააბრუნებს Div– ში ID resp_iGetJSON– ით (12, 0, 'mydiv'); ეს ითხოვს arduino- ს მიიღოს ციფრული pin 0 -ის მნიშვნელობა და დააბრუნოს შედეგი html ელემენტში mydiv და Id

ნაბიჯი 8: მხარდაჭერა

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

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

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

ჯონ ანდერსონი

შპს ვერმონტის ინტერნეტ დიზაინი

www.vermontinternetdesign.com