Arduino Webserver Control.

En este tutorial voy a explicar como obtener datos con arduino de pines digitales y analogico, y controlar pines digitales desde el navegador web. Utilizaremos el módulo W5100 Ethernet y HTML.

Materiales:

• Arduino UNO.
• Módulo Ethernet W5100.
• 2 Potenciómetros (Resistencias variables) de 1Kohm.
• Cables varios.
• Buzzer.
• Led Rojo.
• Resistencia de 330 ohms.
• Cable USB.
• Pulsador con retención.
• Módulo relé.
• Cable USB (de un mouse viejo que no funcione, lo cortaremos).
• Cable con toma macho de 220VCA tambien funciona para conexiones de 110VCA.
• Toma de pared o de tablero.
• Un sensor mágnetico de puerta/ventana (los que se utilizan en alarmas).

Esquema de conexiones:

El módulo W5100 es un Shield de arduino. Lo que significa que este se coloca sobre el arduino UNO y replica todos sus pines en su superficie, por lo que es igual el funcionamiento de cada uno de los pines digitales y analogicos.

En la primer imagen observamos el módulo Ethernet Shield W5100 y en la segunda imagen lo obsrvamos colocado en el arduino UNO.

Entradas Analógicas:

Conectamos los dos potenciómetros a los pines analógico 0 y 1 respectivamente, al cual llamaremos Temperatura (0) y Humedad (1). Obviamente estas son entradas las cuales veremos en el navegador como valores entre 0 y 1023 de acuerdo a la posición del potenciómetro.
Aclaración: El nombre temperatura y humedad se dá como ejemplo de lo que podría representar en una casa o proyecto de adquisición de datos. Con el sensor adecuado tener en cuenta la conversión y utilización de los mismos.

Entradas Digitales:

El pin digital 4 lo conectamos al botón con retención.
El pin digital 5 lo conectamos al sensor magnético de puerta.

Salidas Digitales:

El pin digital 2 lo conectamos al módulo relé.
El pin digital 3 lo conectamos al buzzer y al led con la resistencia.

1. Código para el Arduino:

Este código hace que el Arduino envíe y reciba los datos al navegador por HTML.

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };//Ponemos la dirección MAC de la Ethernet Shield
IPAddress ip(192,168,0,177); //Asignamos  la IP al Arduino
EthernetServer server(80); //Creamos un servidor Web con el puerto 80 que es el puerto HTTP por defecto
 
int LED1=2; //Pin del LED 1
int LED2=3; //Pin del LED 2
String estado1="OFF"; //Estado del Led 1 inicialmente "OFF"
String estado2="OFF"; //Estado del Led 2 inicialmente "OFF" 

void setup()
{
  Serial.begin(9600);
 
  // Inicializamos la comunicación Ethernet y el servidor
  Ethernet.begin(mac, ip);
  server.begin();
  
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
  
  pinMode(LED1,OUTPUT);
  pinMode(LED2,OUTPUT);
  pinMode(4,INPUT);
  pinMode(5,INPUT);
  digitalWrite(LED1,HIGH);
  digitalWrite(LED2,HIGH);
}
 
void loop()
{
  EthernetClient client = server.available(); //Creamos un cliente Web
  //Verificamos si se detecte un cliente a través de una petición HTTP
  if (client) {
    Serial.println("new client");
    boolean currentLineIsBlank = true; //Una petición HTTP acaba con una línea en blanco
    String cadena=""; //Creamos una cadena de caracteres vacía
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();//Leemos la petición HTTP carácter por carácter
        Serial.write(c);//Visualizamos la petición HTTP por el Monitor Serial
        if(cadena.length()<50)
        {
                    cadena.concat(c);//concatenmos el String 'cadena' con la petición HTTP (c). De esta manera convertimos la petición HTTP a un String
           
                   //Ya que hemos convertido la petición HTTP a una cadena de caracteres, ahora podremos buscar partes del texto.
                   int posicion=cadena.indexOf("Data="); //Guardamos la posición de la Palabra "Data=" a la variable 'posicion'
           
                    if(cadena.substring(posicion)=="Data=1")//Si en la posición hay "Data=1"
                    {
                      digitalWrite(LED1,LOW);
                      estado1="ON";
                    }
                    else if(cadena.substring(posicion)=="Data=2")//Si en posición hay "Data=2"
                    {
                      digitalWrite(LED1,HIGH);
                      estado1="OFF";
                    }
                    else if(cadena.substring(posicion)=="Data=3")//Si en la posición hay "Data=3"
                    {
                      digitalWrite(LED2,LOW);
                      estado2="ON";
                    }
                    else if(cadena.substring(posicion)=="Data=4")//Si en la posición hay "Data=4"
                    {
                      digitalWrite(LED2,HIGH);
                      estado2="OFF";
                    } 
                          
        }
        //Cuando reciba una línea en blanco, quiere decir que la petición HTTP ha acabado y el servidor Web está listo para enviar una respuesta
        if (c == 'n' && currentLineIsBlank) {
 
            // Enviamos al cliente una respuesta HTTP
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html");
            client.println();
 
            //Página web en formato HTML
            client.println("<html>");                 
            client.println("<head><title>Arduino Webserver Control</title>");
            client.println("</head>");
            client.println("<body>");
            client.println("<div style='text-align:center;'>");
            client.println("<h1>Arduino Webserver Control</h1>");
            client.println("<h2>Entradas Analogicas</h2>");
            client.print("Temperatura="); client.println(analogRead(0));
            client.print("<br />Humedad=");client.println(analogRead(1)); 
            client.println("<h2>Entradas Digitales</h2>");
            client.print("Boton Emergencia=");client.println(digitalRead(4));
            client.println("<br />Puerta=");client.print(digitalRead(5));
            client.println("<br /><br />");
            client.println("<a href='http://192.168.0.177'>Actualizar entradas</a>");
            client.println("<h2>Salidas Digitales </h2>");        
            client.println("Estado del Luz = ");client.print(estado1);            
            client.println("<br />");            
            client.print("<button onClick=location.href='./?Data=1'>ON</button>");           
            client.print("<button onClick=location.href='./?Data=2'>OFF</button>");
            client.println("<br /><br />");
            client.println("Estado del Alarma = ");client.print(estado2);            
            client.println("<br />");            
            client.print("<button onClick=location.href='./?Data=3'>ON</button>");           
            client.print("<button onClick=location.href='./?Data=4'>OFF</button>");
            client.println("<br /><br />");
            client.println("<a href='https://elprofealegria.com/'>elprofealegria.com</a>");
            client.println("<br /><br />");             
            client.println("</b></body>");
            client.println("</html>");
            break;
        }
        if (c == 'n') {
          currentLineIsBlank = true;
        }
        else if (c != 'r') {
          currentLineIsBlank = false;
        }
      }
    }
    //Dar tiempo al navegador para recibir los datos
    delay(1);
    client.stop();// Cierra la conexión
  }
  
}

Este código se leerá en el navegador web pulsando generalmente F12 se abre el visor de código..

2. Prueba del sistema:

En el navegador escribimos la direccion IP que tiene establecida el código de arduino. En nuestro caso 192.168.0.177.

Y ya tendremos acceso al servidor web de arduino y poder realizar las pruebas.

Notas adicionales:

Este es un ejemplo el cual puede variar y modificarse de acuerdo a tus necesidades o proyecto que quieras realizar.

Espero te sirva de guía para realizar tu proyecto.