¿Todos queremos automatizar un proceso cierto? Todos buscamos la forma de mejorar nuestra calidad de vida empleando la tecnología. Pero en muchas ocasiones los precios van más allá de nuestro presupuesto, y allí es donde entra nuestro amigo Arduino.
Somos inteligentes, sabemos programar y somos frikis .Partiendo de estas premisas y debido a que llegaste a mi sitio web, es muy probable que tengas un Arduino y que estés buscando la forma de sacarle provecho. Todos hicimos búsquedas similares, en mi caso el primer proyecto que me interesó fue el de un servidor web de domotica para controlar diferentes puntos del hogar. El único problema fue que cada proyecto ejemplo que encontraba era más feo que el anterior.
Debido a la memoria reducida de nuestros Arduinos, estos servidores generalmente emplean únicamente HTML plano, dando un acabado muy Old School a los servidores; por ello me pregunté: ¿Por qué no hago entonces un servidor web estéticamente agradable y funcional? Y Aquí es donde empieza nuestro post actual.
¿Qué necesitamos para el prototipo?
- Arduino UNO
- Ethernet shield
- Un protoboard
- Cable para el proto
- 4 LEDs y resistencias de 220Ohm
- Arduino IDE
- Router
Explicación del proyecto
¿Qué tal suena esto? Que vayas saliendo del trabajo o de la universidad, saques tu teléfono y mientras vas en camino enciendes tu aire ¿Atractivo no?
Bien, empecemos.
Código del Arduino:
#include <SPI.h>
#include <Ethernet.h>
//Servo microservo;
//int pos = 0;
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //Direccion Fisica MAC
byte ip[] = { 192, 168, 1, 50 }; // IP Local que usted debe configurar
byte gateway[] = { 192, 168, 1, 254 }; // Puerta de enlace
byte subnet[] = { 255, 255, 255, 0 }; //Mascara de Sub Red
EthernetServer server(80); //Se usa el puerto 80 del servidor
String readString;
void setup() {
Serial.begin(9600); // Inicializa el puerto serial
while (!Serial) { // Espera a que el puerto serial sea conectado, Solo necesario para el Leonardo
;
}
pinMode(2,OUTPUT); // Se configura como salidas los puertos del 2 al 6
pinMode(3,OUTPUT);
pinMode(4, OUTPUT);
pinMode(5,OUTPUT);
// pinMode(6,OUTPUT);
// microservo.attach(7); // Se configura como Servo el Puerto 7
Ethernet.begin(mac, ip, gateway, subnet); // Inicializa la conexion Ethernet y el servidor
server.begin();
Serial.print("El Servidor es: ");
Serial.println(Ethernet.localIP()); // Imprime la direccion IP Local
}
void loop() {
// Crea una conexion Cliente
EthernetClient client = server.available();
if (client) {
while (client.connected()) {
if (client.available()) {
char c = client.read();
//Lee caracter por caracter HTTP
if (readString.length() < 100) {
//Almacena los caracteres a un String
readString += c;
}
// si el requerimiento HTTP fue finalizado
if (c == 'n') {
Serial.println(readString); //Imprime en el monitor serial
client.println("<html><head>");
//client.println("<meta http-equiv='content-type' content='text/html; charset=utf-8' />");
// client.println("<script src='http://domoticaobertonica.000webhostapp.com/js/jquery.min.js'></script>");
client.println("<script src='http://domoticaobertonica.000webhostapp.com/js/config.js'></script>");
client.println("<script src='http://domoticaobertonica.000webhostapp.com/js/skel.min.js'></script>"); // ESTE ES EL HOMBRE QUE ACTIVA EL TAMAÑO CORRECTO MOVIL
client.println("<script src='https://use.fontawesome.com/d6622199c5.js'></script>");
client.println("<link rel='stylesheet' href='http://domoticaobertonica.000webhostapp.com/CSS/skel-noscript.css' />");
client.println("<link rel='stylesheet' href='http://domoticaobertonica.000webhostapp.com/CSS/style.css' />");
client.println("<link rel='stylesheet' href='http://domoticaobertonica.000webhostapp.com/CSS/style-mobile.css' /></head><body><br/>");
client.println("<div class="container"><div class="row">");
//cuadro 1
client.println("<div class="4u"><section class="box box-style1"><span class="icon featured-icon icon-lightbulb"></span><h3>Luz del cuarto Principal</h3>");
client.println("<p><br><a href="/?B1"" class="button button-small">Encender rojo</a></span>");
client.println("<p><br><a href="/?B2"" class="button button-small">Apagar Rojo</a></span>");
client.println("<p><br><a href="/?B3"" class="button button-small">Encender Azul</a></span>");
client.println("<p><br><a href="/?B4"" class="button button-small">Apagar Azul</a></span>");
client.println("<p><br><a href="/?B5"" class="button button-small">Navidad</a></span>");
client.println(" <p><a href="/?B6"" class="button button-small">Apagar Todos</a></span></p></section></div>");
client.println("</div></div></article></div></body></html>");
delay(1);
//detiene el cliente servidor
client.stop();
//control del arduino si un boton es presionado
if (readString.indexOf("?B1") >0){
digitalWrite(2, HIGH);
}
if (readString.indexOf("?B2") >0){
digitalWrite(2, LOW);
}
if (readString.indexOf("?B3") >0){
digitalWrite(3, HIGH);
}
if (readString.indexOf("?B4") >0){
digitalWrite(3, LOW);
}
if (readString.indexOf("?B5") >0){
digitalWrite(2, HIGH);
delay(1000);
digitalWrite(3, HIGH);
delay(1000);
digitalWrite(4, HIGH);
delay(1000);
digitalWrite(5, HIGH);
}
if (readString.indexOf("?B6") >0){
digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
digitalWrite(5, LOW);
}
// Limpia el String(Cadena de Caracteres para una nueva lectura
readString="";
}
}
}
}
}
Les recomiendo que utilicen el código a manera de referencia, si lo quieren emplear descarguen el original ya que es probable que algún fragmento de este haya sido modificado por Blogger.
Recuerda que la configuración de red debe ser modificada en el código, empleando el segmento de red adecuado a tu LAN. Y también es importante que noten, que estoy haciendo referencias a ficheros CDN de JQUERY y varias hojas de estilo. Todas están hospedadas en servidores personales, por ello es probable que en algún punto estén caídas. Por ello también dejo el pack con los estilos y el JQUERY para que lo puedas hospedar en tu servidor y las referencias las puedas modificar.
¿Todo listo?
Ciertamente lo está el resultado es el siguiente:
Sin embargo, tener acceso fuera de la LAN, necesitas hacer un foward del puerto 80 (en caso que uses el http por defecto) a la IP local del Arduino. Cosa que puedas entrar desde un navegador externo ingresando la IP publica y el router automáticamente haga el request al arduino. Tambien puede resultar practico configurar un DNS dinámico en red, de manera que sea un poco más cómodo el acceso mediante un nombre fácil de recordar y no una IP.
El esquema es el siguiente:
Les dejo un vídeo demostrando la funcionalidad y como siempre, cualquier duda la pueden dejar en los comentarios.
