Controlar su Arduino con HTML / Javascript de la manera más fácil: 8 pasos

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

Este tutorial le muestra cómo controlar un arduino con una devolución de llamada ajax desde un adafruit Huzzah usando solo funciones javascript. Básicamente, puede usar javascript en la página html que le permitirá escribir fácilmente interfaces html con funciones simples de javascript que utilizan una devolución de llamada ajax. Para permitir que el ESP8266 se comunique con el arduino. Por lo tanto, todos los pines se pueden configurar desde una función javascript. Asimismo, también podemos leer el valor de cualquier pin usando una función javascript. Espero que esto ayude a que sea más fácil poder controlar un arduino desde un documento html. Supuse que hay mucha gente que puede escribir html. La mayoría de los cuales no quieren molestarse en intentar hacer una aplicación de teléfono celular con java o xcode o algún otro marco. Esto hará que sea muy fácil para las personas porque todo lo que necesitan hacer es usar una función javascript para establecer y leer valores de pines. Por ejemplo, ¿no es mucho más fácil escribir

Encender

Para encender un botón. La belleza es que no hay otra programación arduino involucrada además de declarar el pinMode (12, INPUT); En su función de configuración. Siempre que se declare el pin, JavaScript se puede usar para todo lo demás.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Esto es todo lo que necesita hacer para obtener el valor del pin analógico 0 y devolver el resultado al div. Entonces, esta debería ser una manera fácil para que las personas puedan crear páginas html que controlen el arduino. Además de crear una interfaz para que los pines de arduino se puedan configurar y leer con javascript.

Paso 1: lo que necesitará

Construí este proyecto para usuarios que desean controlar su arduino con una página html en un ESP8266. El objetivo de este proyecto es crear un método simple para configurar los valores de los pines en su arduino con una función javascript. Por ejemplo, onclick = "SetPin (12, 1, 0)" establecerá el Pin 12 en su arduino en Alto.

Para este tutorial, necesitará los siguientes elementos para poder seguirlo exactamente. Sin embargo, supongo que debería funcionar en la mayoría de combinaciones de arduino y ESP8266. Sin embargo, para seguir exactamente lo que tengo aquí, necesitará los siguientes componentes.

Arduino Uno: debería funcionar con cualquier arduino compatible que tenga una placa de conexión USB a serie Rx TxAdafruit Huzzah Cable 4 LED de baja potencia Prueba de turpidez analógica: cualquier sensor analógico que proporcione una salida analógica funcionará con un enrutador Wifi de alambre para teléfonos móviles con bibliotecas Arduino de navegador móvil.

Paso 2: preparación de la identificación de Arduino

Este proyecto requiere una nueva biblioteca arduino y alguna configuración y por el bien de tiempo. No pondré una captura de pantalla de cada pantalla y solo voy a ver lo que necesitará para configurar esto y hacerlo funcionar. Traté de hacerlo lo más fácil posible para el usuario.

El código utiliza una serie de bibliotecas para funcionar. Primero nos enfocaremos en configurar el arduino para el ESP8266. Estoy usando Adafruit Huzzah en este ejemplo, porque encuentro que los productos adafruit son los más confiables y tienen el mejor soporte. Siempre que no intente obtener soporte del servidor de Adafruit Discord. Tendrá mucha más suerte si recibe ayuda en los foros de soporte.

De todos modos, estoy usando las siguientes bibliotecas en el ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSON Este no es un tutorial sobre cómo descargar e instalar bibliotecas; sin embargo, estas son las bibliotecas que se utilizan en HUZZAH. Así que búsquelos e instálelos. También necesitará instalar las definiciones de placa para el HUZZAH, por lo que si va a ARCHIVO> Preferencias En el cuadro que dice URL adicionales del Administrador de placas, agregue lo siguiente https://arduino.esp8266.com/stable/package_esp8266c … si ya tiene algo en este campo, luego asegúrese de agregar una coma allí para agregar una URL de tablero adicional. Haga clic en Aceptar que vaya

Herramientas> Tablero> Administrador de tableros Luego busque ESP8266 y luego instale ESP8266 por la Comunidad ESP8266.

Genial, asegurémonos de que tenemos todo lo que necesitamos para que funcione el código arduino. Uno del lado de arduino, el arduino en sí solo usa 2 bibliotecas para este tutorial.

SoftwareSerialArduinoJSON Lo que ya debería tener.

Paso 3: preparación del ESP8266

Ahora vamos a poner el código en el ESP8266 (Adafruit HUZZAH) y prepararlo para conectarlo al Arduino. Descomprime el código de HUZZAH y abre el boceto. En las líneas 11 y 12 cambie el ssid y la contraseña a la de su conexión WIFI en su red local. Notará que hay 2 archivos, el archivo de boceto y el archivo index.h. El archivo index.h es donde se almacena el html que se mostrará en su teléfono.

Una vez que haya configurado el SSID y la contraseña correctos para su wifi, puede compilar el código y cargarlo en su ESP8266. En el HUZZAH debe mantener presionado el botón etiquetado GPIO0 y luego hacer clic en el botón de descanso, luego suelte el botón GPIO0 para poner el chip en modo de cargador de arranque. Si el chip se ha puesto con éxito en el modo de cargador de arranque, se encenderá una luz roja indicando que el chip está en modo de cargador de arranque.

Para conectarse al ESP8266, necesitará un cable serie o un adaptador USB a serie o un chip FDTI. En este caso, estoy usando el cable de adafruit como se indica en las instrucciones. Sin embargo, puede conectarse al chip de varias formas, usando TTL en los pines Tx y Rx. Lo cual espero que las personas que vean esto sepan cómo conectarse al chip para cargar el código en él. De todos modos, continúe y actualice el chip con el código en el archivo zip que se adjunta a este paso.

Paso 4: preparación del Arduino

Para cargar el código en el arduino, cambie la definición de su placa a Arduino / Genuino Uno. Luego descomprima el archivo que se adjunta a este paso. Que subirlo al ardunio. Realmente bastante simple, todo el trabajo duro ya se ha hecho por ti. Ya pasé por un proceso de prueba y error, así que todo lo que tienes que hacer es cargar el código.

Paso 5: Cableado de todo junto

Ok, para el cableado, tengo una imagen de arriba de lo que tengo aquí.

Conecte Tx en el Huzzah al Pin 2 en el arduino. Conecte Rx en el Huzzah al Pin 3 en el arduino. Creé otro conector serial en los pines 2 y 3 en el arduino para liberar la consola serial predeterminada.

Conecte el Pin V + y En a 5v del arduino. - El adafruit Huzzah tiene un regulador de voltaje de 3.3v incorporado, por lo que conectar estos pines de esta manera podría no funcionar con todos los módulos ESP8266. Es posible que deba conectar su propio regulador de voltaje. Recomiendo usar Huzzah si solo desea que la cosa funcione fácilmente. Conecte el GND al GND del arduino

En los pines 12, 11, 9, 8 del cable arduino en sus LED, utilicé LED de baja potencia aquí porque los que consumen demasiada corriente pueden consumir demasiada energía para mantener este experimento simple.

Luego, en el pin 0 analógico A0 del arduino, he conectado la línea de salida de mi probador de turpidez. Sin embargo, puede conectar la salida de básicamente cualquier sensor que le dé una lectura analógica. Eso es todo lo que necesitas hacer para conectar esto.

Paso 6: Acceder a la página web

Ahora que tiene el arduino conectado y tiene todo cargado en sus placas, necesita poder ver el html en su teléfono móvil. Ahora quiero que te conectes al mismo enrutador wifi para el que estableciste el SSID y la contraseña en el código del Huzzah. De lo que necesita averiguar qué dirección IP ha asignado su enrutador a su dispositivo. Por lo general, si inicia sesión en la configuración de sus enrutadores, debería haber una lista de clientes. Eso muestra las direcciones IP de todos los dispositivos conectados a su conexión Wifi. Sin embargo, si no puede encontrar esta dirección IP, puede desconectarla del arduino y ejecutarla con el cable serie nuevamente. Si abre la consola serie en el dispositivo, imprimirá la dirección IP en el dispositivo en la consola serie en caso de que no pueda encontrarla de otra manera. De todos modos una vez que esté conectado a la misma red Wifi con su teléfono celular. Luego apunte su navegador web móvil a la dirección IP del Huzzah. Lo que probablemente se parece a esto. https://192.168.0.107 o algo muy similar. Allí pongo una página básica que te permitirá encender y apagar los 4 Leds así como leer el valor del sensor analógico.

Paso 7: uso de Javascipt

En el archivo llamado index.h en el boceto de ESP8266Code, debería aparecer como una pestaña separada en el editor arduino. Puedes ver el ejemplo básico que hice aquí. Básicamente, la forma en que funciona es así.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}, {IsAnalog 1 Yes 0 No})

Esto establecerá el valor del pin digital 12 en alto

SetPin (4, 0, 0);

Esto establecerá el valor del pin digital 4 en bajo

SetPin (A2, 439, 1) Esto establecerá el valor de Analog Pin 2 en 439

Del mismo modo, la función GetJSON devolverá un valor solicitado desde un pin y lo colocará en un html elemted con el div Id especificado.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element to return result})

Esto enviará una solicitud al arduino pidiéndole el valor del pin analógico 0 y que devuelva el resultado a Div con ID resp_iGetJSON (12, 0, 'mydiv'); Esto le pedirá al arduino que obtenga el valor del pin digital 0 y devuelva el resultado a un elemento html con un Id de mydiv

Paso 8: soporte

Espero que mi guión ayude a aquellos que quieran usarlo. Usé un ejemplo html muy básico aquí con la esperanza de que otras personas exploren todas las capacidades que yo no puedo. Sin embargo, esto debería demostrar cómo se puede usar ajax para controlar un arduino sin cargas de página html y cosas de esa naturaleza.

Si tiene algún comentario, no dude en preguntarme, haré lo mejor que pueda para responder. Me gustaría ampliar un poco más la funcionalidad de esto, pero me quedé sin tiempo y sin dinero. Sin embargo, estoy trabajando en una implementación más sólida de esto, que almacena los archivos en un servidor web normal en lugar de en el ESP8266.

Gracias por tomarse el tiempo de ver mi código.

John Anderson Envíeme un correo electrónico

Vermont Internet Design LLC

www.vermontinternetdesign.com