Arduino vezérlése HTML/Javascript segítségével: 8 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Ez az oktatóanyag megmutatja, hogyan lehet irányítani egy arduinot egy ajax visszahívással egy adafruit Huzzah -ból, csak javascript funkciókkal. Alapvetően használhatja a javascriptet a html oldalon, amely lehetővé teszi, hogy egyszerűen írhasson html felületet egyszerű javascript függvényekkel, amelyek ajax visszahívást használnak. Annak érdekében, hogy az ESP8266 kommunikálhasson az arduino -val. Ezért az összes csap beállítható egy javascript függvényből. Hasonlóképpen, az értéket bármely pin -ről leolvashatjuk egy javascript függvény használatával. Remélem, ez segít abban, hogy megkönnyítse az arduino vezérlését egy html dokumentumból. Rájöttem, hogy nagyon sok ember tud html -t írni. A legtöbben nem akarnak fáradni azzal, hogy megpróbálnak mobilalkalmazást létrehozni java, xcode vagy más kerettel. Ez nagyon megkönnyíti az emberek dolgát, mert mindössze egy javascript funkciót kell használniuk az értékek beállításához és olvasásához a csapokból. Például nem sokkal egyszerűbb írni

Bekapcsol

A gomb bekapcsolásához. A szépség az, hogy nincs más arduino programozás a pinMode deklarálásán kívül (12, INPUT); A beállítási funkcióban. Amíg a tű ki van jelölve, a javascript minden másra használható.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Mindössze annyit kell tennie, hogy megkapja a 0 analóg pin értékét, és visszaadja az eredményt a div -be. Tehát ez egy egyszerű módja annak, hogy az emberek képesek legyenek olyan html -oldalakat létrehozni, amelyek az arduinót vezérlik. Valamint hozzon létre egy kezelőfelületet, hogy az arduino csapokat javascript segítségével lehessen beállítani és olvasni.

1. lépés: Amire szüksége lesz

Ezt a projektet azoknak a felhasználóknak készítettem, akik egy ESP8266 html -oldallal szeretnék irányítani arduino -jukat. Ennek a projektnek az a célja, hogy hozzon létre egy egyszerű módszert az arduino -n lévő tűk értékeinek beállításához javascript funkcióval. Például: onclick = "SetPin (12, 1, 0)" az arduino 12 -es tűjét magasra állítja.

Ehhez az oktatóanyaghoz szüksége lesz a következő elemekre, hogy pontosan követhesse. Feltételezem azonban, hogy a legtöbb arduino és ESP8266 kombináción működnie kell. Ahhoz azonban, hogy pontosan azt kövesse, amit itt találok, szüksége lesz a következő összetevőkre.

Arduino Uno - minden olyan arduino -kompatibilis eszközzel együtt kell működnie, amely rendelkezik soros Rx TxAdafruit Huzzah Breakout Board USB -soros kábellel 4 kis teljesítményű LED -es analóg zavarosság -tesztelővel - minden analóg érzékelő, amely analóg kimenetet biztosít, képes a vezeték nélküli Wifi Router mobiltelefonra az Arduino Libraries mobil böngészővel.

2. lépés: Az Arduino azonosító előkészítése

Ez a projekt új arduino könyvtárakat és némi konfigurációt igényel az idő érdekében. Nem teszek fel képernyőképet minden képernyőről, és csak átfutom, hogy mire lesz szüksége ennek konfigurálásához és elindításához. Próbáltam a lehető legegyszerűbbé tenni a felhasználó számára.

A kód számos könyvtárat használ a munkához. Először az arduino beállítására összpontosítunk az ESP8266 -hoz. Ebben a példában az Adafruit Huzzah -t használom, mert úgy gondolom, hogy az adafruit termékek a legmegbízhatóbbak és a legjobb támogatást nyújtják. Mindaddig, amíg nem próbál támogatást kapni az Adafruit Discord szervertől. Sokkal nagyobb szerencséje lesz, ha segítséget kap a támogatási fórumokon.

Egyébként a következő könyvtárakat használom az ESP8266 -on

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT Ez nem oktatóanyag a könyvtárak letöltéséről és telepítéséről, azonban ezek a HUZZAH készüléken használt könyvtárak. Ezért kérjük, keresse meg és telepítse őket. Telepítenie kell a HUZZAH tábladefinícióit is, ezért ha a FÁJL> Beállítások menüpontra lép, akkor a További táblák kezelő URL címei mezőben adja meg a következőthtp: //arduino.esp8266.com/stable/package_esp8266c…, ha már rendelkezik valamit ezen a területen, akkor ügyeljen arra, hogy vesszőt adjon hozzá egy további táblához. Kattintson az OK gombra

Eszközök> Tábla> Táblákkezelő Keresse meg az ESP8266 -ot, majd telepítse az ESP8266 -t az ESP8266 Community segítségével.

A Great most lehetővé teszi, hogy megbizonyosodjunk arról, hogy mindenünk megvan az arduino kód működéséhez. Az egyik az arduino oldalán az arduino maga csak 2 könyvtárat használ ehhez az oktatóanyaghoz.

SoftwareSerialArduinoJSONAmelynek már rendelkeznie kell.

3. lépés: Az ESP8266 előkészítése

Most felhelyezzük a kódot az ESP8266 -ra (Adafruit HUZZAH), és előkészítjük az Arduino -hoz való csatlakozáshoz. Csomagolja ki a HUZZAH kódját, és nyissa meg a vázlatot. A 11. és 12. sorban módosítsa az SSID -t és a jelszót a helyi hálózat WIFI -kapcsolatának jelszavára. Észre fogja venni, hogy 2 fájl van, a vázlatfájl és az index.h fájl. Az index.h fájlban tárolják a html -t, amely megjelenik a telefonon.

Miután beállította a megfelelő SSID -t és jelszót a wifi -hez, összeállíthatja a kódot, és betöltheti az ESP8266 készülékre. A HUZZAH készüléken tartsa lenyomva a GPIO0 feliratú gombot, majd kattintson a pihenés gombra, majd engedje el a GPIO0 gombot, hogy a chip bootloader módba kerüljön. Ha a chipet sikeresen bekapcsolta a rendszerbetöltő üzemmódba, akkor egy piros jelzőfény világít, jelezve, hogy a chip rendszerbetöltő módban van.

Az ESP8266 -hoz való csatlakozáshoz soros kábelre, USB -soros adapterre vagy FDTI -chipre lesz szüksége. Ebben az esetben az adafruit kábelét használom, ahogy az utasításokban le van írva. A chiphez azonban többféle módon is csatlakozhat, a Tx és Rx csapok TTL használatával. Remélem, hogy az ezt megtekintő emberek tudják, hogyan kell csatlakozni a chiphez, hogy betöltsék a kódot. Mindenesetre menjen előre, és villanjon fel a chipet az ehhez a lépéshez csatolt zip fájlban található kóddal.

4. lépés: Az Arduino előkészítése

A kód betöltéséhez az arduino -ra módosítsa a tábla definícióját Arduino/Genuino Uno -ra. Csomagolja ki az ehhez a lépéshez csatolt fájlt. Töltsd fel az ardunio -ra. Tényleg nagyon egyszerű, az összes kemény munkát már elvégezték érted. Én már átmentem egy próba -hiba folyamaton, ezért nincs más dolgod, mint feltölteni a kódot.

5. lépés: Mindent össze kell kötni

Ok, így a bekötéshez fent van egy képem arról, ami itt van.

Csatlakoztassa a Tx -t a Huzzah -n az arduino 2. tűjéhez. Csatlakoztassa a Huzzah -n lévő Rx -et az arduino 3. tűjéhez. Létrehoztam egy másik soros aljzatot az arduino 2. és 3. lábán, hogy felszabadítsam az alapértelmezett soros konzolt.

Csatlakoztassa a V+ és az En csatlakozót az arduino 5V -hoz. - Az adafruit Huzzah beépített 3.3V -os feszültségszabályozóval rendelkezik, így ezeknek a tűknek a csatlakoztatása esetleg nem működik minden ESP8266 modullal. Előfordulhat, hogy a saját feszültségszabályozóját kell bekötni. Azt javaslom, hogy használja a Huzzah -t, ha csak egyszerűen szeretné működtetni a dolgot. Csatlakoztassa a GND -t az arduino GND -jéhez

A LED -ek arduino vezetékének 12., 11., 9., 8. érintkezőin alacsony energiafogyasztású LED -eket használtam, mert azok, amelyek túl sok áramot húznak, túl sok energiát fogyaszthatnak a kísérlet egyszerűsége érdekében.

Mint az A0 analóg Pin 0 -n az arduino -n, csatlakoztattam a Turpitity teszter kimeneti vonalát. Azonban alapvetően bármely érzékelő kimenetét csatlakoztathatja, amely analóg leolvasást biztosít. Ennyit kell tennie a bekötéshez.

6. lépés: A weboldal elérése

Most, hogy az arduino be van kapcsolva, és minden a táblára van töltve, meg kell tudnia nézni a html -t a mobiltelefonján. Most szeretném, ha ugyanahhoz a wifi útválasztóhoz csatlakozna, amelyhez beállította az SSID -t és a jelszót a Huzzah -n található kódban. Ebből ki kell derítenie, hogy az útválasztó milyen IP -címet rendelt az eszközéhez. Általában, ha bejelentkezik az útválasztó konfigurációjába, akkor lennie kell egy ügyféllistának. Ez megmutatja a Wifi -kapcsolathoz csatlakoztatott összes eszköz IP -címét. Ha azonban nem találja ezt az IP -címet, akkor válassza le az arduino -ról, és futtassa újra a soros kábellel. Ha megnyitja a soros konzolt az eszközön, az kinyomtatja az IP -címet az eszközre a soros konzolban, ha nem találja meg más módon. Mindenesetre, ha ugyanahhoz a Wifi -hálózathoz csatlakozik a mobiltelefonjával. Inkább irányítsa mobil webböngészőjét a Huzzah ip -címére. Ami valószínűleg valami hasonlónak tűnik. https://192.168.0.107 vagy valami nagyon hasonló. Ott egy alapvető oldalt tettem be, amely lehetővé teszi a 4 LED be- és kikapcsolását, valamint az analóg érzékelő értékének leolvasását.

7. lépés: A Javascipt használata

Az ESP8266Code vázlat index.h nevű fájljában külön lapként kell megjelennie az arduino szerkesztőben. Itt láthatja az általam készített alapvető példát. Alapvetően így működik.

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

Ez a 12 -es digitális tű értékét magasra állítja

SetPin (4, 0, 0);

Ezzel a 4 -es digitális tű értéke alacsony lesz

SetPin (A2, 439, 1) Ezzel a 2. analóg pin értékét 439 -re állítja be

Hasonlóképpen, a GetJSON függvény visszaad egy kért értéket egy tűből, és elhelyezi azt a html elemben, a megadott div azonosítóval.

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

Ez egy kérést küld az arduino -nak, amelyben megkérdezi a 0 analóg pin értékét, és visszaadja az eredményt a Div -be, azonosítóval: resp_iGetJSON (12, 0, 'mydiv'); Ez megkéri az arduino -t, hogy szerezze meg a 0 -as digitális pin értékét, és adja vissza az eredményt egy html -elembe, és a mydiv azonosítóját

8. lépés: Támogatás

Remélem, hogy a forgatókönyvem segíteni fog azoknak, akik használni akarják. Egy nagyon egyszerű html -példát használtam itt, abban a reményben, hogy mások felfedezik annak minden képességét, amit én nem tudok. Ennek azonban be kell mutatnia, hogy az ajax hogyan használható egy arduino vezérlésére html oldalbetöltések és ilyen jellegű dolgok nélkül.

Ha bármilyen észrevétele van, kérdezzen bátran, mindent megteszek, hogy válaszoljak. Szeretném tovább bővíteni ennek funkcionalitását, de kifogytam az időből és a pénzből. Ennek robusztusabb megvalósításán dolgozom azonban, amely a fájlokat egy normál webszerveren tárolja, nem pedig az ESP8266 -on.

Köszönöm, hogy időt szánt a kódom megtekintésére.

John AndersonE -mail

Vermont Internet Design LLC

www.vermontinternetdesign.com