Embedded Files
Este proyecto es básicamente igual que el de Humedad y temperatura en Arduino . La diferencia de este con respecto al mencionado es que se pueden consultar los datos del sensor mediante un navegador ya que vamos a convertir la placa ESP8266 en un servidor.
Dicho esto, la idea original de este proyecto se encuentra en Random Nerds Tutorials de Rui Santos, siendo lo que desarrollo a continuación una traducción del mismo con algún añadido para adaptarlo a nuestro contexto educativo.
En resumen, se trata de consultar los datos de un sensor de temperatura y humedad, conectados a una placa arduino ESP8266, con un navegador web apuntando a la IP en la red local de dicha placa ESP8266.
MATERIAL NECESARIO
Placa arduino ESP8266
Sensor DHT11/DHT22 (para medir temperatura y humedad)
Cables para protoboard hembra-hembra
Cables para conexión USB-micro USB
Cargadores de enchufe con conexión micro USB
DIAGRAMA DE CONEXIÓN
La conexión entre el ESP8266 y el sensor DHT11 o DHT22 debería ser esta:
Cable rojo desde el pin VCC del sensor hacia uno de los pines de alimentación que ofrece la placa (3V3)
Cable negro desde el pin GND hacia uno de los pines de tierra GND de la placa
Cable verde hacia el pin D4. Se trata de un pin de conexión digital y es donde el sensor va a ir volcando sus datos según al programa en Arduino. Este pin D4 podría ser otro si quisiéramos utilizar otro pin.
Si el sensor es del DHT22 la conexión sería igual, aunque hay que prestar atención a los pines de sensor ya que no se encuentran en la misma disposición que en el DHT11.
INSTALACIÓN DE LAS LIBRERÍAS NECESARIAS
Para que el DHT funcione hay que usa la librería llamada DHT library from Adafruit. Para usar esta librería también hace falta instalar Adafruit Unified Sensor library.
Para crear el servidor web se usará ESPAsyncWebServer library. y también ESPAsyncTCP.
La instalación se realiza con el Gestor de bibliotecas del IDE de Arduino. Este gestor se encuentra en el lado izquierdo.
También se puede hacer una instalación manual descargando el archivo ZIP de la librería . La instalación se realiza mediante el menú del Arduino IDE en Sketch > Incluir biblioteca > Añadir biblioteca ZIP...
CÓDIGO EN ARDUINO
Respecto al código en Arduino, bastaría con copiar el que está más abajo y pergarlo en el IDE de Arduino. Solamente habría que sustituir el nombre de la red Wifi y su contraseña. También prestar atención a qué pin del ESP se conecta el cable de los datos del DHT11. Este código está configurado para que sea en el D4.
Por otro lado podemos pensar que estamos haciendo algo que no comprendemos. No explico en qué consiste el código y, por tanto, estamos confiando en que algo funcione a ciegas. En este sentido, hay que lanzarse un poco a esta piscina. Esta web y sus recursos están destinados a profesores de Geografía e Historia. Yo mismo soy de esta especialidad. Este tutorial no está hecho para especialistas y técnicos.
El código viene comentado en aquellas partes que se pueden modificar.
Programa en Arduino para DHT11
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Reemplezar por los datos de vuestra red inalámbrica
const char* ssid = "NOMBRE_DE_LA_RE_WIFI";
const char* password = "CONSTRASEÑA_DE_LA_RED_WIFI";
#define DHTPIN D4 // Pint digital al que se conecta el sensor DHT
// Seleccionar descomentando el sensor DHT que se esté utilizando
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302)
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);
// establece las variables para temperatura y humedad en el loop()
float t = 0.0;
float h = 0.0;
AsyncWebServer server(80);
unsigned long previousMillis = 0;
// Actualiza las lecturas del sensor DHT cada 10 segundos
const long interval = 10000;
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
</head>
<body>
<h2>Servidor ESP8266 con sensor DHT</h2>
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
<span class="dht-labels">Temperatura</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humedad</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
</body>
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("humidity").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";
// Reemplaza los marcadores con los valores obtenidos con el sensor DHT
String processor(const String& var){
if(var == "TEMPERATURE"){
return String(t);
}
else if(var == "HUMIDITY"){
return String(h);
}
return String();
}
void setup(){
Serial.begin(115200);
dht.begin();
// Conexión a la Wifi
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(".");
}
// Imprime la IP local del ESP8266 en el puerto de serie
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(t).c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(h).c_str());
});
// Inicia el servidor
server.begin();
}
void loop(){
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
previousMillis = currentMillis;
// Lectura de la temperatura
float newT = dht.readTemperature();
if (isnan(newT)) {
Serial.println("Failed to read from DHT sensor!");
}
else {
t = newT;
Serial.println(t);
}
// Lectura de la humedad
float newH = dht.readHumidity();
if (isnan(newH)) {
Serial.println("Failed to read from DHT sensor!");
}
else {
h = newH;
Serial.println(h);
}
}
}
VISUALIZACIÓN DEL SERVIDOR CON LOS DATOS
Para ver los datos de humedad y temperatura recogidos por el sensor simplemente hay que escribir la dirección IP de la placa ESP8266 en la red local a la que está conectada, que debe de ser la misma a la que esté conectado el dispositivos desde donde queremos ver los datos.
La dirección IP de la placa ESP8266 al conectarse a la Wifi que hayamos configurado se puede ver si activamos el monitor Serie del IDE de Arduino, tal como se puede ver en la imagen inferior.
Así, desde el navegador del mismo móvil, un ordenador o cualquier otro dispositivo se pueden consultar los datos del sensor aunque esté no esté cerca de nosotros pero sí en la misma red.
Google Sites
Report abuse