\/\/ Load Wi-Fi library\n#include <ESP8266WiFi.h>\n#include <Wire.h>\n#include <Adafruit_BME280.h>\n#include <Adafruit_Sensor.h><\/code><\/pre>\n\n\n\nThe next line defines a variable to save the pressure at the sea level. For more accurate altitude estimation, replace the value with the current sea level pressure at your location.<\/p>\n\n\n\n
#define SEALEVELPRESSURE_HPA (1013.25)<\/code><\/pre>\n\n\n\nIn the following line you create an Adafruit_BME280<\/span> object called bme<\/span> that by default establishes a communication with the sensor using I2C.<\/p>\n\n\n\nAdafruit_BME280 bme; \/\/ I2C<\/code><\/pre>\n\n\n\nAs mentioned previously, you need to insert your ssid and password in the following lines inside the double quotes.<\/p>\n\n\n\n
const char* ssid = \"\";\nconst char* password = \"\";<\/code><\/pre>\n\n\n\nThen, you set your web server to port 80.<\/p>\n\n\n\n
\/\/ Set web server port number to 80\nWiFiServer server(80);<\/code><\/pre>\n\n\n\nThe following line creates a variable to store the header of the HTTP request:<\/p>\n\n\n\n
String header;<\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
In the setup()<\/span>, we start a serial communication at a baud rate of 115200 for debugging purposes.<\/p>\n\n\n\nSerial.begin(115200);<\/code><\/pre>\n\n\n\nYou check that the BME280 sensor was successfully initialized.<\/p>\n\n\n\n
if (!bme.begin(0x76)) {\n Serial.println(\"Could not find a valid BME280 sensor, check wiring!\");\n while (1);<\/code><\/pre>\n\n\n\nThe following lines begin the Wi-Fi connection with WiFi.begin(ssid, password)<\/span>, wait for a successful connection and print the ESP IP address in the Serial Monitor.<\/p>\n\n\n\n\/\/ Connect to Wi-Fi network with SSID and password\nSerial.print(\"Connecting to \");\nSerial.println(ssid);\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n}\n\/\/ Print local IP address and start web server\nSerial.println(\"\");\nSerial.println(\"WiFi connected.\");\nSerial.println(\"IP address: \");\nSerial.println(WiFi.localIP());\nserver.begin();<\/code><\/pre>\n\n\n\nloop()<\/h3>\n\n\n\n
In the loop()<\/span>, we program what happens when a new client establishes a connection with the web server. The ESP is always listening for incoming clients with this line:<\/p>\n\n\n\nWiFiClient client = server.available(); \/\/ Listen for incoming clients<\/code><\/pre>\n\n\n\nWhen a request is received from a client, we\u2019ll save the incoming data. The while loop that follows will be running as long as the client stays connected.<\/p>\n\n\n\n
if (client) { \/\/ If a new client connects,\n Serial.println(\"New Client.\"); \/\/ print a message out in the serial port\n String currentLine = \"\"; \/\/ make a String to hold incoming data from the client\n while (client.connected()) { \/\/ loop while the client's connected\n if (client.available()) { \/\/ if there's bytes to read from the client,\n char c = client.read(); \/\/ read a byte, then\n Serial.write(c); \/\/ print it out the serial monitor\n header += c;\n if (c == '\\n') { \/\/ if the byte is a newline character\n \/\/ if the current line is blank, you got two newline characters in a row.\n \/\/ that's the end of the client HTTP request, so send a response:\n if (currentLine.length() == 0) {\n \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n \/\/ and a content-type so the client knows what's coming, then a blank line:\n client.println(\"HTTP\/1.1 200 OK\");\n client.println(\"Content-type:text\/html\");\n client.println(\"Connection: close\");\n client.println();<\/code><\/pre>\n\n\n\nDisplaying the HTML web page<\/h3>\n\n\n\n
The next thing you need to do is sending a response to the client with the HTML text to build the web page.<\/p>\n\n\n\n
The web page is sent to the client using this expression client.println()<\/span>. You should enter what you want to send to the client as an argument.<\/p>\n\n\n\nThe following code snippet sends the web page to display the sensor readings in a table.<\/p>\n\n\n\n
client.println(\"<!DOCTYPE html><html>\");\nclient.println(\"<head><meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\");\nclient.println(\"<link rel=\\\"icon\\\" href=\\\"data:,\\\">\");\n\/\/ CSS to style the on\/off buttons \n\/\/ Feel free to change the background-color and font-size attributes to fit your preferences\nclient.println(\"<style>body { text-align: center; font-family: \\\"Trebuchet MS\\\", Arial;}\");\nclient.println(\"table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }\");\nclient.println(\"th { padding: 12px; background-color: #0043af; color: white; }\");\nclient.println(\"tr { border: 1px solid #ddd; padding: 12px; }\");\nclient.println(\"tr:hover { background-color: #bcbcbc; }\");\nclient.println(\"td { border: none; padding: 12px; }\");\nclient.println(\".sensor { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }\");\n \n\/\/ Web Page Heading\nclient.println(\"<\/style><\/head><body><h1>ESP32 with BME280<\/h1>\");\nclient.println(\"<table><tr><th>MEASUREMENT<\/th><th>VALUE<\/th><\/tr>\");\nclient.println(\"<tr><td>Temp. Celsius<\/td><td><span class=\\\"sensor\\\">\");\nclient.println(bme.readTemperature());\nclient.println(\" *C<\/span><\/td><\/tr>\"); \nclient.println(\"<tr><td>Temp. Fahrenheit<\/td><td><span class=\\\"sensor\\\">\");\nclient.println(1.8 * bme.readTemperature() + 32);\nclient.println(\" *F<\/span><\/td><\/tr>\"); \nclient.println(\"<tr><td>Pressure<\/td><td><span class=\\\"sensor\\\">\");\nclient.println(bme.readPressure() \/ 100.0F);\nclient.println(\" hPa<\/span><\/td><\/tr>\");\nclient.println(\"<tr><td>Approx. Altitude<\/td><td><span class=\\\"sensor\\\">\");\nclient.println(bme.readAltitude(SEALEVELPRESSURE_HPA));\nclient.println(\" m<\/span><\/td><\/tr>\"); \nclient.println(\"<tr><td>Humidity<\/td><td><span class=\\\"sensor\\\">\");\nclient.println(bme.readHumidity());\nclient.println(\" %<\/span><\/td><\/tr>\"); \nclient.println(\"<\/body><\/html>\");<\/code><\/pre>\n\n\n\nNote:<\/strong> you can click here to view the full HTML web page<\/a>.<\/p>\n\n\n\nDisplaying the Sensor Readings<\/h3>\n\n\n\n
To display the sensor readings on the table, we just need to send them between the corresponding <td><\/span> and <\/td><\/span> tags. For example, to display the temperature:<\/p>\n\n\n\nclient.println(\"<tr><td>Temp. Celsius<\/td><td><span class=\\\"sensor\\\">\");\nclient.println(bme.readTemperature());\nclient.println(\" *C<\/span><\/td><\/tr>\");<\/code><\/pre>\n\n\n\nNote<\/strong>: the <span><\/span> tag is useful to style a particular part of a text. In this case, we’re using the <span><\/span> tag to include the sensor reading in a class called “sensor”. This is useful to style that particular part of text using CSS.<\/p>\n\n\n\nBy default the table is displaying the temperature readings in both Celsius degrees and Fahrenheit. You can comment the following three lines, if you want to display the temperature only in Fahrenheit degrees.<\/p>\n\n\n\n
\/*client.println(\"<tr><td>Temp. Celsius<\/td><td><span class=\\\"sensor\\\">\");\nclient.println(bme.readTemperature());\nclient.println(\" *C<\/span><\/td><\/tr>\");*\/<\/code><\/pre>\n\n\n\nClosing the Connection<\/h3>\n\n\n\n
Finally, when the response ends, we clear the header<\/span> variable, and stop the connection with the client with client.stop()<\/span>.<\/p>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/07\/ESP8266-BME280.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"BME280](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/bme280-sensor.jpg?resize=750%2C462&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"BME280](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/07\/BME280-SPI.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\n![\"Schematic](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP8266-BME280-Arduino-IDE.png?resize=705%2C532&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/08\/install-bme280.png?resize=786%2C443&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/04\/adafruit_unified_sensor_library.png?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/07\/BME280-ESP8266-Breadboard.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"Printing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/bme280-readings-arduino-ide.png?resize=666%2C469&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/07\/ESP32-ESP8266-BME280-web-server-temperature-humidity-pressure.jpg?resize=750%2C420&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n