Cree un sitio web ESP8266 para controlar hasta 8 relevos en nuestro controlador de relevos de 8 canales XC4418

¡Use relés sin esfuerzo con esta simple configuración de dos partes! Simplemente conecte cualquier dispositivo que desee probar o activar al módulo de retransmisión; Luego use la aplicación de teléfono incorporada para controlarlos cuando lo desee. Establezca relés para alternar, temporizador o activación momentánea; E incluso establecerlos en ciertos momentos del día. Ideal para kits automáticos de riego de plantas, dispositivos de prueba, luces de control o cualquier otra carga de hasta 10 amperios.
| Cantidad | Código | Descripción |
|---|---|---|
| 1 | XC4418 | Controlador de relé de 8 canales |
| 1 | XC4411 | Uno con wifi |
Como siempre, debe tener la biblioteca ESP8266 instalada en su herramienta Arduino IDE, junto con el complemento ESP8266 Data-Spload. Si no, puede obtener uno desde abajo:
Este sistema es una configuración bastante simple. Como sabemos, el XC4411 es un UNO y ESP combinado en una sola configuración de tablero. La porción ESP se encargará de ejecutar un programa simple de "aplicación web", que luego se comunicará con la UNO.

La parte UNO del código simplemente será responsable de activar y controlar los relés una vez que reciba un comando.
XC4411 conecta tanto el UNO como el ESP juntos a través del puerto serie, lo que significa que simplemente tendremos que hacer algo de Serial.read() y Serial.write() para comunicarse entre los dos. Para mantener las cosas simples, mantendremos el flujo de datos en un sentido, por lo que el ESP nunca sabrá cómo se ven los relés, lo que significa que la aplicación web no podrá mostrar cómo se ven los relés reales, pero podemos hacer suposiciones simples.
Esta es una construcción simple de un módulo, gracias a la simplicidad de la placa XC4411.

Simplemente conecte 5V y GND a los dos pines superiores de la placa de retransmisión (debe encontrar que están etiquetados como VCC y GND ). Luego conecte todo el otro IN# pines a los pines digitales de la UNO. Para mantener las cosas simples, mantenemos los alfileres en orden, comenzando desde Pin 2 y avanzando al Pin 9 ; esto coincidirá con lo que hay en el tablero de relé, comenzando desde la parte inferior.
Es una idea razonable mantener la pestaña Verde entre los pines COM y GND en el tablero de relevos también.
En el XC4411 debe encontrar la fila de interruptores de inmersión. Esto se usa para establecer en qué modo se encuentra el dispositivo.

(El nuestro está un poco sucio debido a la frecuencia con la que lo usamos).
Para esta sección, querremos programar el lado UNO de las cosas, así que use un bolígrafo o de otra manera para establecer los interruptores como tales:
| Alfiler | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| Estado | APAGADO | APAGADO | EN | EN | APAGADO | APAGADO | APAGADO | APAGADO |
Luego abra la porción uno/uno.ino del código en el editor IDE Arduino y cargue como de costumbre.
Debería poder probar este lado de las cosas, abriendo el Serial Monitor y configurando las opciones para:
115200 baudiosLuego escriba un comando como:
>4a
Si realmente desea depurar el código, debe encontrar algunas define en la línea 10 y 11 del código UNO. El uno en la línea 10 emitirá un texto similar al de abajo.

El otro define (en la línea 11) no hará nada, y simplemente activará el relé. Desea la línea 11 definida cuando finalice el proyecto.
Establezca los interruptores de inmersión como se muestra a continuación.
| Alfiler | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| Estado | APAGADO | APAGADO | APAGADO | APAGADO | EN | EN | EN | APAGADO |
Para esta porción, debe abrir el código ESP/ESP.ino en el IDE Arduino y cambiar el tipo de placa a la Junta Generic ESP8266 .
Cambie el "tamaño de flash" del programa para que sea 4M (3M SPIFFS) : esto se separará parte del código para que podamos caber en nuestros data/ carpeta. Encontrará nuestro código de sitio web en la carpeta de datos, que queremos poner todo en el ESP. A continuación se muestra una captura de pantalla de nuestra configuración.

En primer lugar, cargue el código como de costumbre. Si presiona la carga y encuentra que el IDE no está cargando, o obtiene alguna salida como esta:

Esto solo significa que el IDE está esperando que el ESP reinicie. Presione el botón RESET en el tablero cuando vea el IDE que muestra este mensaje. Debería cargar sin problemas.
Una vez que se realice el código, use la ESP Data Upload Tool (como se resalta en la imagen de arriba) para cargar nuestro sitio web en el ESP. Tendrá que presionar el botón de reinicio similar al antes. Una vez que se programa, puede apagar el Switch -Switch 7 y abrir el monitor en serie para ver qué salida tiene el ESP cuando se conecta al punto de acceso "Controlador de retransmisión" y navegar a http://192.168.4.1, o simplemente continúe.
Similar al código UNO, tenemos otro montón de define para la depuración. Puede habilitar o deshabilitar los mensajes de depuración de esta manera.
Algunas cosas importantes para recordar, al cambiar el código:
Flash size igual. Si lo cambia, deberá volver a cargar el código y el sitio web.Una vez que se programen las dos mitades, finalmente cambie los interruptores DIP a la siguiente.
| Alfiler | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| Estado | EN | EN | APAGADO | APAGADO | APAGADO | APAGADO | APAGADO | APAGADO |
Esto conectará la serie del ESP con la serie de la UNO. Ahora solo funciona con USB y el monitor en serie no estará conectado a nada.
Abra el wifi de su teléfono y reinicie el XC4411; debe encontrar que hay una nueva red inalámbrica llamada "Controlador de relevos". Conéctese a él, luego abra el navegador y vaya a: http://192.168.4.1

El sitio web no es mucho para mirar, pero funciona. Debería poder presionar los botones y encontrar los relés activados y apagados. Si sabe cómo hacer que un sitio web se vea bien y quiere tener una foto de hacer que esto se vea mejor, tenga una oportunidad para desarrollar una nueva data/ carpeta y enviarlo en la pestaña Problemas de GitHub, o bifurcar el repositorio y enviar una solicitud de extracción.
Si encuentra que algunas cosas no funcionan, conecte su computadora a la red (alternativamente, conecte el ESP a su red doméstica) y abra el sitio web en su computadora. Debería poder abrir la "Herramienta de Inspector Chrome" y encontrar una consola que genere mensajes.
Sin embargo, una forma segura de probar lo que está sucediendo es conectar el monitor en serie al dispositivo (con los interruptores de inmersión correspondientes a la sección que está probando) y probar cada parte del código que lo necesite.
>3a enciende el relé 3, y >3d apaga el relé 3.>1a en el monitor serial. Obviamente, el sitio web necesita trabajo, pero cualquier número de cambios puede ocurrir en este proyecto. Todavía debería tener algunos alfileres gratis y todo lo que tendrá que hacer para agregar algo es:
A continuación se presentan algunos segmentos de código para explicar.
En el sitio web hay un botón que usamos para activar el relé, es un elemento simple <button id='3' class='relay'></button> que tiene la identificación de qué pin es (no del todo, pero lo suficientemente cerca para este ejemplo).
Luego tenemos algún código JavaScript (simplificado):
$ ( "button.relay" ) . on ( "click" , function ( ) {
//do this when a button with the class 'relay' is clicked
} ) ; En esta función fetch() una nueva página web, que apunta /relay , y si el estado de retorno está bien, agregamos la clase "ISON" al botón:
fetch ( "relay?relay=3&mode=activate" ) . then ( response => {
if ( response . status == 200 ) {
button . addClass ( "isOn" ) ;
}
} ) ; Esto significa que el sitio web intentará acceder a una nueva página web en http://192.168.4.1/relay con los parámetros de ?relay=3&mode=activate . Veamos el código ESP:
// firstly, set the handler function in the setup():
server.on( " /relay " , handleRelayCommand);
// ... later ...
void handleRelayCommand (){
String relayNumber = server. arg ( " relay " );
String mode = server. arg ( " mode " );
// ...
} The Command server.arg("relay"); Simplemente obtiene el argumento en el que se ha establecido el "relé". En nuestra solicitud original:? ?relay=3&mode=activate Esta será la cadena "3" . Del mismo modo, el argumento de modo se establece en una cadena "activate"
Luego, simplemente hacemos algunos cheques, encontramos a qué relé corresponde el "3" y si "activate" significa que estamos encendiendo el relé y lo enviamos como un comando a la UNO:
Serial.write( ' > ' ); // start of command
Serial.write( ' 3 ' ); // relay 3
Serial.write( ' a ' ); // activate, or turn onEsto será interpretado por la UNO, que luego encenderá el relé:
En el Uno.ino (nuevamente, simplificado):
while (Serial.read() != ' > ' ) // do nothing until we get '>'
continue ;
char relay = Serial.read(); // next character is relay;
char mode = Serial.read(); // next character is mode;
// ... do some checks, turn char into int, see if it's valid, etc.
digitalWrite (theRelay, theMode); Una cosa a tener en cuenta es que el flujo de datos es solo una dirección en este código, no hay Serial.write() en la uno para ser Serial.read() por el esp.