Scribd
Upload
27 views

ESP8266 NodeMCU Web Server With BME680

ESP8266 NodeMCU Web Server with BME680

Uploaded by

rondeau.denis44
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
27 views

ESP8266 NodeMCU Web Server With BME680

ESP8266 NodeMCU Web Server with BME680

Uploaded by

rondeau.denis44
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 20
o7iove024 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, ESP8266 NodeMCU Web Server with BME680 - Weather Station (Arduino IDE) This tutorial shows how to build a web server weather station with the ESP8266 NodeMCU to display sensor readings from the BME60 environmental sensor: gas (air quality), temperature, humidity and pressure. The readings are updated automatically on the web server using Server-Sent Events (SSE), The ESP8266 board will be programmed using Arduino IDE, To build the web server well use the ESP Async Web Server library that provides an easy way to build an asynchronous web BME680 Environmental Sensor The BME680 is an environmental sensor that combines gas, temperature, humidity and pressure sensors. The gas sensor can detect a broad range of gases like volatile organic compounds (VOC), For this reason, the BME680 can be used in indoor air quality control » GND Se A Ons. Yoows itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 420 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, ‘The BME680 contains a MOX (Metal-oxide) sensor that detects VOCs in the air. This sensor gives you a qualitative idea of the sum of VOCs/contaminants in the surrounding air. As @ raw signal, the BME680 outputs resistance values, These values, change due to variations in VOC concentrations: ~ - : —— ——— VOCs/Pollutants BME680 Resistance a A NO VOCs/Pollutants BME680 Resistance 1 Higher concentration of VOCs» Lower resistance = Lower concentration of VOCs » Higher resistance Parts Required To complete this tutorial you need the following parts: = BME680 sensor module ‘= ESP8266 (read Best ESP8266 development boards) = Breadboard itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 2120 o7iove024 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, = Jumper wires You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price! MAKER ADVISOR Schematic - ESP8266 with BME680 ‘The BME68O can communicate using I2C or SPI communication protocols In this tutorial well use 12 communication protocol. Follow the next schematic diagram to wire the 8ME680 to the ESP8266 using the default I2C pins. GPIO 5 (SCL) ] eT]ehsTste1s} ES mK) GPIO 4 (SDA) EEC CCL La F Fs Fi z Preparing Arduino IDE Well program the ESP8266 board using Arduino IDE. So, make sure you have the ESP8266 add-on installed. Follow the next tutorial: 1 Install the ESP8266 Board in Arduino IDE You also need to install the following libraries. 1 Adafruit_8ME680 library * Adafruit Sensor library = ESPAsyneWebServer = AsyncTCP, Follow the next instructions to install them, Installing the BME680 Library itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 20 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, To get readings from the BME680 sensor module we'll use the Adafrult_BME680 library. Follow the next steps to install the library in your Arduino IDE: Open your Arduino IDE and go to Sketch > Include Library > Manage Libraries. The Library Manager should open. Search for “adafruit bme680" on the Search box and install the library. 7 kaha Installing the Adafruit_Sensor Library To use the BME680 library, you also need to install the Adafruit_Sensor library. Follow the next steps to instal the library in your Arduino IDE: Go to Sketeh > Include Library > Manage Libraries and type “Adafruit Unified Sensor” in the search box. Scroll all the way down to find the library and install it © lated caine Installing the ESPAsyncWebServer library The ESPAsyneWebServer library is not available to install in the Arduino IDE Library Manager. So, you need to install it manually Follow the next steps to install the ESPAsyncWebServer library: itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 4720 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, 1. Click here to download the ESPAsyncWebServer library. You should have a zip folder in your Downloads folder 2. Unzip the ip folder and you should get ESPAsyncWebServer-master folder 3, Rename your folder from E5PAsynetebServermnaster to ESPAsyncWebServer 4, Move the ESPAsyncWebServer folder to your Arduino IDE installation libraries folder Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the library you've just downloaded Installing the ESPAsync TCP Library ‘The ESPAsyneWebServer library requires the ESPAsyncTCP Mbrary to work. Follow the next steps to instal that library: 1. Click here to download the ESPAsyncTC? library. You should hav folder 2. Unzip the ip folder and you should get ESPAsyncTCP-master fold 3. Rename your folder from ESPAsyreHEP-master to ESPASyncTCP 4, Move the ESPAsyncTCP folder to your Arduino IDE installation libraries folder 5. Finally, re-open your Arduino IDE Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the library youve just downloaded ESP8266 BME680 Web Server Code Open your Arduino IDE and copy the following code, To make it work, you need to insert your network credentials: SSID and password. serial > 11 send event with message “hello!", {d current asilts ‘ntt(“CLient reconnected! Last ressage 1D that it got is: Mu\n", client->lastTA()); 11 and set reconnect delay to 4 second eldent->send( "hello! »: server. adetandlen(devents); + NULL, mi11is(), 16009); -8in()5 void 100p0) 6 ((9i1Lis() ~ LastTime) > téneroelay) { ‘get anessoneadings(); Serdal.printé(*Tenperature = X.2 2¢ \o", temperatura); Sergal.printé(iumiatty = %.26 % \n", humidity); Serial. printé(*Pressure = .26 hPa \n", pressure); Serdal.pranté(Gas fessstance = %.2/ KObn \n", gasResistance); Serial. printin(); 11 Send Events to the Web Server with the Sensor Readings events. send(“ping” MULL m1255(9)5 ‘events. send(string temperature) c_ste(), tenperature®,aills()); events. send¢string(huntdity) .<_str(), hussdity" wl14s()); events. send(string(pressure).c_str(), "pressure" millis()); ‘events. send(string(gasResistance).<_str(), "gas" willis()); lasttine = millis(): View raw code itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 5120 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, Insert your network credentials in the following variables and the code will work straight away. const char* ssid = "REPLACE MITH_YOUR_SS10"; const char* password = "REPLACE KITH_YOUR_PASSKORD"; How the Code Works Read this section to learn how the code works, or skip to the next section. Including Libraries Start by including the necessary libraries. The Wire library is needed for 12C communication protocol. We also include the ‘PI library if you want to use SPI communication instead finclude include ‘The Adafruit_Sensor and Adafruit_SMé6a@ libraries are needed to interface with the BME680 sensor. include cAdafrutt_sensor.t> finclude *Adafruis_BHES80.h" The WiFi and ESPAsyncWebServer libraries are used to create the web server. ‘include cESPR26MIFS.n> include “ESPAsyneuebserver Network Credentials Insert your network credentials in the following variables, so that the ESP8266 can connect to your local network using WI-FI const char* ssid = °RESLACE_MITH_YOUR_ S510" const char* passwort 12¢ Communication Create an Adafruit_aMe6s@ object called bme on the default ESP8266 I2C pins, Adaérust_QMEGBR Boe; // 120 Ifyou want to use SPI communication instead, you need to define the ESP8266 SPI pins on the following lines (to uncomment remove the /* and */): Prtdef ine BHE_SCK 14 define OnE cS 15+/ itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, ‘And then, create an Adafruit_SME68® object using those pins (to uncomment remove the //). ‘Ui bsofruit_ME6B® bne(BME_CS, BAE_MOST, BME MSO, WHE SCX); Declaring Variables ‘The tenperature, humidity, pressure and gasResistance float var'ables will be used to hold BMEG8O sensor readings. ‘Float temperature; ‘Float humidity; ‘oat pressure: ‘oat gastesistance; The lastTine and the tinerbelay variables will be used to update sensor readings every X number of seconds. As an example, welll get new sensor readings every 30 seconds (30000 milliseconds). You can change that delay time in the tinerbelay variable. unsigned long JastTine unsigned long timerDelay ~ 38080; Create an Asyne Web Server on port 80. Asynciebserver server(88); Create Event Source To automatically display the information on the web server when a new reading arrives, welll use Server-Sent Events (SSE) ‘The following line creates a new event source on /events. [AsynctventSource events("/events"); Server-Sent Events allow a web page (client) to get updates from a server. Well use this to automatically display new readings fn the web server page when new BME680 readings are available, Important: Server-sent events ar ted Get BME680 Readings ‘The getsMc6seReading() function gets gas, temperature, humidity and pressure readings from the BME680 sensor and saves them on the gasResistance, temperature, humidity and pressure variables. void getonestoneadings (4 U1 Tell SHEE xo begin neasurenent unsigned long endTine = bne.beginteading(); Af (endtine == @) ¢ Serial.printin(F("Fatled to begin reading =(°))s ) itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 120 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, Sf (lime endteasing) ¢ Serial.printin(F(*Fatled to complete reading :(°))5 > ‘temperature ~ one.tenperature; pressure = bee.pressure / 108.6; humidity ~ bee, humidity: gasfesistance = bae.gas_resistance / 1000.0; Processor The processor() function replaces any placeholders on the HTML text used to bull readings. 1e web page with the current sensor String processor(const Strings var){ getanesaoneadings(); {serial println(var); ERBERATURE)( return String(tenpersture); ? clse S(van 26 “MUMIDITY?), afar return Strinachunsaity) > else i¢(var RESSURE"){ return String(pressure); > else 2F(var ‘AS return String(gasResistance): ) This allows us to display the current sensor readings on the web page when you access It for the fist ime. Otherwise, you would see a blank space until new readings were available (which can take some time depending on the delay time you've defined on the cade). Building the Web Page The index_html variable contains all the HTML, CSS and JavaScript to build the web page. We wor't go into detail on how the HTML and CSS works. Welll ust take a look at how to handle the events sent by the server. Lvs take a quick look at the line that displays the temperature: chived classe"fas fa-thermoneter-hal/"> TEMPERATURE /hé>

espan class="reading™> &de You can see that the XTEMPERATUREX placeholder is surrounded by tags, The HTML 4d attribute Is used to specify a unique id for an HTML element. Itis used to point to a specific style or it can be used by JavaScript to access and manipulate the element with that specific i. ‘That's what we're going to do. itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, For instance, when the web server receives a new event with the latest temperature reading, we'll update the HTML element with the id * temp with the new reading, A similar process is done to update the other readings. Handle Events Create anew EventSource object and specify the URL of the page sending the updates. In our case, its events 5 (1Iwandow.evenssousce) ( ource("/events"); Once you've instantiated an event source, you can start listening for messages from the server with addEventListener() ‘These are the default event listeners, as shown here in the AsyncWebServer documentation. source. addtventListener(‘ open" console log( "events Connected"): , false); source.addtventListener("error', function(e) { AF (estarget.readyState | EventSource. OPEN) console, Tog( "Events Disconnected"); > dy false); source. addtventListener(‘nessage', function(e) { console-log("eesszge", e.data); , false): Then, add the event listener for “temperature” source. addtventlistenes(“tenpersture’, Funetion(e) ( When a new temperature reading Is available, the ESP#266 sends an event (" tenperature”) to the client, The following lines handle what happens when the browser receives that event. console. Log("tenperatur + e.cata); document .getElenentByd("tenp")-AnneratM ~ e.data; Basically, print the new readings on the browser console, and put the received data into the element with the corresponding id (*tenp") on the web page. A similar processor is done for humidity, pressure and gas resistance. source, addtventli oner(‘hunicity’, function(e) ¢ console Jog("hunicity", e.data)s snentyls( hun") SnnerTAL = e. data; documento ), False); source.addtventListener(‘pressure', function(e) { itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, console Log(“pressure", eadat 3 sment8ya("pres*) AnnerWTH document ge dy false); source. addtventListener(’gas', function(e) { console. Tog("g35", e.¢ata); document gc 13s") AnerdTML = e.data; dy false); mente setup() Inthe setup() initialize the Serial Monitor, serial. begin(115200); Connect the £SP8266 to your local network and print the ESP8266 IP address. 11 Set device as 2 WI-FI Station WIFI bopin(ssid, password): while (MEFL.status() [= Wh_CONMECTED) ( etay(s080); Sertal.printin("Setting as a Mi-Fi station.” > Sertal.print(“station 1P Address: °); rinhn(WFA20c3110()); serial.printin(); serial. Intialize the BME680 sensor. 11 Tok BHESO sensor 4S (ome. begin) ¢ Sertal.orintin(F(*Covlé not Find 3 valid avEsa@ sensor, check wirdng!*))s wile (1)5 ) 11 Set up oversampling and Filter initializes bee setTenperatureoversanping(BHE680_05_08); be settuniatyOversanpl.ng(BHESEE_OS_2K); be setPrassurcoversanping (BHESEO_OS_4x); be seUTTRF{terSize(QME68O_FILTER_SIZE_3); ne setcastieater(s28, 150); // 320% for 150 as Handle Requests When you access the ESP8266 IP address on the root / URL, send the text that is stored on the index html variable to build the web page and pass the processor as argument, so that all placeholders are replaced with the latest sensor readings. server.on("/", HTTP_GET, [](AsyncnebserverRequest. “request)( rrequest->send_P(208, "text/nen", index neml, processor); ye itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 1020 7/002 Server Event Source Set up the eve source on the server, 11 Handle Web Server Everts events. onconnect([](AsynetventSourceclient “client)( ie(chient-stastTa(y){ Serial printf("Chient reconnected! Last message TD that it got Ls: Au\n", eLlent->tastId(D)s > 11 Send event with nessag 11 and set ceconnect delay to 1 second elent->send(*nelio!", MULL, mitlis(), 18000); me server. addhandler(tevents); Finally, start the server, server.begin(): loop() In the 100p(). get new sensor readings: setanesaoneadings()s Print the new readings in the Serial Monitor. Serial. po (Temperature = 26 & \n", Kemperature); Serial peintf(*Hunidity = 1.26% \n", humtatty); Serial printf(“Pressure = X.24 nPa \o", pressure): sertal.prv (G86 Resistance = %.26 KOhn \o", gasReststance); serial. prineins Finally, send events to the browser with the newest sensor readings to update the web page 11 Send Events to the We> Server with the Sensor Readings i505 events. send( string (temperature). levents.send(ping” MULL ni ste(),"senperature” milLis(0)5 events. send(String(humlaity) ._str(),"humiaity" mil1is0)s events send( String (pressure) <_str(), pressure” ,wilis(0)s events. send( String gastesistance) <_str(),"g8s" milLis())s ‘The following diagram summarizes how Server-Sent Events work to update the web page. itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, 120 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, Client (browser) Server (ESP8266) EventSource Open event stream (events) 2) Get new sensor readings addeventListener (‘temperature’) (Chumiaity’y ‘temperature’ (‘pressure’) r , (eos) humidity’ pressure’ ‘gas Update web page {new sensor readings) BME680 Uploading the Code Now, upload the code to your ESP8266, Make sure you have the right board and COM port selected. After uploading, open the Serial Monitor at a baud rate of 115200, Press the £5P8266 on-board RSTEN button, The IP address should be printed in the serial monitor. Som i jconfigsip: 0, SPIWP:0xee clk_drv:0x00,q_drv:0x00,d_drv Imode:DI0, clock div:1 load: 0x3£££0018, len:4 load: 0x3£££001c, len: 928 Ino © tail 12 room 4 ‘Load: 040078000, len: 9280 ‘Load: 0%40080400, len: 5848 lentry 040080698 WiFi. 20x00, c30_drv:0x00,hd_drv:0x00, we Clatear Ish tse ee itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 1220 o7mosiz021 ES8265 NodeMCU Web Server with BMESBO- Weather Staton | Random Nerd Tutorials Demonstration Open a browser in your local network and type the ESP8266 IP address, You should get access to the ESP8266 web server with the latest BME68O readings. Srewreesrune 28.51 °C 4 suneomry 59.44 % bee tase Aas 28.51 °C vanaoiry 59.44% 1003.62 hPa moss 22.85 KO Wrapping Up itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 1320 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, In this tutorial you've learned how to build an asynchronous web server weather station with the ESP8266 to display BME680 sensor readings - gas (air quality), temperature, humidity and pressure - and how to update the readings automatically on the web page using Server-Sent Events. We have other web server tutorials that you may like: ‘= ESP8266 DHT11/DHT22 Temperature and Humidity Web Server with Arduino IDE 1» E5P8266 Web Server - Control Outputs with Arduino IDE = ESP8266 with BME280 using Arduino IDE (Pressure, Temperature, Humidity) ‘= ESP8266 DS18B20 Temperature Sensor with Arduino IDE (Single, Multiple, Web Server) We hope you've found this project interesting, Learn more about the ESP8266 with our resources: 1» Home Automation Using ESP8265 1 MicroPython Programming with ESP32 and ESP8266 1» More £5P8266 Projects and Tutorials. Thanks for reading. Se ee) me [eBook] MicroPython Programming with ESP32 and ESP8266 Learn howr to program and bold projects with the ESP32 and ESP8266 using MicroPython firmware DOWNLOAD » Recommended Resources Build a Home Automation System from Scratch » With Raspberry Pi, ESP8266, ‘Arduino, and Node-RED, itpsrandomnerdttorials.comfesp6268-nodemcu-bmes60-web-server-arduino! 1420 o7iove024 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, Home Automation using ESP8266 eBook and video course » Build loT and home automation projects. Arduino Step-by-Step Projects » Build 25 Arduino projects with our course, even with no prior experience! What to Read Next. ESP8266 NodeMCU MQTT - Publish BME280 Sensor Readings (Arduino IDE) itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 1820 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, MicroPython: MQTT - Publish BME280 Sensor Readings (FSP32/ESP8266) MicroPython: DS18820 Temperature Sensor with ESP32 and ESP8266 [SOLVED] Failed to connect to ESP32: Timed out waiting for packet header itpssrandomnerdttorials.comfesp6268-nodemcu-bmes80-web-srver-arduino! 16120 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, arse wi rin iwiwanuy aero using inter ujas ann yaiere MicroPython: WS2812B Addressable RGB LEDS with ESP32 and ESP8266 Enjoyed this project? Stay updated by subscribing our weekly newsletter! Your Email Addres 5 thoughts on “ESP8266 NodeMCU Web Server with BME680 - Weather Station (Arduino IDE)" Abimbola ‘August 20, 2020 at 7:02 pm Great tutorial Please, could we have one tutorial on using ESP+SIM module, so that one could access the web by just putting the sim card (26, but preferably 36) directly on the module? Thank you in advance, Reply & Sara Santos August 21, 2020 at 11:01 am Hi We have this project using this ESP32 board. You can access the internet using https://randornerdtutorials.com/esp32-sim800}-publish-data-to-cloud nope this helps. Regards, sara Reply itpssrandomnerdttorials.comfesp8266-nodemcu-bme880-web-server-arduino! 1720 7/0202 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, Jaimie Blagg. ‘August 21, 2020 at 5:00 pm. Great tutorial, going to build it soon as my sensor arrives. Do you have any plans to integrate this with Homeassistant? Would love to put one in various rooms throughout the house Thanks Jaimie Reply & Sara Santos ‘August 21, 2020 at 5:04 pm Hi [Av the moment, we don't have any plans to use Home Assistant. Regards, sara Reply carl Novernber 22, 2020 at 6:56 pm | built this and expanded it using your other tutorials to 1. publish via MQTT 2. Send and display via Node Red dashboard 3. Added external data from Open Weather site. I therefore created a dashboard with both internal home environment conditions as well as external weather conditions, As usual, your tutorials are excellent and are so thorough that anyone can just integrate portions of your projects into ‘much larger and complex projects, The sky's the limit ! Thanks once again, Reply Leave a Comment itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! o7iove024 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, Name * Email * Website DNotity me of follow-up comments by eral DINotity me of new posts by email Visit Maker Advisor - Tools and Gear for makers, hobbyists and Divers » Home Automation using ESP8266 eBook and video course » Build lov and home automation projects Build a Home Automation System from Scratch » With Raspberry Pi, P8266, Arduino, and Node-RED. itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino! 1920 7/002 ESP8266 NodeMCU Web Server with BMES80 - Weather Station | Random Nera Tutorials, ‘About Support Terms Privacy Polley Refunds MakerAdwsor:com Join the Lab Copyright® 2013-2021 -RandomNeraTUuorialscom- All Rights Reserved itpssrandomnerdttorials.comfesp6266-nodemcu-bmes80-web-server-arduino!

You might also like