Ovládání Arduina pomocí HTML/Javascriptu snadným způsobem: 8 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:23

Tento tutoriál vám ukáže, jak ovládat arduino pomocí ajax volání zpět z adafruit Huzzah pomocí pouze funkcí JavaScriptu. V zásadě můžete na stránce html použít javascript, který vám umožní snadno psát rozhraní html pomocí jednoduchých funkcí javascriptu, které využívají zpětné volání ajax. Umožnit ESP8266 komunikovat s arduino. Proto lze všechny piny nastavit pomocí funkce javascript. Podobně můžeme také přečíst hodnotu z libovolného pinu pomocí funkce javascript. Doufám, že to pomůže usnadnit ovládání arduina z html dokumentu. Došlo mi, že tam je spousta lidí, kteří umí psát html. Většina z nich se nechce obtěžovat snahou vytvořit aplikaci pro mobilní telefon s java nebo xcode nebo jiným rámcem. Díky tomu to bude pro lidi velmi snadné, protože vše, co musí udělat, je použít funkci javascript k nastavení a čtení hodnot z pinů. Není například mnohem jednodušší psát

Zapnout

Chcete -li zapnout tlačítko. Krása spočívá v tom, že kromě deklarace pinMode (12, INPUT) není zapojeno žádné další programování arduina; Ve vaší funkci nastavení. Dokud je pin deklarován, lze javascript použít pro vše ostatní.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

To je vše, co musíte udělat, abyste získali hodnotu analogového pinu 0 a vrátili výsledek do div. To by tedy měl být snadný způsob, jak mohou lidé vytvářet html stránky, které ovládají arduino. Vytvořte také rozhraní, aby bylo možné arduino piny nastavit a číst pomocí javascriptu.

Krok 1: Co budete potřebovat

Tento projekt jsem postavil pro uživatele, kteří chtějí ovládat své arduino pomocí html stránky na ESP8266. Cílem tohoto projektu je vytvořit jednoduchou metodu pro nastavení hodnot pinů na vašem arduinu pomocí funkce javascript. Pro examplate onclick = "SetPin (12, 1, 0)" nastaví Pin 12 na vašem arduinu na High.

Pro tento tutoriál budete potřebovat následující položky, abyste mohli přesně postupovat. Předpokládám však, že by to mělo fungovat na většině kombinací arduino a ESP8266. Chcete -li však sledovat přesně to, co zde mám, budete potřebovat následující komponenty.

Arduino Uno - Mělo by fungovat s jakýmkoli arduino kompatibilním se sériovým Rx TxAdafruit Huzzah Breakout Board USB to Serial Cable 4 low power LED's Analog Turpidity tester - any analog sensor that provides analog output will do Wire Wifi Router Mobile Phone With Mobile Browser Arduino Libraries.

Krok 2: Příprava Arduino ID

Tento projekt vyžaduje nové arduino knihovny a nějakou konfiguraci a kvůli času. Nebudu uvádět snímek obrazovky každé obrazovky a jen projdu to, co budete potřebovat k nastavení a spuštění. Snažil jsem se to uživateli co nejvíce usnadnit.

Kód používá k práci několik knihoven. Nejprve se zaměříme na nastavení arduina pro ESP8266, který v tomto příkladu používám Adafruit Huzzah, protože považuji produkty adafruit za nejspolehlivější a mají nejlepší podporu. Dokud se nepokoušíte získat podporu ze serveru Adafruit Discord. Budete mít mnohem větší štěstí, když získáte pomoc ve fórech podpory.

Každopádně na ESP8266 používám následující knihovny

ESP8266WiFi WiFi klient ESP8266WebServer ArduinoJSONT Toto není návod, jak stahovat a instalovat knihovny, ale jsou to knihovny používané v HUZZAH. Najděte je tedy a nainstalujte. Budete také muset nainstalovat definice desky pro HUZZAH, takže pokud přejdete na SOUBOR> Předvolby Do pole, které říká URL dalších správců desek, přidejte následující https://arduino.esp8266.com/stable/package_esp8266c… pokud již máte něco v tomto poli, než se ujistěte, že tam přidáte čárku, abyste přidali další adresu URL desky. Klikněte na tlačítko OK

Nástroje> Deska> Správce desek Než vyhledáte ESP8266, než nainstalujete ESP8266 komunitou ESP8266.

Skvělé, teď se ujistěte, že máme vše, co potřebujeme, aby kód arduino fungoval. Jedna arduino Strana arduino sama pro tento tutoriál používá pouze 2 knihovny.

SoftwareSerialArduinoJSONKterý byste již měli mít.

Krok 3: Příprava ESP8266

Nyní vložíme kód na ESP8266 (Adafruit HUZZAH) a připravíme jej na připojení k Arduinu. Rozbalte kód pro HUZZAH a otevřete náčrt. Na řádcích 11 a 12 změňte ssid a heslo na WIFI připojení ve vaší místní síti. Všimnete si, že existují 2 soubory soubor skici a soubor index.h. V souboru index.h je uložen html, který se zobrazí ve vašem telefonu.

Poté, co nastavíte správný SSID a heslo pro vaši wifi, můžete kód zkompilovat a načíst do svého ESP8266. Na HUZZAH musíte podržet tlačítko označené GPIO0, poté kliknout na tlačítko odpočinku, než pustit tlačítko GPIO0, aby se čip přepnul do režimu bootloaderu. Pokud byl čip úspěšně uveden do režimu zavaděče, rozsvítí se červená kontrolka, což znamená, že je čip v režimu zavaděče.

K připojení k ESP8266 budete potřebovat sériový kabel nebo adaptér USB to Serial nebo čip FDTI. V tomto případě používám kabel adafruit, jak je uvedeno v pokynech. K čipu se však můžete připojit několika způsoby pomocí TTL na pinech Tx a Rx. Doufám, že lidé, kteří to vidí, vědí, jak se připojit k čipu a načíst kód na něj. Každopádně pokračujte a načtěte čip kódem v souboru zip, který je připojen k tomuto kroku.

Krok 4: Příprava Arduina

Chcete -li načíst kód na arduino, změňte definici desky na Arduino/Genuino Uno. Poté rozbalte soubor, který je připojen k tomuto kroku. Poté jej nahrajte na ardunio. Ve skutečnosti je to docela jednoduché, veškerá tvrdá práce již byla pro vás provedena. Už jsem prošel procesem pokusu a omylu, takže stačí jen nahrát kód.

Krok 5: Zapojení všeho dohromady

Dobře, takže pro zapojení mám obrázek výše toho, co zde mám.

Připojte Tx na Huzzah na Pin 2 na arduinu. Připojte Rx na Huzzah na Pin 3 na arduinu. Vytvořil jsem další sériovou zásuvku na pinech 2 a 3 na arduinu, abych uvolnil výchozí sériovou konzolu.

Připojte pin V+ a En k 5v z arduina. - Adafruit Huzzah má vestavěný regulátor napětí 3,3 V, takže zapojení těchto kolíků tímto způsobem nemusí fungovat u všech modulů ESP8266. Možná budete muset zapojit vlastní regulátor napětí. Doporučuji použít Huzzah, pokud chcete, aby věc fungovala snadno. Připojte GND ke GND arduina

Na piny 12, 11, 9, 8 na arduino drátu ve vašich LED jsem zde použil LED s nízkým napájením, protože ty, které odebírají příliš mnoho proudu, mohou odebírat příliš mnoho energie, aby byl tento experiment jednoduchý.

Než na analogovém A0 Pin 0 na arduinu jsem zapojil výstupní řádek svého testeru turpitity. Můžete však připojit výstup v podstatě jakéhokoli senzoru, který vám poskytne analogové čtení. To je vše, co musíte udělat, abyste to propojili.

Krok 6: Přístup na webovou stránku

Nyní, když máte arduino zapojené a máte vše načtené na svých deskách, potřebujete mít možnost zobrazit html na svém mobilním telefonu. Nyní chci, abyste se připojili ke stejnému wifi routeru, pro který jste nastavili SSID a heslo v kódu na Huzzah. Poté musíte zjistit, jakou IP adresu váš router přidělil vašemu zařízení. Pokud se přihlásíte do konfigurace směrovačů, měl by obvykle existovat seznam klientů. To ukazuje IP adresy všech zařízení připojených k vašemu připojení Wifi. Pokud však tuto IP adresu nemůžete najít, můžete ji odpojit od Arduina a spustit znovu pomocí sériového kabelu. Pokud otevřete sériovou konzolu na zařízení, vytiskne IP adresu zařízení v sériové konzole v případě, že ji nemůžete najít jiným způsobem. Každopádně jakmile jste připojeni ke stejné Wifi síti s vaším mobilním telefonem. Poté nasměrujte svůj mobilní webový prohlížeč na IP adresu Huzzah. Což pravděpodobně vypadá podobně. https://192.168.0.107 nebo něco velmi podobného. Vložil jsem základní stránku, která vám umožní zapnout a vypnout 4 LED a přečíst hodnotu analogového senzoru.

Krok 7: Použití Javasciptu

V souboru s názvem index.h v náčrtu ESP8266Code by se měl objevit jako samostatná karta v editoru arduino. Zde můžete vidět základní příklad, který jsem vytvořil. V zásadě to funguje takto.

SetPin (12, 1, 0); SetPin ({Pin Number}, {hodnota 1 vysoká 0 nízká}, {IsAnalog 1 ano 0 ne})

Tím nastavíte hodnotu digitálního pinu 12 na vysokou

SetPin (4, 0, 0);

Tím nastavíte hodnotu digitálního pinu 4 na nízkou

SetPin (A2, 439, 1) Nastaví hodnotu analogového pinu 2 na 439

Podobně funkce GetJSON vrátí požadovanou hodnotu z pinu a umístí ji do html vyloženého zadaným ID div.

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

Tím se pošle požadavek na arduino s dotazem na hodnotu analogového pinu 0 a vrátí výsledek do Div s ID resp_iGetJSON (12, 0, 'mydiv'); To požádá arduino, aby získal hodnotu digitálního pinu 0 a vrátil výsledek do html prvku pomocí a Id mydiv

Krok 8: Podpora

Doufám, že můj skript pomůže těm z vás, kteří ho chtějí použít. Použil jsem zde velmi základní příklad html s nadějí, že ostatní lidé prozkoumají všechny jeho schopnosti, které já neumím. To by však mělo ukázat, jak lze ajax použít k ovládání arduina bez načítání stránek html a věcí této povahy.

Pokud máte nějaké připomínky, neváhejte se mě zeptat, udělám vše, co budu moci, abych odpověděl. Chtěl bych ještě rozšířit funkčnost tohoto, ale došel mi čas i peníze. Pracuji však na jeho robustnější implementaci, která ukládá soubory na běžný webový server, nikoli na ESP8266.

Děkuji vám, že jste si našli čas podívat se na můj kód.

John Anderson Pošlete mi e -mail

Vermont Internet Design LLC

www.vermontinternetdesign.com