Skip to content

Instantly share code, notes, and snippets.

@mjvo

mjvo/index.html

Forked from kotobuki/script.js
Last active March 15, 2024 12:15
Show Gist options
  • Save mjvo/a84a69cc98d8e65e20bcf2e040b43019 to your computer and use it in GitHub Desktop.
Save mjvo/a84a69cc98d8e65e20bcf2e040b43019 to your computer and use it in GitHub Desktop.
Download ZIP
Web Bluetooth in p5js with Adafruit Circuit Playground Bluefruit (UART)
Raw
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/addons/p5.sound.min.js"></script>
Raw
script.js
// An implementation of Nordic Semicondutor's UART/Serial Port Emulation over Bluetooth low energy
// Built upon https://codepen.io/kotobuki/pen/xyZreZ by Shigeru Kobayashi @kotobuki
/*
CircuitPython Code for Adafruit Bluefruit Circuit Playground
https://gist.github.com/mjvo/f0b03b12cc6dbc3c5bd4d3593f92b972
*/
const DEVICE_PREFIX = "CIRCUITPY";
const UART_SERVICE_UUID = "6e400001-b5a3-f393-e0a9-e50e24dcca9e";
// Allows the Bluefruit to transmit a byte array
const UART_TX_CHARACTERISTIC_UUID = "6e400003-b5a3-f393-e0a9-e50e24dcca9e";
// Allows a connected client to send a byte array
const UART_RX_CHARACTERISTIC_UUID = "6e400002-b5a3-f393-e0a9-e50e24dcca9e";
let bluefruitDevice;
let rxCharacteristic;
function setup() {
createCanvas(200, 200);
const connectButton = createButton("Connect");
connectButton.mousePressed(connectButtonPressed);
const disconnectButton = createButton("Disconnect");
disconnectButton.mousePressed(disconnectButtonPressed);
const pingButton = createButton("Ping");
pingButton.mousePressed(pingButtonPressed);
}
function draw() {
background(0);
}
async function connectButtonPressed() {
try {
console.log("Requesting Bluetooth Device...");
bluefruitDevice = await navigator.bluetooth.requestDevice({
filters: [{ namePrefix: DEVICE_PREFIX }],
optionalServices: [UART_SERVICE_UUID],
});
console.log("Connecting to GATT Server...");
const server = await bluefruitDevice.gatt.connect();
console.log("Getting Service...");
const service = await server.getPrimaryService(UART_SERVICE_UUID);
console.log("Getting Characteristics...");
const txCharacteristic = await service.getCharacteristic(
UART_TX_CHARACTERISTIC_UUID
);
txCharacteristic.startNotifications();
txCharacteristic.addEventListener(
"characteristicvaluechanged",
onTxCharacteristicValueChanged
);
rxCharacteristic = await service.getCharacteristic(
UART_RX_CHARACTERISTIC_UUID
);
} catch (error) {
console.log(error);
}
}
function disconnectButtonPressed() {
if (!bluefruitDevice) {
return;
}
if (bluefruitDevice.gatt.connected) {
bluefruitDevice.gatt.disconnect();
console.log("Disconnected");
}
}
async function pingButtonPressed() {
if (!rxCharacteristic) {
return;
}
try {
let encoder = new TextEncoder();
rxCharacteristic.writeValue(
encoder.encode("msg from p5js.\n")
);
} catch (error) {
console.log(error);
}
}
function onTxCharacteristicValueChanged(event) {
let receivedData = [];
for (var i = 0; i < event.target.value.byteLength; i++) {
receivedData[i] = event.target.value.getUint8(i);
}
const receivedString = String.fromCharCode.apply(null, receivedData);
console.log(receivedString);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment