Styring af din Arduino med HTML/Javascript på den nemme måde: 8 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:29

Denne vejledning viser dig, hvordan du styrer en arduino med et ajax -opkald fra en adafruit Huzzah kun ved hjælp af javascript -funktioner. Grundlæggende kan du bruge javascript på html -siden, der giver dig mulighed for nemt at skrive html -grænseflader med enkle javascript -funktioner, der anvender et ajax -tilbagekald. For at tillade ESP8266 at kommunikere med arduinoen. Derfor kan alle stifter indstilles fra en javascript -funktion. På samme måde kan vi også læse værdien fra en hvilken som helst pin ved hjælp af en javascript -funktion. Jeg håber, at dette er med til at gøre det lettere at kunne styre en arduino fra et html -dokument. Jeg regnede med, at der er mange mennesker derude, der kan skrive html. De fleste af dem vil ikke gider forsøge at lave en mobiltelefon -app med java eller xcode eller andre rammer. Dette vil gøre det meget let for folk, fordi alt, hvad de skal gøre, er at bruge en javascript -funktion til at indstille og læse værdier fra pins. For eksempel er det ikke meget lettere at skrive

Tænde for

For at tænde en knap. Skønheden er, at der ikke er nogen anden arduino -programmering involveret udover at erklære pinMode (12, INPUT); I din opsætningsfunktion. Så længe nålen er erklæret end javascript kan bruges til alt andet.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Dette er alt hvad du skal gøre for at få værdien af analog pin 0 og returnere resultatet til div. Så dette burde være en let måde for folk at kunne oprette html -sider, der styrer arduinoen. Samt oprette en grænseflade, så arduino -benene kan indstilles og læses med javascript.

Trin 1: Hvad du får brug for

Jeg byggede dette projekt til brugere, der ønsker at styre deres arduino med en html -side på en ESP8266. Målet med dette projekt er at oprette en enkel metode til at indstille værdierne af pins på din arduino med en javascript -funktion. For examplate onclick = "SetPin (12, 1, 0)" indstiller Pin 12 på din arduino til Høj.

Til denne vejledning skal du bruge følgende elementer for at følge nøjagtigt med. Jeg formoder dog, at det skulle fungere på de fleste arduino- og ESP8266 -kombinationer. For at følge med præcis hvad jeg har her skal du dog bruge følgende komponenter.

Arduino Uno - Skal fungere med enhver arduino -kompatibel, der har en seriel Rx TxAdafruit Huzzah Breakout Board USB til seriel kabel 4 lav effekt LED's analoge grumptestor - enhver analog sensor, der giver analog udgang, vil gøre Wire Wifi Router mobiltelefon med mobilbrowser Arduino biblioteker.

Trin 2: Forberedelse af Arduino ID

Dette projekt kræver nye arduino -biblioteker og en vis konfiguration og for tidens skyld. Jeg lægger ikke et skærmbillede af hver skærm, og jeg vil bare gennemgå, hvad du skal bruge for at konfigurere dette og få det til at køre. Jeg forsøgte at gøre det så let som muligt for brugeren.

Koden bruger et antal biblioteker til at komme i gang. Først vil vi fokusere på at konfigurere arduinoen til ESP8266, jeg bruger Adafruit Huzzah i dette eksempel, fordi jeg synes, at adafruit -produkter er de mest pålidelige og har den bedste support. Så længe du ikke forsøger at få support fra Adafruit Discord -serveren. Du vil have meget bedre held med at få hjælp i supportfora.

Anyways, jeg bruger følgende biblioteker på ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTDette er ikke en vejledning i, hvordan man downloader og installerer biblioteker, men det er de biblioteker, der bruges på HUZZAH. Så find dem og installer dem. Du bliver også nødt til at installere boarddefinitionerne for HUZZAH, så hvis du går til FIL> Præferencer I feltet, hvor der står Yderligere Boards Manager -webadresser, skal du tilføje følgende https://arduino.esp8266.com/stable/package_esp8266c… hvis du allerede har noget i dette felt, end sørg for at tilføje et komma derinde for at tilføje en ekstra board url. Klik ok, så går det

Værktøjer> Board> Boards Manager end at søge efter ESP8266 end installere ESP8266 af ESP8266 Community.

Fantastisk nu kan vi sikre os, at vi har alt, hvad vi har brug for for at få arduino -koden til at fungere. Den ene arduino Side arduinoen selv bruger kun 2 biblioteker til denne vejledning.

SoftwareSerialArduinoJSON, som du allerede burde have.

Trin 3: Forberedelse af ESP8266

Nu skal vi sætte koden på ESP8266 (Adafruit HUZZAH) og forberede den til forbindelse til Arduino. Pak koden til HUZZAH ud, og åbn skitsen. På linje 11 og 12 ændres ssid og adgangskode til den for din WIFI -forbindelse på dit lokale netværk. Du vil bemærke, at der er 2 filer skitsefilen og index.h -filen. Index.h -filen er, hvor den html er gemt, der vises på din telefon.

Når du har angivet det korrekte SSID og adgangskode til din wifi, kan du kompilere koden og indlæse den på din ESP8266. På HUZZAH skal du holde knappen, mærket GPIO0, nede og derefter klikke på resten -knappen, end slippe GPIO0 -knappen for at sætte chippen i bootloader -tilstand. Hvis chippen med succes er sat i bootloader -tilstand, tændes et rødt lys, hvilket angiver, at chippen er i boot loader -tilstand.

For at oprette forbindelse til ESP8266 skal du bruge et serielt kabel eller USB til Serial adapter eller FDTI -chip. I dette tilfælde bruger jeg adafruit's kabel som angivet i vejledningen. Du kan dog tilslutte chippen på flere måder ved hjælp af TTL på Tx- og Rx -benene. Hvilket jeg håber, at de mennesker, der ser dette, ved, hvordan de skal tilslutte chippen for at indlæse koden på den. Under alle omstændigheder skal du blinke chippen med koden i zip -filen, der er knyttet til dette trin.

Trin 4: Forberedelse af Arduino

For at indlæse koden på arduinoen skal du ændre din boarddefinition til Arduino/Genuino Uno. Udpak den fil, der er knyttet til dette trin. End uploade det til ardunio. Ret simpelt, alt det hårde arbejde er allerede gjort for dig. Jeg har allerede gennemgået en prøveperiode, en fejlproces, så alt du skal gøre er at uploade koden.

Trin 5: Tilslut alt sammen

Ok, så til ledningerne har jeg et billede ovenfor af det, jeg har her.

Tilslut Tx på Huzzah til Pin 2 på arduinoen. Tilslut Rx på Huzzah til Pin 3 på arduinoen. Jeg oprettede en anden seriel stikkontakt på ben 2 og 3 på arduinoen for at frigøre standardseriekonsollen.

Tilslut pin V+ og En til 5v fra arduinoen. - Adafruit Huzzah har en indbygget 3.3v spændingsregulator, så tilslutning af disse stifter som denne fungerer muligvis ikke med alle ESP8266 -moduler. Du skal muligvis tilslutte din egen spændingsregulator. Jeg anbefaler at bruge Huzzah, hvis du bare vil få tingen til at fungere let. Tilslut GND til arduinoens GND

På ben 12, 11, 9, 8 på arduino -ledningen i dine lysdioder brugte jeg lavdrevne lysdioder her, fordi dem, der trækker for meget strøm, kan trække for meget strøm for at holde dette eksperiment enkelt.

End på A0 analog Pin 0 på arduino har jeg tilsluttet outputlinjen på min Turpitity tester. Du kan dog tilslutte output fra stort set enhver sensor, der giver dig en analog aflæsning. Det er alt, hvad du skal gøre for at koble dette til.

Trin 6: Adgang til websiden

Nu hvor du har arduinoen forbundet, og du har alt indlæst på dine tavler, skal du kunne se html på din mobiltelefon. Nu vil jeg have, at du opretter forbindelse til den samme wifi -router, som du angav SSID og adgangskode til i koden på Huzzah. End du skal finde ud af, hvilken IP -adresse din router har tildelt din enhed. Normalt bør der være en klientliste, hvis du logger ind på din routers konfiguration. Det viser IP -adresserne på alle de enheder, der er sluttet til din Wifi -forbindelse. Men hvis du ikke kan finde denne IP -adresse, kan du afbryde stikket fra arduino og køre det med det serielle kabel igen. Hvis du åbner den serielle konsol på enheden, udskriver den IP -adressen til enheden i den serielle konsol, hvis du ikke kan finde den på en anden måde. Anyways, når du er forbundet til det samme Wifi -netværk med din mobiltelefon. End peg din mobile webbrowser på Huzzahs ip -adresse. Som sandsynligvis ligner noget lignende dette. https://192.168.0.107 eller noget meget lignende. Der indsatte jeg en grundlæggende side, der giver dig mulighed for at tænde og slukke de 4 lysdioder samt læse værdien af den analoge sensor.

Trin 7: Brug af Javascipt

I filen kaldet index.h i ESP8266Code -skitsen skulle den komme op som en separat fane i arduino -editoren. Du kan se det grundlæggende eksempel, som jeg lavede her. Grundlæggende er den måde, det fungerer på, sådan her.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}, {IsAnalog 1 Yes 0 No})

Dette vil sætte værdien af digital pin 12 til høj

SetPin (4, 0, 0);

Dette vil sætte værdien af digital pin 4 til lav

SetPin (A2, 439, 1) Dette indstiller værdien af Analog Pin 2 til 439

På samme måde returnerer funktionen GetJSON en ønsket værdi fra en pin og placerer den i en html elemted med den angivne div -id.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element to return result})

Dette sender en anmodning til arduinoen, der beder om værdien af den analoge pin 0 og returnerer resultatet til Div med ID resp_iGetJSON (12, 0, 'mydiv'); Dette vil bede arduinoen om at få værdien af digital pin 0 og returnere resultatet til et html -element med og Id for mydiv

Trin 8: Support

Jeg håber, at mit script hjælper dem af jer, der ønsker at bruge det. Jeg brugte et meget grundlæggende html -eksempel her med håb om, at andre mennesker vil udforske alle dets muligheder, som jeg ikke kan. Dette skulle dog demonstrere, hvordan ajax kan bruges til at styre en arduino uden html -sidelastninger og ting af den art.

Hvis du har kommentarer, er du velkommen til at spørge mig, jeg vil gøre mit bedste for at svare. Jeg vil gerne udvide funktionaliteten af dette noget mere, men jeg løb tør for tid og penge. Jeg arbejder dog på en mere robust implementering af dette, der gemmer filerne på en almindelig webserver frem for på ESP8266.

Tak fordi du tog dig tid til at se min kode.

John AndersonE -mail mig

Vermont Internet Design LLC

www.vermontinternetdesign.com