ESP32 Web BLE: Live Sensor Data Visualization (BME280 Charts)

In this project, we’ll show you how to use Web Bluetooth (Web BLE) with the ESP32 to display live sensor data on a browser while you’re connected to your ESP32 via BLE. Web Bluetooth (Web BLE) allows you to connect and control BLE-enabled devices, like the ESP32, directly from your web browser using JavaScript.
Web BLE is only supported on Android devices, Windows computers, and Mac OS computers. We recommend using Google Chrome browser. It is not supported in iOS, but you can use an
app like Bluefy
to emulate a BLE web browser on iOS (we’ll show you how to use it in this tutorial).
Table of Contents
In this tutorial, we’ll cover the following subjects:
Web BLE – Quick Introduction
Project Overview
ESP32 BLE Device – Arduino Code
Creating the Web BLE App
HTML Page
JavaScript – Web BLE
Styling the Web BLE App (style.css)
Testing the Web BLE App
Hosting your Web BLE App
Demonstration
Prerequisites
Before proceeding with this tutorial, make sure you follow these prerequisites:
1. Preparing the Arduino IDE
We’ll program the ESP32 using Arduino IDE. Make sure you have the ESP32 boards installed before proceeding. Follow the next tutorial first, you haven’t already:
Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)
Installing Libraries
For this tutorial, we’ll use a
BME280 sensor
and the
Adafruit_BME280
library. Install it before proceeding.
In the Arduino IDE, go to
Sketch
>
Include Library
>
Manage
Libraries
… and search for the library name:
Adafruit BME280
. You also need to install the
Adafruit Unified Sensor Library
(a pop-up shows up to install it if you haven’t already)
2. Parts Required
For this tutorial, you can use any ESP32 of your choice.
For the sensor, we’ll use a BME280 sensor that will send temperature, humidity, and pressure readings via BLE. You can use any other sensor with just a few modifications to the code.
ESP32 of your choice. For example,
ESP32 DOIT V1 Board
, or
ESP32S3 DevKitC
BME280 Sensor
Breadboard
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!
3. Circuit Diagram
Connect a BME280 sensor to your ESP32. We’re using GPIOs 21 and 22 for SDA and SCL. You can choose any other GPIOs as long as you modify the code accordingly.
4. Install the Bluefy App (for IOS Devices)
The Web Bluetooth API provides the ability to connect and interact with Bluetooth Low Energy peripherals (like the ESP32). The API is still under development, but it is generally considered to be stable and usable. It has been implemented in Chrome, Edge, Opera (Android), and it is supported on Android and Windows.
However, it is not yet supported on iOS
You can check the web browser/device compatibility on the
Web Bluetooth API documentation
If you have an iOS device, you can still follow this project by installing the Bluefy app, which is a web-based BLE browser. Here’s the link to the app:
Bluefy – Web BLE Browser
Web BLE – Quick Introduction
Web Bluetooth (also sometimes referred to as Web BLE) is a technology that allows you to connect and control BLE-enabled devices, like the ESP32, directly from your web browser using JavaScript.
With Web BLE, you can create web applications that interact with your ESP32 devices via Bluetooth, enabling you to control GPIO pins, exchange data, and manage your devices remotely through a web interface (any device that supports a web browser, like your computer or smartphone*).
* except iOS devices. Alternatively, you can use an app like
Bluefy – Web BLE Browser
One of the main advantages of Web Bluetooth is that it works across different devices and operating systems through a compatible web browser, without the need to install a dedicated app.
This means you can use a smartphone, tablet, or desktop computer to connect and control ESP32 devices using a Web BLE application in your web browser.
The Web Bluetooth API is still under development, but it is generally considered to be stable and usable. It has been implemented in Chrome, Edge, Opera, and Firefox, and it is supported on Android and Windows.
However, it is not yet supported on iOS
Web BLE and BLE Resources
If you’re new to Web BLE and BLE on the ESP32, we recommend taking a quick look at the following tutorials to get familiar with the basic concepts of Bluetooth Low Energy.
Getting Started with ESP32 Bluetooth Low Energy (BLE) on Arduino IDE
ESP32 BLE Server and Client (Bluetooth Low Energy)
ESP32 Web Bluetooth (BLE): Getting Started Guide
Project Overview
Before proceeding, let’s take a quick look at the features of the project we’ll build:
The ESP32 acts as a BLE Peripheral, advertising its presence.
Your web browser acts as a BLE Controller that gets sensor readings (reads the ESP32 characteristics).
The ESP32 GATT structure will have one service (environmental sensing service: UUID
181A
) with three characteristics (temperature: UUID
2A6E
, humidity: UUID
2A6F
, and pressure: UUID
2A6D
).
The ESP32 continuously reads the BME280 sensor and writes the new values to the temperature, humidity, and pressure characteristics.
Your browser will connect to the ESP32 Bluetooth device and will receive notifications whenever a value changes on the ESP32 characteristics.
It reads those characteristics and updates a web page with the sensor data.
The web page displays the current readings on cards and the latest sensor readings on charts.
ESP32 BLE Device – Arduino Code
The following code turns the ESP32 into a BLE device with the BLE environmental sensing service and three characteristics: temperature, humidity, and pressure.
Upload the following code to your board, and it will work straight away.
/*
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

// BME280 GPIOs
#define SDA_PIN 21
#define SCL_PIN 22

// BME280
Adafruit_BME280 bme;

// BLE UUIDs
// Environmental Sensing Service
#define SERVICE_UUID "181A"
// Temperature
#define TEMP_CHARACTERISTIC_UUID "2A6E"
// Humidity
#define HUM_CHARACTERISTIC_UUID "2A6F"
// Pressure
#define PRESS_CHARACTERISTIC_UUID "2A6D"

// BLE variables
BLEServer* pServer = nullptr;
BLECharacteristic* pTempChar = nullptr;
BLECharacteristic* pHumChar = nullptr;
BLECharacteristic* pPressChar = nullptr;
bool deviceConnected = false;
bool oldDeviceConnected = false;

// Send a reading every 5 seconds
const unsigned long SAMPLE_INTERVAL_MS = 5000;
unsigned long lastSampleMs = 0;

// BLE server callbacks
class ServerCallbacks : public BLEServerCallbacks {
void onConnect(BLEServer* pServer) override {
deviceConnected = true;
Serial.println("BLE client connected.");
}
void onDisconnect(BLEServer* pServer) override {
deviceConnected = false;
Serial.println("BLE client disconnected.");
}
};

// Format a float to one decimal place and set it on a BLE characteristic,
// then call notify() so connected clients receive it immediately
void notifyFloat(BLECharacteristic* pChar, float value) {
char buf[16];
snprintf(buf, sizeof(buf), "%.1f", value);
pChar->setValue(buf);
pChar->notify();
}

void setup() {
Serial.begin(115200);
Serial.println("\nESP32 BME280 BLE Server starting...");

// Initialize BME280 Sensor
Wire.begin(SDA_PIN, SCL_PIN);
if (!bme.begin(0x76)) {
Serial.println("BME280 not found!");
while(1);
}

// ES