Načítajte svoju webovú stránku Arduino/ESP Config z cloudu: 7 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

Pri vytváraní projektu Arduino / ESP (ESP8266 / ESP32) ste mohli jednoducho naprogramovať všetko. Ale častejšie sa niečo stane a skončíte tak, že svoje zariadenie IoT znova pripojíte k svojmu IDE. Alebo ste práve získali viac ľudí prístup ku konfigurácii a chcete poskytnúť používateľské rozhranie namiesto toho, aby ste od nich očakávali, že porozumejú vnútornému fungovaniu.

Tento návod vám povie, ako umiestniť väčšinu používateľského rozhrania do cloudu namiesto na Arduino / ESP. Takto to ušetrí miesto a pamäť. Služba poskytujúca bezplatné statické webové stránky je obzvlášť vhodná ako „cloud“, napríklad stránky GitHub, ale pravdepodobne budú fungovať aj ďalšie možnosti.

Vytvorenie webovej stránky týmto spôsobom vyžaduje, aby prehliadač používateľa prešiel 4 krokmi:

1. Vyžiadajte si koreňovú adresu URL z Arduino / ESP
2. Získajte veľmi jednoduchú webovú stránku, ktorá hovorí:
3. Vyžiadajte si súbor JavaScript z cloudu
4. Dostanete kód, ktorý vytvára skutočnú stránku

Tento návod tiež vysvetľuje, ako interagovať s Arduino / ESP, akonáhle je stránka pripravená, podľa vyššie uvedených krokov.

Kód vytvorený v tomto návode je možné nájsť aj na GitHub.

Predpoklady

Tento návod predpokladá, že ste získali prístup k určitým materiálom a niektorým predchádzajúcim znalostiam:

• Arduino (so sieťovým prístupom) / ESP
• Počítač, ku ktorému je potrebné pripojiť vyššie uvedené
• WiFi pripojenie pripojené na internet
• Nainštalované IDE Arduino (aj pre ESP32)
• Viete, ako nahrať skicu do svojho zariadenia IoT
• Viete, ako používať Git & GitHub

Krok 1: Začnite s jednoduchým náčrtom webového servera

Začneme čo najjednoduchšie a necháme to odteraz rásť.

#zahrnúť

const char* ssid = "yourssid"; const char* heslo = "yourpasswd"; Server WiFiServer (80); void setup () {// Inicializácia sériového čísla a čakanie na otvorenie portu: Serial.begin (115200); while (! Serial) {; // počkajte na pripojenie sériového portu. Potrebné iba pre natívny port USB} WiFi.begin (ssid, heslo); while (WiFi.status ()! = WL_CONNECTED) {oneskorenie (500); Serial.print ("."); } Serial.println („Pripojené WiFi.“); Serial.println ("IP adresa:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// počúvanie prichádzajúcich klientov WiFiClient client = server.available (); // počúvať prichádzajúcich klientov bool sendResponse = false; // nastavená na true, ak chceme odoslať odpoveď String urlLine = ""; // vytvorte reťazec na uchovanie požadovanej adresy URL, ak (klient) // ak získate klienta, {Serial.println ("nový klient."); // vytlačenie správy zo sériového portu String currentLine = ""; // vytvorte reťazec na uchovávanie prichádzajúcich údajov od klienta while (client.connected ()) // slučka, zatiaľ čo klient je pripojený {if (client.available ()) // ak existujú bajty na čítanie z klienta, {char c = client.read (); // prečítajte bajt, potom ak (c == '\ n') // ak je bajt znakom nového riadka {// ak je aktuálny riadok prázdny, dostanete dva znaky nového riadka za sebou. // tým sa požiadavka HTTP klienta končí, preto pošlite odpoveď: if (currentLine.length () == 0) {sendResponse = true; // všetko je v poriadku! prestávka; // vybočte z cyklu while} else // ak máte nový riadok, vymažte currentLine: {if (currentLine.indexOf ("GET /")> = 0) // toto by mal byť riadok adresy URL {urlLine = currentLine; // uložte ho na neskoršie použitie} currentLine = ""; // vynulovanie reťazca currentLine}} else if (c! = '\ r') // ak máte niečo iné ako znak návratu vozíka, {currentLine += c; // pridajte ho na koniec currentLine}}} if (sendResponse) {Serial.print ("Client requested"); Serial.println (urlLine); // Hlavičky HTTP vždy začínajú kódom odpovede (napr. HTTP/1,1 200 OK) // a typom obsahu, aby klient vedel, čo príde, potom prázdnym riadkom: client.println („HTTP/1,1 200 OK“); client.println ("Typ obsahu: text/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // ak je adresa URL iba " /" {// obsah odpovede HTTP nasleduje za hlavičkou: client.println ("Hello world!"); } // Odpoveď HTTP sa končí ďalším prázdnym riadkom: client.println (); } // zavrieť spojenie: client.stop (); Serial.println („Klient odpojený.“); }}

Skopírujte vyššie uvedený kód alebo si ho stiahnite z potvrdenia na GitHub.

Nezabudnite zmeniť SSID a heslo tak, aby zodpovedali vašej sieti.

Táto skica používa dobre známe Arduino

nastaviť()

a

slučka ()

funkcie. V

nastaviť()

Funkcia inicializuje sériové pripojenie k IDE a WiFi. Akonáhle je WiFi pripojené k uvedenému SSID, vytlačí sa IP a spustí sa webový server. V každej iterácii súboru

slučka ()

funkcia webového servera sa kontroluje pre pripojených klientov. Ak je klient pripojený, požiadavka sa prečíta a požadovaná adresa URL sa uloží do premennej. Ak je všetko v poriadku, odpoveď servera klientovi sa vykoná na základe požadovanej adresy URL.

VÝSTRAHA! Tento kód používa na zjednodušenie triedu Arduino String. Optimalizácia reťazcov nespadá do rozsahu tohto pokynu. Prečítajte si viac o tomto v návode na tému Manipulácia so strunami Arduino pomocou minimálneho RAM.

Krok 2: Vytvorenie vzdialeného JavaScriptu

Arduino / ESP povie prehliadaču návštevníkov, aby načítal tento jeden súbor. Všetko ostatné vykoná tento kód JavaScript.

V tomto návode použijeme jQuery, nie je to úplne nevyhnutné, ale veci uľahčí.

Tento súbor musí byť prístupný z webu, na to, aby to fungovalo, stačí server so statickými stránkami, napríklad stránky GitHub. Pravdepodobne budete chcieť vytvoriť nové úložisko GitHub a vytvoriť súbor

gh-stránok

pobočka. Vložte nasledujúci kód do súboru a

.js

súbor v úložisku v správnej vetve.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // create a element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // set the src = "" atribút script.onload = function () // funkcia spätného volania, volá sa po načítaní súboru jquery {$ = window.jQuery; // sprístupní jQuery ako globálnu premennú $ init (); // zavolá funkciu init}; dokument. getElementsByTagName ('head') [0].appendChild (skript); // pridanie vytvorenej značky do dokumentu, spustí sa načítanie súboru jQuery lib}) (); function init () {// Dokončenie načítania jQuery, pridá sem kód neskôr …}

Skopírujte vyššie uvedený kód alebo si ho stiahnite z potvrdenia na GitHub.

Skontrolujte, či je váš súbor prístupný. V prípade stránok GitHub navštívte https://username.github.io/repository/your-file.j… (nahraďte

používateľské meno

,

Úložisko

a

your-file.js

pre správne parametre).

Krok 3: Načítanie vzdialeného súboru JavaScript do prehliadača návštevníkov

Teraz, keď máme všetko nastavené, je načase nechať webovú stránku načítať vzdialený súbor JavaScript.

Môžete to urobiť zmenou riadku 88 náčrtu z

client.println („Hello world!“); t

client.println ("");

(zmeniť

src

atribút smerujúci k vášmu vlastnému súboru JavaScript). Toto je malá html webová stránka, stačí, ak načítate súbor JavaScript do prehliadača návštevníkov.

Zmenený súbor nájdete aj v zodpovedajúcom potvrdení na GitHub.

Nahrajte upravenú skicu do svojho Arduino / ESP.

Krok 4: Pridanie nových prvkov na stránku

Prázdna stránka je k ničomu, preto je načase pridať na webovú stránku nový prvok. Zatiaľ to bude video YouTube. V tomto prípade sa na dosiahnutie tohto cieľa použijú niektoré kódy jQuery.

Pridajte nasledujúci riadok kódu do súboru

init ()

funkcia:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({šírka: '608px', výška: '342px'}). AppendTo ('body');

Tým sa vytvorí súbor

iframe

prvok, nastavte správny

src

priradiť a nastaviť veľkosť pomocou css a pridať prvok do tela stránky.

jQuery nám pomáha ľahko vyberať a meniť prvky na webovej stránke. Je potrebné vedieť niekoľko základných vecí:

• $ ('body')

• vyberie akýkoľvek už existujúci prvok, je možné použiť aj iné selektory css

• $(' ')

  vytvára nový

• prvok (ale nepridá ho do dokumentu)

• .appendTo ('. main')

• pripojí vybraný/vytvorený prvok k prvku s triedou css „main“

• Ďalšie funkcie na pridanie prvkov sú

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  . vložiť ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .po ()

  ,

  .pred ()

Ak je niečo nejasné, pozrite sa na zodpovedajúci záväzok na GitHub.

Krok 5: Interaktívne prvky

Video je zábavné, ale účelom tohto návodu je interakcia s Arduino / ESP. Nahraďme video za tlačidlo, ktoré odosiela informácie do Arduino / ESP a tiež čaká na odpoveď.

Budeme potrebovať a

$('')

pridať na stránku a pripojiť k nej poslucháča udalostí. Eventlistener zavolá funkciu spätného volania, keď dôjde k uvedenej udalosti:

$ (''). text ('tlačidlo'). na ('klik', funkcia ()

{// kód tu sa spustí po kliknutí na tlačidlo}). appendTo ('body');

A pridajte funkciu AJAX do funkcie spätného volania:

$.get ('/ajax', funkcia (údaje)

{// kód tu bude vykonaný po dokončení požiadavky AJAX});

Akonáhle je žiadosť dokončená, vrátené údaje budú pridané na stránku:

$('

').text (údaje).appendTo (' telo ');

Stručne povedané, vyššie uvedený kód vytvorí tlačidlo, pridá ho na webovú stránku, po kliknutí na tlačidlo sa odošle žiadosť a na webovú stránku sa pridá aj odpoveď.

Ak používate spätné volania prvýkrát, možno budete chcieť skontrolovať potvrdenie na serveri GitHub a zistiť, ako je všetko vnorené.

Krok 6: Reagujte na interaktívny prvok

Na požiadavku AJAX je samozrejme potrebná odpoveď.

Ak chcete vytvoriť správnu odpoveď pre súbor

/ajax

URL budeme musieť pridať

ináč Ak()

hneď za záverečnou zátvorkou príkazu if, ktorý kontroluje

/

url.

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

{client.print („Ahoj!“); }

Pri potvrdení na GitHub som tiež pridal počítadlo, aby sa prehliadaču ukázalo, že každá požiadavka je jedinečná.

Krok 7: Záver

Toto je koniec tohto pokynu. Teraz máte Arduino / ESP, ktoré obsluhuje malú webovú stránku, ktorá hovorí prehliadaču návštevníka, aby načítal súbor JavaScript z cloudu. Po načítaní JavaScriptu sa vytvorí zvyšok obsahu webovej stránky a poskytne používateľské rozhranie pre komunikáciu s Arduino / ESP.

Teraz je na vašej predstavivosti, aby ste na webovej stránke vytvorili viac prvkov a uložili nastavenia lokálne na nejaký druh pamäte ROM (EEPROM / NVS / atď.).

Ďakujeme, že ste si to prečítali, a neváhajte nám poskytnúť spätnú väzbu!