You are on page 1of 11

ARDUINO COMO SERVIDOR WEB

Montando un servidor web con Arduino

Home (Https://Www.Prometec.Net)  Arduino Como Servidor Web

OBJETIVOS

    Montar un circuito con un DHT11 y un Shield Ethernet.

 Crear un servidor Web.

 Mostrar un código básico HTML para publicar los valores del sensor, que nos sirva como armazón
para nuestros proyectos.

MATERIAL REQUERIDO.

Out of
9.60€
12.00€ Stock

+ IVA + IVA

ARDUINO
UNO REV 3
ETHERNET
(https://www.prometec.net/producto/arduino- SHIELD
uno/)
(https://www.prometec.net/producto/ethernet-
 Añadir al shield/)
carrito
Leer más
(/webserver/?
(https://www.prometec.net/producto/ethernet-
add-to-
shield/)
cart=4998)
2.00€
4.50€
+ IVA
+ IVA

PROTOBOARD KIT DE
830 RESISTENCIAS
PINES320. VARIADAS
(https://www.prometec.net/producto/protoboard- (https://www.prometec.net/producto/kit-
830/) de-resistencias-

 Añadir al variadas/)

carrito  Añadir al
(/webserver/? carrito
add-to- (/webserver/?
cart=8828) add-to-
cart=8361)

2.00€
2.90€
+ IVA
+ IVA

DHT11 CABLES
SENSOR DUPONT
HEMBRA-
(https://www.prometec.net/producto/dht11-
sensor-temperatura-
HEMBRA
y-humedad/) (https://www.prometec.net/producto/cables-

 Añadir al dupont-hembra-
hembra/)
carrito
(/webserver/?  Añadir al
add-to- carrito
cart=8677) (/webserver/?
add-to-
cart=8652)

CIRCUITO DE PRUEBA
 

la sesión previa, vimos como conectarnos a la red local y salir a consultar una página Web externa. Es decir ser clientes de internet para
conseguir recoger alguna información de la red.

Pero en muchas ocasiones, es muy práctico publicar el resultado de unos sensores en la web para poder consultarlos en remoto. En esta sesión
sesión veremos cómo publicar estos valores con nuestro Arduino y el Shield Ethernet mediante un servidor web.

Para ello montaremos un pequeño circuito similar al de la sesión Sensores de temperatura DHT11 (https://www.prometec.net/sensores-dht11/)
y publicaremos los valores el sensor para poderlos consultar inicialmente desde la red local doméstica.

Lo curioso es, que si no necesitáis mostrar páginas web espectaculares, veréis que es mucho más fácil publicar una página web con los valores
precisos, como servidor, de lo que es interpretar lo que se recibe de una consulta como cliente.

La cantidad de información es mucho menor y el programa para interpretarlo ni siquiera es necesario.

DIAGRAMAS DEL CIRCUITO

En la sesión previa  Sensores de temperatura DHT11 (https://www.prometec.net/sensores-dht11/) mostramos la descripción del sensor así
como un programa de ejemplo para leerlo, por lo que en esta sesión no entraremos a repetir y nos centraremos en la parte que es nueva de
montar el servidor de páginas web.

Vamos a incluir aquí, no obstante copia del esquema de conexión, por comodidad, pero que es sumamente simple.

(https://www.prometec.net/wp-content/uploads/2014/10/sesion-23_esquema.jpg)
 

Simplemente montad el Shield Ethernet sobre vuestro Arduino y después conectad normalmente el sensor al pin D2, junto con tensión y ground.

 
 No habíamos dicho hasta ahora, que los Shields necesitan comunicarse con Arduino de Alguna manera
y por tanto utilizan pines digitales o analógicos para su propia conveniencia, por lo que no podemos
usarlos en nuestros montajes.

 En el caso del Shield Ethernet, utiliza los pines SPI para comunicarse con Arduino y por ello no
podemos usar los pines D11, D12, y D13 en Arduino UNO y los pines D50, D51, D52 en un MEGA, más
que para la gestión del bus.
 Además, la mayor parte de las Shields Ethernet incluyen un lector de tarjetas SD o micro SD por lo que
otro pin adicional queda reservado. En el UNO suele ser el pin D10 y en el Mega el pin D53 ( Aunque
parece que puede modi carse el número de pin al con gurar la librería SD).

 
Aquí os pongo el esquema de protoboard.

(https://www.prometec.net/wp-content/uploads/2014/10/sesion-23_bb_.jpg)
 

EL PROGRAMA DE CONTROL

Vamos a empezar comprobando que todo está en su sitio cargando n de los ejemplos que viene con la librería Ethernet. Se llama Web Server y
podéis cargarlo desde

\\Archivos\Ejemplos\Ethernet\WebServer

Lo único que hace es crear una página muy sencilla y ponerla en el servidor web para comprobar que las conexiones a la red son correctas.

Enseguida volveremos para ver en detalle el funcionamiento del programa. Por ahora solo queremos comprobar que estamos en la red. Ese
programa incluye al principio una línea así:

IPAddress ip(192, 168, 1, 177);

Que es la dirección IP que asignamos al Shield Ethernet. Si esta dirección os sirve, porque estáis en la misma subred, no tenéis que modi carla,
pero en caso contrario aseguraros de ponerle una dirección IP válida para vuestra red como vimos en la sesión anterior.

Lo que haceEste programa hace, es mostrar los valores de las puertas analógicas en una página web cuya dirección IP es la que le hemos
asignado en el paso anterior.  Naturalmente como no tenemos nada enchufado a estas puertas el resultado que leamos será aleatorio, pero por
ahora esto no nos importa.
Vamos a hora a comprobar que podemos leer estos valores. Si usáis un PC, abrid vuestro navegador preferido y escribir en la página de
direcciones la IP de vuestro Shield Ethernet. En mi caso es la 192.168.1.177. Deberíais ver algo parecido a esto:

(https://www.prometec.net/wp-content/uploads/2014/11/IMg_62_1.png)
Y cada vez que le deis a refrescar la pantalla los valores cambiaran de modo impredecible por su naturaleza aleatoria. (Normalmente se refresca
con F5 en un PC). Si veis algo así, entonces ya podemos pasar a cosas más interesantes porque tenemos acceso a Arduino a través de
Ethernet.

Vamos con el programa. Algunas inclusiones y datos previos:

#include <SPI.h> // El shield Etherent usa SPI


#include <Ethernet.h>
#include "DHT.h"

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };


IPAddress ip(192,168,1,177); // Poned aqui vuestra IP <------- <------- <--------
EthernetServer server(80); // Arrancamos el servidor en el puerto estandard 80
DHT dht( 2, DHT11);

Nada nuevo aquí. Fijamos la dirección MAC y la IP, e inicializamos el servidor Web en el puerto 80 (El habitual) y creamos una instancia de DHT,
en el pin 2 con modelo DHT11.

 
 Podríamos cambiar la dirección de escucha del servidor asignando aquí un puerto diferente, pero
entonces solo quien supiera el nuevo puerto podría acceder al servidor web.

 Si el nuevo puerto fuera el 1256, por ejemplo, para acceder al servidor, la dirección seria: 192.168.1.177:
1256

 
El setup, tampoco tiene ninguna novedad, con excepción de server.begin() que inicia el servidor web en nuestro Arduino.

void setup()
{
dht.begin();
Serial.begin(9600);
while (!Serial) ; // Retraso para el Leonardo

Ethernet.begin(mac, ip);
server.begin(); // Inicia el servidor web
Serial.print("Servidor Web en la direccion: ");
Serial.println(Ethernet.localIP());
}

Para entrar con la función loop, tenemos antes que entender que los códigos HTML, son un lenguaje de descripción de páginas que consisten
en directivas de texto que indican a tu navegador como mostrar la información de una página concreta que visitas.

 
 Todos los navegadores ofrecen la capacidad de mostrar el código de la página web que visitas. Si usas
Firefox o Chrome, apuntando a la página y dando al botón derecho sale la opción “ ver código fuente de
la página” .

 No os asustéis, porque lo que sale suele ser aterrador al principio. Cantidades ingentes de texto
estructurado. El objetivo no es que lo entendáis, sino que veáis que, por complicada que sea una
página, se describe con texto normal.

 
Así que lo que vamos a hacer es construir una página Web (muy, muy sencilla) que entrega valores a quien lo solicite. Ese texto que conforma la
página Web estará formado por una cabecera HTML y unos textos y valores numéricos que representan la humedad y la temperatura leída en el
sensor.

No podemos entrar muy en detalle en el tema del HTML porque desborda con mucho las pretensiones de estas sesiones (Y el HTML daría para
otro tanto o más) así que digamos que lo primero que tendremos que hacer es entregar unas cabecera de texto, con las reglas de HTML, para
que el navegador al otro extremo nos entienda.

La cabecera será:

HTTP/1.1 200 OK
Content-Type: text/html
Connection: close
Refresh: 30
<!DOCTYPE HTML>
<html>

Y después enviar los valores leídos del sensor junto con algún texto explicativo de lo que son esos números, con formato HTML.

Como ya hemos iniciado el servidor en el setup, ahora tenemos que comprobar periódicamente si hemos recibido peticiones de un cliente web,
en caso a rmativo la propiedad available de server devolverá una entrada a la petición de un cliente, y en caso negativo será 0:

EthernetClient client = server.available()

Por eso, si client es diferente de 0, signi ca que tenemos una petición de cliente y deberemos procesarla.

El programa que usaremos para procesar esto será más o menos así: Prog_62_1 (https://www.prometec.net/wp-
content/uploads/2014/11/Prog_62_1.rar)
void loop() (https://www.prometec.net)
{
EthernetClient client = server.available(); // Buscamos entrada de clientes
TIENDA (HTTPS://WWW.PROMETEC.NET/TIENDA/)
if (client) ARDUINO (HTTPS://WWW.PROMETEC.NET/INDICE-TUTORIALES)
{ Serial.println("new client");
boolean currentLineIsBlank = true; // Las peticiones HTTP finalizan con linea en blanco
while (client.connected())
RASPBERRY PI (HTTPS://WWW.PROMETEC.NET/INDICE-RASPBERRY-PI/) IMPRESORA 3D (HTTPS://WWW.PROMETEC.NET/3D-INDICE/)
{ if (client.available())
{ char c = client.read();
Serial.write(c); // Esto no es necesario, pero copiamos todo a la consola
FORO (HTTPS://WWW.PROMETEC.NET/FOROS-PROMETEC/)
// A partir de aquí mandamos nuestra respuestaCONTACTO (HTTPS://WWW.PROMETEC.NET/CONTACT/)
if (c == '\n' && currentLineIsBlank)
{ // Enviar una respuesta tipica
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 15"); // Actualizar cada 15 segs
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");

float h = dht.readHumidity(); // Leer el sensor


float t = dht.readTemperature();
Serial.println(t);
Serial.println(h);
// Desde aqui creamos nuestra pagina con el codigo HTML que pongamos
client.print("<head><title>Situacion del lugar</title></head>”);
client.print(“<body><h1> Situacion Ambiente</h1><p>Temperatura - ");
client.print(t); // Aqui va la temperatura
client.print(" grados Celsius</p>");
client.print("<p>Humedad: ");
client.print(h); // Aqui va la humedad
client.print(" porciento</p>");
client.print("<p><em> La página se actualiza cada 15 segundos.</em></p></body></html>");
break;
}
if (c == '\n')
currentLineIsBlank = true; // nueva linea
else if (c != '\r')
currentLineIsBlank = false;
}
}
delay(10); // Para asegurarnos de que los datos se envia
client.stop(); // Cerramos la conexion
Serial.println("client disonnected");
}
}

Algunos comentarios respecto del programa. Client es un puntero a un objeto que desciende de la clase Stream de Arduino, lo mismo que
Serial y también Ethernet entre otros. Esto quiere decir que tienen propiedades y métodos comunes.

Por eso, lo mismo que podemos hacer Serial.print(), podemos hacer client.print y cumple con exactamente las mismas reglas.  Usamos
client.print, para enviar un String de texto al navegador que hay al otro extremo de la conexión abierta.

Igualmente hemos usado client.connected(), para comprobar si alguien ha conectado con el servidor y después usamos client.available(), para
determinar si nos ha enviado algún mensaje. Cuando client.available() toma un valor no nulo, sabemos que hay que leer ese mensaje y usamos
client.read(), exactamente igual que cuando leíamos caracteres de la consola con GetLine en la sesión Comunicación con el exterior
(https://www.prometec.net/comunicacion-exterior/).
Si os dais cuenta, los conceptos que usamos para leer de un cliente web, son los mismos que usamos para leer de una consola serie y se llaman
igual. Es una de las grandes ventajas de la programación orientada a objetos, porque ambos descienden de una clase similar, Stream (corriente,
ujo), porque conceptualmente, aunque el origen y la tecnología de soporte es muy distinta, la idea de un ujo continuo bit a bit por algo
parecido a un hilo lógico es común a ambos casos.

Y en el futuro veremos más casos de esto. Por ejemplo cuando leamos de la tarjeta SD, también leemos datos digitales por un único pin y
también se deriva de stream. Veréis como muchas de las instrucciones para leer os resultaran familiares.

RESUMEN DE LA SESIÓN

    Hemos recuperado de una sesión anterior el circuito con un sensor de temperatura y humedad para
montar un servidor Web que nos informa en remoto de las lecturas del sensor.

 Hemos visto que podemos enviar código HTML al cliente, de forma similar a como imprimimos en la
consola.

 Hemso visto como mezclar el texto HTML con las lecturas de nuestros sensores para montar una
pagina, que aunque poco elegante, e muy útil, porque podeis usar este ejemplo con vuestros propios
sensores, para publicar esos valores en Internet.

 Hemos habaldo, como sin querer, de laclase Stream, de la que derivan en Arduino muchas clases
superiores entre las que se cuentan, Serial, los clientes y servidores Ethernet, y también como
veremos las tarjetas SD entre otras.

 
Anterior Siguiente
(https://www.prometec.net/shield- (https://www.prometec.net/ethernetled)
ethernet/)  
(https://www.facebook.com/prometecnet-
1541207239447373/timeline/)

« COMENTARIOS MÁS VIEJOS (HTTPS://WWW.PROMETEC.NET/WEBSERVER/COMMENT-PAGE-2/#COMMENTS)

(81) COMMENTS

Reply
(Https://Www.Prometec.Net/Webserver/?
Replytocom=19727#Respond)
aitor (https://www.prometec.net/webserver/) 16 Mar 2017
Buenos días,
me llamo Aitor y estoy realizando mi proyecto de nal de carrera. Mi duda es la siguiente: quiero conectar varios arduinos a través
de Ethernet a un ordenador (utilizando un switch para ello) y querría saber si podría cambiar la programación de cada arduino desde
el PC.

La duda que tengo es que arduino se programa a través de USB, pero el problema de esto es que la comunicación USB tiene un
máximo alcance de 5 metros y en mi caso la distancia entre PC-arduinos es mayor.

¿Que opinas?

Muchas gracias!

Reply
(Https://Www.Prometec.Net/Webserver/?
Replytocom=19779#Respond)
Ivan (https://www.prometec.net/members/ivan/) 18 Mar 2017
Hola Aitor, una búsqueda rápida me ha dado bastante información, toda en inglés. La verdad es que no lo he probado,
pero me parece un tema interesante y trataremos de abordarlo cuando podamos. Te dejo algún enlace:

http://hackaday.com/2012/07/25/remote-uploading-to-an-arduino-with-codebender/
(http://hackaday.com/2012/07/25/remote-uploading-to-an-arduino-with-codebender/)
http://www.freetronics.com.au/pages/how-to-upload-a-sketch-to-your-arduino-via-a-network#.WM1s_5g1-Uk
(http://www.freetronics.com.au/pages/how-to-upload-a-sketch-to-your-arduino-via-a-network#.WM1s_5g1-Uk)
http://playground.arduino.cc/Code/TFTPBootloader1 (http://playground.arduino.cc/Code/TFTPBootloader1)

Reply
(Https://Www.Prometec.Net/Webserver/?
Replytocom=18017#Respond)
Paul Cueva (https://www.prometec.net/members/paulc/) 29 Ene 2017
Saludos Admin, una consulta, el proyecto me funciona cuando conecto el arduino directamente con la computadora, pero cuando
conecto a través de mi router proporcionado por mi proveedor de internet ya no funciona, y ni siquiera le puedo hacer ping al
arduino. Me podrías dar alguan pista de lo que podría estar sucediendo..

Reply
(Https://Www.Prometec.Net/Webserver/?
Replytocom=18046#Respond)
admin (https://www.prometec.net/members/admin/) 30 Ene 2017
Hola Paul, este es un problema tan habitual que estamos pensando en escribir un tuto al respecto. Vale, la idea es que
necesitas hacer un port forwarding en tu router. es un poco largo entrar aqui en detalles y depende del router que
tengas , pero si buscas en internet port forwarding enseguida entenderas el problema y como solucionarlo y si no es
asi nos das un toque y lo vemos

Reply
(Https://Www.Prometec.Net/Webserver/?
Replytocom=13199#Respond)
Jose (https://www.prometec.net/webserver/) 06 Sep 2016
Hola admin, quisiera que me ayudaras con este proyecto: se trata de un casillero (locker) inteligente, el cual no usará candado, sino
un lector RFID donde la persona, al pasar su tarjeta, abrirá el locker. Bueno para eso, mis compañeros y yo usaremos el arduino
MEGA.

Desde una PC, se debe digitar unos datos que serán el código del alumno, por ejemplo: 20161234, y un número, por ejemplo: 5, que
vendrá a ser el número del casillero. Estos datos deben ser enviados de la PC al arduino MEGA vía WiFi y aquí viene mi duda. Me
recomendaron crear un servidor web con el arduino, es decir crear una pagina web donde se envíen los datos requeridos (código de
alumno y número de casillero) pero en tu ejemplo del sensor, el arduino es el que manda los datos de temperatura a la página web.
En mi caso, será al revés, yo envío los datos de la PC (página web) al arduino y este los guarda.

Siento que estoy a punto de encontrar el camino, seguiré buscando información al respecto y estoy seguro de que tu ejemplo del
sensor de temperatura me ayudará en mi trabajo. Gracias y saludos desde Perú.

Reply
(Https://Www.Prometec.Net/Webserver/?
Replytocom=13262#Respond)
Ivan (https://www.prometec.net/members/ivan/) 08 Sep 2016
Hola Jose, creo que esta sesión dedicada al Ethetnet te puede servir, ya que se explica como acceder a una página
web alojada en un servidor y obtener sus datos.

Además aquí tienes las sesiones dedicadas a comunicaciones donde encontrarás muchas que tratan el asunto del WIFI:
https://www.prometec.net/comunicaciones/ (https://www.prometec.net/comunicaciones/)

UN saludo.

Reply
(Https://Www.Prometec.Net/Webserver/?
Replytocom=12893#Respond)
Jorge (https://www.prometec.net/members/gorge/) 30 Ago 2016
muchas gracias Chujalt, estoy probando con arduino mega 2560 que tiene mas memoria y de momento ya he conseguido el efecto
que buscaba, he creado una función con array y me dice el estado de las salidas que programo, así puedo encender desde la misma
red local cualquier salida y si accedo desde una red pública me aparece ese mismo estado , al igual que si lo ago desde red pública,
enciendo qualquier salida y voy al ordenador con red local y me aparece su estado real , de todas maneras muchas gracias por
preocuparte y presentar tu codigo que siempre viene bien !!!!!
gracias !!

GIVE A REPLY

Message

Name (required) Email (required)


( q ) ( q )

URL

Post comment
WordPress Anti-Spam by WP-SpamShield (https://wordpress.org/extend/plugins/wp-spamshield/)

Copyright Prometec (https://www.prometec.net) (https (https (https

You might also like