Lataa Arduino/ESP Config -verkkosivusi pilvestä: 7 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:03

Kun luot Arduino / ESP (ESP8266 / ESP32) -projektin, voit vain koodata kaiken. Mutta useimmiten jotain ilmaantuu ja päädyt IoT-laitteesi uudelleen liittämiseen IDE-laitteeseen. Tai olet juuri saanut enemmän ihmisiä käyttämään kokoonpanoa ja haluat tarjota käyttöliittymän sen sijaan, että odotat heidän ymmärtävän sisäisen toiminnan.

Tämä opettavainen opas kertoo kuinka laittaa suurin osa käyttöliittymästä pilveen Arduinon / ESP: n sijasta. Tällä tavalla säästät tilaa ja muistin käyttöä. Ilmaisia staattisia verkkosivuja tarjoava palvelu soveltuu erityisesti "pilvipalveluksi", kuten GitHub Pages, mutta myös muut vaihtoehdot toimivat todennäköisesti.

Verkkosivun rakentaminen tällä tavalla vaatii käyttäjän selaimen suorittamaan 4 vaihetta:

1. Pyydä pääosoite Arduinolta / ESP: ltä
2. Saat erittäin yksinkertaisen verkkosivun, joka kertoo:
3. Pyydä JavaScript -tiedosto pilvestä
4. Vastaanota koodi, joka rakentaa varsinaisen sivun

Tämä opas selittää myös, miten voit olla vuorovaikutuksessa Arduino / ESP: n kanssa, kun sivu on valmis yllä olevien vaiheiden mukaisesti.

Tämän ohjeen luoma koodi löytyy myös GitHubista.

Edellytykset

Tässä ohjeessa oletetaan, että sinulla on pääsy tiettyihin materiaaleihin ja jonkin verran ennakkotietoa:

• Arduino (verkkoyhteydellä) / ESP
• Tietokone, johon yllä oleva liitetään
• WiFi -yhteys Internetiin yhdistettynä
• Arduino IDE asennettu (myös ESP32)
• Tiedät kuinka ladata luonnos IoT-laitteeseesi
• Osaat käyttää Git & GitHubia

Vaihe 1: Aloittaminen yksinkertaisella verkkopalvelinluonnoksella

Aloitamme mahdollisimman yksinkertaisesti ja annamme sen kasvaa tästä eteenpäin.

#sisältää

const char* ssid = "omasi"; const char* password = "oma salasana"; WiFi -palvelinpalvelin (80); void setup () {// Alusta sarja ja odota portin avautumista: Serial.begin (115200); while (! Sarja) {; // odota, että sarjaportti muodostaa yhteyden. Tarvitaan vain natiiville USB -portille} WiFi.begin (ssid, salasana); while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serial.print ("."); } Serial.println ("WiFi kytketty."); Serial.println ("IP -osoite:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// kuuntele saapuvia asiakkaita WiFiClient client = server.available (); // kuuntele saapuvia asiakkaita bool sendResponse = false; // aseta tosi, jos haluamme lähettää vastauksen String urlLine = ""; // tee merkkijono pyydetyn URL -osoitteen säilyttämiseksi, jos (asiakas) // jos saat asiakkaan, {Serial.println ("Uusi asiakas"); // tulosta viesti sarjaportista String currentLine = ""; // tee merkkijono, joka pitää asiakkaan saapuvat tiedot (client.connected ()) // -silmukan aikana, kun asiakas on yhteydessä {if (client.available ()) // jos on tavuja luettavaksi asiakkaalta, {char c = asiakas.luku (); // lukee tavu, jos jos (c == '\ n') // jos tavu on uuden rivin merkki {// jos nykyinen rivi on tyhjä, sinulla on kaksi uuden rivin merkkiä peräkkäin. // se on asiakkaan HTTP -pyynnön loppu, joten lähetä vastaus: if (currentLine.length () == 0) {sendResponse = true; // kaikki on hyvin! tauko; // murtautua while -silmukasta} else // jos sinulla on uusi rivi, poista currentLine: {if (currentLine.indexOf ("GET /")> = 0) // tämän pitäisi olla URL -rivi {urlLine = currentLine; // tallenna se myöhempää käyttöä varten} currentLine = ""; // nollaa nykyisen rivin merkkijono}} else if (c! = '\ r') // jos sinulla on muuta kuin vaunun palautusmerkki, {currentLine += c; // lisää se nykyisen rivin loppuun}}} if (sendResponse) {Serial.print ("Asiakas pyydetty"); Serial.println (urlLine); // HTTP-otsikot alkavat aina vastauskoodilla (esim. HTTP/1.1 200 OK) // ja sisältötyypillä, jotta asiakas tietää mitä on tulossa, sitten tyhjä rivi: client.println ("HTTP/1.1 200 OK"); client.println ("Sisältötyyppi: teksti/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // jos URL -osoite on vain " /" {//, HTTP -vastauksen sisältö seuraa otsikkoa: client.println ("Hei maailma!"); } // HTTP -vastaus päättyy toiseen tyhjään riviin: client.println (); } // sulje yhteys: client.stop (); Serial.println ("Asiakas katkaistu"); }}

Kopioi yllä oleva koodi tai lataa se GitHubin komitosta.

Muista muuttaa SSID ja salasana vastaamaan verkkoa.

Tässä luonnoksessa käytetään tunnettua Arduinoa

perustaa()

ja

silmukka ()

toimintoja. Kohteessa

perustaa()

Toiminto sarjayhteys IDE: hen alustetaan, samoin kuin WiFi. Kun WiFi on yhdistetty mainittuun SSID: hen, IP tulostetaan ja verkkopalvelin käynnistetään. Jokaisessa iteroinnissa

silmukka ()

verkkopalvelin tarkistetaan yhdistettyjen asiakkaiden osalta. Jos asiakas on yhteydessä, pyyntö luetaan ja pyydetty URL -osoite tallennetaan muuttujaan. Jos kaikki näyttää olevan kunnossa, palvelimen vastaus asiakkaalle suoritetaan pyydetyn URL -osoitteen perusteella.

VAROITUS! Tämä koodi käyttää yksinkertaista Arduino String -luokkaa. Merkkijonooptimoinnit eivät kuulu tämän ohjeen soveltamisalaan. Lue lisää tästä ohjeesta, joka koskee Arduino -merkkijonon manipulointia käyttämällä minimaalista ramia.

Vaihe 2: Etä JavaScriptin luominen

Arduino / ESP kehottaa kävijöiden selainta lataamaan tämän yhden tiedoston. Kaikki muu tehdään tällä JavaScript -koodilla.

Tässä ohjeessa hyödynnämme jQueryä, tämä ei ole ehdottoman välttämätöntä, mutta helpottaa asioita.

Tämän tiedoston on oltava käytettävissä verkossa, staattinen sivupalvelin, esimerkiksi GitHub -sivut, riittää tämän toimimiseksi. Joten luultavasti haluat tehdä uuden GitHub -arkiston ja luoda

gh-sivut

haara. Kirjoita seuraava koodi kohtaan a

.js

tiedosto arkistossa oikeassa haarassa.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // luo elementti script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // aseta src = "" attribuutti script.onload = function () // takaisinsoittotoiminto, jota kutsutaan, kun jquery -tiedosto on ladattu {$ = window.jQuery; // tee jQueryn käytettäviksi globaalina $ -muuttujana init (); // kutsu init -toiminto}; asiakirja. getElementsByTagName ('head') [0].appendChild (script); // lisää luotu tunniste asiakirjaan, tämä aloittaa jQuery lib}: n lataamisen) (); function init () {// JQuery ladattu, lisää koodi tähän myöhemmin…}

Kopioi yllä oleva koodi tai lataa se GitHubin komitosta.

Tarkista, onko tiedosto käytettävissä. Jos kyseessä on GitHub-sivu, siirry osoitteeseen https://username.github.io/repository/your-file.j… (vaihda

käyttäjätunnus

,

arkisto

ja

tiedostosi.js

oikeat parametrit).

Vaihe 3: JavaScript -etätiedoston lataaminen Visitors -selaimeen

Nyt kun olemme saaneet kaiken valmiiksi, on aika saada verkkosivu lataamaan JavaScript -etätiedosto.

Voit tehdä tämän vaihtamalla luonnoksen rivin 88

client.println ("Hei maailma!"); t

client.println ("");

(muuta

src

Tämä on pieni html -verkkosivu, joka vain lataa JavaScript -tiedoston vierailijoiden selaimeen.

Muutettu tiedosto löytyy myös GitHubin vastaavasta komitosta.

Lataa säädetty luonnos Arduino / ESP -laitteeseesi.

Vaihe 4: Uusien elementtien lisääminen sivulle

Tyhjä sivu on hyödytön, joten nyt on aika lisätä uusi elementti verkkosivulle. Tämä on toistaiseksi YouTube -video. Tässä esimerkissä käytetään joitain jQuery -koodeja tämän saavuttamiseksi.

Lisää seuraava koodirivi

sen sisällä()

toiminto:

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

Tämä luo

iframe

elementti, aseta oikea

src

attribuutti ja aseta koko css: llä ja lisää elementti sivun runkoon.

jQuery auttaa meitä valitsemaan ja muuttamaan verkkosivun elementtejä helposti, joitain perustietoja:

• $ ('body')

• valitsee jo olemassa olevan elementin, voidaan käyttää myös muita css -valitsimia

• $(' ')

  luo uuden

• elementti (mutta ei lisää sitä asiakirjaan)

• .appendTo ('. main')

• liittää valitun/luodun elementin elementtiin, jonka css -luokka on 'main'

• Muita elementtejä lisääviä toimintoja ovat

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .lisää ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .jälkeen()

  ,

  .ennen()

Katso vastaavaa sitoutumista GitHubissa, jos jotain on epäselvää.

Vaihe 5: Interaktiiviset elementit

Video on hauska, mutta tämän ohjeen tarkoitus on olla vuorovaikutuksessa Arduino / ESP: n kanssa.

Tarvitsemme a

$('')

lisätäksesi sivulle ja liittää siihen tapahtumakuuntelijan. Tapahtumakuuntelija kutsuu soittotoiminnon, kun määritetty tapahtuma tapahtuu:

$ (''). text ('a button'). on ('click', function ()

{// koodi suoritetaan, kun painiketta napsautetaan}). appendTo ('body');

Ja lisää AJAX -pyyntö takaisinsoittotoimintoon:

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

{// koodi suoritetaan, kun AJAX -pyyntö on valmis});

Kun pyyntö on valmis, palautetut tiedot lisätään sivulle:

$('

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

Yhteenvetona voidaan todeta, että yllä oleva koodi luo painikkeen, lisää sen verkkosivulle, kun painiketta napsautetaan, pyyntö lähetetään ja vastaus lisätään myös verkkosivulle.

Jos käytät ensimmäistä kertaa takaisinsoittopyyntöjä, sinun kannattaa tarkistaa GitHubin sitoutuminen nähdäksesi, kuinka kaikki on sisäkkäin.

Vaihe 6: Vastaa interaktiiviseen elementtiin

Tietenkin AJAX -pyyntö vaatii vastauksen.

Luo oikea vastaus

/ajax

url, meidän on lisättävä

muuten jos()

heti if -lauseen sulkevan sulun jälkeen, joka tarkistaa

/

url.

muuten jos (urlLine.indexOf ("GET /ajax")> = 0)

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

Olen lisännyt GitHub -tilaukseen laskurin, joka näyttää selaimelle, että jokainen pyyntö on yksilöllinen.

Vaihe 7: Johtopäätös

Tämä on tämän ohjeen loppu. Sinulla on nyt Arduino / ESP, joka palvelee pientä verkkosivua, joka kehottaa kävijän selainta lataamaan JavaScript -tiedoston pilvestä. Kun JavaScript on ladattu, se rakentaa verkkosivun muun sisällön ja tarjoaa käyttöliittymän käyttäjälle kommunikoida Arduino / ESP: n kanssa.

Nyt sinun mielikuvituksesi on luoda lisää elementtejä verkkosivulle ja tallentaa asetukset paikallisesti jollekin ROM -levylle (EEPROM / NVS / jne.).

Kiitos, että luit, ja anna palautetta!