Töltse be Arduino/ESP Config webhelyét a felhőből: 7 lépés

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

Arduino / ESP (ESP8266 / ESP32) projekt létrehozásakor mindent keményen kódolhat. De gyakran előfordul, hogy valami felbukkan, és végül újra csatlakoztatja az IoT-eszközt az IDE-hez. Vagy csak több ember fér hozzá a konfigurációhoz, és felhasználói felületet szeretne adni, ahelyett, hogy elvárná tőlük, hogy megértsék a belső működést.

Ez az oktatható utasítás megmondja, hogyan kell a felhasználói felület nagy részét a felhőbe helyezni az Arduino / ESP helyett. Ha így tesz, akkor helyet és memóriahasználatot spórolhat meg. Az ingyenes, statikus weboldalakat biztosító szolgáltatás különösen alkalmas felhőként, mint a GitHub Pages, de valószínűleg más lehetőségek is működnek.

A weboldal ilyen módon történő felépítéséhez a felhasználó böngészőjének négy lépést kell végrehajtania:

1. Kérje a gyökér URL -t az Arduino / ESP -től
2. Kap egy nagyon egyszerű weboldalt, amely a következőket mondja:
3. Kérjen JavaScript -fájlt a felhőből
4. Fogadja el az aktuális oldalt felépítő kódot

Ez az útmutató azt is elmagyarázza, hogyan léphet kapcsolatba az Arduino / ESP -vel, miután az oldal készen áll a fenti lépések szerint.

Az ezen az utasításon létrehozott kód megtalálható a GitHubon is.

Előfeltételek

Ez az útmutató azt feltételezi, hogy hozzáférhet bizonyos anyagokhoz és bizonyos előzetes ismeretekhez:

• Egy Arduino (hálózati hozzáféréssel) / ESP
• Számítógép a fentiek csatlakoztatásához
• WiFi hozzáférés az internethez
• Telepített Arduino IDE (az ESP32 -hez is)
• Tudja, hogyan kell vázlatot feltölteni az IoT-eszközére
• Tudja, hogyan kell használni a Git & GitHub -ot

1. lépés: Kezdés egy egyszerű webszerver -vázlattal

A lehető legegyszerűbben kezdjük, és innentől kezdve nőni fog.

#befoglalni

const char* ssid = "tied"; const char* password = "a jelszavad"; WiFiServer szerver (80); void setup () {// Inicializálja a sorozatot, és várja meg a port megnyitását: Serial.begin (115200); while (! Sorozat) {; // várjon, amíg a soros port csatlakozik. Csak natív USB -porthoz szükséges} WiFi.begin (ssid, jelszó); while (WiFi.status ()! = WL_CONNECTED) {delay (500); Soros.nyomtatás ("."); } Serial.println ("WiFi csatlakoztatva."); Serial.println ("IP -cím:"); Serial.println (WiFi.localIP ()); szerver.begin (); } void loop () {// figyelje a bejövő ügyfeleket WiFiClient kliens = szerver.available (); // bejövő ügyfelek figyelése bool sendResponse = false; // igaz értékre állítva, ha választ akarunk küldeni String urlLine = ""; // készítsen karakterláncot a kért URL tárolására, ha (kliens) // ha kap egy ügyfelet, {Serial.println ("Új ügyfél"); // üzenet nyomtatása a soros portról String currentLine = ""; // készítsen egy karakterláncot az ügyfélről érkező adatok tárolására, miközben (client.connected ()) // ciklus, amíg az ügyfél csatlakozik {if (client.available ()) // ha bájtokat kell olvasni az ügyféltől, {char c = kliens.olvasás (); // egy bájt olvasása, akkor ha (c == '\ n') // ha a bájt újsoros karakter {// ha az aktuális sor üres, akkor két újsoros karaktert kapott egy sorban. // ezzel véget ért az ügyfél HTTP -kérése, ezért küldjön választ: if (currentLine.length () == 0) {sendResponse = true; // minden oké! szünet; // kitörni a while ciklusból} else // ha új sort kapott, akkor törölje a currentLine -t: {if (currentLine.indexOf ("GET /")> = 0) // ennek az URL -sornak kell lennie {urlLine = currentLine; // mentse el későbbi használatra} currentLine = ""; // alaphelyzetbe állítja a currentLine karakterláncot}} else if (c! = '\ r') // ha mást is kapott, mint egy kocsi visszatérési karaktert, {currentLine += c; // add hozzá az aktuális sor végéhez}}} if (sendResponse) {Serial.print ("Ügyfél kért"); Serial.println (urlLine); // A HTTP fejlécek mindig válaszkóddal kezdődnek (pl. HTTP/1.1 200 OK) // és egy tartalomtípussal, hogy az ügyfél tudja, mi jön, majd egy üres sort: client.println ("HTTP/1.1 200 OK"); client.println ("Tartalom-típus: szöveg/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // ha az URL csak " /" {//, akkor a HTTP válasz tartalma a fejlécet követi: client.println ("Hello world!"); } // A HTTP válasz egy másik üres sorral végződik: client.println (); } // zárja be a kapcsolatot: client.stop (); Serial.println ("Az ügyfél leválasztva."); }}

Másolja át a fenti kódot, vagy töltse le a GitHub -on található véglegesítésből.

Ne felejtse el megváltoztatni az SSID -t és a jelszót a hálózatának megfelelően.

Ez a vázlat a jól ismert Arduino -t használja

beállít()

és

hurok()

funkciókat. Ban,-ben

beállít()

függvény inicializálja a soros kapcsolatot az IDE -vel, és a WiFi is. Miután a WiFi csatlakozott az említett SSID -hez, az IP kinyomtatásra kerül, és a webszerver elindul. Minden iterációban a

hurok()

funkció, a webszerver ellenőrzi a csatlakoztatott ügyfeleket. Ha egy ügyfél csatlakozik, a kérés olvasásra kerül, és a kért URL -t egy változóba menti. Ha úgy tűnik, minden rendben van, a szerver válaszol a kliensre a kért URL alapján.

FIGYELEM! Ez a kód az Arduino String osztályt használja az egyszerűség érdekében. A karakterlánc -optimalizálás nem tartozik ezen utasítás hatálya alá. Erről bővebben az Arduino karakterlánc -manipulációról szóló, Minimal Ram használatával szóló útmutatóban olvashat.

2. lépés: A távoli JavaScript létrehozása

Az Arduino / ESP figyelmezteti a látogatókat, hogy töltsék be ezt az egy fájlt. A többit ez a JavaScript kód végzi el.

Ebben az utasításban a jQuery -t fogjuk használni, ez nem feltétlenül szükséges, de megkönnyíti a dolgokat.

A fájlnak elérhetőnek kell lennie az internetről, a statikus oldalak kiszolgálója elegendő a működéshez, például a GitHub oldalak. Tehát valószínűleg szeretne létrehozni egy új GitHub adattárat, és létrehozni egy

gh-oldalak

ág. Írja be a következő kódot a

.js

fájl a tárolóban a megfelelő ágban.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // hozzon létre egy elemet script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // állítsa be az src = "" attribútum script.onload = function () // visszahívási függvény, amelyet a jquery fájl betöltése után hívnak meg {$ = window.jQuery; // a jQuery elérését globális $ változóként inicializálja (); // hívja meg az init függvényt}; dokumentum. getElementsByTagName ('head') [0].appendChild (script); // hozzáadva a létrehozott címkét a dokumentumhoz, ez elindítja a jQuery lib} betöltését) (); function init () {// Kész a jQuery betöltése, a későbbiekben hozzáadja a kódot…}

Másolja át a fenti kódot, vagy töltse le a GitHub véglegesítéséből.

Ellenőrizze, hogy a fájl elérhető -e. GitHub oldalak esetén lépjen a https://username.github.io/repository/your-file.j… oldalra (cserélje ki

felhasználónév

,

tároló

és

your-file.js

a megfelelő paraméterekhez).

3. lépés: Töltse be a távoli JavaScript fájlt a Látogatók böngészőjébe

Most, hogy mindent beállítottunk, ideje, hogy a weboldal betöltse a távoli JavaScript -fájlt.

Ezt a vázlat 88. sorának megváltoztatásával teheti meg

client.println ("Hello világ!"); t

client.println ("");

(változtasd meg a

src

attribútum a saját JavaScript fájlra mutat). Ez egy kicsi html weboldal, csak betölti a JavaScript fájlt a látogatók böngészőjébe.

A módosított fájl megtalálható a GitHub megfelelő véglegesítésében is.

Töltse fel a módosított vázlatot Arduino / ESP készülékére.

4. lépés: Új elemek hozzáadása az oldalhoz

Az üres oldal haszontalan, ezért itt az ideje, hogy új elemet adjon hozzá a weboldalhoz. Ez most egy YouTube -videó lesz. Ebben a példában néhány jQuery -kódot használunk ennek elérésére.

Adja hozzá a következő kódsort a

benne()

funkció:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({width: '608px', height: '342px'}). AppendTo ('body');

Ez létrehoz egy

iframe

elemet, állítsa be a megfelelőt

src

attribútumot, és állítsa be a méretet a css segítségével, és adja hozzá az elemet az oldal törzséhez.

A jQuery segít egyszerűen kiválasztani és megváltoztatni a weboldal elemeit, néhány alapvető tudnivaló:

• $ ('body')

• bármely már létező elemet kiválaszt, más css szelektorok is használhatók

• $(' ')

  újat hoz létre

• elem (de nem adja hozzá a dokumentumhoz)

• .appendTo ('. main')

• hozzáfűzi a kiválasztott/létrehozott elemet a 'main' css osztályú elemhez

• További funkciók az elemek hozzáadásához

  .mellékel()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  . beszúrás ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .után()

  ,

  .előtt()

Nézze meg a GitHub megfelelő véglegesítését, ha valami nem világos.

5. lépés: Interaktív elemek

A videó szórakoztató, de ennek az utasításnak az a célja, hogy kölcsönhatásba lépjen az Arduino / ESP -vel. Cseréljük le a videót egy gombra, amely információt küld az Arduino / ESP -nek, és várja a választ.

Szükségünk lesz a

$('')

hozzáadni az oldalhoz, és eseményfigyelőt csatolni hozzá. Az eseményfigyelő a megadott esemény bekövetkezésekor meghívja a visszahívási funkciót:

$ (''). text ('a gomb'). on ('kattintson', function ()

{// az itt található kód akkor kerül végrehajtásra, amikor a gombra kattintanak}). appendTo ('body');

És adjon hozzá egy AJAX kérést a visszahívási funkcióhoz:

$.get ('/ajax', függvény (adatok)

{// a kód itt lesz végrehajtva, amikor az AJAX kérés befejeződik});

A kérés befejezése után a visszaadott adatok hozzáadódnak az oldalhoz:

$('

').text (data).appendTo (' body ');

Összefoglalva, a fenti kód létrehoz egy gombot, hozzáadja azt a weboldalhoz, amikor a gombra kattint, egy kérés kerül kiküldésre, és a válasz is hozzáadódik a weboldalhoz.

Ha ez az első alkalom, hogy visszahívásokat használ, érdemes ellenőrizni a véglegesítést a GitHubon, hogy megtudja, hogyan van minden beágyazva.

6. lépés: Válasz az interaktív elemre

Természetesen az AJAX kérésre választ kell adni.

A helyes válasz létrehozásához a

/ajax

url -t kell hozzáadnunk

egyébként ha ()

közvetlenül az if utasítás zárójele után, amely ellenőrzi a

/

url.

else if (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Szia!"); }

A GitHub véglegesítésében egy számlálót is hozzáadtam, hogy megmutassam a böngészőnek, hogy minden kérés egyedi.

7. lépés: Következtetés

Ennek a tanulságnak ez a vége. Most egy Arduino / ESP szolgáltat egy kis weboldalt, amely azt mondja a látogató böngészőjének, hogy töltsön be egy JavaScript fájlt a felhőből. A JavaScript betöltése után felépíti a weboldal többi tartalmát, és felhasználói felületet biztosít a felhasználó számára az Arduino / ESP -vel való kommunikációhoz.

Most már csak a képzeletén múlik, hogy több elemet hozzon létre a weboldalon, és a beállításokat helyben mentse valamilyen ROM -ra (EEPROM / NVS / stb.).

Köszönjük, hogy elolvasta, és kérjük, írjon visszajelzést!