Cargue su página web de configuración Arduino / ESP desde la nube: 7 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

Al crear un proyecto Arduino / ESP (ESP8266 / ESP32), puede simplemente codificar todo. Pero la mayoría de las veces aparece algo y terminará volviendo a conectar su dispositivo IoT a su IDE nuevamente. O simplemente tiene más personas accediendo a la configuración y desea proporcionar una interfaz de usuario en lugar de esperar que comprendan el funcionamiento interno.

Este instructivo le dirá cómo colocar la mayor parte de la interfaz de usuario en la nube en lugar de en Arduino / ESP. Si lo hace de esta manera, ahorrará espacio y uso de memoria. Un servicio que proporciona páginas web estáticas gratuitas es particularmente adecuado como "nube", como las páginas de GitHub, pero es probable que otras opciones también funcionen.

La construcción de la página web de esta manera requiere que el navegador del usuario siga 4 pasos:

1. Solicite la URL raíz de Arduino / ESP
2. Reciba una página web muy simple, que le diga a:
3. Solicite un archivo JavaScript desde la nube
4. Reciba el código que crea la página real

Este Instructable también explicará cómo interactuar con Arduino / ESP una vez que la página esté lista según los pasos anteriores.

El código creado en este instructivo también se puede encontrar en GitHub.

Prerrequisitos

Este instructivo asume que tuvo acceso a ciertos materiales y algunos conocimientos previos:

• Un Arduino (con acceso a la red) / ESP
• Una computadora para conectar lo anterior a
• Acceso WiFi conectado a internet
• El IDE de Arduino instalado (también para el ESP32)
• Sabes cómo cargar un boceto en tu dispositivo IoT
• Sabes cómo usar Git y GitHub

Paso 1: Comenzando con un simple boceto de servidor web

Comenzaremos de la manera más simple posible y lo dejaremos crecer a partir de ahora.

#incluir

const char * ssid = "tuyo"; const char * contraseña = "su contraseña"; Servidor WiFiServer (80); void setup () {// Inicializar serie y esperar a que se abra el puerto: Serial.begin (115200); while (! Serial) {; // espera a que se conecte el puerto serie. Necesario solo para puerto USB nativo} WiFi.begin (ssid, contraseña); while (WiFi.status ()! = WL_CONNECTED) {retraso (500); Serial.print ("."); } Serial.println ("WiFi conectado"); Serial.println ("dirección IP:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// escucha a los clientes entrantes WiFiClient client = server.available (); // escucha los clientes entrantes bool sendResponse = false; // establecer en verdadero si queremos enviar una respuesta String urlLine = ""; // crea una cadena para contener la URL solicitada if (cliente) // si obtiene un cliente, {Serial.println ("New Client."); // imprime un mensaje desde el puerto serie String currentLine = ""; // crea una cadena para contener los datos entrantes del cliente while (client.connected ()) // bucle mientras el cliente está conectado {if (client.available ()) // si hay bytes para leer del cliente, {char c = cliente.read (); // lee un byte, entonces if (c == '\ n') // si el byte es un carácter de nueva línea {// si la línea actual está en blanco, tienes dos caracteres de nueva línea en una fila. // ese es el final de la solicitud HTTP del cliente, así que envíe una respuesta: if (currentLine.length () == 0) {sendResponse = true; // ¡todo está bien! rotura; // salga del bucle while} else // si tiene una nueva línea, borre currentLine: {if (currentLine.indexOf ("GET /")> = 0) // esta debería ser la línea URL {urlLine = currentLine; // guárdelo para usarlo más tarde} currentLine = ""; // restablece la cadena de línea actual}} else if (c! = '\ r') // si tienes algo más que un carácter de retorno de carro, {línea actual + = c; // agregarlo al final de currentLine}}} if (sendResponse) {Serial.print ("Cliente solicitado"); Serial.println (urlLine); // Los encabezados HTTP siempre comienzan con un código de respuesta (por ejemplo, HTTP / 1.1 200 OK) // y un tipo de contenido para que el cliente sepa lo que viene, luego una línea en blanco: client.println ("HTTP / 1.1 200 OK"); client.println ("Tipo de contenido: texto / html"); cliente.println (); if (urlLine.indexOf ("GET /")> = 0) // si la URL es solo un "/" {// el contenido de la respuesta HTTP sigue al encabezado: client.println ("¡Hola mundo!"); } // La respuesta HTTP termina con otra línea en blanco: client.println (); } // cierra la conexión: client.stop (); Serial.println ("Cliente desconectado"); }}

Copie el código anterior o descárguelo de la confirmación en GitHub.

No olvide cambiar el SSID y la contraseña para que coincidan con su red.

Este boceto utiliza el conocido Arduino

configuración()

y

círculo()

funciones. En el

configuración()

Funciona la conexión serial al IDE se inicializa y también lo es el WiFi. Una vez que el WiFi está conectado a dicho SSID, se imprime la IP y se inicia el servidor web. En cada iteración del

círculo()

función el servidor web se comprueba para los clientes conectados. Si un cliente está conectado, se lee la solicitud y la URL solicitada se guarda en una variable. Si todo parece estar bien, se realiza una respuesta del servidor al cliente en función de la URL solicitada.

¡ADVERTENCIA! Este código usa la clase Arduino String para simplificarlo. Las optimizaciones de cadenas no están dentro del alcance de este instructable. Lea más sobre esto en el instructivo sobre la manipulación de cadenas de Arduino usando Minimal Ram.

Paso 2: crear el JavaScript remoto

El Arduino / ESP le dirá al navegador de los visitantes que cargue este archivo. Todo el resto lo hará este código JavaScript.

En este Instructable haremos uso de jQuery, esto no es estrictamente necesario, pero facilitará las cosas.

Este archivo debe ser accesible desde la web, un servidor de páginas estáticas es suficiente para que esto funcione, por ejemplo, las páginas de GitHub. Así que probablemente querrá crear un nuevo repositorio de GitHub y crear un

gh-pages

rama. Pon el siguiente código dentro de un

.js

archivo en el repositorio en la rama correcta.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', PS (function () {var script = document.createElement ('script'); // crear un elemento script.src = cdnjsURL + 'jquery / 3.2.1 / jquery.min.js'; // establecer src = "" atributo script.onload = function () // función de devolución de llamada, llamada una vez que se carga el archivo jquery {$ = window.jQuery; // hacer que jQuery sea accesible como la variable $ global init (); // llamar a la función init}; document. getElementsByTagName ('head') [0].appendChild (script); // agregue la etiqueta creada al documento, esto iniciará la carga de jQuery lib}) (); function init () {// Terminé de cargar jQuery, agregará código aquí más adelante…}

Copie el código anterior o descárguelo de la confirmación en GitHub.

Compruebe si se puede acceder a su archivo. En el caso de las páginas de GitHub, vaya a https://username.github.io/repository/your-file.j… (reemplace

nombre de usuario

,

repositorio

y

su-archivo.js

para los parámetros correctos).

Paso 3: carga del archivo JavaScript remoto en el navegador de visitantes

Ahora que tenemos todo configurado, es hora de hacer que la página web cargue el archivo JavaScript remoto.

Puede hacer esto cambiando la línea 88 del boceto de

client.println ("¡Hola mundo!"); t

client.println ("");

(cambiar el

src

atributo para apuntar a su propio archivo JavaScript). Esta es una pequeña página web html, todo lo que hace es cargar el archivo JavaScript en el navegador de los visitantes.

El archivo alterado también se puede encontrar en la confirmación correspondiente en GitHub.

Sube el boceto ajustado a tu Arduino / ESP.

Paso 4: agregar nuevos elementos a la página

Una página vacía es inútil, por lo que ahora es el momento de agregar un nuevo elemento a la página web. Por ahora, este será un video de YouTube. En este ejemplo, se usarán algunos códigos jQuery para lograr esto.

Agregue la siguiente línea de código al

en eso()

función:

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

Esto creará un

iframe

elemento, establezca el correcto

src

atributo y establezca el tamaño usando css y agregue el elemento al cuerpo de la página.

jQuery nos ayuda a seleccionar y modificar fácilmente elementos en la página web, algunas cosas básicas que debemos saber:

• $ ('cuerpo')

• selecciona cualquier elemento ya existente, también se pueden usar otros selectores css

• $(' ')

  crea un nuevo

• elemento (pero no lo agrega al documento)

• .appendTo ('. main')

• agrega el elemento seleccionado / creado a un elemento con la clase css 'principal'

• Otra función para agregar elementos son

  .adjuntar()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insertar()

  ,

  .insertarfter ()

  ,

  .insertBefore ()

  ,

  .después()

  ,

  .antes de()

Eche un vistazo a la confirmación correspondiente en GitHub si algo no está claro.

Paso 5: Elementos interactivos

Un video es divertido, pero el propósito de este instructivo es interactuar con el Arduino / ESP. Reemplacemos el video por un botón que envía información al Arduino / ESP y también espera una respuesta.

Necesitaremos un

$('')

para agregar a la página y adjuntarle un detector de eventos. Eventlistener llamará a la función de devolución de llamada cuando ocurra el evento especificado:

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

{// el código aquí se ejecutará cuando se haga clic en el botón}). appendTo ('cuerpo');

Y agregue una solicitud AJAX a la función de devolución de llamada:

$.get ('/ ajax', función (datos)

{// el código aquí se ejecutará cuando finalice la solicitud AJAX});

Una vez finalizada la solicitud, los datos devueltos se agregarán a la página:

$('

').text (datos).appendTo (' cuerpo ');

En resumen, el código anterior crea un botón, lo agrega a la página web, cuando se hace clic en el botón, se envía una solicitud y la respuesta también se agrega a la página web.

Si esta es la primera vez que usa devoluciones de llamada, es posible que desee verificar la confirmación en GitHub para ver cómo está todo anidado.

Paso 6: Responda al elemento interactivo

Por supuesto, la solicitud AJAX requiere una respuesta.

Para crear la respuesta correcta para el

/ ajax

url necesitaremos agregar un

más si ()

justo después del corchete de cierre de la declaración if que verifica el

/

url.

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

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

En la confirmación en GitHub también agregué un contador para mostrarle al navegador que cada solicitud es única.

Paso 7: Conclusión

Este es el final de este instructable. Ahora tiene un Arduino / ESP que sirve una pequeña página web que le dice al navegador del visitante que cargue un archivo JavaScript desde la nube. Una vez que se carga el JavaScript, se crea el resto del contenido de la página web proporcionando una interfaz de usuario para que el usuario se comunique con Arduino / ESP.

Ahora depende de su imaginación crear más elementos en la página web y guardar la configuración localmente en algún tipo de ROM (EEPROM / NVS / etc.).

Gracias por leer y no dude en enviarnos sus comentarios.