{"id":12529,"date":"2016-11-13T12:20:00","date_gmt":"2016-11-13T17:20:00","guid":{"rendered":"http:\/\/embedded-lab.com\/blog\/?p=12529"},"modified":"2016-11-18T13:04:32","modified_gmt":"2016-11-18T18:04:32","slug":"making-simple-weather-web-server-using-esp8266-bme280","status":"publish","type":"post","link":"https:\/\/embedded-lab.com\/blog\/making-simple-weather-web-server-using-esp8266-bme280\/","title":{"rendered":"Making a simple weather web server using ESP8266 and BME280"},"content":{"rendered":"<p>Since its launch in 2014, ESP8266 has revolutionized the IoT space by offering an extremely cost-effective and programmable WiFi-enabled microcontroller to hobbyists and professionals, thereby opening the doors to all kinds of everyday objects and sensors to the internet. In addition, with it&#8217;s built-in WiFi capability, the ESP8266 can also serve as a\u00a0standalone web server on a local network, and can\u00a0respond to the <strong>http GET<\/strong> commands received from an internet browser.\u00a0This project illustrates how to construct\u00a0a simple standalone weather web server utilizing <strong><a href=\"https:\/\/www.tindie.com\/products\/rajbex\/nodemcu-esp8266-development-board\/\" target=\"_blank\">NodeMCU development board<\/a><\/strong> for ESP8266 and Bosch&#8217;s BME280 environmental sensor chip. On receiving the web requests, the ESP8266 responds back by returning back an HTML webpage containing the ambient temperature, humidity and pressure measurements. With the help of refresh meta tags, the webpage automatically reloads every 15 seconds to get the latest\u00a0environmental sensor data.<\/p>\n<div id=\"attachment_12547\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP1.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12547\" class=\"size-full wp-image-12547\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP1.jpg\" alt=\"Weather web server using ESP8266 and BME280 environmental sensor\" width=\"1024\" height=\"667\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP1.jpg 1024w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP1-580x378.jpg 580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-12547\" class=\"wp-caption-text\">Weather web server using ESP8266 and BME280 environmental sensor<\/p><\/div>\n<h3>Hardware<\/h3>\n<p>This project requires minimal hardware components. You will need an ESP8266 development\u00a0board, like <strong><a href=\"https:\/\/www.tindie.com\/products\/rajbex\/nodemcu-esp8266-development-board\/\" target=\"_blank\">NodeMCU<\/a><\/strong> that I am using here, a BME280 sensor module, a breadboard with some jumper wires, and a USB cable for programming the NodeMCU board.<\/p>\n<p><a href=\"https:\/\/www.bosch-sensortec.com\/bst\/products\/all_products\/bme280\" target=\"_blank\">BME280<\/a> is a\u00a0fully integrated environmental unit from Bosch that combines sensors for pressure, humidity, and temperature in a tiny 8-pin metal-lid LGA package of size 2.5 x 2.5 x 0.93 mm\u00b3. Because of its compact size, ease of use (BME280 supports standard I2C and SPI interfaces), and availability of supporting open-source Arduino libraries, BME280 is very popular among weather enthusiasts. In this project, the I2C data (SDA) and clock (SCL) pins of the BME sensor module are connected to the NodeMCU pins D3 and D4, respectively.<\/p>\n<p><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/SetUpserver.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12536\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/SetUpserver.jpg\" alt=\"setupserver\" width=\"860\" height=\"676\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/SetUpserver.jpg 860w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/SetUpserver-580x456.jpg 580w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/a><\/p>\n<div id=\"attachment_12543\" style=\"width: 870px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095428.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12543\" class=\"size-large wp-image-12543\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095428-1024x709.jpg\" alt=\"Weather web server setup on breadboard\" width=\"860\" height=\"595\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095428.jpg 1024w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095428-580x402.jpg 580w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/a><p id=\"caption-attachment-12543\" class=\"wp-caption-text\">Weather web server hardware setup on breadboard<\/p><\/div>\n<h3>Software<\/h3>\n<p>The ESP8266 firmware for this project is developed using Arduino IDE. You need to install the <strong><a href=\"https:\/\/github.com\/esp8266\/Arduino\">ESP8266 core<\/a><\/strong> to enable the Arduino IDE for ESP8266 programming. Instructions can be found in the <a href=\"https:\/\/github.com\/esp8266\/Arduino\" target=\"_blank\">ESP8266 core github page<\/a>\u00a0or <strong><a href=\"http:\/\/easy-esp.com\/getting-started-with-easyesp-1-using-arduino-ide\/\" target=\"_blank\">here<\/a><\/strong> too. You will also need the following Adafruit libraries for reading data from the BME280 sensor.<\/p>\n<p><strong><a href=\"https:\/\/github.com\/adafruit\/Adafruit_Sensor\" target=\"_blank\">Adafruit unified sensor library<\/a><\/strong><\/p>\n<p><a href=\"https:\/\/github.com\/adafruit\/Adafruit_BME280_Library\" target=\"_blank\"><strong>Adafruit BME280 library<\/strong><\/a><\/p>\n<p>The I2C address for BME280 is hardcoded in the\u00a0<em>Adafruit_BME280.h<\/em> file (look for the line <em>#define BME280_ADDRESS \u00a00x77<\/em>) inside the\u00a0<em>Adafruit_BME280_Library<\/em> folder. Adafruit&#8217;s BME sensor modules are hard-wired\u00a0to use the I2C address of 0x77. But the BME280 can have a slightly different\u00a0I2C address (0x76) if its external SDO pin is grounded. If you are using the sensor modules from other party, it is likely that it&#8217;s address would not match with the default value in the Adafruit library. For example, for most of the BME280 sensor modules available\u00a0on eBay or Aliexpress, I have found their I2C address to be 0x76. So, if you didn&#8217;t get any response from the sensor using the default address set in the\u00a0<em>Adafruit_BME280.h<\/em> file, you might need to change that\u00a0to 0x76.<\/p>\n<p>My complete code for this weather webserver project can be downloaded from the following link:<\/p>\n<p><strong><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/BME280_Webserver.zip\">Download BME280_webserver_code<\/a><\/strong><\/p>\n<p>The code for a very basic HTML webpage with sensor output and auto refresh meta tag is included in the above ESP8266 firmware. Note that you need to edit\u00a0the SSID name and password in the program to match with your WiFi network before uploading it to the NodeMCU board.<\/p>\n<h3>Output<\/h3>\n<p>After uploading the program to NodeMCU, when the\u00a0ESP8266 restarts\u00a0it prints out on the\u00a0serial monitor\u00a0the IP address it&#8217;s allocated in the local network. In order to access the ESP8266 web server, you need to open a web browser on any computer, tablet, or smartphone connected to the same WiFi network and type in the ESP8266\u00a0IP address in the URL field and hit enter. On receiving a client request, the ESP8266 serves a webpage containing\u00a0the BME sensor readings, as shown below.<\/p>\n<div id=\"attachment_12545\" style=\"width: 621px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/Webserver.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12545\" class=\"size-full wp-image-12545\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/Webserver.png\" alt=\"Standalone weather web server using ESP8266 and BME280\" width=\"611\" height=\"477\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/Webserver.png 611w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/Webserver-580x453.png 580w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><\/a><p id=\"caption-attachment-12545\" class=\"wp-caption-text\">Standalone weather web server using ESP8266 and BME280<\/p><\/div>\n<p>The HTML page is refreshed automatically every 15 second to get the latest sensor readings. The Dew Point is computed from temperature and humidity using the following approximation:<\/p>\n<div id=\"attachment_12557\" style=\"width: 468px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/Form.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12557\" class=\"size-full wp-image-12557\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/Form.png\" alt=\"Source: Wikipedia\" width=\"458\" height=\"106\" \/><\/a><p id=\"caption-attachment-12557\" class=\"wp-caption-text\">Source: Wikipedia<\/p><\/div>\n<div id=\"attachment_12544\" style=\"width: 870px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095351.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12544\" class=\"size-large wp-image-12544\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095351-1024x656.jpg\" alt=\"Weather web server broadcasting BME sensor readings\" width=\"860\" height=\"551\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095351.jpg 1024w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/P_20161113_095351-580x372.jpg 580w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/a><p id=\"caption-attachment-12544\" class=\"wp-caption-text\">Weather web server broadcasting BME sensor readings<\/p><\/div>\n<p>This is a very nice and handy way of monitoring the weather around us, as it allows to watch the environmental parameters on our tablets and smartphones that we are carrying all the time.<\/p>\n<div id=\"attachment_12548\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP2.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12548\" class=\"size-full wp-image-12548\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP2.jpg\" alt=\"Smartphone\" width=\"1024\" height=\"810\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP2.jpg 1024w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2016\/11\/OP2-580x459.jpg 580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-12548\" class=\"wp-caption-text\">Weather data on smartphone<\/p><\/div>\n<h4>Acknowledgement<\/h4>\n<p>Thanks to\u00a0<em>Rui Santos<\/em> from <a href=\"http:\/\/randomnerdtutorials.com\/\" target=\"_blank\">Random Nerd Tutorials<\/a> for sharing his <a href=\"http:\/\/randomnerdtutorials.com\/esp8266-ds18b20-temperature-sensor-web-server-with-arduino-ide\/\" target=\"_blank\">DS1820-based temperature web server code<\/a>. I modified his code to incorporate the BME280 sensor readings, and also added auto-refresh Meta tag to reload the HTML page automatically in every 15 sec.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since its launch in 2014, ESP8266 has revolutionized the IoT space by offering an extremely cost-effective and programmable WiFi-enabled microcontroller to hobbyists and professionals, thereby opening the doors to all kinds of everyday objects and sensors to the internet. In addition, with it&#8217;s built-in WiFi capability, the ESP8266 can also serve as a\u00a0standalone web server on a local network, and can\u00a0respond to the http GET commands received from an internet browser.\u00a0This project illustrates how to construct\u00a0a simple standalone weather web server utilizing NodeMCU development board for ESP8266 and Bosch&#8217;s BME280 environmental sensor chip. On receiving the web requests, the ESP8266<\/p>\n","protected":false},"author":1,"featured_media":12547,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1044,1464,958,1467],"tags":[1560,1046,1561],"class_list":["post-12529","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266","category-featured","category-internet-of-things","category-projects","tag-bme280-sensor","tag-esp8266-project","tag-weather-webserver"],"_links":{"self":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/12529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/comments?post=12529"}],"version-history":[{"count":20,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/12529\/revisions"}],"predecessor-version":[{"id":12580,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/12529\/revisions\/12580"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/media\/12547"}],"wp:attachment":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/media?parent=12529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/categories?post=12529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/tags?post=12529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}