ESP8266 NodeMCU With BME280 Gauges & Chart




Introduction: ESP8266 NodeMCU With BME280 Gauges & Chart

Fancy Gauges and Chart for your ESP8266 NodeMCU Development board with BME280 Temperature, Humidity and Pressure sensor. Thingspeak will store all your data in the cloud for retrieval at any time for years (hopefully) to come. The gauges and chart are populated from the data stored at thingspeak and are updated automatically every 5 minuets.

Needed Items:

ESP8266 NodeMCU Development board ($3.79 from Hong Kong)

Bosch BME280 ($5.63 from Hong Kong)

Breadboard Jumpers ($3.09 from Hong Kong)

Breadboard ($2.28 from Hong Kong)

Power Supply, Free if you have a micro USB phone charger

Micro USB cable, Free if you have one already

Arduino IDE, Free Download

Get the .ino & .HTML code files here

Step 1: Create & Setup Your Thingspeak Channels

1. Create a free Thingspeak account and new channel at , Call the channel "ESP8266-NodeMCU-12E-BME280"

2. The new channel should have 3 fields named Temperature Humidity Pressure in that specific order (Note First Letter capitalization).

3. Take note of your new "channel ID" XXXXXX under "Channel Settings"

4. Click the "API Keys" link and take note of your "API Write" and "Read API Keys" XXXXXXXXXXXXXXX. Also, make this a public channel under sharing.

5. Create a second Thingspeak channel that will hold the "Today" (since midnight) High Low data. Call it "BME280 Daily High Low Data"

6. This new channel should have 6 fields named Tmax Tmin Hmax Hmin Pmax Pmin in that specific order (Note First Letter capitalization).

7. Take note of the "BME280 Daily High Low Data" "channel ID" , "Read" & "Write API keys" just like in the above steps.

Step 2: Setup the Arduino IDE, Libraries and Configure the BME280

8. Follow the instructions for installing the Arduino IDE & ESP8266 core at

9. Fire up the Arduino IDE so we can install the four libraries we will need.

10. You will need the "Adafruit Unified Sensor Driver" library, install it in the "Library Manager" in Arduino IDE. Menu Sketch --> Include Library --> Manage Libraries do a search by Type = "Recommended" Topic = "Sensors" then put the words Adafruit Unified Sensor Driver in the search box. The one you want says "Adafruit Unified Sensor Driver by Adafruit"

11. In addition, you will also require the "Adafruit BME280 Library" install it in the "Library Manager" in Arduino IDE. Menu Sketch --> Include Library --> Manage Libraries do a search by Type = "Recommended" Topic = "Sensors" then put the words Adafruit BME280 Library in the search box. The one you want says "Adafruit BME280 Library by Adafruit"

12. Another library you need is Wire.h , install it in the "Library Manager" in Arduino IDE. Menu, Sketch --> Include Library --> Manage Libraries Do a search by Type = "Contributed" Topic = "Signal Input/Output" then put the word Wire in the search box. The one you want says "Wire Built-in by Arduino" Most likely at the bottom of the selection.

13. One more library, ESP8266WiFi , install it in the "Library Manager" in Arduino IDE. Menu, Sketch --> Include Library --> Manage Libraries Do a search by Type = "Contributed" Topic = "Communication" then put the word ESP8266wifi in the search box. The one you want says "ESP8266wifi Built-in by Ivan Grokhotkov"

14. The I2C address for BME280 is hardcoded in the Adafruit_BME280.h file (look for the line #define BME280_ADDRESS 0x77) inside the Adafruit_BME280_Library folder. Adafruit’s BME sensor modules are hard-wired to use the I2C address of 0x77. But the BME280 can have a slightly different I2C address (0x76) if its external SDO pin is grounded. If you are using the sensor modules from a third party, it is likely that it’s address would not match with the default value in the Adafruit library. For example, for most of the BME280 sensor modules available on eBay or Aliexpress have their I2C address to be 0x76. If you dont get a response from the sensor using the default address set in the Adafruit_BME280.h file, you might need to change it to 0x76.

BME280 & ESP8266 Connection Points. ESP8266 3.3V to BME280 Vin, ESP8266 GND to BME280 GND, ESP8266 D4 to BME280 SCL, ESP8266 D3 to BME280 SDA. 15. Open the provided ESP8266-NodeMCU-12E-BME280.html file in a text editor and enter your "ESP8266-NodeMCU-12E-BME280" (The first channel you created) "Channel ID" & "Read API Key" for the variables key1 & chan1. Also enter the "Read API Key" and "Channel ID" for "BME280 Daily High Low Data" (The second channel you created) for key2 and chan2. In addition, enter your timezone offset from UTC. As in -5 for me. All the values must be inside the provided single quotes 'XXXXX'. Save and exit the text editor.

Plug in your ESP8266 with the USB cable to your computer then select your serial port to be the USB port.

Linux users may have to change ownwership of the USB port to communicate with the /dev/ttyUSB0 as in 'sudo chown yourusername /dev/ttyUSB0' or what ever you selected as your port in setup.

Step 3: Program the ESP8266 With the Arduino IDE

16. Next we will program the ESP8266. Connect a USB cable between your ESP8266 and your computer.

Load the provided New_BME_Sensor.ino file into the Arduino IDE. Your BME280 sensor should be hooked to D3 (SDA) & D4 (SCL) on the ESP8266. Enter your "ESP8266-NodeMCU-12E-BME280" (The first channel you created) "Write Key" "Wireless SSID" & "Password" into the correct section of the sketch. Then click menu item "Sketch" & "Upload". After you upload the sketch (Progress reaches 100%) to your ESP8266 you can open the serial monitor (Icon top right looks like a magnifiying glass) and see your data print out after 5 Minutes, every 5 Minutes. The data gets sent to thingspeak at 5 min intervals so it will be some time before you have meaningful chart data but you should have gauge readings after 5 min.

Make sure you get a correct readings from the BME280 in the serial monitor.

The first measurement will likely be an invalid nan.

Wait a few minuets till the next reading and verify the readings look good.

Step 4: Go Back to the Thingspeak to Do Some Data Tweaking

17. Now, While the data is slowly uploading to thingspeak lets do some tweaking to get some additional data from whats being uploaded. Go back to the thingspeak website and in the Thingspeak "BME280 Daily High Low Data" channel page (The second channel you created) click the green "MATLAB Analysis" button. Select Template "Custom (No Starter Code)"

18. Name the MATLAB Analysis "Calculate Min Max Since Midnight".

19. Copy the MATLAB Analysis.txt code into the provided space. Enter the "channel ID" for "ESP8266-NodeMCU-12E-BME280" (The first channel you created) into "readChannelID". Enter the "BME280 Daily High Low Data" (The second channel you created) Write "Channel ID" & "Write Key" into writeNewChannelID & writeAPIKey respectivly. I know it sounds confusing (read it again). Click save and run. If you did it correcty and the read channel is public you will see no errors and it successfully prints the values. Note, You may see an error if no data has been uploaded to that channel yet. Despite the error continue. If desired you can revisit Click save and run to make sure it works once data has been uploaded.

20. Next, we need to create a "Time Control" to fire this code every 5 min and our data gets written to the channel "BME280 Daily High Low Data" (The second channel you created). From the main page of "BME280 Daily High Low Data" (The second channel you created) select Apps at the top. Under actions select "TimeControl" then the Green button "New TimeControl". Name it "Send High Low Temps ESP8266". Select your time zone if needed and select "Recurring" under Frequency. Select Minute under Recurrence. Set to run every 5 Minutes. Action should be MATLAB Analysis and "Code to Execute" is "Calculate Min Max Since Midnight". Save TimeControl.

Step 5: Edit the Provided HTML File

Edit the HTML files and look for comments that say "******** Change Me 1 of 8 *********" Change these to your preference.


Some of the text fields and the weekly chart will not populate correctly until you have a full day and full week of data for the 24 Hr and Week section and chart.
Once you have a bunch of data you can zoom in on the charts with the mouse wheel (Right Click to Reset). You can also have a fourth gauge (as seen in the screenshots) from another sensor from another channel but I have commeted out the relevant portions. If you feel savy, hook it up. There is also some timing issues to be aware of. You likely will not have the absolute most current data but it should always be less than 5 Minutes old. This comes from when the timing control gets fired, When the data was sent from the ESP8266 and when you loaded / refreshed the web page.

Open the provided ESP8266-NodeMCU-12E-BME280.html file in your web browser and you should see the gauges and chart populated.

Get the .ino & .HTML code files here

4 People Made This Project!


  • Origami Speed Challenge

    Origami Speed Challenge
  • Trash to Treasure Contest

    Trash to Treasure Contest
  • Make It Modular: Student Design Challenge

    Make It Modular: Student Design Challenge



8 months ago

I have followed the instructions but it does not show me the chart and I do not have values in "High ... Today" and "Low ... Today". What have I done wrong?

Screenshot from 2021-09-06 12-10-14.pngScreenshot from 2021-09-06 12-10-18.png

Reply 5 months ago

Did you manage to solve this problem?


1 year ago

Thank you for this amazing Instructable. I´ve tried it out and I am displaying the BME280 values in ThingSpeak, in both channels.

When testing the HTML file for data displaying on a web page, the gauges are not shown. I took care for changing the var keys and channels. I only see the text for each value. I tried to update the page and the channels in ThingSpeak already have data.

This is a good excuse for me to start learning HTML!

Any help for solving this will be much appreciated!

BME280 gauges HTML.png

Reply 1 year ago

Do you have the "Gauges" folder in the the same directory as the html file?


Reply 1 year ago

Yes, it is in the same file. The Gauges folder seems okay, with the six json files on it.
I got the same result with Firefox and Chrome; the gauges are not shown.

Problem solved. My error; the key and channel vars were inverted. A friend with good HTML knowledge helped me.
Thank you again for an excellent article, it opens several possibilities.


1 year ago

If you want to run this off a battery get rid of the delay() statements in the main() loop.
Replace the final delay() with the following:
ESP.deepSleep(300e6); //20 microAmperes FTW!

then flash the software and connect a wire between D0 and RST. This is a trick that will allow the ESP to go into deep sleep (more like a coma) in which it uses around 20 micro amps. NB: Without the wire it can't wake itself up from this deep sleep mode and will only run once until you reset it.


1 year ago

Using this code my unit read temperatures that were more than 3 degrees too high (and humidity too low as a consequence). I found out this was caused by a known issue; known as "BME280 self heating".

Inserting the following lines right at the end of setup() will cure it.

//set up sampling modes to prevent self-heating
Adafruit_BME280::SAMPLING_X1, // temperature
Adafruit_BME280::SAMPLING_X1, // pressure
Adafruit_BME280::SAMPLING_X1, // humidity


2 years ago

Hi, I've a problem with the d3 and d4 variables. It says D3 and D4 not declared in this scope.



Question 3 years ago


How would you rate the temperature in degrees Celsius?

could help me

Answer 2 years ago

Hi, I solved this by changing (in void loop):
"t = t * 1.8 + 32.0;"
"t = bme.readTemperature ();"
because the sensor reads in degrees Celsius.


Reply 2 years ago

End changingn "dp = t-0.36*(100.0-h);" to "dp = t-((100.0-h)/5);"


Answer 2 years ago

I did comment the Line #70
// t = t*1.8+32.0;

It works :)