Artículos recientes

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

34 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
      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
      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
      Dallas second chance apartments
      dic 9, 2019

      Just saying thanks will not just be sufficient, for the fantasti c lucidity in your writing. I will instantly grab your rss feed to stay informed of any updates. Dallas second chance apartments

    • Avatar
      Denver limo
      dic 9, 2019

      Its a great pleasure reading your post.Its full of information I am looking for and I love to post a comment that "The content of your post is awesome" Great work. Denver limo

    • Avatar
      tree care blog
      dic 11, 2019

      I finally found great post here.I will get back here. I just added your blog to my bookmark sites. thanks.Quality posts is the crucial to invite the visitors to visit the web page, that's what this web page is providing. tree care blog

    • Avatar
      tree trimming
      dic 11, 2019

      The writer is enthusiastic about purchasing wooden furniture on the web and his exploration about best wooden furniture has brought about the arrangement of this article. tree trimming

    • Avatar
      tree trimming
      dic 11, 2019

      I think it could be more general if you get a football sports activity tree trimming

    • Avatar
      tree trimming
      dic 11, 2019

      I’m happy I located this blog! From time to time, students want to cognitive the keys of productive literary essays composing. Your first-class knowledge about this good post can become a proper basis for such people. nice one tree trimming

    • Avatar
      tree trimming
      dic 11, 2019

      I want you to thank for your time of this wonderful read!!! I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog! tree trimming

    • Avatar
      tree trimming
      dic 11, 2019

      The article posted was very informative and useful. You people are doing a great job. Keep going. tree trimming

    • Avatar
      Construction
      dic 15, 2019

      This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the good work. I have been meaning to write something like this on my website and you have given me an idea. Construction

    • Avatar
      Construction
      dic 15, 2019

      There's no doubt i would fully rate it after i read what is the idea about this article. You did a nice job.. Construction

    • Avatar
      Construction
      dic 15, 2019

      very interesting post.this is my first time visit here.i found so many interesting stuff in your blog especially its discussion..thanks for the post! Construction

    • Avatar
      Construction
      dic 15, 2019

      Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also. Construction

    • Avatar
      Construction
      dic 15, 2019

      You actually make it look so easy with your performance but I find this matter to be actually something which I think I would never comprehend. It seems too complicated and extremely broad for me. I'm looking forward for your next post, I’ll try to get the hang of it! Construction

    • Avatar
      Construction
      dic 15, 2019

      The material and aggregation is excellent and telltale as comfortably. Construction

    • Avatar
      Construction
      dic 15, 2019

      Nice knowledge gaining article. This post is really the best on this valuable topic. Construction

    • Avatar
      Construction
      dic 15, 2019

      My friend mentioned to me your blog, so I thought I’d read it for myself. Very interesting insights, will be back for more! Construction

    • Avatar
      Construction
      dic 15, 2019

      Hey There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll definitely return. Construction

    • Avatar
      Construction
      dic 15, 2019

      it's really cool blog. Linking is very useful thing.you have really helped Construction

    • Avatar
      Honaliyah Meyenjamin Review
      dic 18, 2019

      Just saying thanks will not just be sufficient, for the fantasti c lucidity in your writing. I will instantly grab your rss feed to stay informed of any updates. Honaliyah Meyenjamin Review

    • Avatar
      copyright laws in Nigeria
      dic 29, 2019

      Took me time to understand all of the comments, but I seriously enjoyed the write-up. It proved being really helpful to me and Im positive to all of the commenters right here! Its constantly nice when you can not only be informed, but also entertained! I am certain you had enjoyable writing this write-up. copyright laws in Nigeria

    • Avatar
      houston elderly care
      dic 29, 2019

      Just pure brilliance from you here. I have never expected something less than this from you and you have not disappointed me at all. I suppose you will keep the quality work going on. houston elderly care

    • Avatar
      deck builders augusta
      dic 30, 2019

      Took me time to understand all of the comments, but I seriously enjoyed the write-up. It proved being really helpful to me and Im positive to all of the commenters right here! Its constantly nice when you can not only be informed, but also entertained! I am certain you had enjoyable writing this write-up. deck builders augusta

    • Avatar
      concrete brandon fl
      dic 30, 2019

      Great post I would like to thank you for the efforts you have made in writing this interesting and knowledgeable article. concrete brandon fl

    • Avatar
      concrete concord nc
      dic 31, 2019

      I've been looking for info on this topic for a while. I'm happy this one is so great. Keep up the excellent work concrete concord nc

    • Avatar
      Eenva Harrowing Eradicator
      ene 2, 2020

      Just pure brilliance from you here. I have never expected something less than this from you and you have not disappointed me at all. I suppose you will keep the quality work going on. Eenva Harrowing Eradicator

Leave a Reply

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