Esp8266 Dht22 als Arduino Tab.
Dht22.ino
// ****************************************************************
// Sketch Esp8266 DHT22 Modular(Tab)
// created: Jens Fleischer, 2018-08-08
// last mod: Jens Fleischer, 2018-08-08
// For more information visit: https://fipsok.de
// ****************************************************************
// Hardware: Esp8266, DHT22, 1 x 4k7 Ohm Widerstand
// D7 = GPIO13 Anschluss DHT22
// 4k7 Ohm Widerstand von VCC auf GPIO13
// Getestet auf: Nodemcu, Wemos D1 Mini Pro
/******************************************************************
Copyright (c) 2018 Jens Fleischer. All rights reserved.
This file is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This file is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
*******************************************************************/
// Diese Version von DHT22 sollte als Tab eingebunden werden.
// #include <ESP8266WebServer.h> muss im Haupttab aufgerufen werden
// Die Funktionalität des ESP8266 Webservers ist erforderlich.
// Die Funktion "dht22();" muss im Setup aufgerufen werden.
/**************************************************************************************/
#include "DHTesp.h" // Version 1.0.9 https://github.com/beegee-tokyo/DHTesp
const byte DHT_PIN = 13; // Pin für DHT22 einstellen
DHTesp dht;
void dht22() { // Funktionsaufruf "dht22();" muss im Setup eingebunden werden
dht.setup(DHT_PIN, DHTesp::DHT22);
server.on("/dht22", []() {
server.send(200, "application/json", handleDht());
});
}
String handleDht() {
float hum = dht.getHumidity();
float temp = dht.getTemperature();
char buf[37];
snprintf(buf, sizeof(buf), "[\"%s\",\"%.1f\",\"%.1f\",\"%.1f\",\"%.1f\"]", dht.getStatusString(), temp, hum, dht.computeDewPoint(temp, hum), dht.computeHeatIndex(temp, hum));
return buf;
}
Die Webseite zum Esp8266 Dht22.
dht22.html
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Klimadaten</title>
<script>
function renew() {
fetch('/dht22').then(function (response) {
return response.json();
}).then(function (array) {
var elem = document.querySelector('#temp');
array[0] == 'OK' ? elem.innerHTML = array[1].replace('.', ',') + '°C' : elem.innerHTML = '---------';
elem = document.querySelector('#hum');
array[0] == 'OK' ? elem.innerHTML = array[2].replace('.', ',') + ' %' : elem.innerHTML = array[0];
elem = document.querySelector('#tau');
array[0] == 'OK' ? elem.innerHTML = array[3].replace('.', ',') + '°C' : elem.innerHTML = array[0];
elem = document.querySelector('#hi');
array[0] == 'OK' ? elem.innerHTML = array[4].replace('.', ',') + '°C' : elem.innerHTML = '---------';
});
}
document.addEventListener('DOMContentLoaded', renew);
setInterval(renew, 2000)
</script>
<style>
body {
padding: 10px;
font-size: 3em;
}
main {
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
width: 290px;
height: 290px;
padding: 0.2em;
border: .15em solid #aeaeab;
box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.7);
border-radius: .2em;
}
span {
color: #02fc07;
position: relative;
top: 0.05em;
left: .1em;
font-weight: bold
}
.small {
color: #a4aba4;
font-size: 0.5em;
top: 0.2em;
}
</style>
</head>
<body>
<main>
<span id="temp"></span>
<span id="hum"></span>
<span class="small">Taupunkt</span>
<span id="tau"></span>
<span class="small">Hitzeindex</span>
<span id="hi"></span>
</main>
</body>
</html>