API tools faq
paste
Advertisement
RaspBar

ESP8266_BME280_WebServer.ino

RaspBar
Jul 6th, 2022 (edited)
165
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
C++ 8.40 KB | None | 0 0
raw download clone embed print report
  1. #include <ESP8266WebServer.h>
  2. #include <ESP8266WiFi.h>
  3. #include <WiFiClient.h>
  4. #include <Wire.h>
  5. #include <Adafruit_Sensor.h>
  6. #include <Adafruit_BME280.h>
  7.  
  8. #define SEALEVELPRESSURE_HPA (1013.25)  // Luftdruck bei 0 Meter
  9.  
  10. // initialize Adafruit BME280 library
  11. Adafruit_BME280  bme;
  12.  
  13. float temperature, humidity, pressure, altitude;
  14.  
  15. /*Put your SSID & Password*/
  16. const char* ssid = "mySSID";  // Enter SSID here
  17. const char* password = "myPassword";  //Enter Password here
  18.  
  19. //LED Setup
  20. int LEDrot = D0; // -> GPIO16
  21. int LEDblau = D3; // -> GPIO0
  22.  
  23. ESP8266WebServer server(80);              
  24.  
  25. void setup() {
  26.   Serial.begin(115200);
  27.   delay(500);
  28.  
  29.   //LED initialisieren -> LED aus
  30.   pinMode(LEDrot, OUTPUT); // Pin D0 ist ein Ausgang.
  31.   pinMode(LEDblau,OUTPUT); // Pin D3 ist ein Ausgang.
  32.   digitalWrite(LEDrot, LOW); // Schalte die LED an Pin D0 aus. D0 ist beim Start des ESP8266 auf HIGH.
  33.   digitalWrite(LEDblau, LOW); // Schalte die LED an Pin D3 aus.
  34.  
  35.   bme.begin(0x76);  
  36.  
  37.   Serial.println("Connecting to ");
  38.   Serial.println(ssid);
  39.  
  40.   //connect to your local wi-fi network
  41.   WiFi.begin(ssid, password);
  42.  
  43.   //check wi-fi is connected to wi-fi network
  44.   while (WiFi.status() != WL_CONNECTED) {
  45.   delay(1000);
  46.   Serial.print(".");
  47.   }
  48.   Serial.println("");
  49.   Serial.println("WiFi connected..!");
  50.   Serial.print("Got IP: ");  Serial.println(WiFi.localIP());
  51.  
  52.   server.on("/", handle_OnConnect);
  53.   server.onNotFound(handle_NotFound);
  54.  
  55.   server.begin();
  56.   Serial.println("HTTP server started");
  57.  
  58. }
  59. void loop() {
  60.   server.handleClient();
  61. }
  62.  
  63. void handle_OnConnect() {
  64.   temperature = bme.readTemperature();
  65.   humidity = bme.readHumidity();
  66.   pressure = bme.readPressure() / 100.0F;
  67.   altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  68.   server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude));
  69. }
  70.  
  71. void handle_NotFound(){
  72.   server.send(404, "text/plain", "Not found");
  73. }
  74.  
  75. String SendHTML(float temperature,float humidity,float pressure,float altitude){
  76.   String ptr = "<!DOCTYPE html>";
  77.   ptr +="<html>";
  78.   ptr +="<head>";
  79.   ptr +="<title>ESP8266 Weather Station</title>";
  80.   ptr +="<meta http-equiv=\"refresh\" content=\"10\" name='viewport' content='width=device-width, initial-scale=1.0'>";
  81.   ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  82.   ptr +="<style>";
  83.   ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  84.   ptr +="body{margin: 0px;} ";
  85.   ptr +="h1 {margin: 50px auto 30px;} ";
  86.   ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  87.   ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  88.   ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  89.   ptr +=".temperature .reading{color: #F29C1F;}";
  90.   ptr +=".humidity .reading{color: #3B97D3;}";
  91.   ptr +=".pressure .reading{color: #26B99A;}";
  92.   ptr +=".altitude .reading{color: #955BA5;}";
  93.   ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  94.   ptr +=".data{padding: 10px;}";
  95.   ptr +=".container{display: table;margin: 0 auto;}";
  96.   ptr +=".icon{width:65px}";
  97.   ptr +="</style>";
  98.   ptr +="</head>";
  99.   ptr +="<body>";
  100.   ptr +="<h1>ESP8266 Wetter Station</h1>";
  101.   ptr +="<div class='container'>";
  102.   ptr +="<div class='data temperature'>";
  103.   ptr +="<div class='side-by-side icon'>";
  104.   ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  105.   ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  106.   ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  107.   ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  108.   ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  109.   ptr +="</div>";
  110.   ptr +="<div class='side-by-side text'>Temperatur</div>";
  111.   ptr +="<div class='side-by-side reading'>";
  112.   ptr +=(int)temperature;
  113.   ptr +="<span class='superscript'>&deg;C</span></div>";
  114.   ptr +="</div>";
  115.   ptr +="<div class='data humidity'>";
  116.   ptr +="<div class='side-by-side icon'>";
  117.   ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  118.   ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  119.   ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  120.   ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  121.   ptr +="</div>";
  122.   ptr +="<div class='side-by-side text'>Luftfeuchte</div>";
  123.   ptr +="<div class='side-by-side reading'>";
  124.   ptr +=(int)humidity;
  125.   ptr +="<span class='superscript'>%</span></div>";
  126.   ptr +="</div>";
  127.   ptr +="<div class='data pressure'>";
  128.   ptr +="<div class='side-by-side icon'>";
  129.   ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  130.   ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  131.   ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  132.   ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  133.   ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  134.   ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  135.   ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  136.   ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  137.   ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  138.   ptr +="</div>";
  139.   ptr +="<div class='side-by-side text'>Luftdruck</div>";
  140.   ptr +="<div class='side-by-side reading'>";
  141.   ptr +=(int)pressure;
  142.   ptr +="<span class='superscript'>hPa</span></div>";
  143.   ptr +="</div>";
  144.   ptr +="<div class='data altitude'>";
  145.   ptr +="<div class='side-by-side icon'>";
  146.   ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  147.   ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  148.   ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  149.   ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  150.   ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  151.   ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  152.   ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  153.   ptr +="</div>";
  154.   ptr +="<div class='side-by-side text'>H&ouml;he</div>";
  155.   ptr +="<div class='side-by-side reading'>";
  156.   ptr +=(int)altitude;
  157.   ptr +="<span class='superscript'>m</span></div>";
  158.   ptr +="</div>";
  159.   ptr +="</div>";
  160.   ptr +="</body>";
  161.   ptr +="</html>";
  162.   return ptr;
  163. }
  164.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!