HTML connect to BLE using p5.ble.js and p5.js

Hardware Nano Family Nano 33 BLE
#1

Just want to share a bit of webpage code that seems to work with the LED Control example code at

Examples–>ArduinoBle–>Peripheral-LedControl

ISSUE: because the above example waits for the serial monitor, you must load the serial monitor before the web page will work.

If you have the above with serial monitor loaded, try this web page at

https://hpssjellis.github.io/everything-nrf52840-usb-dongles/code/simple-ble-led/index.html

The github with code is at

https://github.com/hpssjellis/everything-nrf52840-usb-dongles/tree/master/code/simple-ble-led

If you don’t want to have to start the serial monitor, use my

simple-led-peripheral.ino

The web page code is at

index.html

My version of the central program is (you must send a “1” to connect and a “2” to scan. My version works with anything that has LED in it’s BLE local name. It connects to the latest BLE found)

simple-led-central.ino

The actual webpage code is fairly simple, and can be edited with a simple text editor. Seems to work for me using both Chrome and my Android cell phone, although the cell phone took a while to connect to the Arduino.

<html>
<head>

<title>Simple LED, Rocksetta and p5.ble.js</title>

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<script src="https://unpkg.com/p5ble@0.0.6/dist/p5.ble.js"></script>

<script>

// Global variables and constants

// The serviceUuid must match the serviceUuid of the device you would like to connect
const serviceUuid = "19b10010-e8f2-537e-4f6c-d104768a1214";

let myCharacteristic;
let input;
let myBLE;


function setup() {
  myBLE = new p5ble();
}


function connectToBle() {
  // Connect to a device by passing the service UUID
  myBLE.connect(serviceUuid, gotCharacteristics);
}


function gotCharacteristics(error, characteristics) {
  if (error) console.log('error: ', error);
  console.log('characteristics: ', characteristics);
  // Set the first characteristic as myCharacteristic
  myCharacteristic = characteristics[0];
}


function myWriteToBle(myIn) {
  myBLE.write(myCharacteristic, myIn);
}


</script>


</head>
<body>

<H1>Simple LED, Rocksetta and p5.ble.js</H1>
<h6>By <a href="https://www.rocksetta.com">Jeremy Ellis</a> Twitter <a href="https://twitter.com/rocksetta">@rocksetta</a></h6>


<input type=button value="Connect to Simple-LED" onclick="{
   connectToBle()
}">


<input type=button value="Led On" onclick="{
  myWriteToBle('01')
}">


<input type=button value="Led Off" onclick="{
  myWriteToBle('00')
}">





</body>
</html>
#2