BLE Communication Between ESP32 and WebBLE (p5.js)

This example shows how to use Bluetooth Low Energy (BLE) to communicate between an ESP32 microcontroller and a web browser using p5.ble.js.

The ESP32 sends a value that changes in a triangle-wave pattern between 0 and 255. The web page visualizes this value as the diameter of a circle, with the numeric value printed in its center.

In order to enable communication between the ESP32 and the web browser, we need to set up a BLE server on the ESP32 and a BLE client on the web page. The ESP32 will act as the server, sending data to the client, which will be displayed in a circle. The web page will use the p5.js library to create a canvas and display the circle, and the p5.ble.js library to handle the BLE communication.

WebBLE

In some browsers, you may need to enable experimental features to use WebBLE. For example, in Google Chrome, you can enable the following flags using chrome://flags:

  • experimental-web-platform-features
  • web-bluetooth-new-permissions-backend
  • chrome-web-bluetooth-api

After enabling these flags, you may need to restart the browser. This allows you to use the WebBLE API, which is still in development and may not be fully supported in all browsers.

In order to to use WebBLE, you need to incorporate a way for the user user to initiaite a connection to the BLE device. This is usually done through a button click or some other user interaction. This is a security feature in modern browsers to prevent unauthorized access to Bluetooth devices.

BLE Concepts

  • Service
    A service is a logical grouping of related data and behavior in BLE. Think of it like a folder for related characteristics.
  • Characteristic
    A characteristic is a single data point within a service. It can be read, written, or notified (pushed to the client).
  • UUID (Universally Unique Identifier)
    BLE uses 128-bit UUIDs to identify services and characteristics. These ensure uniqueness. Use a generator like uuidgenerator.net to create your own.

Code

ESP32 Code

// BLE Communication Between ESP32 and WebBLE (p5.js)
// This example shows how to use Bluetooth Low Energy (BLE) to communicate between an ESP32 microcontroller and a web browser using p5.ble.js.
// The ESP32 sends a value that changes in a triangle-wave pattern between 0 and 255. The web page visualizes this value as the diameter of a circle, with the numeric value printed in its center.
// Include the necessary libraries
#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>

// Define the UUIDs for the service and characteristic
#define SERVICE_UUID        "19B10010-E8F2-537E-4F6C-D104768A1214"
#define CHARACTERISTIC_UUID "5d39de58-0a73-47b7-ace2-c7ace476fcdc"

// Create a BLE server and characteristic
BLECharacteristic *pCharacteristic;
int value = 0;
int direction = 1;

void setup() {
  Serial.begin(115200);

  // Create the BLE device and server
  BLEDevice::init("Circle-Grower");
  BLEServer *pServer = BLEDevice::createServer();


    // Create the service and characteristic
  BLEService *pService = pServer->createService(SERVICE_UUID);

  pCharacteristic = pService->createCharacteristic(
                      CHARACTERISTIC_UUID,
                      BLECharacteristic::PROPERTY_READ
                    );

// Add a descriptor to the characteristic
  pCharacteristic->setValue(String(value).c_str());
  pService->start();

    // Start advertising the service in order to be discoverable
  BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
  pAdvertising->addServiceUUID(SERVICE_UUID);
  pAdvertising->start();
}

void loop() {
    // Update the value in a triangle-wave pattern
  value += direction;
  if (value >= 255 || value <= 0) direction = -direction;

// Send the updated value to the characteristic
  pCharacteristic->setValue(String(value).c_str());
  delay(30); // Smooth triangle wave
}

P5.js Code

// BLE Communication Between ESP32 and WebBLE (p5.js)
// This example shows how to use Bluetooth Low Energy (BLE) to communicate between an ESP32 microcontroller and a web browser using p5.ble.js.
// The ESP32 sends a value that changes in a triangle-wave pattern between 0 and 255. The web page visualizes this value as the diameter of a circle, with the numeric value printed in its center.

const serviceUuid = "19B10010-E8F2-537E-4F6C-D104768A1214"; // Replace with your service UUID
let myCharacteristic; // Characteristic to read from
let myValue = 0; // Value to display
let myBLE; // BLE object

function setup() {
  myBLE = new p5ble(); // Create a new BLE object

   // Set up the canvas and text properties
  createCanvas(300, 300);
  textSize(20);
  textAlign(CENTER, CENTER);

// Create a button to connect to the BLE device
  const connectButton = createButton("Connect");
  connectButton.mousePressed(connectToBle);
}

// Function to connect to the BLE device, called when the button is pressed
function connectToBle() {
  myBLE.connect(serviceUuid, gotCharacteristics);
}

// Function to handle the characteristics once connected
function gotCharacteristics(error, characteristics) {
  if (error) console.log("error: ", error);
  myCharacteristic = characteristics[0];
  myBLE.read(myCharacteristic, gotValue);
}

// Function to handle the value read from the characteristic called when the value changes
function gotValue(error, value) {
  if (error) console.log("error: ", error);
  myValue = int(value);
  myBLE.read(myCharacteristic, gotValue); // Poll again
}

// Function to draw the canvas
function draw() {
  background(240);
  fill(100, 150, 255);
  circle(width / 2, height / 2, myValue);
  fill(0);
  text(myValue, width / 2, height / 2);
}

Tools and Libraries