Skip to content

Streamlined BLE Connection Workflow #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 5, 2025
Merged

Streamlined BLE Connection Workflow #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eab6969
Initial library implementation
makermelissa Aug 30, 2025
519750a
Streamline BLE Connection Workflow
makermelissa Sep 4, 2025
9ea2323
Improve error messaging
makermelissa Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,18 +231,6 @@ <h1>Request Bluetooth Device</h1>
</p>
</div>
</section>
<section class="step">
<div class="step-number"></div>
<div class="step-content">
<h1>Bond Device</h1>
<p>Once you are connected, we need to prompt a bond. Without this CircuitPython boards with
USB won't continue to advertise after a hard reset or powerloss. This button also loads
code.py from the device so click it even if the device has been connected before.</p>
<p>
<button class="purple-button" id="promptBond">Bond Bluetooth Device</button>
</p>
</div>
</section>
</div>
</div>
<div class="popup-modal shadow connect-dialog closable" data-popup-modal="web-connect">
Expand Down
57 changes: 17 additions & 40 deletions js/workflows/ble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import {CONNTYPE} from '../constants.js';
import {Workflow} from './workflow.js';
import {GenericModal, DeviceInfoModal} from '../common/dialogs.js';
import {sleep} from '../common/utilities.js';
import {bluetooth} from 'webbluetooth';

const bleNusServiceUUID = 'adaf0001-4369-7263-7569-74507974686e';
const bleNusCharRXUUID = 'adaf0002-4369-7263-7569-74507974686e';
const bleNusCharTXUUID = 'adaf0003-4369-7263-7569-74507974686e';

const BYTES_PER_WRITE = 20;

let btnRequestBluetoothDevice, btnBond, btnReconnect;
let btnRequestBluetoothDevice, btnReconnect;

class BLEWorkflow extends Workflow {
constructor() {
Expand All @@ -30,10 +31,9 @@ class BLEWorkflow extends Workflow {
this.partialWrites = true;
this.type = CONNTYPE.Ble;
this.buttonStates = [
{reconnect: false, request: false, bond: false},
{reconnect: false, request: true, bond: false},
{reconnect: true, request: true, bond: false},
{reconnect: false, request: false, bond: true},
{reconnect: false, request: false},
{reconnect: false, request: true},
{reconnect: true, request: true},
];
}

Expand All @@ -53,18 +53,15 @@ class BLEWorkflow extends Workflow {
let p = this.connectDialog.open();
let modal = this.connectDialog.getModal();
btnRequestBluetoothDevice = modal.querySelector('#requestBluetoothDevice');
btnBond = modal.querySelector('#promptBond');
btnReconnect = modal.querySelector('#bleReconnect');

// Map the button states to the buttons
this.connectButtons = {
reconnect: btnReconnect,
request: btnRequestBluetoothDevice,
bond: btnBond
request: btnRequestBluetoothDevice
};

btnRequestBluetoothDevice.addEventListener('click', this.onRequestBluetoothDeviceButtonClick.bind(this));
btnBond.addEventListener('click', this.onBond.bind(this));
btnReconnect.addEventListener('click', this.reconnectButtonHandler.bind(this));

// Check if Web Bluetooth is available
Expand All @@ -74,7 +71,7 @@ class BLEWorkflow extends Workflow {
stepOne.classList.add("hidden");
}
try {
const devices = await navigator.bluetooth.getDevices();
const devices = await bluetooth.getDevices();
console.log(devices);
this.connectionStep(devices.length > 0 ? 2 : 1);
} catch (e) {
Expand Down Expand Up @@ -120,7 +117,7 @@ class BLEWorkflow extends Workflow {
if (!this.connectionStatus()) {
try {
console.log('Getting existing permitted Bluetooth devices...');
const devices = await navigator.bluetooth.getDevices();
const devices = await bluetooth.getDevices();

console.log('> Found ' + devices.length + ' Bluetooth device(s).');
// These devices may not be powered on or in range, so scan for
Expand All @@ -138,7 +135,7 @@ class BLEWorkflow extends Workflow {

// Bring up a dialog to request a device
async requestDevice() {
return navigator.bluetooth.requestDevice({
return bluetooth.requestDevice({
filters: [{services: [0xfebb]},], // <- Prefer filters to save energy & show relevant devices.
optionalServices: [0xfebb, bleNusServiceUUID]
});
Expand All @@ -153,11 +150,13 @@ class BLEWorkflow extends Workflow {
abortController.abort();
console.log('Connecting to GATT Server from "' + device.name + '"...');
try {
await device.gatt.connect();
this.bleServer = await device.gatt.connect();
} catch (error) {
await this._showMessage("Failed to connect to device. Try forgetting device from OS bluetooth devices and try again.");
// Disable the reconnect button
this.connectionStep(1);
}
if (device.gatt.connected) {
if (this.bleServer && this.bleServer.connected) {
console.log('> Bluetooth device "' + device.name + ' connected.');
await this.switchToDevice(device);
} else {
Expand All @@ -171,6 +170,7 @@ class BLEWorkflow extends Workflow {
this.debugLog("connecting to " + device.name);
try {
console.log('Watching advertisements from "' + device.name + '"...');
console.log('If no advertisements are received, make sure the device is powered on and in range. You can also try resetting the device');
await device.watchAdvertisements({signal: abortController.signal});
}
catch (error) {
Expand All @@ -187,9 +187,7 @@ class BLEWorkflow extends Workflow {
let device = await this.requestDevice();

console.log('> Requested ' + device.name);
await device.gatt.connect();

await this.switchToDevice(device);
await this.connectToBluetoothDevice(device);
/*}
catch (error) {
console.error(error);
Expand All @@ -203,7 +201,7 @@ class BLEWorkflow extends Workflow {
this.bleDevice = device;
this.bleDevice.removeEventListener("gattserverdisconnected", this.onDisconnected.bind(this));
this.bleDevice.addEventListener("gattserverdisconnected", this.onDisconnected.bind(this));
this.bleServer = this.bleDevice.gatt;
//this.bleServer = this.bleDevice.gatt;
console.log("connected", this.bleServer);
let services;

Expand All @@ -220,26 +218,11 @@ class BLEWorkflow extends Workflow {
await this.fileHelper.bond();
await this.connectToSerial();

// Enable/Disable UI buttons
this.connectionStep(3);

await this.onConnected();
this.connectDialog.close();
await this.loadEditor();
}

// Bond
async onBond(e) {
try {
console.log("bond");
await this.fileHelper.bond();
console.log("bond done");
} catch (e) {
console.log(e, e.stack);
}
await this.loadEditor();
}

async serialTransmit(msg) {
if (this.rxCharacteristic) {
let encoder = new TextEncoder();
Expand Down Expand Up @@ -272,17 +255,11 @@ class BLEWorkflow extends Workflow {
}
// Is this a new connection?
if (!this.bleDevice) {
let devices = await navigator.bluetooth.getDevices();
let devices = await bluetooth.getDevices();
for (const device of devices) {
await this.connectToBluetoothDevice(device);
}
}

// Do we have a connection now but still need to connect serial?
if (this.bleDevice && !this.bleServer) {
await this.showBusy(this.bleDevice.gatt.connect());
this.switchToDevice(this.bleDevice);
}
}

updateConnected(connectionState) {
Expand Down
Loading