Načtěte webovou stránku konfigurace Arduino/ESP z cloudu: 7 kroků

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

Při vytváření projektu Arduino / ESP (ESP8266 / ESP32) jste mohli vše napevno zakódovat. Ale častěji se něco objeví a skončíte opětovným připojením zařízení IoT k IDE. Nebo jste právě získali více lidí, kteří přistupují ke konfiguraci, a chcete poskytnout uživatelské rozhraní místo toho, abyste očekávali, že porozumí vnitřnímu fungování.

Tento návod vám řekne, jak umístit většinu uživatelského rozhraní do cloudu místo na Arduino / ESP. Tímto způsobem ušetříte místo a paměť. Služba poskytující bezplatné statické webové stránky je zvláště vhodná jako „cloud“, jako stránky GitHub, ale pravděpodobně budou fungovat i další možnosti.

Vytvoření webové stránky tímto způsobem vyžaduje, aby prohlížeč uživatele provedl 4 kroky:

1. Vyžádejte si adresu URL root z Arduino / ESP
2. Získejte velmi jednoduchou webovou stránku, která říká:
3. Vyžádejte si soubor JavaScript z cloudu
4. Získejte kód, který vytváří skutečnou stránku

Tento Instructable také vysvětlí, jak komunikovat s Arduino / ESP, jakmile je stránka připravena podle výše uvedených kroků.

Kód vytvořený v tomto pokynu najdete také na GitHubu.

Předpoklady

Tento návod předpokládá, že jste získali přístup k určitým materiálům a některým předchozím znalostem:

• Arduino (se síťovým přístupem) / ESP
• Počítač, ke kterému lze připojit výše uvedené
• WiFi připojení připojené k internetu
• Arduino IDE nainstalováno (také pro ESP32)
• Víte, jak nahrát skicu do svého zařízení IoT
• Víte, jak používat Git & GitHub

Krok 1: Začněte s jednoduchým náčrtem webového serveru

Začneme co nejjednodušeji a necháme to od této chvíle růst.

#zahrnout

const char* ssid = "yourssid"; const char* heslo = "yourpasswd"; Server WiFiServer (80); void setup () {// Inicializace seriálu a čekání na otevření portu: Serial.begin (115200); while (! Serial) {; // počkejte, až se připojí sériový port. Potřebné pouze pro nativní port USB} WiFi.begin (ssid, heslo); while (WiFi.status ()! = WL_CONNECTED) {zpoždění (500); Serial.print ("."); } Serial.println („WiFi připojeno.“); Serial.println ("IP adresa:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// poslouchat příchozí klienty WiFiClient client = server.available (); // poslouchat příchozí klienty bool sendResponse = false; // nastaveno na true, pokud chceme odeslat odpověď String urlLine = ""; // vytvořte řetězec pro uchování požadované adresy URL, pokud (klient) // pokud získáte klienta, {Serial.println ("nový klient."); // vytiskne zprávu ze sériového portu String currentLine = ""; // vytvořte řetězec pro uchování příchozích dat od klienta while (client.connected ()) // smyčka, zatímco klient je připojen {if (client.available ()) // pokud existují bajty ke čtení z klienta, {char c = client.read (); // přečtěte bajt, pak if (c == '\ n') // pokud je bajt znak nového řádku {// pokud je aktuální řádek prázdný, dostanete dva znaky nového řádku za sebou. // tím klientský požadavek HTTP končí, pošlete tedy odpověď: if (currentLine.length () == 0) {sendResponse = true; // všechno je v pořádku! přestávka; // vybočte z cyklu while} else // pokud máte nový řádek, vymažte currentLine: {if (currentLine.indexOf ("GET /")> = 0) // toto by měl být řádek URL {urlLine = currentLine; // uložit pro pozdější použití} currentLine = ""; // resetujte řetězec currentLine}} else if (c! = '\ r') // pokud máte něco jiného než znak pro návrat na začátek řádku, {currentLine += c; // přidejte jej na konec currentLine}}} if (sendResponse) {Serial.print ("Client requested"); Serial.println (urlLine); // Záhlaví HTTP vždy začínají kódem odpovědi (např. HTTP/1.1 200 OK) // a typem obsahu, aby klient věděl, co přijde, poté prázdným řádkem: client.println ("HTTP/1.1 200 OK"); client.println ("Typ obsahu: text/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // pokud je adresa URL pouze " /" {// obsah odpovědi HTTP následuje za záhlavím: client.println ("Hello world!"); } // Odpověď HTTP končí dalším prázdným řádkem: client.println (); } // zavřít připojení: client.stop (); Serial.println („Klient odpojen.“); }}

Zkopírujte výše uvedený kód nebo si jej stáhněte z potvrzení na GitHubu.

Nezapomeňte změnit SSID a heslo, aby odpovídaly vaší síti.

Tato skica používá dobře známé Arduino

založit()

a

smyčka()

funkce. V

založit()

funkce je inicializováno sériové připojení k IDE a také WiFi. Jakmile je WiFi připojeno k uvedenému SSID, vytiskne se IP a spustí se webový server. V každé iteraci souboru

smyčka()

funkce webový server je kontrolován pro připojené klienty. Pokud je připojen klient, požadavek se přečte a požadovaná adresa URL se uloží do proměnné. Pokud se vše zdá v pořádku, provede se odpověď serveru na klienta na základě požadované adresy URL.

VAROVÁNÍ! Tento kód používá třídu Arduino String, aby byl jednoduchý. Optimalizace řetězců nespadá do rozsahu tohoto pokynu. Přečtěte si více o tom v instruktáži o manipulaci s řetězci Arduino pomocí minimálního ramene.

Krok 2: Vytvoření vzdáleného JavaScriptu

Arduino / ESP řekne prohlížeči návštěvníků, aby nahrál tento jeden soubor. Vše ostatní provede tento kód JavaScript.

V tomto Instructable použijeme jQuery, není to nezbytně nutné, ale usnadní to věci.

Tento soubor musí být přístupný z webu, aby to fungovalo, stačí server se statickými stránkami, například stránky GitHub. Pravděpodobně budete chtít vytvořit nové úložiště GitHub a vytvořit soubor

gh-stránek

větev. Vložte následující kód do a

.js

soubor v úložišti ve správné větvi.

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 = "" atribut script.onload = function () // funkce zpětného volání, nazývá se po načtení souboru jquery {$ = window.jQuery; // zpřístupní jQuery jako globální proměnnou $ init (); // zavolá funkci init}; dokument. getElementsByTagName ('head') [0].appendChild (skript); // přidejte vytvořenou značku do dokumentu, tím se začne načítat jQuery lib}) (); function init () {// Hotovo načítání jQuery, přidá sem kód později…}

Zkopírujte výše uvedený kód nebo si jej stáhněte z potvrzení na GitHubu.

Zkontrolujte, zda je váš soubor přístupný. V případě stránek GitHub přejděte na https://username.github.io/repository/your-file.j… (nahradit

uživatelské jméno

,

úložiště

a

your-file.js

pro správné parametry).

Krok 3: Načtení vzdáleného souboru JavaScript do prohlížeče návštěvníků

Nyní, když máme vše nastaveno, je načase nechat webovou stránku načíst vzdálený soubor JavaScript.

To lze provést změnou řádku 88 náčrtu z

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

client.println ("");

(Změň

src

aby odkazoval na váš vlastní soubor JavaScript). Toto je malá html webová stránka, stačí načíst soubor JavaScript do prohlížeče návštěvníků.

Změněný soubor lze také nalézt v odpovídajícím potvrzení na GitHubu.

Nahrajte upravenou skicu do svého Arduino / ESP.

Krok 4: Přidání nových prvků na stránku

Prázdná stránka je k ničemu, proto je nyní na čase přidat na web nový prvek. Prozatím to bude video z YouTube. V tomto příkladu budou použity některé kódy jQuery.

Přidejte následující řádek kódu do souboru

init ()

funkce:

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

Tím se vytvoří přípona

iframe

prvek, nastavte správný

src

atribut a nastavte velikost pomocí css a přidejte prvek do těla stránky.

jQuery nám pomáhá snadno vybírat a měnit prvky na webové stránce, některé základní věci, které je třeba vědět:

• $ ('tělo')

• vybere jakýkoli již existující prvek, lze použít i jiné voliče css

• $(' ')

  vytváří nový

• prvek (ale nepřidá ho do dokumentu)

• .appendTo ('. main')

• připojí vybraný/vytvořený prvek k prvku s třídou css 'main'

• Další funkcí pro přidání prvků jsou

  .připojit()

  ,

  .předřadit()

  ,

  .prependTo ()

  ,

  .vložit()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .po()

  ,

  .před()

Pokud je něco nejasné, podívejte se na odpovídající potvrzení na GitHubu.

Krok 5: Interaktivní prvky

Video je zábavné, ale účelem tohoto pokynu je komunikovat s Arduino / ESP. Nahraďme video tlačítkem, které odesílá informace do Arduina / ESP a také čeká na odpověď.

Budeme potřebovat a

$('')

přidejte na stránku a připojte k ní posluchače událostí. Eventlistener zavolá funkci zpětného volání, když dojde k zadané události:

$ (''). text ('tlačítko'). na ('kliknutí', funkce ()

{// kód zde bude spuštěn po kliknutí na tlačítko}). appendTo ('body');

A přidejte požadavek AJAX do funkce zpětného volání:

$.get ('/ajax', funkce (data)

{// kód zde bude spuštěn, když je požadavek AJAX dokončen});

Po dokončení požadavku budou vrácená data přidána na stránku:

$('

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

Stručně řečeno, výše uvedený kód vytvoří tlačítko, přidá jej na webovou stránku, po kliknutí na tlačítko bude odeslán požadavek a odpověď bude také přidána na webovou stránku.

Pokud toto volání používáte poprvé, možná budete chtít zkontrolovat potvrzení na GitHubu a zjistit, jak je vše vnořené.

Krok 6: Reagujte na interaktivní prvek

Samozřejmě požadavek AJAX vyžaduje odpověď.

Chcete -li vytvořit správnou odpověď pro

/ajax

url budeme muset přidat

jinak kdyby ()

hned za uzavírací závorkou příkazu if, který kontroluje

/

url.

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

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

V potvrzení na GitHubu jsem také přidal čítač, který prohlížeči ukazuje, že každý požadavek je jedinečný.

Krok 7: Závěr

Toto je konec tohoto pokynu. Nyní máte Arduino / ESP obsluhující malou webovou stránku, která říká návštěvníkovu prohlížeči, aby z cloudu nahrál soubor JavaScript. Jakmile je JavaScript načten, vytvoří zbytek obsahu webové stránky a poskytne uživateli uživatelské rozhraní pro komunikaci s Arduino / ESP.

Nyní je na vaší fantazii vytvořit na webové stránce více prvků a uložit nastavení lokálně na nějaký druh ROM (EEPROM / NVS / atd.).

Děkujeme za přečtení a neváhejte nám poskytnout zpětnou vazbu!