Ngarkoni Uebfaqen tuaj të Konfigurimit Arduino/ESP Nga Reja: 7 Hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:27

Kur krijoni një projekt Arduino / ESP (ESP8266 / ESP32), thjesht mund të kodifikoni gjithçka. Por më shpesh diçka nuk shfaqet dhe ju do të përfundoni duke e bashkuar përsëri pajisjen tuaj IoT në IDE tuaj përsëri. Ose sapo keni më shumë njerëz që hyjnë në konfigurim dhe dëshironi të siguroni një UI në vend që të prisni që ata të kuptojnë punën e brendshme.

Ky udhëzues do t'ju tregojë se si ta vendosni pjesën më të madhe të UI në cloud në vend të Arduino / ESP. Bërja në këtë mënyrë do t'ju kursejë në përdorimin e hapësirës dhe kujtesës. Një shërbim që siguron faqe interneti statike falas është veçanërisht i përshtatshëm si "cloud", si GitHub Pages, por opsionet e tjera ndoshta do të funksionojnë gjithashtu.

Ndërtimi i faqes në internet në këtë mënyrë kërkon që shfletuesi i përdoruesit të kalojë në 4 hapa:

1. Kërkoni url rrënjë nga Arduino / ESP
2. Merrni një faqe interneti shumë të thjeshtë, duke i thënë:
3. Kërkoni një skedar JavaScript nga cloud
4. Merrni kodin që ndërton faqen aktuale

Ky udhëzues gjithashtu do të shpjegojë se si të bashkëveprojmë me Arduino / ESP pasi faqja të jetë gati sipas hapave të mësipërm.

Kodi i krijuar në këtë udhëzues mund të gjendet gjithashtu në GitHub.

Parakushtet

Ky udhëzues supozon se keni marrë qasje në materiale të caktuara dhe disa njohuri paraprake:

• Një Arduino (me qasje në rrjet) / ESP
• Një kompjuter për të bashkëngjitur sa më sipër
• Qasje WiFi e lidhur me internetin
• Arduino IDE i instaluar (gjithashtu për ESP32)
• Ju e dini se si të ngarkoni një skicë në pajisjen tuaj IoT
• Ju e dini se si të përdorni Git & GitHub

Hapi 1: Fillimi me një skicë të thjeshtë të serverit të uebit

Ne do të fillojmë sa më thjeshtë që të jetë e mundur, dhe le të rritet që këtu e tutje.

#përfshi

const char* ssid = "Yoursid"; const char* fjalëkalim = "yourpasswd"; Serveri WiFiServer (80); void setup () {// Filloni serialin dhe prisni që porta të hapet: Serial.begin (115200); ndërsa (! Serial) {; // prisni që porti serik të lidhet. Nevojitet vetëm për portën USB amtare} WiFi.begin (ssid, fjalëkalim); ndërsa (WiFi.status ()! = WL_CONNECTED) {vonesë (500); Serial.print ("."); } Serial.println ("WiFi i lidhur."); Serial.println ("Adresa IP:"); Serial.println (WiFi.localIP ()); server.filloj (); } void loop () {// dëgjoni për klientët që vijnë WiFiClient client = server.available (); // dëgjoni për klientët në hyrje bool sendResponse = false; // vendoset në true nëse duam të dërgojmë një përgjigje String urlLine = ""; // bëni një varg për të mbajtur URL -në e kërkuar nëse (klienti) // nëse merrni një klient, {Serial.println ("Klienti i Ri"); // printoni një mesazh nga porti serik String currentLine = ""; // bëni një String për të mbajtur të dhënat hyrëse nga klienti ndërsa (client.connected ()) // lakoni ndërsa klienti është i lidhur {if (client.available ()) // nëse ka byte për të lexuar nga klienti, {char c = client.read (); // lexoni një bajt, atëherë nëse (c == '\ n') // nëse bajti është një karakter i linjës së re {// nëse rreshti aktual është bosh, keni dy karaktere të linjës së re në një rresht. // ky është fundi i kërkesës së klientit për HTTP, kështu që dërgoni një përgjigje: if (currentLine.length () == 0) {sendResponse = true; // çdo gjë është në rregull! pushim; // dilni nga laku while} tjetër // nëse keni një linjë të re, atëherë pastroni currentLine: {if (currentLine.indexOf ("GET /")> = 0) // kjo duhet të jetë rreshti i URL -së {urlLine = currentLine; // ruajeni për përdorim të mëvonshëm} currentLine = ""; // rivendosni stringun aktual të linjës}} tjetër nëse (c! = '\ r') // nëse keni ndonjë gjë tjetër përveç një karakteri të kthimit të karrocës, {currentLine += c; // shtojeni në fund të vijës aktuale}}} nëse (sendResponse) {Serial.print ("Klienti kërkohet"); Serial.println (urlLine); // Titujt HTTP gjithmonë fillojnë me një kod përgjigjeje (p.sh. HTTP/1.1 200 OK) // dhe një lloj përmbajtjeje në mënyrë që klienti të dijë se çfarë po vjen, pastaj një vijë bosh: client.println ("HTTP/1.1 200 OK"); client.println ("Lloji i përmbajtjes: tekst/html"); klient.println (); nëse (urlLine.indexOf ("GET /")> = 0) // nëse URL është vetëm një " /" {// përmbajtja e përgjigjes HTTP ndjek titullin: client.println ("Përshëndetje botë!"); } // Përgjigja HTTP përfundon me një linjë tjetër bosh: client.println (); } // mbyllni lidhjen: client.stop (); Serial.println ("Klienti i Shkëputur."); }}

Kopjoni kodin e mësipërm, ose shkarkojeni nga kryerja në GitHub.

Mos harroni të ndryshoni SSID dhe fjalëkalimin që të përputhen me rrjetin tuaj.

Kjo skicë përdor Arduino të mirënjohur

konfigurim ()

dhe

lak ()

funksione. Në

konfigurim ()

funksioni inicializohet lidhja serike me IDE dhe po ashtu WiFi. Pasi WiFi të jetë lidhur me SSID -in në fjalë, IP -ja printohet dhe serveri i uebit fillon. Në çdo përsëritje të

lak ()

funksioni serveri i uebit kontrollohet për klientët e lidhur. Nëse një klient është i lidhur, kërkesa lexohet dhe URL -ja e kërkuar ruhet në një ndryshore. Nëse gjithçka duket në rregull, një përgjigje nga serveri ndaj klientit kryhet bazuar në URL -në e kërkuar.

KUJDES! Ky kod përdor klasën Arduino String për ta mbajtur atë të thjeshtë. Optimizimi i vargut nuk është brenda fushës së këtij udhëzimi. Lexoni më shumë për këtë në udhëzimet në lidhje me Manipulimin e Stringut Arduino duke përdorur Ram Minimal.

Hapi 2: Krijimi i JavaScript në distancë

Arduino / ESP do t'i tregojë shfletuesit të vizitorëve që të ngarkojnë këtë skedar. E gjithë pjesa tjetër do të bëhet nga ky kod JavaScript.

Në këtë Instructable ne do të përdorim jQuery, kjo nuk është rreptësisht e nevojshme, por do t'i bëjë gjërat më të lehta.

Ky skedar duhet të jetë i arritshëm nga uebi, një server i faqeve statike është i mjaftueshëm për ta bërë këtë punë, për shembull faqet GitHub. Kështu që ju ndoshta do të dëshironi të bëni një depo të re GitHub dhe të krijoni një

faqet gh

dege. Vendosni kodin e mëposhtëm brenda a

.js

skedar në depo në degën e duhur.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (funksion () {var script = document.createElement ('script'); // krijoni një element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // vendosni src = "" atribut script.onload = funksion () // funksioni i kthimit, i quajtur sapo të ngarkohet skedari jquery {$ = window.jQuery; // bëjeni jQuery të arritshme si variabla globale $ init (); // thirrni funksionin init}; dokument. getElementsByTagName ('kokë') [0].appendChild (shkrim); // shtoni etiketën e krijuar në dokument, kjo do të fillojë ngarkimin e jQuery lib}) (); funksioni init () {// U krye ngarkimi i jQuery, do të shtojë kod këtu më vonë…}

Kopjoni kodin e mësipërm, ose shkarkojeni nga kryerja në GitHub.

Kontrolloni nëse skedari juaj është i arritshëm. Në rast të faqeve të GitHub shkoni te https://username.github.io/repository/your-file.j… (zëvendësoni

emrin e përdoruesit

,

depo

dhe

dosja juaj.js

për parametrat e saktë).

Hapi 3: Ngarkimi i skedarit JavaScript në distancë në shfletuesin e vizitorëve

Tani që kemi rregulluar gjithçka, është koha për të bërë që faqja e internetit të ngarkojë skedarin e largët JavaScript.

Ju mund ta bëni këtë duke ndryshuar rreshtin 88 të skicës nga

client.println ("Përshëndetje botë!"); t

klient.println ("");

(ndryshoni

src

atribut për të treguar skedarin tuaj JavaScript). Kjo është një faqe e vogël html, gjithçka që bën është të ngarkojë skedarin JavaScript në shfletuesin e vizitorëve.

Skedari i ndryshuar mund të gjendet gjithashtu në kryerjen përkatëse në GitHub.

Ngarko skicën e rregulluar në Arduino / ESP tuaj.

Hapi 4: Shtimi i elementeve të rinj në faqe

Një faqe bosh është e padobishme, kështu që tani është koha për të shtuar një element të ri në faqen e internetit. Tani për tani kjo do të jetë një video në YouTube. Në këtë shembull disa kode jQuery do të përdoren për ta arritur këtë.

Shtoni rreshtin e mëposhtëm të kodit në

init ()

funksioni:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({gjerësia: '608px', lartësia: '342px'}). AppendTo ('trupi');

Kjo do të krijojë një

iframe

element, vendosni të saktë

src

atribuoni dhe vendosni madhësinë duke përdorur css dhe shtoni elementin në trupin e faqes.

jQuery na ndihmon të zgjedhim dhe ndryshojmë me lehtësi elementë në faqen në internet, disa gjëra themelore që duhet të dimë:

• $ ('trupi')

• zgjedh çdo element tashmë ekzistues, përzgjedhës të tjerë css mund të përdoren gjithashtu

• $(' ')

  krijon një të re

• element (por nuk e shton atë në dokument)

• .appendTo ('. kryesore')

• shton elementin e zgjedhur/krijuar në një element me klasën css 'kryesore'

• Funksione të tjera për të shtuar elemente janë

  .shtoj ()

  ,

  .parapri ()

  ,

  .prependTo ()

  ,

  . fut ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .pas ()

  ,

  .para ()

Hidhini një sy angazhimit përkatës në GitHub nëse diçka është e paqartë.

Hapi 5: Elemente interaktive

Një video është argëtuese, por qëllimi i këtij udhëzimi është të ndërveprojë me Arduino / ESP. Le të zëvendësojmë videon për një buton që dërgon informacion në Arduino / ESP dhe gjithashtu pret një përgjigje.

Do të na duhet një

$('')

për të shtuar në faqe dhe bashkëngjitni asaj një dëgjues ngjarjesh. Dëgjuesi i ngjarjeve do të thërrasë funksionin e thirrjes kur të ndodhë ngjarja e specifikuar:

$ (''). tekst ('një buton'). në ('kliko', funksioni ()

{// kodi këtu do të ekzekutohet kur klikohet butoni}).appendTo ('body');

Dhe shtoni një kërkesë AJAX në funksionin e thirrjes:

$.get ('/ajax', funksioni (të dhëna)

{// kodi këtu do të ekzekutohet kur të përfundojë kërkesa AJAX});

Pasi të përfundojë kërkesa, të dhënat e kthyera do të shtohen në faqe:

$('

').teksti (të dhëna).appendTo (' trupi ');

Si përmbledhje, kodi i mësipërm krijon një buton, e shton atë në uebfaqe, kur të klikohet butoni do të dërgohet një kërkesë dhe përgjigja gjithashtu do të shtohet në faqen e internetit.

Nëse kjo është hera juaj e parë duke përdorur thirrjet kthyese, mund të dëshironi të kontrolloni kryerjen në GitHub për të parë se si është e vendosur gjithçka.

Hapi 6: Përgjigjuni elementit interaktiv

Sigurisht, kërkesa AJAX kërkon një përgjigje.

Për të krijuar përgjigjen e saktë për

/ajax

url ne do të duhet të shtojmë një

tjeter nese()

menjëherë pas kllapës mbyllëse të deklaratës if që kontrollon në

/

url

tjetër nëse (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Përshëndetje!"); }

Në angazhimin në GitHub kam shtuar gjithashtu një numërues për t'i treguar shfletuesit se çdo kërkesë është unike.

Hapi 7: Përfundimi

Ky është fundi i këtij udhëzimi. Tani keni një Arduino / ESP që shërben një faqe të vogël në internet që i thotë shfletuesit të vizitorëve të ngarkojë një skedar JavaScript nga cloud. Pasi JavaScript është ngarkuar, ai ndërton pjesën tjetër të përmbajtjes së faqes në internet duke siguruar një UI për përdoruesin që të komunikojë me Arduino / ESP.

Tani ju takon imagjinatës tuaj të krijoni më shumë elementë në faqen në internet dhe të ruani cilësimet në nivel lokal në një lloj ROM (EEPROM / NVS / etj).

Faleminderit për leximin, dhe ju lutem mos ngurroni të jepni disa komente!