Web Bluetooth in p5js with Adafruit Circuit Playground Bluefruit (UART)

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>

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);
}