05-03-2021, 22:13
Saludos...
Os voy a mostrar como encender y apagar un led vía wifi desde una página web en un navegador (desde el pc, tablet o móvil)
Materiales utilizados
Conexiones
Lo que vamos a necesitar son dos clases de código. Por una parte una página web que estará en internet en la que tendremos la orden de encender o apagar el led y el código para la placa arduino que recibirá la orden de encender o apagar el led y le mandará unas instrucciones al navegador.
Código página web:
Este codigo lo que hace es crear un formulario con dos opciones, encendido o apagado y lo envía, por el método get, a la dirección de nuestro módulo HLK-RM04
Código para la placa Arduino:
Este script lo que hace,entre otras cosas, es inicializar una variable, cuyo valor lo recibe vía wifi, si el valor es 1 enciende el led, si el valor el 2 lo apaga. Además envía una instrucción javascript al navegador para que vuelva a mostrar el interruptor.
Como veréis, cambiando sólo un poco el código se puede hacer para que en vez de encender un led active un relé, por ejemplo, y de esta manera activar cualquier dispositivo que esté conectado a la red eléctrica y todo ello desde un móvil o tablet y cualquier parte del mundo porque funciona vía web.
.
Os voy a mostrar como encender y apagar un led vía wifi desde una página web en un navegador (desde el pc, tablet o móvil)
Materiales utilizados
- Una placa Arduino (yo he utilizado la Uno).
- 4 Cables dupont.
- Un led color rojo.
- Un módulo wifi HLK-RM04.
Conexiones
- Pin Rx del módulo al pin Tx de arduino
- Pin Tx del módulo al pin Rx de arduino
- Pin 5V del módulo al pin 5V de arduino
- Pin GND del módulo al pin GND de arduino
- Polo positivo del led al pin 13 de arduino
- Polo negativo del led a GND de arduino
Lo que vamos a necesitar son dos clases de código. Por una parte una página web que estará en internet en la que tendremos la orden de encender o apagar el led y el código para la placa arduino que recibirá la orden de encender o apagar el led y le mandará unas instrucciones al navegador.
Código página web:
Código:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form onsubmit="return enviar(this)" method="get" action="http://192.168.1.254:8080/blink" data-ajax="false">
<fieldset data-role="controlgroup">
<legend>Interruptor:</legend>
<label for="encender">Encender</label>
<input type="radio" name="f" id="encender" value="1">
<label for="apagar">Apagar</label>
<input type="radio" name="f" id="apagar" value="2">
</fieldset>
<input type="submit" data-inline="true" value="Ejecutar" data-theme="b">
</form>
</div>
</div>
</body>
</html>
Este codigo lo que hace es crear un formulario con dos opciones, encendido o apagado y lo envía, por el método get, a la dirección de nuestro módulo HLK-RM04
Código para la placa Arduino:
Código:
const int ledPin = 13;
void setup() {
Serial.begin(57600);
pinMode(ledPin, OUTPUT);
}
int f = 0;
void loop() {
boolean has_request = false;
String in = "";
if (Serial.available()) {
in = "";
while (true) { // should add time out here
while (Serial.available() == false) {}
in += (char)(Serial.read());
if (in.endsWith("\r\n\r\n")) {
has_request = true; break;
}
}
}
if (has_request) {
int i1 = in.indexOf("GET /blink?f="), i2;
if (i1 != -1) {
i2 = in.indexOf(" ", i1+13);
f = in.substring(i1+13, i2).toInt();
}
Serial.println("HTTP/1.1 200 OK");
Serial.println("Content-Type: text/html");
Serial.println("Connection: close"); // the connection will be closed after completion of the response
String sr = "<!DOCTYPE HTML>\n";
sr += "<html>\n";
sr += "<body onload='history.back();'>\n";
sr += "</body>";
sr += "</html>";
Serial.print("Content-Length: ");
Serial.print(sr.length());
Serial.print("\r\n\r\n");
Serial.print(sr);
has_request = false;
}
switch (f){
case 1:
digitalWrite(ledPin, HIGH);
break;
case 2:
digitalWrite(ledPin, LOW);
break;
f=0;
}
}
Este script lo que hace,entre otras cosas, es inicializar una variable, cuyo valor lo recibe vía wifi, si el valor es 1 enciende el led, si el valor el 2 lo apaga. Además envía una instrucción javascript al navegador para que vuelva a mostrar el interruptor.
Como veréis, cambiando sólo un poco el código se puede hacer para que en vez de encender un led active un relé, por ejemplo, y de esta manera activar cualquier dispositivo que esté conectado a la red eléctrica y todo ello desde un móvil o tablet y cualquier parte del mundo porque funciona vía web.
.