Práctica - Servidor Web
Práctica 5
Servidor Web Estación Meteorologica en casa
En esta práctica vamos a usar Arduino como un servidor web y vamos a
aprovecharnos de este servicio para que la página que nos muestre el
servidor nos indique la temperatura que hay en nuestra casa mediante un
sensor de temperatura LM35, además debemos mostrar una imagen en dicha
página.
Material:
- Placa Arduino UNO
- Shield Ethernet de Arduino
- Placa Arduino Basic I/O (Incluye el sensor de temperatura LM35)
- Cableado
- Router
- Latiguillos de Ethenet
Asignamos IP a Shield Ethernet
Abrimos el IDE de arduino y buscamos en ejemplos>Ethernet> Servidor web.Este sketch viene incluido en el IDE y nos sirve de base para nuestro objetivo.
Para probarlo tan solo debemos cambiar la IP que viene por defecto por una elegida por nosotros, debemos asignarle una que esté dentro del rango de IP que reparte nuestro router.
Para saberlo abrimos el terminal de comandos "cmd" e introducimos el comando "ipconfig", que nos mostrará la IP de nuestro equipo y la de la puerta de enlace que es nuestro router.
En mi caso le dare a la Shield Ethernet la dirección IP que viene por defecto 192.168.1.33
Conectamos la Shield al Arduino y lo conectamos al PC mediante el cable de Arduino, compilamos y cargamos el programa en la placa.
Este es el Sketch:
#include <SPI.h>
#include <Ethernet.h>
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(192, 168, 1, 177);
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
while (!Serial) {
; // wait for serial port to connect. Needed for native USB port only
}
// start the Ethernet connection and the server:
Ethernet.begin(mac, ip);
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}
void loop() {
// listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println("new client");
// an http request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
// if you've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println("Refresh: 5"); // refresh the page automatically every 5 sec
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
// output the value of each analog input pin
for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
int sensorReading = analogRead(analogChannel);
client.print("analog input ");
client.print(analogChannel);
client.print(" is ");
client.print(sensorReading);
client.println("<br />");
}
client.println("</html>");
break;
}
if (c == '\n') {
// you're starting a new line
currentLineIsBlank = true;
} else if (c != '\r') {
// you've gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
Serial.println("client disconnected");
}
}
Conectamos un cable Ethernet al conector RJ45 de la Shield y el otro extremo a uno de los conectores del router.
Si todo esto es correcto al abrir el navegador e introducir la nuestra ip nos debería aparecer la siguiente página.
La lectura de las entradas analógicas será aleatoria dado que no tenemos nada conectado a ellas.
Conectamos el sensor de temperatura
Ahora conectamos nuestra Placa Basic I/O que contiene el sensor de temperatura LM35.
La entrada analógica que corresponde al sensor LM35 es A4.
Debemos convertir la temperatura a grados Celsius por lo que usamos la relación 10mV/C que usa este sensor.
Subimos el sketch al arduino y abrimos el monitor serie para ver los valores que nos muestra, una vez verificado su correcto funcionamiento pasamos al siguiente paso.
Una vez comprobado que la Shield Ethernet nos crea el servidor y que el sensor LM35 nos muestra la temperatura correcta vamos a pasar al diseño de nuestra propia página HTML para mostrar los datos.
Diseño HTML
client.println("<!DOCTYPE HTML>");//encabezado de documento htmlclient.println("<html>");// comienzo de un archivo html
client.print("<head>");//CABECERO
client.print("<title>LA TEMPERATURA</title>");//titulo del cabecero
client.print("<meta charset='utf-8'>");//reconocimiento de codificacion de caracteres
//elemento meta con atributo charset de un docimento html.
//siempre antes del head
client.print("</head>");//cerramos el cabecero
client.print("<br>");//permite saltar una linea
client.print("<body>");//etiqueta llamada body
client.print("<center>");//crea una caja en bloque centrado
client.print("<h1> El Tiempo </h1>");
client.print("<br>");//tag que sirve para saltar linea
client.print("<hr>");//crea una linea de separacion horizontal
client.print("<br>");//tag que sirve para saltar linea
client.print("</body>");
client.print ("</br>");
client.print("<center>");
client.print("<I>");//atributo para encerrar texto en italicas
client.print(" <h1> La temperatura en Santiago de Cartes: ");// titulo con el comando h1
client.print(temperatura);//temperatura real de sensor lm35
client.print ("ºC");
client.print("</h1>");
client.print("</I>");
client.print("<BODY BACKGROUND=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLs73zMVHI2J0wHzVrkQVxxallFu880wIJB1Hicq6tTsYNFy7mym0dVOCsSGAtwWsUp0h0Qc3lGJRSiAUElyEUZkO76p5X5mbMCYbSPCdYxvWGpZ5aaNdRPIZTVcdRXDLChTEJjT3CvSl4/s1600/Weather_wallpaper.png>");// La imagen que sale en la pagina
client.print("</body>");
client.println("</html>"); // Cerramos HTML
Una vez realizados y comprobados todos los paso juntamos todos los "sketch".
Comentarios
Publicar un comentario