guide

Using Bluetooth Low Energy on the Raspberry Pi Pico - Part 4/4: Connecting to BLE Services via the Web Bluetooth API

Learn how to create a webpage to interact with a BLE Service, to provision a Raspberry Pi Pico W's WiFi settings dynamically and remotely, via the Web Bluetooth API.

Shubham Jain

Feb 16, 2025 • 3 min read

💡

This post is the final part of a 4-part series showing how you can provision the WiFi settings of – or, transmit generic data to – a Raspberry Pi Pico W via Bluetooth Low Energy using MicroPython.

See Part 1 for an introduction to important BLE concepts, Part 2 for an introduction to using MicroPython on the Pico, and Part 3 for how to setup your own BLE Service and Characteristics to read/write WiFi credentials.

Just want a TL;DR to get it working?
Subscribers get access to TL;DR versions of all my blog series!

Overview

Now that we've got our BLE service working, we can set up a quick web-based UI that contains a form for our users to save their WiFi credentials.

This can be quite convenient because it is a simple static webpage, so it can be hosted anywhere (e.g., on GitHub pages for free, on your product's main website, embedded into an existing webpage, and so on). It also means it doesn't need to be hosted on your Pico, so you can save some storage – every byte counts when it comes to microcontrollers with limited capacity (2MB on the Pico)!

Using the JavaScript Web Bluetooth API

We'll use a bit of JavaScript in our web-page to connect to the Pico via BLE and write to the Characteristics we defined earlier.

Here's an overview of what we'll need to implement – which can all be done in just a few lines of JavaScript:

Scan for BLE peripherals and request the user to choose the Pico to connect to
Connect to the GATT server on the Pico
Get the Service and Characteristics on the GATT server
Write to the Characteristics

💡

The Web Bluetooth API is currently experimental, which means browser support is limited, and it may change in future.At the time of writing, the APIs we are going to use are supported in Chrome, Edge, and Opera on mobile and desktop.

Scanning for BLE peripherals

const serviceUuid = "ca975b4f-06d7-45de-8705-0b0309965382"
const device = await navigator.bluetooth.requestDevice({
  acceptAllDevices: true,
  optionalServices: [serviceUuid],
})

JavaScript code to scan for BLE peripherals including specific Service UUIDs.

Connecting to GATT server

const server = await device.gatt.connect()

JavaScript code for connecting to a discovered peripheral.

Getting Service and Characteristics

const service = await server.getPrimaryService(serviceUuid)
const characteristics = await service.getCharacteristics()

JavaScript code for fetching the Service and its Characteristics from a connected peripheral.

You can identify each characteristic by their UUID. For example:

const parsedCharacteristics = {}

characteristics.forEach(characteristic => {
  if (characteristic.uuid === 'SSID_UID') {
    parsedCharacteristics.ssid = characteristic
  } else if (characteristic.uuid === 'PASSWORD_UUID') {
    parsedCharacteristics.password = characteristic
  }
});

JavaScript code for parsing the fetched Characteristics, based on their UUID.

Writing to Characteristics

const encoder = new TextEncoder('utf-8')
await parsedCharacteristics.ssid.writeValue(encoder.encode(input))
await parsedCharacteristics.password.writeValue(encoder.encode(input))

JavaScript code for writing to Characteristics.

Reading Characteristic values

const decoder = new TextDecoder('utf-8')
console.log(decoder.decode(await parsedCharacteristics.ssid.readValue()))
console.log(decoder.decode(await parsedCharacteristics.password.readValue()))

JavaScript code for reading from Characteristics.

Adding the UI

We can have a simple HTML form to ask the user for their credentials:

<html>
<head><title>WiFi Provisioning</title></head>
<body>
  <form onsubmit="onsubmit()">
    <label>SSID: <input id='ssid' required/></label>
    <br/>
    <label>Password: <input id='password' required/></label>
  </form>
</body>
</html>

HTML code for a form to ask user for values.

And we can finally add some JavaScript just before the final </body> that handles the form submission and writes the Characteristic to our Pico:

<script type='text/javascript'>
async function onsubmit() {
  const ssid = document.getElementById('ssid').value
  const password = document.getElementById('password').value
  
  await parsedCharacteristics.ssid.writeValue(encoder.encode(ssid))
  await parsedCharacteristics.password.writeValue(encoder.encode(password))
}
</script>

JavaScript code for reading the HTML form values and writing to the peripheral's Characteristics.

💡

Check out a live demo of a web-app which you can use to test your own BLE implementation here!