Laadige oma Arduino/ESP Config veebisait pilvest üles: 7 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:49

Arduino / ESP (ESP8266 / ESP32) projekti loomisel võite lihtsalt kõvasti kodeerida. Kuid sageli ilmneb midagi ja lõpuks ühendate oma IoT-seadme uuesti IDE-ga. Või saite lihtsalt rohkem inimesi konfiguratsioonile juurde ja soovite pakkuda kasutajaliidest, selle asemel et oodata, et nad mõistaksid sisemist toimimist.

See juhend annab teile teada, kuidas panna suurem osa kasutajaliidesest pilve, mitte Arduino / ESP -le. Nii toimides säästate ruumi ja mälukasutust. Tasuta staatilisi veebilehti pakkuv teenus sobib eriti pilveks, nagu GitHubi lehed, kuid tõenäoliselt toimivad ka muud võimalused.

Veebilehe selliseks ülesehitamiseks peab kasutaja brauser läbima 4 sammu.

1. Taotlege juur -URL -i Arduino / ESP -lt
2. Saate väga lihtsa veebilehe, mis ütleb:
3. Taotlege JavaScripti faili pilvest
4. Saate koodi, mis tegeliku lehe üles ehitab

Selles juhendis selgitatakse ka seda, kuidas Arduino / ESP -ga suhelda, kui leht on ülaltoodud sammude järgi valmis.

Selle juhendi abil loodud koodi leiate ka GitHubist.

Eeldused

See juhend annab eelduse, et teil on juurdepääs teatud materjalidele ja eelteadmistele.

• Arduino (võrguühendusega) / ESP
• Arvuti, millega ülaltoodu ühendada
• WiFi -ühendus Internetiga ühendatud
• Paigaldatud Arduino IDE (ka ESP32 jaoks)
• Te teate, kuidas visand oma asjade Interneti-seadmesse üles laadida
• Te teate, kuidas Git & GitHubi kasutada

Samm: alustamine lihtsa veebiserveri visandiga

Alustame võimalikult lihtsalt ja laseme sellel edaspidi kasvada.

#kaasake

const char* ssid = "sinu oma"; const char* parool = "teie parool"; WiFi -serveri server (80); void setup () {// Initsialiseeri jada ja oota pordi avamist: Serial.begin (115200); while (! Seeria) {; // oodake, kuni jadaport ühendatakse. Vajalik ainult kohaliku USB -pordi jaoks} WiFi.begin (ssid, parool); while (WiFi.status ()! = WL_CONNECTED) {delay (500); Seeria.print ("."); } Serial.println ("WiFi ühendatud"); Serial.println ("IP -aadress:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// kuulake sissetulevaid kliente WiFiClient client = server.available (); // kuulata sissetulevaid kliente bool sendResponse = false; // seada tõeseks, kui tahame vastuse saata String urlLine = ""; // tee string, mis hoiab soovitud URL -i, kui (klient) // kui saad kliendi, {Serial.println ("Uus klient"); // trükib sõnumi välja jadapordist String currentLine = ""; // looge string, et hoida kliendilt sissetulevaid andmeid ajal (client.connected ()) // silmus, kui klient on ühendatud {if (client.available ()) // kui kliendilt on baite lugeda, {char c = klient.lugemine (); // loe baiti, siis kui (c == '\ n') // kui bait on uue rea märk {// kui praegune rida on tühi, saad kaks uut rea tähemärki. // see on kliendi HTTP -päringu lõpp, seega saatke vastus: if (currentLine.length () == 0) {sendResponse = true; // kõik on korras! murda; // murda silmusest while välja} else // kui sul on uus rida, siis kustuta currentLine: {if (currentLine.indexOf ("GET /")> = 0) // see peaks olema URL -i rida {urlLine = currentLine; // salvesta see hilisemaks kasutamiseks} currentLine = ""; // lähtesta praeguse rea string}} else if (c! = '\ r') // kui sul on midagi muud peale kärutagastuse märgi, {currentLine += c; // lisage see praeguse rea lõppu}}} if (sendResponse) {Serial.print ("Klient küsis"); Serial.println (urlLine); // HTTP päised algavad alati vastusekoodiga (nt HTTP/1.1 200 OK) // ja sisutüübiga, et klient teaks, mis tuleb, siis tühi rida: client.println ("HTTP/1.1 200 OK"); client.println ("Sisu tüüp: tekst/html"); klient.println (); if (urlLine.indexOf ("GET /")> = 0) // kui URL on ainult " /" {//, järgneb HTTP vastuse sisu päisele: client.println ("Tere maailm!"); } // HTTP vastus lõpeb teise tühja reaga: client.println (); } // sulge ühendus: client.stop (); Serial.println ("Klient on lahti ühendatud"); }}

Kopeerige ülaltoodud kood üle või laadige see alla GitHubi rakendusest.

Ärge unustage muuta SSID -d ja parooli oma võrguga sobivaks.

See visand kasutab tuntud Arduinot

seadistamine ()

ja

silmus ()

funktsioone. Aastal

seadistamine ()

funktsiooniga käivitatakse IDE -ga jadaühendus ja WiFi. Kui WiFi on nimetatud SSID -ga ühendatud, prinditakse IP ja veebiserver käivitatakse. Iga korduse korral

silmus ()

Veebiserver on ühendatud klientide jaoks kontrollitud. Kui klient on ühendatud, loetakse taotlus läbi ja soovitud URL salvestatakse muutuja sisse. Kui kõik tundub korras, vastatakse serverile kliendile taotletud URL -i põhjal.

HOIATUS! See kood kasutab lihtsuse hoidmiseks klassi Arduino String. Stringide optimeerimine ei kuulu selle juhendi reguleerimisalasse. Lisateavet selle kohta leiate juhendist Arduino String Manipulation Minimal Ram abil.

2. samm: kaug -JavaScripti loomine

Arduino / ESP käsib külastajate brauseril selle ühe faili laadida. Kõik muu tehakse selle JavaScripti koodi abil.

Selles juhendis kasutame jQuery, see pole tingimata vajalik, kuid muudab asja lihtsamaks.

See fail peab olema veebist ligipääsetav, selle toimimiseks piisab staatilisest lehtede serverist, näiteks GitHubi lehtedest. Nii et tõenäoliselt soovite luua uue GitHubi hoidla ja luua

gh-lehed

haru. Sisestage järgmine kood a -sse

.js

faili hoidlas õiges harus.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // looge element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // määrake src = "" atribuut script.onload = function () // tagasihelistamisfunktsioon, mida kutsutakse pärast jquery -faili laadimist {$ = window.jQuery; // tehke jQuery juurdepääsetavaks globaalse $ muutujana init (); // helistage init -funktsioon}; dokument. getElementsByTagName ('pea') [0].appendChild (skript); // lisage loodud silt dokumendile, see alustab jQuery lib} laadimist) (); function init () {// Valmis jQuery laadimine, lisab koodi siia hiljem…}

Kopeerige ülaltoodud kood üle või laadige see alla GitHubi rakendusest.

Kontrollige, kas teie fail on juurdepääsetav. GitHubi lehtede puhul minge aadressile https://username.github.io/repository/your-file.j… (asendage

kasutajanimi

,

hoidla

ja

teie fail.js

õigete parameetrite jaoks).

Samm: laadige JavaScripti kaugfail külastajate brauserisse

Nüüd, kui oleme kõik seadistanud, on aeg panna veebileht laadima JavaScripti kaugfaili.

Seda saate teha, muutes visandi rida 88

client.println ("Tere maailm!"); t

klient.println ("");

(muuda

src

atribuut, mis osutab teie enda JavaScripti failile). See on väike html -veebileht, see ei lae JavaScripti faili külastajate brauserisse.

Muudetud faili leiate ka GitHubi vastavast kohustusest.

Laadige kohandatud visand üles oma Arduino / ESP -sse.

Samm: uute elementide lisamine lehele

Tühi leht on kasutu, nii et nüüd on aeg lisada veebilehele uus element. Praegu on see YouTube'i video. Selles näites kasutatakse selle saavutamiseks mõnda jQuery koodi.

Lisage koodile järgmine koodirida

selles()

funktsioon:

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

See loob

iframe

element, määrake õige

src

atribuut ja määrake css abil suurus ning lisage element lehe põhiosasse.

jQuery aitab meil hõlpsalt veebilehe elemente valida ja muuta, mõned põhiteadmised:

• $ ('keha')

• valib juba olemasoleva elemendi, saab kasutada ka teisi css -valijaid

• $(' ')

  loob uue

• element (kuid ei lisa seda dokumendile)

• .appendTo ('. peamine')

• lisab valitud/loodud elemendi elemendile, mille klass on css 'main'

• Teine elementide lisamise funktsioon on

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  . pärast ()

  ,

  . enne ()

Vaadake GitHubi vastavat kohustust, kui midagi on ebaselge.

Samm: interaktiivsed elemendid

Video on lõbus, kuid selle juhendi eesmärk on suhelda Arduino / ESP -ga. Asendame video nupu jaoks, mis saadab teavet Arduino / ESP -le ja ootab ka vastust.

Vajame a

$('')

lehele lisamiseks ja lisage sellele sündmuste kuulaja. Kui sündmus juhtub, helistab sündmuste kuulaja tagasihelistamisfunktsioonile:

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

{// siin käivitatakse kood, kui nupule klõpsatakse}). appendTo ('body');

Ja lisage tagasihelistamisfunktsioonile AJAX -päring:

$.get ('/ajax', funktsioon (andmed)

{// siin käivitatakse kood, kui AJAX -i päring on lõpetatud});

Kui taotlus on lõpetatud, lisatakse tagastatud andmed lehele:

$('

').text (andmed).appendTo (' keha ');

Kokkuvõttes loob ülaltoodud kood nupu, lisab selle veebilehele. Nupul klõpsamisel saadetakse päring ja vastus lisatakse ka veebilehele.

Kui kasutate tagasihelistamist esimest korda, võiksite kontrollida GitHubis toimuvat, et näha, kuidas kõik on pesastatud.

6. samm: reageerige interaktiivsele elemendile

Loomulikult nõuab AJAX -i päring vastust.

Õige vastuse loomiseks

/ajax

url, peame lisama

muidu kui ()

kohe pärast if -lauset, mis kontrollib

/

url.

muidu kui (urlLine.indexOf ("GET /ajax")> = 0)

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

GitHubi koostamisel lisasin ka loenduri, et näidata brauserile, et iga taotlus on ainulaadne.

Samm 7: Järeldus

Sellega on õpetlik lõpp. Nüüd on teil Arduino / ESP, mis teenindab väikest veebilehte, mis käsib külastaja brauseril laadida JavaScripti faili pilvest. Kui JavaScript on laaditud, ehitab see üles kogu ülejäänud veebilehe sisu, pakkudes kasutajaliidest kasutajale Arduino / ESP -ga suhtlemiseks.

Nüüd jääb teie kujutlusvõime juurde, kas luua veebilehele rohkem elemente ja salvestada seaded kohapeal mingile ROM -ile (EEPROM / NVS / jne).

Täname lugemise eest ja palun andke tagasisidet!