Carregueu la vostra pàgina web de configuració Arduino / ESP des del núvol: 7 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

Quan creeu un projecte Arduino / ESP (ESP8266 / ESP32), només podeu codificar tot. Però sovint apareix alguna cosa i acabareu tornant a connectar el vostre dispositiu IoT al vostre IDE. O simplement teniu més persones a accedir a la configuració i voleu proporcionar una interfície d’usuari en lloc d’esperar que entenguin el funcionament intern.

Aquest instructiu us explicarà com posar la major part de la interfície d’usuari al núvol en lloc de fer-ho a l’Arduino / ESP. Si ho feu d’aquesta manera, estalviareu espai i memòria. Un servei que proporciona pàgines web estàtiques gratuïtes és especialment adequat com a “núvol”, com les pàgines GitHub, però probablement també funcionaran altres opcions.

La creació de la pàgina web d’aquesta manera requereix que el navegador de l’usuari faci quatre passos:

1. Sol·liciteu l'URL arrel a l'Arduino / ESP
2. Rebeu una pàgina web molt senzilla, dient-li a:
3. Sol·liciteu un fitxer JavaScript al núvol
4. Rep el codi que genera la pàgina real

Aquest instructiu també explicarà com interactuar amb l'Arduino / ESP un cop la pàgina estigui llesta segons els passos anteriors.

El codi creat en aquesta instrucció també es pot trobar a GitHub.

Requisits previs

Aquesta instrucció suposa que teniu accés a determinats materials i alguns coneixements previs:

• Un Arduino (amb accés a la xarxa) / ESP
• Un ordinador al qual connectar l’anterior
• Accés WiFi connectat a Internet
• S'ha instal·lat l'IDE Arduino (també per a l'ESP32)
• Saps com penjar un esbós al dispositiu IoT
• Ja sabeu utilitzar Git i GitHub

Pas 1: començar amb un esbós senzill de servidor web

Començarem el més senzill possible i deixarem que creixi a partir d’aquí.

#incloure

const char * ssid = "vostresid"; const char * password = "yourpasswd"; Servidor WiFiServer (80); void setup () {// Inicialitzeu la sèrie i espereu que s'obri el port: Serial.begin (115200); while (! Serial) {; // espera que es connecti el port sèrie. Necessari només per al port USB natiu} WiFi.begin (ssid, contrasenya); while (WiFi.status ()! = WL_CONNECTED) {demora (500); Serial.print ("."); } Serial.println ("WiFi connectat"); Serial.println ("adreça IP:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// escoltar clients entrants Client WiFiClient = servidor.available (); // escoltar clients entrants bool sendResponse = false; // establir a true si volem enviar una resposta String urlLine = ""; // feu una cadena per contenir l'URL sol·licitat si (client) // si obteniu un client, {Serial.println ("Client nou"); // imprimeix un missatge al port sèrie String currentLine = ""; // fer una cadena per contenir les dades entrants del client mentre (client.connected ()) // fa un bucle mentre el client està connectat {if (client.available ()) // si hi ha bytes per llegir del client, {char c = client.read (); // llegiu un byte, si (c == '\ n') // si el byte és un caràcter de línia nova {// si la línia actual està en blanc, teniu dos caràcters de línia nova seguits. // aquest és el final de la sol·licitud HTTP del client, així que envieu una resposta: if (currentLine.length () == 0) {sendResponse = true; // tot està bé! trencar; // sortir del bucle while} else // si teniu una nova línia, esborreu currentLine: {if (currentLine.indexOf ("GET /")> = 0) // aquesta hauria de ser la línia URL {urlLine = currentLine; // deseu-lo per a un ús posterior} currentLine = ""; // restableix la cadena currentLine}} else if (c! = '\ r') // si tens alguna cosa més que un caràcter de retorn de carro, {currentLine + = c; // Afegiu-lo al final de la línia actual}}} if (sendResponse) {Serial.print ("Client sol·licitat"); Serial.println (urlLine); // Les capçaleres HTTP sempre comencen amb un codi de resposta (per exemple, HTTP / 1.1 200 OK) // i un tipus de contingut perquè el client sàpiga el que ve, i després una línia en blanc: client.println ("HTTP / 1.1 200 OK"); client.println ("Tipus de contingut: text / html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // si l'URL només és un "/" {// el contingut de la resposta HTTP segueix la capçalera: client.println ("Hola món!"); } // La resposta HTTP acaba amb una altra línia en blanc: client.println (); } // tanca la connexió: client.stop (); Serial.println ("Client desconnectat"); }}

Copieu el codi anterior o descarregueu-lo des del commit a GitHub.

No oblideu canviar el SSID i la contrasenya perquè coincideixin amb la vostra xarxa.

Aquest esbós utilitza el conegut Arduino

setup ()

i

loop ()

funcions. A la

setup ()

Funció: s’inicialitza la connexió sèrie a IDE i també el WiFi. Un cop connectat el WiFi a l’esmentat SSID, s’imprimeix la IP i s’inicia el servidor web. A cada iteració del fitxer

loop ()

funció del servidor web es comprova si hi ha clients connectats. Si hi ha un client connectat, es llegeix la sol·licitud i l'URL sol·licitat es desa en una variable. Si tot sembla correcte, es realitza una resposta del servidor al client en funció de l'URL sol·licitat.

AVÍS! Aquest codi utilitza la classe Arduino String per fer-ho senzill. Les optimitzacions de cadenes no són dins de l’abast d’aquest instructiu. Llegiu més informació al respecte a la informació sobre la manipulació de les cadenes Arduino amb Minimal Ram.

Pas 2: creació del JavaScript remot

L'Arduino / ESP indicarà al navegador dels visitants que carregui aquest fitxer. La resta es farà mitjançant aquest codi JavaScript.

En aquest instructiu farem ús de jQuery, això no és estrictament necessari, però facilitarà les coses.

Aquest fitxer ha de ser accessible des del web, amb un servidor de pàgines estàtiques és suficient que això funcioni, per exemple, les pàgines de GitHub. Per tant, probablement voldreu crear un nou dipòsit de GitHub i crear-ne un

pàgines gh

branca. Introduïu el següent codi dins de

.js

fitxer al dipòsit de la branca correcta.

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 () // funció de devolució de trucada, cridada un cop carregat el fitxer jquery {$ = window.jQuery; // fer accessible jQuery com a variable global $ init (); // cridar la funció init}; document. getElementsByTagName ('head') [0].appendChild (script); // afegiu l'etiqueta creada al document, això començarà a carregar la jQuery lib}) (); function init () {// Fet carregant jQuery, afegirà codi aquí més endavant …}

Copieu el codi anterior o descarregueu-lo des del commit a GitHub.

Comproveu si el vostre fitxer és accessible. En cas de pàgines de GitHub, aneu a https://username.github.io/repository/your-file.j… (substituïu

nom d'usuari

,

repositori

i

your-file.js

per als paràmetres correctes).

Pas 3: carregar el fitxer JavaScript remot al navegador de visitants

Ara que ja ho tenim tot configurat, és hora que la pàgina web carregui el fitxer JavaScript remot.

Podeu fer-ho canviant la línia 88 de l'esbós de

client.println ("Hola món!"); t

client.println ("");

(canvia el

src

és una petita pàgina web html, tot el que fa és carregar el fitxer JavaScript al navegador de visitants.

El fitxer modificat també es pot trobar a la confirmació corresponent a GitHub.

Pengeu l'esbós ajustat al vostre Arduino / ESP.

Pas 4: afegir elements nous a la pàgina

Una pàgina buida no serveix de res, de manera que és hora d’afegir un element nou a la pàgina web. De moment, aquest serà un vídeo de YouTube, en aquest exemple s’utilitzaran alguns codis jQuery per aconseguir-ho.

Afegiu la següent línia de codi al fitxer

init ()

funció:

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

Això crearà un fitxer

iframe

element, defineix el correcte

src

atribuir i definir la mida mitjançant css i afegir l'element al cos de la pàgina.

jQuery ens ajuda a seleccionar i modificar fàcilment elements de la pàgina web, algunes coses bàsiques que cal saber:

• $ ('cos')

• selecciona qualsevol element ja existent, també es poden utilitzar altres selectors CSS

• $(' ')

  crea una nova

• element (però no l'afegeix al document)

• .appendTo ('. main')

• afegeix l'element seleccionat / creat a un element amb la classe css 'main'

• Una altra funció per afegir elements són

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .after ()

  ,

  .abans()

Mireu la confirmació corresponent a GitHub si no hi ha res clar.

Pas 5: Elements interactius

Un vídeo és divertit, però el propòsit d’aquest instructiu és interactuar amb l’Arduino / ESP. Substituïm el vídeo per un botó que envia informació a l’Arduino / ESP i també espera una resposta.

Necessitarem un

$('')

per afegir a la pàgina i adjuntar-hi un escoltador d'esdeveniments. L'escoltador d'esdeveniments trucarà a la funció de devolució de trucada quan es produeixi l'esdeveniment especificat:

$ (''). text ('un botó'). on ('clic', funció ()

{// el codi aquí s'executarà quan es faci clic al botó}). appendTo ('body');

I afegiu una sol·licitud AJAX a la funció de devolució de trucada:

$.get ('/ ajax', funció (dades)

{// el codi aquí s'executarà quan s'acabi la sol·licitud AJAX});

Un cop finalitzada la sol·licitud, les dades retornades s'afegiran a la pàgina:

$('

').text (dades).appendTo (' cos ');

En resum, el codi anterior crea un botó, l’afegeix a la pàgina web, quan es fa clic al botó s’enviarà una sol·licitud i la resposta també s’afegirà a la pàgina web.

Si és la primera vegada que utilitzeu les devolucions de trucada, potser voldreu comprovar la confirmació a GitHub per veure com s’anida tot.

Pas 6: responeu a l'element interactiu

Per descomptat, la sol·licitud AJAX requereix una resposta.

Per crear la resposta correcta per al fitxer

/ ajax

url haurem d'afegir un

else if ()

just després del claudàtor de la sentència if que comprova el fitxer

/

url.

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

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

Al commit a GitHub també he afegit un comptador per mostrar al navegador que cada sol·licitud és única.

Pas 7: Conclusió

Aquest és el final d’aquest instructiu. Ara teniu un Arduino / ESP que serveix una petita pàgina web que indica al navegador del visitant que carregui un fitxer JavaScript des del núvol. Un cop carregat el JavaScript, acumula la resta del contingut de la pàgina web proporcionant una interfície d’usuari perquè l’usuari es comuniqui amb l’Arduino / ESP.

Ara depèn de la vostra imaginació crear més elements a la pàgina web i desar la configuració localment en algun tipus de ROM (EEPROM / NVS / etc).

Gràcies per llegir i no dubteu a donar-nos comentaris.