ESP32 & BME280 Based Mini Weather Station
Share Facebook Twitter LinkedIn Pinterest Email Reddit Telegram WhatsAppIn this tutorial, we learn how to make a Mini Weather station using ESP32 & BME280 Barometric Pressure Sensor that can give real-time information of Atmospheric Pressure, Temperature & Humidity. Using BME280 we can even measure the altitude above sea level.
OverviewBME280 is fairly simple to use, pre-calibrated and don’t require extra components. You can simply start measuring relative humidity, temperature, barometric pressure & approx. altitude in no time. So here we will simply interface BME280 Barometric Pressure Sensor with ESP32 Wifi Module and display all the measured parameters like temperature, pressure, humidity and altitude in webpage.
A weather station is a device that collects data related to the weather & environment using different sensors. There are two types of weather station, one which is having own sensors and the second type of weather station is where we pull data from the weather station servers using IoT Processor. In this tutorial, we will go for the first one, i.e. we will design our own weather station just by using only one sensor BME280.
You can check some more projects related to BME280: 1. BME280 & Arduino Based Simple Weather Station 2. ESP8266 & BME280 Based Mini Weather Station
Bill of MaterialsFollowing are the components required for making BME280 weather Station. All the components can be purchased from Amazon via the links given below.
S.N.Components QuantityPurchase Links 1ESP32 Board1Amazon | AliExpress 2BME280 Sensor1Amazon | AliExpress 4Connecting Wires10Amazon | AliExpress 5Breadboard1Amazon | AliExpress BME280 Pressure, Temperature & Humidity SensorBosch BME280 Humidity, Temperature & Pressure Sensor is an integrated environmental sensor which is very small-sized with low power consumption.This BME280 Atmospheric Sensor Breakout is the easy way to measure barometric pressure, humidity, and temperature readings all without taking up too much space. Basically, anything you need to know about atmospheric conditions you can find out from this tiny breakout.
This module uses an environmental sensor manufactured by Bosch with temperature, barometric pressure sensor that is the next generation upgrade to the popular BMP085/BMP180/BMP183 Sensor. This sensor is great for all sorts of weather sensing and can even be used in both I2C and SPI! This precision sensor from Bosch is the best low-cost, precision sensing solution for measuring barometric pressure with ±1 hPa absolute accuraccy, and temperature with ±1.0°C accuracy. Because pressure changes with altitude, and the pressure measurements are so good, you can also use it as an altimeter with ±1 meter accuracy.
Features of BME2801. Interface: I2C & SPI 2. Supply Voltage: 1.71V to 3.6V 3. Temperature Range: -40 to +85°C 4. Humidity Range: 0% to 100% rel. humidity 5. Pressure Range: 300hPa to 1100hPa
<
script async 6. Humidity sensor and pressure sensor can be independently enabled/disabled
Applications
1. Context awareness, e.g. skin detection, room change detection 2. Health monitoring/well-being 3. Home automation control 4. Control heating, ventilation, air conditioning (HVAC) 5. Internet of things 6. GPS enhancement & Indoor/Outdoor navigation 7. Weather forecast 8. Vertical velocity indication (rise/sink speed)
BME280 PinoutThe BME280 I2C interface uses the following pins: 1. VCC: 1.71V to 3.6V 2. GND: Connect to GND 3. SCL: serial clock (SCK) 4. SDA: Serial data (SDI) 5. CSB: Must be connected to VDDIO to select I2C interface. 6. SDO: The I2C address decides the pin. If SDO connects to GND(0), the address is 0x76, if it connects to VDDIO(1), the address is 0x77. In this module, we have connected it to VDDIO, so the address should be 0x77.
I2C InterfaceThe module features a simple two-wire I2C interface which can be easily interfaced with any microcontroller I2C Pins. The default I2C address of the BME280 module is 0x76 and can be changed to 0x77 easily.
There are two different BME280 available in the market whose I2C address can be changed. For the module below if you remove a connection from SDO to GND, the address will change to 0x77.
There is another module available in the market which has only 4 pins. To change its I2C address Locate the solder jumper besides chip.
By default, the middle copper pad is connected to the left pad. So you need to scratch the connection between the middle and the left copper pad to disconnect them. Then you can add a solder blob between the middle and the right copper pad to join them. It allows you to set the I2C address 0x77.
Interfacing BME280 with ESP32 Wifi Module
The BME280 Barometric Pressure Sensor is interfaced with ESP32 to make a simple Mini Weather Station. Connect the SDA SCL pins of BME280 to ESP32 I2C GPIO Pins, i.e. GPIO22 & GPIO21 Pins respectively.
Source Code/ProgramThe Source Code/Program for Interfacing BME280 with ESP32 Wifi Module is given below. You can copy this code and upload it to your ESP32 Board.
But before that you need to install two libraries, i.e BME280 Library & Adafruit Unified Sensor Library. For this you can simply go to the library manager nd install these two libraries:
#include <WiFi.h> #include <WebServer.h> #include <Wire.h> #include <Adafruit_Sensor.h> #include <Adafruit_BME280.h> #define SEALEVELPRESSURE_HPA (1013.25) Adafruit_BME280 bme; float temperature, humidity, pressure, altitude; /*Put your SSID & Password*/ const char* ssid = "Sri Krishna 2."; // Enter SSID here const char* password = "subbu@123"; //Enter Password here WebServer server(80); void setup() { Serial.begin(115200); delay(100); bme.begin(0x76); Serial.println("Connecting to "); Serial.println(ssid); //connect to your local wi-fi network WiFi.begin(ssid, password); //check wi-fi is connected to wi-fi network while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected..!"); Serial.print("Got IP: "); Serial.println(WiFi.localIP()); server.on("/", handle_OnConnect); server.onNotFound(handle_NotFound); server.begin(); Serial.println("HTTP server started"); } void loop() { server.handleClient(); } void handle_OnConnect() { temperature = bme.readTemperature(); humidity = bme.readHumidity(); pressure = bme.readPressure() / 100.0F; altitude = bme.readAltitude(SEALEVELPRESSURE_HPA); server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); } void handle_NotFound(){ server.send(404, "text/plain", "Not found"); } String SendHTML(float temperature,float humidity,float pressure,float altitude){ String ptr = "<!DOCTYPE html>"; ptr +="<html>"; ptr +="<head>"; ptr +="<title>ESP32 Weather Station</title>"; ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>"; ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>"; ptr +="<style>"; ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}"; ptr +="body{margin: 0px;} "; ptr +="h1 {margin: 50px auto 30px;} "; ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}"; ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}"; ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}"; ptr +=".temperature .reading{color: #F29C1F;}"; ptr +=".humidity .reading{color: #3B97D3;}"; ptr +=".pressure .reading{color: #26B99A;}"; ptr +=".altitude .reading{color: #955BA5;}"; ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}"; ptr +=".data{padding: 10px;}"; ptr +=".container{display: table;margin: 0 auto;}"; ptr +=".icon{width:65px}"; ptr +="</style>"; ptr +="</head>"; ptr +="<body>"; ptr +="<h1>ESP32 Weather Station</h1>"; ptr +="<h3>www.how2electronics.com</h3>"; ptr +="<div class='container'>"; ptr +="<div class='data temperature'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; 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"; 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>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Temperature</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)temperature; ptr +="<span class='superscript'>°C</span></div>"; ptr +="</div>"; ptr +="<div class='data humidity'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Humidity</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)humidity; ptr +="<span class='superscript'>%</span></div>"; ptr +="</div>"; ptr +="<div class='data pressure'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; 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"; 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"; 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"; 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"; 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"; ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Pressure</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)pressure; ptr +="<span class='superscript'>hPa</span></div>"; ptr +="</div>"; ptr +="<div class='data altitude'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; 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"; 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"; 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"; ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Altitude</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)altitude; ptr +="<span class='superscript'>m</span></div>"; ptr +="</div>"; ptr +="</div>"; ptr +="</body>"; ptr +="</html>"; return ptr; } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 #include <WiFi.h>#include <WebServer.h>#include <Wire.h>#include <Adafruit_Sensor.h>#include <Adafruit_BME280.h> #define SEALEVELPRESSURE_HPA (1013.25) Adafruit_BME280 bme; float temperature, humidity, pressure, altitude; /*Put your SSID & Password*/const char* ssid = "Sri Krishna 2."; // Enter SSID hereconst char* password = "subbu@123"; //Enter Password here WebServer server(80); void setup() { Serial.begin(115200); delay(100); bme.begin(0x76); Serial.println("Connecting to "); Serial.println(ssid); //connect to your local wi-fi network WiFi.begin(ssid, password); //check wi-fi is connected to wi-fi network while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected..!"); Serial.print("Got IP: "); Serial.println(WiFi.localIP()); server.on("/", handle_OnConnect); server.onNotFound(handle_NotFound); server.begin(); Serial.println("HTTP server started"); }void loop() { server.handleClient();} void handle_OnConnect() { temperature = bme.readTemperature(); humidity = bme.readHumidity(); pressure = bme.readPressure() / 100.0F; altitude = bme.readAltitude(SEALEVELPRESSURE_HPA); server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); } void handle_NotFound(){ server.send(404, "text/plain", "Not found");} String SendHTML(float temperature,float humidity,float pressure,float altitude){ String ptr = "<!DOCTYPE html>"; ptr +="<html>"; ptr +="<head>"; ptr +="<title>ESP32 Weather Station</title>"; ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>"; ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>"; ptr +="<style>"; ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}"; ptr +="body{margin: 0px;} "; ptr +="h1 {margin: 50px auto 30px;} "; ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}"; ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}"; ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}"; ptr +=".temperature .reading{color: #F29C1F;}"; ptr +=".humidity .reading{color: #3B97D3;}"; ptr +=".pressure .reading{color: #26B99A;}"; ptr +=".altitude .reading{color: #955BA5;}"; ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}"; ptr +=".data{padding: 10px;}"; ptr +=".container{display: table;margin: 0 auto;}"; ptr +=".icon{width:65px}"; ptr +="</style>"; ptr +="</head>"; ptr +="<body>"; ptr +="<h1>ESP32 Weather Station</h1>"; ptr +="<h3>www.how2electronics.com</h3>"; ptr +="<div class='container'>"; ptr +="<div class='data temperature'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; 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"; 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>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Temperature</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)temperature; ptr +="<span class='superscript'>°C</span></div>"; ptr +="</div>"; ptr +="<div class='data humidity'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Humidity</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)humidity; ptr +="<span class='superscript'>%</span></div>"; ptr +="</div>"; ptr +="<div class='data pressure'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; 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"; 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"; 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"; 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"; 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"; ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Pressure</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)pressure; ptr +="<span class='superscript'>hPa</span></div>"; ptr +="</div>"; ptr +="<div class='data altitude'>"; ptr +="<div class='side-by-side icon'>"; 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"; 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"; 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"; 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"; 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"; 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"; ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>"; ptr +="</div>"; ptr +="<div class='side-by-side text'>Altitude</div>"; ptr +="<div class='side-by-side reading'>"; ptr +=(int)altitude; ptr +="<span class='superscript'>m</span></div>"; ptr +="</div>"; ptr +="</div>"; ptr +="</body>"; ptr +="</html>"; return ptr;} Video Tutorial BME280 Weather Station | With Arduino, ESP8266 & ESP32 Watch this video on YouTube.