Crear Servidor Web con Arduino

CREAR SERVIDOR WEB CON ARDUINO

(24/1/14)

En este tutorial vamos a usar el Arduino como servidor Web utilizando el Arduino Ethernet Shield y controlaremos un Led a través de Internet.

Material

-Arduino Uno Rev 3

-Arduino Ethernet Shield

-Cable Red Ethernet (CAT 5 o CAT 6)

-Led

-Resistencia 220 ohms

-Fuente de alimentación

Arduino Ethernet Shield

El Arduino Ethernet Shield permite conectar el Arduino a Internet. Está basado en el chip Wiznet W5100 con un buffer interno de 16k que es el encargado de dar una dirección IP al Arduino. Tiene un conector ethernet RJ-45 con una velocidad de 10/100Mb. Se usa la librería <Ethernet.h> para escribir el programa. También tiene un slot de tarjetas micro-SD para almacenar datos para servir a la red. Para esto, se usa la librería <SD.h>. Para comunicarse con la placa Arduino, utiliza el puerto SPI (pins 10, 11 ,12 y 13) con la librería <SPI.h>, y el pin 4 si trabaja con una tarjeta micro-SD. Estos pins no pueden ser usados como entradas o salidas digitales. También tiene un botón de Reset que resetea tanto la placa Arduino como el W5100. Gracias a la Ethernet Shield podemos usar el Arduino como servidor web o como cliente web.

 

Arduino como servidor Web

Antes que nada hay que saber que es un servidor web. Un servidor web es una computadora que guarda y transmite datos vía Internet. La información que almacenan es en forma de página Web. Cuando un cliente (navegador Web) accede a un servidor Web, envía una petición HTTP que recibe el servidor Web. Luego este envía la información a través de protocolo HTTP al cliente en formato HTML.

La petición HTTP que envía el cliente al servidor sería algo parecido a lo siguiente:

      GET / HTTP/1.1
      Host: 192.168.1.100  (dirección IP del servidor)
      Accept: text/html
      User-Agent: Mozilla/5.0 (Windows)  (Navegador y sistema operativo)
      [Línea en blanco]

Y la respuesta del servidor al cliente sería similar a lo siguiente:

      HTTP/1.1 200 OK
      Date: Sun, 25 Des 2014 17:42:10 GMT
      Content-Type: text/html
      <html>
        <!-- código HTML -->
      </html>

En resumen, en este tutorial nuestro Arduino está conectado a la red con una IP que le asignamos. El código HTML de la web que enviará lo escribiremos en el sketch. Cuando ponemos esta dirección IP en un buscador Web de un ordenador conectado a la misma red (o desde fuera a través de Internet si abrimos un puerto que nos direccione a la IP del Arduino), estamos enviando una petición HTTP. Cuando el Arduino lea esta petición, nos enviará el código HTML para que podamos visualizar la página Web en el navegador.

Para los que no saben que IP tenemos que asignarle al Arduino, sabed que tiene que estar dentro del mismo rango que la IP de la puerta de enlace (Getaway). Para saber esto, en Windows nos vamos a la consola (poniendo cmd en el buscador de Inicio), escribimos “ipconfig”. Aquí nos pondrá la IP asignada del ordenador, la máscara subred y la puerta de enlace.

En nuestro caso la puerta de enlace es 192.168.1.1, por lo tanto asignaré al Arduino la IP 192.168.1.100. Para comprobar si esta IP no está asignada a ningún otro equipo, haremos un PING a esta dirección. Si al hacer PING no obtenemos respuesta, quiere decir que la dirección IP está libre.


LED controlado por Servidor Web

Para aplicar lo que hemos aprendido, vamos a controlar un Led a través de Internet con el Arduino haciendo de servidor Web. En el Arduino tendremos conectado un Led con una resistencia en una salida digital, y en la página Web tendremos dos botones: uno para encender el Led y el otro para apagarlo. Además, nos indicará si el Led está encendido o apagado.

La página Web tendrá este aspecto:

Montaje

 

-Juntar las masas del Arduino y de la fuente de alimentación.

-Un consejo: desconectar el cable USB del Arduino cuando no se use la comunicación serie porque pueden ocurrir fallos. Alimentar el Arduino con una fuente de alimentación a través del pin Vin o con el conector jack.

 

Código Arduino

Detectar una petición HTTP

Para detectar una petición HTTP con el código de Arduino, primero tendremos que crear un cliente Web. Luego cuando el cliente envié una petición HTTP al Arduino, este la leerá carácter por carácter a través de una variable char. Sabiendo que una petición HTTP termina con una línea en blanco, pondremos una condición que detecte esta línea en blanco para que, posteriormente, enviar la respuesta HTML.

EthernetClient client = server.available(); //Creamos un cliente Web
  //Cuando detecte un cliente a través de una petición HTTP
  if (client) {
    boolean currentLineIsBlank = true; //Una petición HTTP acaba con una línea en blanco
    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

        //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)
        {
              //Código HTML
        }

Si abrimos el Monitor Serial veremos la petición HTTP del cliente Web, muy parecida a la que hemos visto antes.


Enviar parámetros a través de HTML

Como hemos explicado antes, en la página Web habrá dos botones. Al pulsarlos, cada uno envía unos parámetros diferentes para poder identificarlos en el código Arduino. Para poder enviar parámetros a través de HTML se utiliza el método URL encoded. Quiere decir que los datos vienen por la URL si se inician con el símbolo “?”. Ponemos por ejemplo un botón:

client.println("<button onClick=location.href='./?LED=ON\' style='margin:auto;background-color: #84B1FF;color: snow;padding: 10px;border: 1px solid #3F7CFF;width:65px;'>");

 Si nos fijamos en el símbolo “?”, vemos que los parámetros que se envían son “LED=ON”. Si volvemos a abrir el Monitor Serial, veremos que el Arduino recibe una nueva petición HTTP pero con estos parámetros escritos después de GET /.


Lo siguiente que tenemos que hacer es detectar esta parte del texto. Como la petición HTTP la hemos almacenado en una variable tipo char, quiere decir que almacena los caracteres de manera individual. Por lo tanto tenemos que transformar estos caracteres a una cadena de caracteres (String). Para esto creamos un String vacío y unimos este String con los caracteres con la función concat(). De esta manera tenemos la petición HTTP en un String.

EthernetClient client = server.available(); //Creamos un cliente Web
  //Cuando detecte un cliente a través de una petición HTTP
  if (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
        cadena.concat(c);//Unimos el String 'cadena' con la petición HTTP (c). De esta manera convertimos la petición HTTP a un String

Después de esto, tenemos que detectar la posición del parámetro que enviamos en el String usando la función indexOf() y la almacenamos en una variable. Finalmente, con la función substring(), comprobamos si los caracteres del parámetro enviado coincide con los que ponemos en la condición.

//Ya que hemos convertido la petición HTTP a una cadena de caracteres, ahora podremos buscar partes del texto.
int posicion=cadena.indexOf("LED="); //Guardamos la posición de la instancia "LED=" a la variable 'posicion'

if(cadena.substring(posicion)=="LED=ON")//Si a la posición 'posicion' hay "LED=ON"
{
     digitalWrite(led,HIGH);
     estado="ON";
}
if(cadena.substring(posicion)=="LED=OFF")//Si a la posición 'posicion' hay "LED=OFF"
{
     digitalWrite(led,LOW);
     estado="OFF";
}

 Código completo

/*
  www.diymakers.es
  by A.García & M.García
  Crear servidor Web con Arduino
  Tutorial en: http://diymakers.es/crear-servidor-web-con-arduino/
*/

#include <SPI.h>  //Importamos librería comunicación SPI
#include <Ethernet.h>  //Importamos librería Ethernet

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

int led=6; //Pin del led
String estado="OFF"; //Estado del Led 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(led,OUTPUT);
}

void loop()
{
  EthernetClient client = server.available(); //Creamos un cliente Web
  //Cuando 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
        cadena.concat(c);//Unimos 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("LED="); //Guardamos la posición de la instancia "LED=" a la variable 'posicion'

          if(cadena.substring(posicion)=="LED=ON")//Si a la posición 'posicion' hay "LED=ON"
          {
            digitalWrite(led,HIGH);
            estado="ON";
          }
          if(cadena.substring(posicion)=="LED=OFF")//Si a la posición 'posicion' hay "LED=OFF"
          {
            digitalWrite(led,LOW);
            estado="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>");
            client.println("</head>");
            client.println("<body>");
            client.println("<h1 align='center'>DIYMakers</h1><h3 align='center'>LED controlado por Servidor Web con Arduino</h3>");
            //Creamos los botones. Para enviar parametres a través de HTML se utiliza el metodo URL encode. Los parámetros se envian a través del símbolo '?'
            client.println("<div style='text-align:center;'>");
            client.println("<button onClick=location.href='./?LED=ON\' style='margin:auto;background-color: #84B1FF;color: snow;padding: 10px;border: 1px solid #3F7CFF;width:65px;'>");
            client.println("ON");
            client.println("</button>");
            client.println("<button onClick=location.href='./?LED=OFF\' style='margin:auto;background-color: #84B1FF;color: snow;padding: 10px;border: 1px solid #3F7CFF;width:65px;'>");
            client.println("OFF");
            client.println("</button>");
            client.println("<br /><br />");
            client.println("<b>LED = ");
            client.print(estado);
            client.println("</b><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
  }
}
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0Email this to someone

86 thoughts on “Crear Servidor Web con Arduino

  • Pingback: Crear Servidor Web con Arduino - DIYMakers | Op...

  • Pingback: CREATE WEB SERVER WITH ARDUINO | WIzWiki : Wiznet Community

  • lady lemus

    Puedo activar el led conectandome desde una red wan? o necesariamente tengo que conectarme a la misma red lan ?

    Reply
  • Felipe

    Amigo esta muy bueno el tutorial, yo personalmente lo estoy asiendo con variables analógicas y digitales como lectura y control de las mismas, pero es solo dentro de una misma lan, me gustaría saber como puedo ingresar al arduino desde otro punto del planeta teniendo Internet, ¿debo cambiar la dirección ip?, la ip ingresada al mio es 192.168.0.200:2450.
    Si me pudieras ayudar te lo agradecería mucho, el trabajo con el mismo problema esta postiado en el foro de arduino.
    http://forum.arduino.cc/index.php?topic=262331.0
    gracias

    Reply
    • DIYMakers

      DIYMakers Post author

      Tienes que usar la IP publica y abrir un puerto que te redireccione a la IP del Arduino. Lo puedes hacer contratando una IP estática o registrándote en un dominio DNS como no-ip.com

      Reply
  • JoseAlberto

    hola, muy bueno, te felicito, una pregunta: ¿Podemos hacer esto sin necesidad de internet? quiero decir locamente por LAN, GRACIAS

    Reply
      • JoseAlberto

        gracias, ¿Cuando usamos la Ethernet o Wifi Shield perdemos algunas de las entradas o salidas del arduino? (A0 – A5 y 2-13)

        Reply
  • Jonathan

    Hola, tengo el siguente problema, la placa Ethernet Shield se pega al enviar varias solicitudes una tras otra y esto geenra que se pegue la placa. puede ser problema de buffer ? alguien me puede ayudar ?

    #include
    #include
    //network NB: Pins 10, 11, 12 and 13 are reserved for Ethernet module.
    byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
    byte ip[] = { 192, 168, 0, 160 };
    byte gateway[] = { 192, 168, 0, 1 };
    byte subnet[] = { 255, 255, 255, 0 };

    String inString = String(35);

    String Led;

    int led[] = {00,5 ,6 ,7 }; //Led pins num 0 in arry is not used
    int numofleds = 2; //numofleds
    String value[] = {“Encender”,”Encender”,”Encender”}; //startup all led are off

    EthernetServer server(90);
    String data;
    void setup()
    {
    Serial.begin(9600);
    Ethernet.begin(mac, ip,gateway,subnet);
    server.begin();
    //set pin mode
    for (int j = 1; j < (numofleds + 1); j++){
    pinMode(led[j], OUTPUT);
    }

    }

    void loop()
    {
    EthernetClient client = server.available();

    if(client){
    // an http request ends with a blank line
    boolean current_line_is_blank = true;
    while (client.connected()) {

    if(client.available()) {

    char c = client.read();
    // if we've gotten to the end of the line (received a newline
    // character) and the line is blank, the http request has ended,
    // so we can send a reply
    if (inString.length() < 35) {
    inString.concat(c);
    }
    if (c == '\n' && current_line_is_blank) {

    // send a standard http response header
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println();
    client.println("”);
    client.println(“”);
    client.println(“CONTROL ACUARIO V1.0 BETA”);
    client.print(“”);

    for(int i=1;i 0 || inString.indexOf(“all=Encender”)>0){
    Serial.println(Led+”Apagar”);
    digitalWrite(led[i], HIGH);
    value[i] = “Apagado”;
    }else if(inString.indexOf(Led+”=Apagado”)>0 || inString.indexOf(“all=Apagado”)>0 ){
    Serial.println(Led+”Encender”);
    digitalWrite(led[i], LOW);
    value[i] = “Encender”;
    }
    client.println(“Control”);
    client.println(“”);
    }
    //client.println(“All “);
    client.println(“”);
    client.println(“”);
    break;
    }
    if (c == ‘\n’) {
    // we’re starting a new line
    current_line_is_blank = true;
    } else if (c != ‘\r’) {
    // we’ve gotten a character on the current line
    current_line_is_blank = false;
    }
    }
    }
    // give the web browser time to receive the data
    delay(10);
    inString = “”;
    client.stop();
    client.flush();
    }
    }

    Reply
  • Pingback: Gregory Smith

  • Rafa Jurado

    Hola, tengo la siguiente pregunta: la placa que utilizo estará accesible desde Internet y quisiera proteger el acceso de algún modo. Habia pensado en colocar en el codigo HTML un teclado para que el usuario introduzca un codigo de varias cifras para asi identificarlo y en cuyo caso mostrar el resto de los datos. ¿Como se podrián recoger estas cifras para conformar el codigo?.

    Gracias

    Reply
  • Wincenth Matthews

    a mi me responde ping (PC -> arduino) pero por consola me sale:
    “server is at 0.0.0.0”, y cuando quiero cargar la pagina por algún browser muere por time out.

    es como si el arduino no respondiera.

    Reply
    • Rafa Jurado

      A mi tambien se me bloquea, pero es por el codigo HTML embebido. Prueba con void loop() en blanco, solo los parametros de conexion, y poco a poco vas añandiendo parte del codigo HTML. Un Saludo

      Reply
    • Leonardo

      Os pinos ICSP não estão encostando. Eu serrei os pinos machos do Ethernet Shield para ele ficar mais baixo e assim encostar.

      Reply
  • carlos

    quisiera saber como hacer lo de el cambio de ethernet a wifi y si se podria ver tambien los datos de una shield can bus , la verdad es q no conosco mucho de arduino lo agradezco mucho gracias

    Reply
  • andres lozano

    amigo como haces para el router ya que no me carga cuando pongo la ip simplemente me sale el panel de login de mi modem y no tengo acceso a el ! Es necesario tener el acceso al modem ??

    Reply
    • carlos

      hola andrez lozano si se refiere a el programa de encender y apagar el led , a mi me paso algo parecido ya que en mi casa me funcionaba perfectamente conectando la shield de ethernet a mi computador y mi computador conectado por wifi a un router , pero lo intentaba en el lugar en el cual desarrollo mi proyecto y no servia ,averigue y eso pasa es por que la ip es dinamica por lo que no lo permite , lo mejor es revisar que las ip tanto la de la conexion a ethernet y la del codigo de arduino sean distinatas en el ultimo numero ,pues recuerda q la ip que nos da la conexion a ethernet es distinta a la de el codigo ya que de los dos ultimos numeros se modifica el ultimo y pues verificar haciendo ping , y verificar cosas sencillas como el puerto COM en arduino y que este el arduino seleccionado.

      Suerte.

      Reply
      • andres lozano

        Que tal de nuevo ya lo he logrado por ahora de forma local adapté algunas cocitas del circuito sencillo que ustedes tenían sin embargo requiero prender un motor tienen alguna idea que me puedan brindar para que el voltaje se amplifique y este encienda ?? Por otra parte si es posible ? que alguien acceda a la IP de forma remota desde cualquier lugar ??

        Reply
        • Rafa

          Hola Andrés,

          no se si habrás solucionado ya el problema. Si no lo has hecho, te puedo comentar que lo primero es saber qué señal necesitas para arrancar el motor, y en función de eso crear un pequeño hardware que te adapte la señal de salida del arduino, a una señal de mayor potencia.
          Supongo que debe de ser un motor con un sistema de arranque eléctrico, es decir, al que le das a la llave o al botón, y se arranca. El botón sólo cierra un circuito que alimenta en última instancia al relé de arranque del motor.
          Necesitarás básicamente uno o varios transistores, algunas resistencias, y quizá un pequeño relé adicional. Herramientas y también un poco de paciencia si no lo has hecho nunca. El circuito sería bastante sencillo.

          Si te gusta la idea, yo puedo echarte una mano.

          Un saludo

          Reply
  • Mrtecla

    Alguien me toquetea el codigo para controlar dos motores ( para un robot ) como el led ( interruptor) necesitaria una etiqueta mas i ya esta.
    Esque no entiendo mucho de comunicaciones por internet.

    Reply
  • Jesús

    Hola y felicitaciones por el artículo. Desarrollé algo parecido pero haciendo de server el ordenador, es decir sin placa ethernet. Ahora en el proyecto me gustaría poner la placa ethernet y eliminar el ordenador. La única pega que veo es que aunque se le cambiara el puerto http, esto al utilizar la ip pública estaría accesible a cualquiera y te la podrían liar apagando y encendiendo. Mi pregunta es si hay manera de poner seguridad bien via .htaccess o si se le puede configurar php o algo para que sea una conexion segura. Otra opción sería utilizar una raspberry como servidor, instalar un apache con los módulos pertinentes para poder crear un sistema de loggin pero me gustaría saber si me puedo evitar esta placa.Nunca he utilizado la placa ethernet. Vi que un compañero preguntó algo sobre la seguridad más arriba pero nadie contestó. Saludos y felicitaciones.

    Reply
  • Armand

    Hola. Antes que nada felicitarte por el tutorial. solo tengo una pregunta, como hacerle para que el led no se apage despues de cada reinicio, lo que sucede es que casi cada 5 segundos el ethernet shield se reinicia y si deje encendido el les, este se apaga.

    Reply
  • Jorge Valencia

    amigo, como puedo asignarle un puerto diferente al 80 para que el servidor responda las peticiones de los clientes?, pues no sé en que parte puedo configurar esto…gracias

    Reply
    • lekan

      una placa Ethernet, puede oir por hasta 5 puertos.y o lo he hecho,lo que pasa es que a veces no me encuentra la pagina y tengo que resetear arduino.
      EthernetServer server1(80);
      EthernetServer server2(91);
      EthernetServer server3(92);
      EthernetServer server4(93);
      EthernetServer server5(94);
      esto tengo en mi ejemplo.En cada servidor me hace una cosa.
      He alojado un menú en HTML en hostinguer con enlaces a los distintos servidores.con lo deuna primera pantalla luego elijo lo que quiera ver es como tener 5 arduinos co Ethernet a la vez

      Reply
  • lekan

    He hecho un programa para el control de 8 reles.Con el arduino mega , me va bien,pero con el uno no puedo ponerle nada mas que tres.Alguien me podría decir por que?

    Reply
  • lekan

    yo lo he hecho con 8 reles y con una placa mega,el problema que en la misma pagina,controlo mas cosas tensiones intensidades pwm ,servomotores ,si quieres te paso el código,pero tendrías que aislar la parte que te interesa.

    Reply
  • Jose Boria

    Buen documento y clarito, que es lo que interesa.

    Lo he adaptado a mi conveniencia para hacer un “videoportero”. Visualizo una camara IP y con un Botón actúo sobre un relé que abre la puerta.
    Pero tengo un problema, cuando cargo la página por primera vez se activa el relé y tampoco me actualiza el estado del relé nunca.
    Despues de hacer varias modificaciones no he conseguido solucionarlo. Adjunto el sketch por si podeis echarme una mano.

    /* Programa de control de acceso que visualiza una camara IP
    y permite abrir una puerta.
    Basado en el tutorial de http://diymakers.es/crear-servidor-web-con-arduino/
    */

    // J.B.

    //Importamos las librerias necesarias
    #include

    #include
    #include
    #include
    #include
    #include
    #include
    #include

    // Asociamos la tarjeta de red y asignamos la IP que se empleará
    byte mac[] = {0x90, 0xA2, 0xDA, 0x0D, 0x0F, 0x70};
    IPAddress ip(192,168,0,222);
    // Creamos el servidor web en el puerto XX
    EthernetServer server(80);

    // Asignamos pin activacion relé y estado inicial a una variable
    int rele = 6;
    String estado = “”; // = “PUERTA CERRADA”;

    // INICIO SETUP
    void setup() {
    Serial.begin(9600);
    // Inicializamos la comunicacion ethernet y el servidor
    Ethernet.begin(mac, ip);
    server.begin();
    Serial.print(“Direccion del servidor “);
    Serial.println(Ethernet.localIP());

    pinMode(rele, OUTPUT);
    } // FIN SETUP

    //++++++++++++++INICIO PROGRAMA++++++++++++++++++++++++++
    void loop() {
    // Creamos el cliente web
    EthernetClient client = server.available();
    // Si se detecta un cliente web
    if(client) {
    Serial.println(“Nuevo cliente”);
    boolean currentLineIsBlank = true;
    String cadena = “”; // Creamos una cadena de carácteres vacia
    while(client.connected()) {
    if(client.available()) {
    char c = client.read(); // Leemos la petición del cliente
    Serial.write(c); // Visualizamos el resultado por el monitor serial
    cadena.concat(c); // Concatenamos el resultado de la peticion a la cadena creada

    // Nos situamos en la posicion de la cadena que nos da el valor de activacion del rele
    int posicion = cadena.indexOf(“RELE=”);
    // SI recibimos ON …
    if (cadena.substring(posicion) == “RELE=ON”){
    digitalWrite(rele, HIGH);
    estado = “ABRIENDO PUERTA”;
    delay(3000);
    digitalWrite(rele, LOW);
    estado = “PUERTA CERRADA”;
    }
    /* Si recibimos una linea en blanco (fin de peticion http) el servidor esta listo para
    enviar una respuesta */
    if(c == ‘\n’ && currentLineIsBlank) { // +++++++++++++ importante las comillas simples
    // Enviamos al cliente la respuesta http y la página
    client.println(“HTTP/1.1 200 OK”);
    client.println(“Content-Type: text/html”);
    client.println(“Connection: close”);
    //client.println(“Refresh: 1”);
    client.println();

    //Página web en formato HTML
    client.println(“”);
    client.println(“”);
    client.println(“”);
    client.println(“Acceso oficinas”);
    client.println(“”);
    client.println(“”);
    client.println(“PRUEBAControl acceso”);
    // Boton para enviar parametros a través de HTML utilizando el metodo URL encode. Los parámetros se envian usando el símbolo ‘?’
    client.println(“”);
    client.println(“”);
    client.println(“ABRIR PUERTA”);
    client.println(“”);
    client.println(“”);
    client.println(““);
    client.print(estado);
    client.println(“
    “);
    client.println(“”);
    client.println(“”);
    client.println(“”);
    break;
    }
    if(c == ‘\n’) {
    currentLineIsBlank = true;
    }
    else if(c != ‘\r’) {
    currentLineIsBlank = false;
    }
    }
    }
    // Damos tiempo al navegador para recibir los datos
    delay(1);
    client.stop(); // Cerramos la conexion
    }
    }

    Gracias de antemano

    Reply
    • eli

      debes de inicializar con el estado de tu rele en off en la parte del setup, y el if esta imcompleto le falta la parte el se donde se declara la parte del estado de apagado tu las has puesto en la misma zona, tienes que diferenciarlos con el else.

      Reply
  • lekan

    queria poner un programa para cotrolar varias cosas desde una placa mega,pero la pagina no me deja.¿ sera porla amplitud del programa?

    Reply
  • lekan

    /*
    JUANJOSE LEKANDA 2015
    cONTROL DE 8 RELES,SALIDAS PWM,SERVO,ENTRADAS,TENSIONES INTENSIDADES

    Controlmega 8 reles 6 entradas ana logicas 4 salidas pwm 4 salidas servo
    Entradas analogicas A0,A1,A2,A3,A4,A5
    Entrada temperatura A6 sensor temperatura,lm35 1 positivo,2 sallida,3 masa
    Salidas PWM 2,3,4,5
    salidas Servo 6,7,8,9
    Salidas rele 14,15,16,17,18,19,20,21
    Entradas digitales(0) 24,25,26,27,28,29,30,31,32
    entrradas matriz fil 34,35,36,37
    entrradas matriz col 38,39,40,41
    */
    #include
    #include
    #include
    Servo miservo1; // create servo object to control a servo
    Servo miservo2;
    Servo miservo3;
    Servo miservo4;
    byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
    IPAddress ip(192,168,0,50);
    EthernetServer miservidor(80);
    EthernetClient micliente;
    boolean lineaActualEstaVacia = true;
    String peticion=””;
    char caracter;
    String cadena;
    //_________________________________________________________________________________ Salidas rele _____________________________________________________________________________________________
    int sal1=14;
    int sal2=15;
    int sal3=16;
    int sal4=17;
    int sal5=18;
    int sal6=19;
    int sal7=20;
    int sal8=21;
    int saltemp=34;

    //_______________________________________________________________________________ Salidas Pwm ______________________________________________________________________________________________
    int pwm1=2;
    int pwm2=3;
    int pwm3=4;
    int pwm4=5;
    //_______________________________________________________________________________ Variables Pwm ____________________________________________________________________________________________
    int vpwm1=0;//variable de pwm canal 1
    int vpwm2=0;
    int vpwm3=0;
    int vpwm4=0;
    //_______________________________________________________________________________ Salidas servo ___________________________________________________________________________________________
    int servo1=6;//variable servo 1
    int servo2=7;
    int servo3=8;
    int servo4=9;
    //_______________________________________________________________________________ Variable servo _________________________________________________________________________________________
    int vservo1=0;//variable servo 1
    int vservo2=0;
    int vservo3=0;
    int vservo4=0;
    //___________________________________________________________________________ Variables estado rele _____________________________________________________________________________________
    boolean estado_rel_1=false;
    boolean estado_rel_2=false;
    boolean estado_rel_3=false;
    boolean estado_rel_4=false;
    boolean estado_rel_5=false;
    boolean estado_rel_6=false;
    boolean estado_rel_7=false;
    boolean estado_rel_8=false;
    //_____________________________________________________________________________ Entradas digitales ____________________________________________________________________________________
    int entrada1=24;
    int entrada2=25;
    int entrada3=26;
    int entrada4=27;
    int entrada5=28;
    int entrada6=29;
    int entrada7=30;
    int entrada8=31;
    int entrada9=32;
    int entrada10=33;

    int temperatura_pin=6;
    float temperatura=0;
    float temperaturafijada=0;
    float temperaturareal=0;
    //________________________________________________________________
    void setup() {
    miservo1.attach(6); // attaches the servo on pin 9 to the servo object
    miservo2.attach(7);
    miservo3.attach(8);
    miservo4.attach(9);
    Ethernet.begin(mac, ip);
    //miservidor.begin();
    Serial.begin(9600);
    Serial.println(“comenzamos”);
    //_____________________________________________________________________________ Definimos salidas ________________________________________________________________________________________________
    pinMode (sal1,OUTPUT);
    pinMode (sal2,OUTPUT);
    pinMode (sal3,OUTPUT);
    pinMode (sal4,OUTPUT);
    pinMode (sal5,OUTPUT);
    pinMode (sal6,OUTPUT);
    pinMode (sal7,OUTPUT);
    pinMode (sal8,OUTPUT);
    pinMode (saltemp,OUTPUT);
    //_____________________________________________________________________________ Definimos entradas _______________________________________________________________________________________________
    pinMode (entrada1,INPUT);
    pinMode (entrada2,INPUT);
    pinMode (entrada3,INPUT);
    pinMode (entrada4,INPUT);
    pinMode (entrada5,INPUT);
    pinMode (entrada6,INPUT);
    pinMode (entrada7,INPUT);
    pinMode (entrada8,INPUT);
    pinMode (entrada9,INPUT);
    pinMode (entrada10,INPUT);
    //_______________________________________________________________ Poner las resistencias pull up de las entradas________________________________________________________________________________
    digitalWrite(entrada1,HIGH);
    digitalWrite(entrada2,HIGH);
    digitalWrite(entrada3,HIGH);
    digitalWrite(entrada4,HIGH);
    digitalWrite(entrada5,HIGH);
    digitalWrite(entrada6,HIGH);
    digitalWrite(entrada7,HIGH);
    digitalWrite(entrada8,HIGH);
    digitalWrite(entrada9,HIGH);
    digitalWrite(entrada10,HIGH);
    //______________________________________________________________________poniendo las salidas de los reles en alto,se accionan pornegativo
    digitalWrite(sal1,HIGH);
    digitalWrite(sal2,HIGH);
    digitalWrite(sal3,HIGH);
    digitalWrite(sal4,HIGH);
    digitalWrite(sal5,HIGH);
    digitalWrite(sal6,HIGH);
    digitalWrite(sal7,HIGH);
    digitalWrite(sal8,HIGH);

    }
    //________________________________________________________________
    void loop() {
    temperatura = analogRead(temperatura_pin);
    temperaturareal = 5.0*temperatura*100.0/1024.0;
    if (temperaturareal(temperaturafijada+1)){
    digitalWrite(saltemp,HIGH);
    Serial.println(“rele desactivado”);
    }
    micliente = miservidor.available();
    if (micliente==true) {
    while (micliente.connected() == true) {
    if (micliente.available() > 0) {
    caracter = micliente.read();
    if (peticion.length() < 50 ){//si el string,es menor de 40 seguir añadiendo caracteres
    //peticion=peticion+caracter;
    //cadena=(cadena+caracter);
    peticion.concat(caracter);
    //Serial.print(caracter);
    //Serial.print(peticion);
    }
    if (caracter == '\n' && lineaActualEstaVacia == true) {//cuando el cliente nos mande linea en blanco es que ya ha terminado la peticion y le contestamos
    micliente.println("HTTP/1.1 200 OK");
    micliente.println("Content-Type: text/html");
    micliente.println("Connnection: close");
    micliente.println("");

    //——————————————————————fondo y titulo————————————————————————————-
    //———————————————————————————————————————————————————————
    micliente.println("”);
    micliente.println(“”);
    //micliente.println(“”);//O000000000000000000000000000000000000000000000000000000000
    micliente.println(“”);
    //_____________________________________________________________________________________________________________________________________________________________________
    //Serial.print(peticion);
    if (peticion.indexOf(“rele=1”)>0){
    estado_rel_1 = !estado_rel_1;
    }
    if (peticion.indexOf(“rele=2”)>0){
    estado_rel_2 = !estado_rel_2;
    }
    if (peticion.indexOf(“rele=3”)>0){
    estado_rel_3 = !estado_rel_3;
    }
    if (peticion.indexOf(“rele=4”)>0){
    estado_rel_4 = !estado_rel_4;
    }
    if (peticion.indexOf(“rele=5”)>0){
    estado_rel_5 = !estado_rel_5;
    }
    if (peticion.indexOf(“rele=6”)>0){
    estado_rel_6 = !estado_rel_6;
    }
    if (peticion.indexOf(“rele=7”)>0){
    estado_rel_7 = !estado_rel_7;
    }
    if (peticion.indexOf(“rele=8”)>0){
    estado_rel_8 = true;
    }
    if (peticion.indexOf(“encender=1”)>0){
    estado_rel_1 = true;
    estado_rel_2 = true;
    estado_rel_3 = true;
    estado_rel_4 = true;
    estado_rel_5 = true;
    estado_rel_6 = true;
    estado_rel_5 = true;
    estado_rel_6 = true;
    estado_rel_7 = true;
    estado_rel_8 = false;
    }
    if (peticion.indexOf(“apagar=1”)>0){
    estado_rel_1 = false;
    estado_rel_2 = false;
    estado_rel_3 = false;
    estado_rel_4 = false;
    estado_rel_5 = false;
    estado_rel_6 = false;
    estado_rel_5 = false;
    estado_rel_6 = false;
    estado_rel_7 = false;
    estado_rel_8 = false;
    }
    //XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    /*if (peticion.indexOf(“ana1=”)>0){
    Serial.print(peticion);
    cadena=peticion.substring(18);//
    //Serial.print(cadena);
    if (cadena.toInt()0)&(vpwm10)&(vpwm1>9)){
    vpwm1=vpwm1-10;
    }
    analogWrite(pwm1,vpwm1);
    //___________________________________________________________________________________________________________________________________________________________________________________________
    /*
    *if (peticion.indexOf(“ana1=”)>0){
    Serial.print(peticion);
    cadena=peticion.substring(18);//
    //Serial.print(cadena);
    if (cadena.toInt()< 256){//
    pwm1=cadena.toInt();

    Reply
  • lekan

    falta la mitad del codigo,pero no me deja ponerlo , me sale “Token de seguridad no es válido.” me podria decir alguien a que se debe?

    Reply
    • Jhon

      Las placas Arduino tienen memoria Flash, RAM y EEPROM.
      Flash: es donde se almacena el código del programa y no es volátil, ósea, se mantienen aunque apagues el Arduino.
      RAM: es donde se almacenan los datos del programa (operaciones matemáticas, valores de variables, etc) y es volátil, ósea, se borra al apagar el Arduino.
      EEPROM: es donde se almacenan los datos que deben mantenerse (valores iniciales o ultimo valor de una variable, etc) y no es volátil, ósea, se mantienen aunque apagues el Arduino.

      Arduino MEGA 2560

      Flash: 256KB (8KB los ocupa el bootloader) lo que deja 248KB
      RAM: 8KB
      EEPROM: 4KB

      1 carácter = 1 byte
      1000 bytes = 1 KB
      1000 KB = 1 MB

      248KB = 248.000 caracteres

      Tu programa copiado 2 veces ocupa aproximadamente 16.504 caracteres contando los espacios en blanco, así que el espacio no es tu problema.

      Por favor que me corrija alguien si me equivoco.

      Tu código parece un copia y pega de alguna web, incluso tienes 3 #include pero no declaras ninguna librería y algunas cosas mas.
      Creo que antes de meterte con un código de esta envergadura tiene que empezar con algo mas sencillo y estudiar un poco mas.

      Un saludo

      Reply
  • lekan

    Estoy usando un modulo wifi,para hacer lo mismo que hacemos con el modulo de ethernet,el problema es que nunca se acaba de cargar la pagina.Si sale el texto y los botones,pero el navegador se queda permanentemente cagando.
    En este ejemplo de ethernet shield la conexion se cierra con ” client.stop();” ¿como se podria hacer sin libreria ,desde el codigo HTML?
    El modulo que uso trasmite via puerto serie. en vez micliente.print(“”); seria Serial.pint(“”);no utiliza librerias

    Reply
    • Jhon

      en el código tienes el ejemplo, copia el código que esta entre las etiquetas y , elimina client.println(” “); y guardalo como index.html

      Reply
  • lekan

    La pagina web se hace en html y luego se va mandando al cliente mediante la sentencia micliente.print (“html”);

    Reply
    • Jhon

      client.println(“CODIGO HTML”);

      Si copias el código encerrados entre las etiquetas y , lo pegas en el block de notas y guardas por ejemplo como: index.html, podrás abrirlo con cualquier navegador y te mostrara lo mismo que Arduino cuando te conectas a el.
      Te dejo el ejemplo:

      DIYMakersLED controlado por Servidor Web con Arduino

      ON

      OFF

      LED =
      client.print(estado);

      Como te dije antes, un proyecto de este tipo implica saber programar en Processing, html, css y algo mas.

      Reply
      • Reinaldo Carocca

        hola Jhon,

        al realizar lo que dices, la pagina web que aparece solo esta en blanco y un boton de color azul y nada màs, puedes indicarme como hacerla correctamente por favor.

        Saludos,
        Reinaldo

        Reply
  • Edison González

    Buenas Tardes tengo una pregunta amigo, tengo en vez de una Shield Ethernet, una ENC28J60, Funciona igual que librerias debo de cambiar? o no funciona con las mismas funciones o libreria?

    Reply
  • Alnarvaez

    Saludos, excelente la explicacion, como haria para adicionar varios botones mas, inclusive, leer puertos analogos y digitales?, gracias

    Reply
  • jefferson

    hola amigo como haria si ya tengo una pagina compleja con codigo php incrustado en html , y tiene dos botones de on y off , con la finalidad de hacer lo que tu hiciste en la explicacion, para mi caso van a apagar y prender un relay, como hago para vincular esos 2 botones con el arduino? tengo que escribir todo ese codigo en mi arduino? cabe destacar que es muy largo y tiene codigo php . por favor si puedes ayudarme .

    Reply
  • jaimezuelo

    Hola he intentado hacerlo paso a paso pero creo que mi Arduino no se habla con internet, he configurado un dirección ip del rango de la puerta de enlace libre y le he asignado la dirección MAC, luego le he dicho al router que no me cambie la ip para esa MAC, cuando le doy a IP config en el símbolo del sistema me dice en adaptador de Ethernet Ethernet, medios desconectados. Me podría ayudar.

    Reply
  • ruben

    hola
    me puedes hacer el enorme favor de añadir al codigo todos los pins de la placa que se puedan y que no ocupe el modulo shield para tener mas salidas ,
    no hay forma de que me salga. si consegui que funcione tu codigo fuera de la red local.y con un dominio dns, y tambien consegui crear una app para android, yo puedo ayudar en esto
    a quien me lo pida
    pero en arduino y en html estoy perdididsimo

    Reply
  • Reinaldo Carocca

    Amigo, quiero hacer lo mismo pero con el modulo Esp8266, tengo todo listo, me reconoce el modulo, se me configura como cliente, se me conecta a mi red, obtiene su direccion ip, se configura para multiples conexiones y se conecta a servidor puerto 90. ademàs puedo enviarle desde la barra de url del navegador ordenes como ejemplo: 192.168.X.XXX:90/led13=1,led12=0 y me enciende o apaga los led conectados en arduino, podrias ayudarme con la pagina web, como la tuya para a traves de ella pueda controlar dichos led.

    saludos y gracias.

    Reply
    • jua carlos

      hola Reinaldo; si estas utilizando esp8266 puedes cargar el plugin para poder programar tu esp8266 directamente con las funciones de arduino (sin comandos AT); y con las mimas funciones wifi de arduino puedes crear exactamente lo mismo que en el ejemplo. cuando cargas el plugin ya trae las librerías y muchísimos ejemplos muy completos y listos para su aplicación, te invito a que mires estos videos : https://www.youtube.com/watch?v=NwkDKhC0M6M

      Reply
  • Pablo

    Hola, ¿sería posible añadir el código para controlar la salida de led con un pulsador conectado a una entrada del arduino y que el estado se actualice en tiempo real en la web de modo que la salida se pueda controlar a la vez desde la web y desde el pulsador?

    Saludos y gracias

    Reply
  • carlos

    Buenas.

    muchas gracias por los ejemplos tan claros, pero tengo una duda ya que estoy realizando algo similiar y estoy intentando dejar solo un boton de activacion es decir solo un on y luego por temporizador se apague automaticamente, e intentado ya varios cambios en el codigo pero nada funciona. y la verdad es que mis conocimientos de html son nulos. asi que mi pregunta concreta es ¿ que variable debo resetear para que una vez presionado el on y finalice el temporizador se apague la salida y no se encienda en la proxima refrescada?

    cordial saludo.

    Reply
    • David R

      Carlos,
      tengo el mismo problema y se cual es la solución pero no se implementarla. Se solventaría solo con limpiar la url, pero no se como quitarle el parámetro o cambiarlo una vez leido.

      Saludos,

      Reply
  • Victor Hugo

    hola puedo enviar un email desde arduino usandolo como webserver, esque lo puedo hacer usando a arduino como cliente pero con ello ttengo qu alojar mi archivo php en un servidor web online y en la red donde pruebo mi programa usa un proxy y he tenido inconvenientes con eso, y me dijeron que ingresara el codigo de php en arduino como webserver, pero al cargar la ip en mi navegador no me hace el envio del correo.

    Reply
  • Magaly Díaz

    Hola? disculpa, muchas gracias por el tutorial, me ha funcionado bastante bien mientras el USB del arduino está conectado a la computadora, pero después pruebo con un adaptador de corriente CA/CC a 12V pero entonces ya no funciona, el arduino y el ethernet shield parece que si están en funcionamiento, pero ya no está el servidor 🙁 no sé si me expliqué, ayuda por favor

    Reply
  • Polo

    Hola tengo un problema, mi modem no me reconece la placa Ethernet shield , con que cable debo conectar al modem es normal o cruzado. Estoy usando una placa ethernet génerica, que mac debo poner para que funcione?

    Reply
  • edu

    Hola, estoy intentando utilizar el ejemplo webserver pero tengo un problema al subir el script en la Arduino uno con el modulo Ethernet.

    avrdude: stk500_getsync(): not in sync: resp=0x00
    avrdude: stk500_disable(): protocol error, expect=0x14, resp=0x51

    Alguien puede ayudarme?
    Gracias

    Reply
    • Angel Camacho

      que tal edu ese error me sale cuando tengo algo conectado en el puerto serial mientras estoy subiendo el programa al arduino, mi recomendacion que desconectes los cables del puerto serial y una vez despues subido los coloques de nuevo…….. Suerte

      Reply
  • Iván

    Hola, si quisiera tener 14 esclavos y 1 maestro, comunicándose mediante protocolo i2c, pero a su vez que el maestro me sirva de servidor web, se podría hacer? puedes darme una idea, quiero enviar datos y caracteres desde la web a los arduinos esclavos y que estos muestren el dato en una pantalla LCD

    Reply
  • Pingback: Arduino Web Server | Aprendiendo Arduino

  • Francuqo

    Amigo, còmo puedo poner una caja de texto en mi webserver, y que arduino pueda almacenar esa información en una variable ?

    Reply
  • Alberto Gonzalez Isorna

    Hola Buenas, ¿hay algún programa en el que yo cree la interfaz gráfica y me de el código en html?

    Reply
  • Fede

    Excelente!, estoy buscando la forma de borrar la url una vez elegida la opcion. Por ejemplo, hice un modulo de Power/Reset para un servidor. El problema es que en el navegador queda registrada la ultima accion; http://192.168.0.30/?buttonOn , esta pasara con la opciones de ?buttonRst (reset) o ?buttonOff (power off) podria ser mas peligros … ¿Hay forma de limpiar la barra una vez elejida la opcion? Gracias!

    Reply
  • Breypek Marin

    Hola buenas, he estado buscando informacion acerca de controlar un timbre desde una aplicacion web, es decir pogramarlo desde la aplicacion web para a determinadas horas se active el timbre…Agradeceria la informacion

    Reply
  • Jhon Vasquez

    Excelente post, tengo una inquietud es posible utilizar el mismo codigo html pero no alojarlo en el arduino si no en un hosting y desde este enviarle las ordenes al arduino, si asi lo es me podrian ayudar con una breve explicacion. gracias

    Reply

Deja un comentario