Novedades

Tutorial Ethernet Shield y Arduino

Tutorial Ethernet Shield y Arduino

En este tutorial se realizará un ejemplo sencillo  para entender el funcionamiento del Shield Ethernet, a través del cual accederemos a nuestro Arduino desde internet, controlaremos las salidas digitales y visualizaremos las entradas digitales y analógicas desde un navegador web.

Shield Ethernet

Con este shield ethernet se abren innumerables opciones para controlar tu Arduino a través de Internet o de la LAN de tu casa. Domótica, automatización, Internet de las cosas (IoT), control y monitoreo remoto, etc, son algunos de los campos donde se puede utilizar este shield. Es compatible con el Arduino Uno y Mega, además las librerías Ethernet y SD vienen incluidas en el IDE de Arduino, por lo que no hay necesidad de descargarlas.

El shield posee un conector RJ45 estándar para ethernet. El botón de reset reinicia tanto el shield como el Arduino. Una gran ventaja de este shield es que es apilable, por lo que podrás disponer de todos sus pines en otros shields.

 
Se encuentra bastante documentación y ejemplos en internet, para desarrollar este tutorial partimos de la documentación oficial de ethernet shield:

                https://www.arduino.cc/en/Reference/Ethernet

Para realizar el Tutorial necesitamos un Arduino Uno, un Shield Ethernet, potenciometros, Leds, protoboard, cables DuPont y un cable Ethernet para conectarnos a nuestro Modem, router o switch

La conexión consiste en solo poner el shield sobre el Arduino y conectar el cable ethernet a un router o modem, y con eso estamos listo para programar.

 

 Arduino y Ethernet Shield

Para alimentarlo se lo puede hacer con el cable USB conectado a la PC, pero se recomienda usar una fuente externa, sobre todo si después se va a trabajar con más módulos.


Probando el ejemplo Web Server de la librería Ethernet de Arduino.


Para ver si todo está bien, y nuestro shield, router y Arduino en conjunto trabajan bien, cargamos el ejemplo que tiene la librería ethernet, para esto en nuestro IDE Arduino , vamos a Archivo>Ejemplos>Ethernet>WebServer.

 

Ejemplo Web Server

   

Antes de grabar verificar si la IP es la correcta para la red que tienen. Sino cambiar por otra IP que no esté duplicada y pertenezca a la misma puerta de enlace.

Después de cargar el sketch, abrimos un navegador web como Chrome o Mozilla y en la barra de direcciones digitamos la IP de nuestro Arduino.

 Ejemplo Web Server Navegador

 

Una vez verificado que todo está bien, empezamos a programar un sketch más complejo.


Controlando entradas y salidas del Arduino desde un navegador web

En este ejemplo se visualizaran dos entradas analógicas (A0 y A1) y dos digitales (4 y 5) desde un navegador web provenientes de potenciómetros y siwtchs respectivamente pero las entradas puedes ser de algún sensor o modulo, tambien desde el navegador controlaremos dos salidas digitales que podrían estar conectados a dos leds u otros periféricos.

El sketch es el siguiente:

  

#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,1,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>Naylamp Mechatronics</title>");
            client.println("</head>");
            client.println("<body>");
            client.println("<div style='text-align:center;'>");
            client.println("<h1>NAYLAMP MECHATRONICS</h1>");
            client.println("<h2>Entradas Analogicas</h2>");
            client.print("AN0="); client.println(analogRead(0));
            client.print("<br />AN1=");client.println(analogRead(1)); 
            client.println("<h2>Entradas Digitales</h2>");
            client.print("D4=");client.println(digitalRead(4));
            client.println("<br />D5=");client.print(digitalRead(5));
            client.println("<br /><br />");
            client.println("<a href='http://192.168.1.177'>Actualizar entradas</a>");
            client.println("<h2>Salidas Digitales </h2>");        
            client.println("Estado del LED 1 = ");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 LED 2 = ");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='http://www.naylampmechatronics.com/'>www.naylampmechatronics.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
  }
  
}

Ahora expliquemos lo principal del código:

  

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };//Ponemos la dirección MAC de la Ethernet Shield
IPAddress ip(192,168,1,177); //Asignamos  la IP al Arduino
EthernetServer server(80); //Creamos un servidor Web con el puerto 80 que es el puerto HTTP por defecto

Aquí configuramos nuestro Mac y la IP, podemos poner cualquier valor, evitando duplicar con algún otro equipo conectado a nuestra red, también se crea el servidor que escuchará las conexiones entrantes por el puerto especificado.

En void setup () inicializamos el Shield Ethernet y reportamos por el puerto serial, aquí también se configuran los pines de entrada y salida.

En el void loop() estamos constantemente verificando si hay alguna conexión de un cliente.

Si existe una conexión guardamos la petición HTTP en una cadena y después lo analizamos para verificar si existen parámetros enviados desde el navegador con el método GET, esto se hace de la siguiente manera.


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";    }

De esta forma se recibe y analizan los datos provenientes desde el navegador (para este caso GET /?Data=1).

Después de recibir y terminar la etición HTTP se envía todo el código HTML que es lo que el navegador mostrara a los usuarios, aquí se envían los valores de las entradas analógicas y digitales o cualquier variable que se desea enviar

Para enviar el código HTML se usa la función client.println() , esta función trabaja igual que la función Serial.println() del puerto serial, por lo que se pueden enviar variables o cadenas como si se estuviera haciendo una comunicación serial.

Una vez programado y cargado el sketch a nuestro Arduino, abrimos un navegador web de nuestra laptop, celular o tablet, y  escribimos en la barra de direcciones la IP de nuestro Arduino.

  

Servidor Web y Arduino navegador

  
Modificando el código HTML se pueden lograr diseños da páginas más complejas, se pueden agregar imágenes, cambiar la fuente y tamaño del texto, agregar tablas, pero esto dependerá de la habilidad de programación en HTML que tengamos.

   

Pueden adquirir los materiales usados en este tutorial en nuestra tienda

Shield Ethernet

Arduino Uno R3

Arduino Mega 2560 R3

13 Comments

    • Avatar
      Rafael Gold
      abr 18, 2018

      Ethernet Shield: La conexión a Ethernet solo trabaja con algunos cables y switches, pareciera que la señal Ethernet es débil, pues no funciona con cables de más de 2 metros de longitud.

    • Avatar
      Israel Barreras
      jul 5, 2018

      Este es un tutorial para controlar y visualizar el arduino a través de la red local, no de internet, deberían cambiar el nombre.

      • Avatar
        Julio C Spinelli
        sep 26, 2020

        Para poder ver a tu arduino desde Ethernet, cambia el puerto, y en lugar de 80 usa algun otro, digamos 4000, luego en tu router de entrada indicale al router que haga un "port forwarding" al ip fijo donde pusiste a tu Ehternet local. De esta forma el router cada vez que vea un http dirigido a este puerto, sabra mandarlo especificamente a la arduino. Si en tu casa no tenes un ip fijo, desde Ethernet no vas a saber a donde dirigir tu http con es puerto asignado, pues no sabras que ip te han asignado en ese momento. Para esto, escribi un codigo en tu Arduino para que lea el ip de tu red (whatsmyip) y despues se comunique cada vez que tu ip cambia con algun sitio como http://www.pasted.co/ y escriba ahi a tu ip del momento. Si tenes un sitio de ftp, podes generar facilmente un archivo con el nuevo ip. Despues vos lees tu ip en ese sitio y lo usas para comunicarte con tu arduino ethernet.

    • Avatar
      Gouh
      sep 7, 2018

      Disculpa amigo como puedo visualizar imágenes en la web con arduino ethernet shield desde si sd card....le agradecía su ayuda..

      • Avatar
        Julio Spinelli
        sep 26, 2020

        Arduino no es una buena seleccion para hacer esto, es muy lenta, podrias hacerlo pero va a tardar mucho. Primero tenes que adquirir la imagen y despues enviar el archivo al servidor de Ethernet utilizando el protocolo http para imagenes. Yo lo haria enviando la imagen al servidor con ftp. Igual va a tardar mucho.

    • Avatar
      Maicol
      oct 31, 2018

      Amigo por lo q puedo notar, el codigo si funciona para ser usado con internet, esta vez lo esta usando de manera local pero se cambia el ip por la ruta web o dominio y se puede hacer lo mismo

      • Avatar
        Hugo Molina
        may 31, 2019

        Si es correcto solo direcciona tu modem/router el servicio web a la ip de la placa arduino, es decir abre el puerto del modem para que cuando haya una petición de internet, el modem revise la petición y la envie al arduino

    • Avatar
      HUGO DAVILA
      feb 15, 2019

      Estimados tengo un medidor de energia que tiene puerto de red RJ45,por el cual necesito scar la informcion atravez de u modulo GPRS y poder visualizar la data en forma remota desde mi celular, con acceso web, ya que el medidor tiene acceso a web browser via IP. Muchas gracias por vuestras sugerencias. Saludos

    • Avatar
      robin
      mar 12, 2019

      quisiera saber si existe alguna forma de conectar arduino a red local sin utilisar un adaptador ethernet shield

      • Avatar
        yeison aristizabal
        sep 10, 2019

        Puedes usar un modulo de wifi

    • Avatar
      jose
      mar 3, 2020

      he probado la aplicacion propuesta y encuentro un problema al quitar la alimentacion se pierde el programa no recinializa,se reciniliciaria si instalamos una SD

      • Avatar
        Julio C Spinelli
        sep 26, 2020

        Te sugiero que leas este link, pues no deberia pasar, lo que preguntas no es tema del programa sino del hardware. Podes tener una mala arduino. https://forum.arduino.cc/index.php?topic=195465.0

Leave a Reply

* Name:
* E-mail: (Not Published)
   Website: (Site url withhttp://)
* Comment:
Type Code