[Arduino 06] Encender - Apagar un led con Ethernet Shield Arduino y creación de un servidor web con html

En este tutorial mostrare como encender/apagar un led desde un servidor web, para ello configuraremos la shield ethernet y aprenderemos a crear un servidor web con conocimientos básicos en html.

Vídeo

En el siguiente vídeo se puede apreciar el servidor web y también como al presionar en los botones de la pagina se enciende y apaga el LED conectado al arduino.

Fotos del proyecto

Aquí se presentan unas fotos donde se puede ver el Arduino, sobre el se encuentran la shield Ethernet y la ProtoShield. Cuando se tomaron las fotos ya funcionaba el proyecto y se apreciar también que esta encendido y otro momento esta apagado el LED.

En la siguiente imagen se muestra el circuito sin protoshield

Objetivos

1. Lograr nuestra primera conexión con la Shield Ethernet
2. Aprender a configurar la Ethernet Shield
3. Subir un servidor web con Ethernet Shield
4. Crear un servidor web con quackit
5. Lograr conocimientos básicos en html

Materiales:

• Arduino UNO/Mega y su cable USB
• Ethernet Shield
• Router ó Switch con su respectivo cable con conector RJ45
• Resistencia de 220 ohm
• LED
• Cables ó conectores
• Protoboard
• Cargador USB 5v/100mA (opcional)

1.-Conexión de hardwares

1. Montar ethernet shield sobre Arduino.
2. Conectar por medio del cable con conectores RJ45 el Router y la ethernet shield.
3. Conectar arduino por medio de su USB a la computadora.

Con esto esta lista la conexión entre arduino, Ethenret Shield y su Router o Switch. Ahora se puede comenzar a programar

2.-Armado del circuito

El circuito es muy simple basta con conectar desde el pin 8 una resistencia de 220 ohm y en serie un led, para terminar el circuito conectando a tierra (GND).

3.-Buscar una IP para el servidor web

Una vez conectado todo como se mencionó anteriormente se puede comenzar a programar, pero antes de esto necesitamos tener una IP para el servidor web que subiremos con la shield ethernet, para ello iremos a inicio y escribiremos "cdm" (sin comillas, todo lo que se mencione sera sin comillas), luego de eso en consola se escribe "ipconfig", aquí tienen que buscar su IPv4 para el "adaptador de LAN inalámbrico" en el caso que estén conectados a su router por wifi, en mi caso se puede ver que el IPv4 para el adaptador LAN inalámbrico es 192.168.1.6.

3.1.-Pasos a seguir para obtener la IP nuestra computadora y la IP para el servidor web 

Primero vamos a inicio y escribimos "cmd" en el buscador que aparece en inicio

En consola escribimos "ipconfig"

Si estamos conectados por Wifi buscamos el IPv4 del adaptador de LAN inalámbrica

Una vez que tenemos nuestra IPv4 que en mi caso es 192.168.1.6 tenemos que buscar un IP para el web server que subiremos con la ethernet shield, esto lo haremos buscando una ip que este desocupada, para ello iremos nuevamente a inicio, escribiremos "cmd" y en consola escribiremos ping y escribiremos la IPv4, pero cambiaremos el ultimo numero (en mi caso es 6) por un numero entre 1 y 254 

Si nos entrega un mensaje como el que se ve en la imagen de abajo (nos dice que el host de destino es inaccesible debido a que nadie esta usando la IP que estoy probando)

Ahora que tenemos una IP que esta desocupada (192.168.1.7 que solo sirve para mi caso, ustedes tendrán que buscar la suya) podemos comenzar a programar y crear el servidor web.

4.-Programación Arduino - Ethernet Shield

El código que utilice para este proyecto es el siguiente:

#include <SPI.h> //Aqui incluimos la libreria SPI
#include <Ethernet.h> //Aqui incluimos la libreria Ethernet
byte mac[]={0xDE,0xAD,0xBE,0xEF,0xFE,0xED}; //Declaracion de la direccion MAC 
IPAddress ip(192,168,1,7); //Declaracion de la IP 
EthernetServer servidor(80); //Declaracion del puerto 80

int PIN_LED=8; //Aqui establecemos la variable PIN_LED como un valor entero
String readString=String(30); //lee los caracteres de una secuencia en una cadena.
//Los strings se representan como arrays de caracteres (tipo char)
String state=String(3);


void setup() {
  Ethernet.begin(mac, ip); //Inicializamos con las direcciones asignadas 
  servidor.begin(); //inicia el servidor
  pinMode(PIN_LED,OUTPUT);
  digitalWrite(PIN_LED,LOW);
  state="OFF";
}


void loop() {
  //EthernetClient Crea un cliente que se puede conectar a 
  //una dirección específica de Internet IP
  EthernetClient cliente= servidor.available(); 
  if(cliente) {
    boolean lineaenblanco=true; 
    while(cliente.connected()) {
      if(cliente.available()) {
        char c=cliente.read(); 
        if(readString.length()<30) {
          readString.concat(c);
          //Cliente conectado
          //Leemos petición HTTP caracter a caracter
          //Almacenar los caracteres en la variable readString
        } 
        if(c=='\n' && lineaenblanco) //Si la petición HTTP ha finalizado 
          {
          int LED = readString.indexOf("LED="); 
          if(readString.substring(LED,LED+5)=="LED=T") {
              digitalWrite(PIN_LED,HIGH);
              state="ON"; }
          else if (readString.substring(LED,LED+5)=="LED=F") {
              digitalWrite(PIN_LED,LOW); 
              state="OFF";
          }
    
//Cabecera HTTP estándar
cliente.println("HTTP/1.1 200 OK"); 
cliente.println("Content-Type: text/html"); 
cliente.println(); //Página Web en HTML 
cliente.println("<html>"); 
cliente.println("<head>"); 
cliente.println("<title>LED ON/OFF</title>"); 
cliente.println("</head>");
cliente.println("<body width=100% height=100%>"); 
cliente.println("<center>"); 
cliente.println("<h1>LED ON/OFF</h1>");
cliente.print("<br><br>"); 
cliente.print("Estado del LED: "); 
cliente.print(state); 
cliente.print("<br><br><br><br>"); 
cliente.println("<input type=submit value=ON style=width:200px;height:75px onClick=location.href='./?LED=T\'>"); 
cliente.println("<input type=submit value=OFF style=width:200px;height:75px onClick=location.href='./?LED=F\'>"); 
cliente.println("</center>"); 
cliente.println("</body>"); 
cliente.println("</html>"); 
cliente.stop();
//Cierro conexión con el cliente 
readString="";
}
}
}
}
}

4.1.- Probar el servidor web

Para probar el servidor web lo único que debemos hacer es ir a nuestro navegador favorito e ingresar la IP del servidor web que creamos en la barra de navegación. 

Aquí lo probé desde mi computadora

También lo probé desde mi celular (Sony C3) desde el navegador Chrome

Nota: No me cargaba el servidor web al ingresar en la IP en el buscador de iphone (safari) lo que hice para solucionar el problema fue ingresar la siguiente dirección  192.168.1.7/?LED=F (también pueden probar con la T de TRUE en vez de una F).

5.- Creación del servidor web mediante Quackit

Como se vio la etapa anterior ya habíamos creado el servidor web pero ahora mostrare como se hace un servidor web para que luego se pueda poner en el sketch (programa que hicimos) en Arduino IDE.

5.1.- Nociones básicas de HTML

Es importante entender estas cosas si quieres entender como se crea la pagina web

• Un documento html siempre comienza con <html> y termina con </html>
• <head>Aquí va la cabecera de la pagina</head>
• <title>Aqui va el titulo de la pagina (el titulo de la pestaña)</title>
• <body>siempre despues del head va el body (cuerpo de la pagina)</body>
• height="100%" widht="100%"  son dos características que se le asignaron a body, usar el 100% de la altura y anchura de la pagina
• <center>se centra todo el texto que este dentro de este enunciado</center>
• </br>genera un espacio de una linea
• <input (características)/> se añade "algo" puede ser botón, caja, imagen, contraseña, etc depende de su característica type="(aquí va ese algo)"
• (característica) onclick="location.href"="./?LED=T", redirección IP/?LED=T
  en mi caso redirecciona al siguiente enlace 192.168.1.7/?LED=T
• (característica) name="led on", nombre: led on
• (característica) type="button", tipo: botón
• (característica) value="ON", tiene valor ON

5.2.- Código HTML de nuestro servidor web
En la imagen se muestra el código html del servidor web

En esta otra imagen se muestra el mismo código con comentarios para que quienes no saben programar en html lo entiendan

6.- Forma alternativa de conectar el Arduino una vez programado

Una vez programado Arduino podemos alimentarlo por medio de un cargador de celular siempre y cuando suministre suficiente corriente y sea de 5V. Como se puede ver la imagen el arduino se alimenta por medio de su cable USB que se encuentra conectado al cargador USB de mi celular (Output 5V 1000mA) que esta conectado a la corriente alterna.

Nota: Es normal que la shield se caliente, se calentara conectado a la computadora o ya sea al cargador USB, como se puede ver en la ethernet shield hay un disipador ( esta pieza de metal sirve para irradiar el calor hacia el medio ambiente) y en esa zona se suele calentar, no hay por que preocuparse.

Seguiré haciendo mas tutoriales, pero volveré en un mes aproximadamente ya que tengo que terminar trabajos y prepararme para pruebas, para así cerrar el semestre en la Universidad

Muchas gracias por visitar mi blog y si tienen alguna consulta o consejo puede realizarlo por medio de este mismo blog o por medio de mi correo electrónico sebastian.latorre.cl@ieee.org