Skip to content

Instantly share code, notes, and snippets.

@andi34

andi34/esp8266-dht22.ino

Last active October 17, 2020 11:06
Show Gist options
  • Save andi34/4d8c7c652efca33fa2867b15af54c063 to your computer and use it in GitHub Desktop.
Save andi34/4d8c7c652efca33fa2867b15af54c063 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
esp8266-dht22.ino
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHT.h"
// Uncomment one of the lines below for whatever DHT sensor type you're using!
//#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
/*Put your SSID & Password*/
const char* ssid = ""; // Enter SSID here
const char* password = ""; //Enter Password here
ESP8266WebServer server(80);
// DHT Sensor
// NOTE: On ESP8266 avoid using "D8" as the ESP8266 won't boot and
// you won't be able to upload a Sketch if D8 is connected.
uint8_t DHTPin = D2;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);
float Temperature;
float Fahrenheit;
float Humidity;
float HeatindexC;
float HeatindexF;
void setup() {
Serial.begin(115200);
delay(100);
pinMode(DHTPin, INPUT);
dht.begin();
Serial.println("Connecting to ");
Serial.println(ssid);
//connect to your local wi-fi network
WiFi.begin(ssid, password);
//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
Temperature = dht.readTemperature(); // Gets the values of the temperature
Fahrenheit = dht.readTemperature(true); // Gets the values of the temperature in Fahrenheit
Humidity = dht.readHumidity(); // Gets the values of the humidity
HeatindexC = dht.computeHeatIndex(Temperature, Humidity, false);
HeatindexF = dht.computeHeatIndex(Fahrenheit, Humidity);
server.send(200, "text/html", SendHTML(Temperature, Fahrenheit, Humidity, HeatindexC, HeatindexF));
}
void handle_NotFound() {
server.send(404, "text/plain", "Not found");
}
String SendHTML(float Temperaturestat, float Fahrenheitstat, float Humiditystat, float HeatindexCstat, float HeatindexFstat) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr += "<meta charset=\"UTF-8\" />\n";
ptr += "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
ptr += "<title>Weather Report</title>\n";
ptr += "<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
ptr += "body{margin-top: 50px;}\n";
ptr += "h1 {margin: 20px auto 0px;}\n";
ptr += "hr {width: 25%; margin-top: 1em; margin-bottom: 2em;}\n";
ptr += "@media (max-width: 767px) {hr {width: 50%;}}\n";
ptr += ".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
ptr += ".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
ptr += ".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
ptr += ".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
ptr += ".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
ptr += ".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
ptr += ".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
ptr += ".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
ptr += ".data{padding: 10px;}\n";
ptr += "</style>\n";
// Add date and time
ptr += "<script type=\"text/javascript\">\n";
ptr += "var monNames = new Array('January', 'February', 'March',\n";
ptr += "'April', 'May', 'June',\n";
ptr += "'July', 'August', 'September',\n";
ptr += "'October', 'November', 'December');\n";
ptr += "var dayNames = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday',\n";
ptr += "'Thursday', 'Friday', 'Saturday');\n";
ptr += "function t4(j) {\n";
ptr += "return (j < 1000 ? j+1900 : j);\n";
ptr += "}\n";
ptr += "// Freeware (c) 1999 by Thomas Salvador, http://www.brauchbar.de\n";
ptr += "var now = new Date();\n";
ptr += "var x= now.getHours();\n";
ptr += "if (x <10) {x=\"0\"+x;}\n";
ptr += "var y= now.getMinutes();\n";
ptr += "if (y <10) {y=\"0\"+y;}\n";
ptr += "var z= now.getSeconds();\n";
ptr += "if (z <10) {z=\"0\"+z;}\n";
ptr += "\n";
ptr += "document.write('<h1>Weather Report</h1>');\n";
ptr += "document.write('</br>');\n";
ptr += "document.write(dayNames[now.getDay()]);\n";
ptr += "document.write(', ', now.getDate());\n";
ptr += "document.write('. ', monNames[now.getMonth()]);\n";
ptr += "document.write(' ', t4(now.getYear()));\n";
ptr += "document.write('</br>');\n";
ptr += "document.write('Time: ', x+\":\"+y+\":\"+z);\n";
ptr += "document.write('<hr>');\n";
ptr += "</script>\n";
// Add date and time end
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<div class=\"data\">\n";
ptr += "<div class=\"side-by-side temperature-icon\">\n";
ptr += "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
ptr += "width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
ptr += "<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
ptr += "c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
ptr += "c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
ptr += "c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
ptr += "c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
ptr += "</svg>\n";
ptr += "</div>\n";
ptr += "<div class=\"side-by-side temperature-text\">Temperature</div>\n";
ptr += "</br>\n";
ptr += "<div class=\"side-by-side temperature\">";
ptr += Temperaturestat;
ptr += "<span class=\"superscript\">&deg;C</span></div>\n";
ptr += "</br>\n";
ptr += "<div class=\"side-by-side temperature\">";
ptr += Fahrenheitstat;
ptr += "<span class=\"superscript\">&deg;F</span></div>\n";
ptr += "</div>\n";
ptr += "<div class=\"data\">\n";
ptr += "<div class=\"side-by-side humidity-icon\">\n";
ptr += "<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
ptr += "width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
ptr += "<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
ptr += "c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
ptr += "</svg>\n";
ptr += "</div>\n";
ptr += "<div class=\"side-by-side humidity-text\">Humidity</div>\n";
ptr += "</br>\n";
ptr += "<div class=\"side-by-side humidity\">";
ptr += Humiditystat;
ptr += "<span class=\"superscript\">%</span></div>\n";
ptr += "</div>\n";
ptr += "<div class=\"data\">\n";
ptr += "<div class=\"side-by-side temperature-icon\">\n";
ptr += "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
ptr += "width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
ptr += "<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
ptr += "c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
ptr += "c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
ptr += "c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
ptr += "c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
ptr += "</svg>\n";
ptr += "</div>\n";
ptr += "<div class=\"side-by-side temperature-text\">Heatindex</div>\n";
ptr += "</br>\n";
ptr += "<div class=\"side-by-side temperature\">";
ptr += HeatindexCstat;
ptr += "<span class=\"superscript\">&deg;C</span></div>\n";
ptr += "</br>\n";
ptr += "<div class=\"side-by-side temperature\">";
ptr += HeatindexFstat;
ptr += "<span class=\"superscript\">&deg;F</span></div>\n";
ptr += "</div>\n";
ptr += "</div>\n";
ptr += "</body>\n";
ptr += "</html>\n";
return ptr;
}
@andi34
Copy link
Author

andi34 commented Oct 16, 2020 •
edited
Loading

ESP8266 Weather Station

Based on instructions from:

Needed libraries:

  • "Adafruit Unified Sensor" by Adafruit
  • "DHT sensor library" by Adafruit

Used parts:

NOTE: ESP8266 does not boot, also can't get skatches uploaded, if D8 is connected.

Screenshot:
Screenshot_2020-10-17_13-05-42

Fritzing:
esp8266-dht22_bb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment