Die beheer van u Arduino met HTML/Javascript op die maklike manier: 8 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:27

Hierdie handleiding wys u hoe u 'n arduino met 'n ajax -oproep van 'n adafruit Huzzah kan beheer deur slegs javascript -funksies te gebruik. Eintlik kan u javascript op die html -bladsy gebruik, waarmee u maklik HTML -koppelvlakke kan skryf met eenvoudige javascript -funksies wat gebruik maak van 'n ajax -terugbel. Om die ESP8266 in staat te stel om met die arduino te kommunikeer. Daarom kan al die penne ingestel word vanuit 'n javascript -funksie. Net so kan ons ook die waarde van enige pen lees met 'n javascript -funksie. Ek hoop dat dit help om dit makliker te maak om 'n arduino uit 'n html -dokument te beheer. Ek het gedink dat daar baie mense is wat html kan skryf. Die meeste van hulle wil nie moeite doen om 'n selfoonprogram met java of xcode of 'n ander raamwerk te maak nie. Dit sal dit baie makliker maak vir mense, want al wat hulle hoef te doen is om 'n javascript -funksie te gebruik om waardes van penne in te stel en te lees. Dit is byvoorbeeld nie baie makliker om te skryf nie

Sit aan

Om 'n knoppie aan te skakel. Die mooi is dat daar geen ander arduino -programmering is nie, behalwe om die pinMode (12, INPUT) te verklaar; In u opstelfunksie. Solank die pen verklaar word, kan javascript vir alles anders gebruik word.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Dit is al wat u hoef te doen om die waarde van analoog pen 0 te kry en die resultaat in die div terug te gee. Dit behoort dus 'n maklike manier vir mense te wees om html -bladsye te skep wat die arduino beheer. Skep ook 'n koppelvlak sodat die arduino -penne met javascript gestel en gelees kan word.

Stap 1: wat u benodig

Ek het hierdie projek gebou vir gebruikers wat hul arduino wil beheer met 'n html -bladsy op 'n ESP8266. Die doel van hierdie projek is om 'n eenvoudige metode te skep om die waardes van penne op u arduino vas te stel met 'n javascript -funksie. Byvoorbeeld, onclick = "SetPin (12, 1, 0)" stel Pin 12 op u arduino op High.

Vir hierdie tutoriaal benodig u die volgende items om presies te kan volg. Ek veronderstel egter dat dit op die meeste arduino- en ESP8266 -kombinasies moet werk. Om presies te volg wat ek hier het, benodig u egter die volgende komponente.

Arduino Uno - Moet werk met enige arduino -versoenbare met 'n seriële Rx TxAdafruit Huzzah Breakout Board USB na seriële kabel 4 lae krag LED's se analoog troebelheidstoetser - enige analoog sensor wat analoog uitset bied, sal 'n draadlose wifi -selfoon met 'n mobiele blaaier Arduino Libraries doen.

Stap 2: Voorbereiding van die Arduino ID

Hierdie projek benodig 'n nuwe arduino -biblioteek en 'n bietjie opset en ter wille van tyd. Ek sal nie 'n skermkiekie van elke skerm plaas nie, en ek gaan net deurloop wat u nodig het om dit op te stel en aan die gang te kry. Ek het probeer om dit so maklik as moontlik vir die gebruiker te maak.

Die kode gebruik 'n aantal biblioteke om aan die gang te kom. Eerstens sal ons fokus op die opstel van die arduino vir die ESP8266 wat ek in hierdie voorbeeld gebruik, want ek vind adafruit -produkte die betroubaarste en die beste ondersteuning. Solank u nie ondersteuning van die Adafruit Discord -bediener probeer kry nie. U sal baie beter geluk kry as u hulp in die ondersteuningsforums kry.

Ek gebruik in elk geval die volgende biblioteke op die ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT Dit is nie 'n handleiding oor hoe om biblioteke af te laai en te installeer nie, maar dit is die biblioteke wat op die HUZZAH gebruik word. So vind dit asseblief en installeer dit. U moet ook die borddefinisies vir die HUZZAH installeer, dus as u na LêER> Voorkeure gaan, voeg die volgende by: https://arduino.esp8266.com/stable/package_esp8266c… As u reeds beskik iets in hierdie veld, as om seker te maak dat u 'n komma daar byvoeg om 'n ekstra bord -url by te voeg. Klik op OK

Tools> Board> Boards Manager Dan soek na ESP8266 as installeer ESP8266 deur ESP8266 Community.

Met Great nou kan ons seker maak dat ons alles het wat ons nodig het om die arduino -kode te laat werk. Een van die arduino -kant die arduino self gebruik slegs 2 biblioteke vir hierdie tutoriaal.

Sagteware SerialArduinoJSON wat u reeds behoort te hê.

Stap 3: Voorbereiding van die ESP8266

Nou gaan ons die kode op die ESP8266 (Adafruit HUZZAH) plaas en dit voorberei vir die verbinding met die Arduino. Pak die kode vir die HUZZAH uit en maak die skets oop. Op reëls 11 en 12 verander die ssid en wagwoord na die van u WIFI -verbinding op u plaaslike netwerk. U sal sien dat daar twee lêers is: die sketslêer en die index.h -lêer. Die index.h -lêer is waar die html gestoor word wat op u telefoon vertoon word.

Nadat u die korrekte SSID en wagwoord vir u wifi ingestel het, kan u die kode saamstel en op u ESP8266 laai. Op die HUZZAH moet u die knoppie met die naam GPIO0 ingedruk hou, klik dan op die res -knoppie, en laat dan die GPIO0 -knoppie los om die chip in die bootloader -modus te plaas. As die chip suksesvol in die laaiproses -modus geplaas is, gaan 'n rooi liggie aan wat aandui dat die chip in die laaiprogram is.

Om 'n verbinding met die ESP8266 te kry, benodig u 'n seriële kabel of 'n USB -na -seriële adapter, of 'n FDTI -chip. In hierdie geval gebruik ek die kabel van adafruit soos aangedui in die instruksies. U kan egter op verskillende maniere by die chip aansluit deur TTL op die Tx- en Rx -penne te gebruik. Ek hoop dat die mense wat hier kyk, weet hoe om met die chip te skakel om die kode daarop te laai. Gaan in elk geval voort en flits die chip met die kode in die zip -lêer wat by hierdie stap aangeheg is.

Stap 4: Berei die Arduino voor

Om die kode op die arduino te laai, verander u borddefinisie na die Arduino/Genuino Uno. Pak dan die lêer wat by hierdie stap aangeheg is, uit. Laai dit dan op die ardunio. Regtig eenvoudig, al die harde werk is al vir u gedoen. Ek het al 'n proeflopie ondergaan, en al wat u hoef te doen is om die kode op te laai.

Stap 5: Verbind alles saam

Ok, so vir die bedrading het ek 'n foto hierbo van wat ek hier het.

Koppel Tx op die Huzzah aan Pin 2 op die arduino. Koppel Rx op die Huzzah aan Pin 3 op die arduino. Ek het 'n ander seriële aansluiting op penne 2 en 3 op die arduino gemaak om die standaard Serial Console vry te stel.

Koppel die pin V+ en En aan 5v van die arduino. - Die adafruit Huzzah het 'n ingeboude spanning 3.3v -reguleerder, sodat die aansluiting van hierdie penne moontlik nie met alle ESP8266 -modules werk nie. Miskien moet u u eie spanningsreguleerder aansluit. Ek beveel aan dat u die Huzzah gebruik as u net wil hê dat die ding maklik werk. Koppel die GND aan die GND van die arduino

Op penne 12, 11, 9, 8 op die arduino -draad in u LED's het ek LED's met lae krag gebruik, want diegene wat te veel stroom trek, kan te veel krag trek om hierdie eksperiment eenvoudig te hou.

Dan op A0 analoog Pin 0 op die arduino het ek die uitvoerlyn van my Turpitity -tester ingeprop. U kan egter die uitset van basies enige sensor aansluit wat u analoog kan lees. Dit is al wat u hoef te doen om dit op te los.

Stap 6: Toegang tot die webblad

Noudat u die arduino opgestel het en u alles op u bord gelaai het, moet u die html op u selfoon kan sien. Nou wil ek hê dat u moet aansluit by dieselfde wifi -router waarvoor u die SSID en wagwoord in die kode op die Huzzah gestel het. Dan moet u uitvind watter IP -adres u router aan u toestel toegeken het. As u by u routerkonfigurasie aanmeld, moet daar gewoonlik 'n kliëntelys wees. Dit wys die IP -adresse van al die toestelle wat aan u Wifi -verbinding gekoppel is. As u hierdie IP -adres egter nie kan vind nie, kan u dit uit die arduino haal en dit weer met die seriële kabel laat loop. As u die reekskonsole op die toestel oopmaak, sal dit die IP -adres na die toestel in die reekskonsole druk as u dit nie op 'n ander manier kan vind nie. In elk geval, sodra u met u selfoon aan dieselfde Wifi -netwerk gekoppel is. Wys dan u mobiele webblaaier na die ip -adres van die Huzzah. Wat waarskynlik iets soortgelyk aan hierdie lyk. https://192.168.0.107 of iets soortgelyks. Daar plaas ek 'n basiese bladsy waarmee u die 4 LED's kan aan- en uitskakel, asook die waarde van die analoog sensor kan lees.

Stap 7: Gebruik Javascipt

In die lêer genaamd index.h in die ESP8266Code -skets moet dit as 'n aparte oortjie in die arduino -redakteur verskyn. U kan die basiese voorbeeld wat ek hier gemaak het, sien. Die manier waarop dit werk, is basies so.

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

Dit stel die waarde van digitale pen 12 op hoog

SetPin (4, 0, 0);

Dit stel die waarde van digitale pen 4 op laag

SetPin (A2, 439, 1) Dit stel die waarde van Analog Pin 2 op 439

Net so sal die funksie GetJSON 'n gevraagde waarde van 'n speld teruggee en dit in 'n html plaas met die gespesifiseerde div Id.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Ja 0 Nee}, {Id van HTML Element om resultaat terug te gee})

Dit sal 'n versoek aan die arduino stuur om die waarde van analoog pen 0 te vra en die resultaat in Div met ID resp_iGetJSON (12, 0, 'mydiv') terug te stuur; Dit sal die arduino vra om die waarde van digitale pen 0 te kry en die resultaat in 'n html -element met en Id van mydiv terug te gee

Stap 8: Ondersteuning

Ek hoop dat my skrif diegene wat dit wil gebruik, help. Ek het 'n baie basiese html -voorbeeld hier gebruik met die hoop dat ander mense al die moontlikhede daarvan sal ondersoek wat ek nie kan nie. Dit moet egter demonstreer hoe ajax gebruik kan word om 'n arduino te beheer sonder html -bladsye en sulke dinge.

As u kommentaar het, kan u my asseblief vra, ek sal die beste doen om te antwoord. Ek wil die funksie hiervan nog meer uitbrei, maar ek het nie meer tyd en geld gehad nie. Ek werk egter aan 'n meer robuuste implementering hiervan, wat die lêers op 'n gewone webserver stoor eerder as op die ESP8266.

Dankie dat u die tyd geneem het om my kode te sien.

John AndersonE -pos my

Vermont Internet Design LLC

www.vermontinternetdesign.com