Getting Started with p5.ble.js Using Arduino Nano 33 BLE

In this tutorial, you will learn how to use p5.ble.js to build a web app to interact with your BLE-powered Arduino projects wirelessly.

Oct 19, 2019

•

24326 views

•

14 respects

wearables

ble

web

Components and supplies

Arduino Nano 33 BLE

Apps and platforms

Chrome

p5.js Editor

Arduino IDE

Project description

Code

sketch.js

javascript

This is the example p5 sketch. Paste it in the sketch.js file.

1const serviceUuid = "19b10010-e8f2-537e-4f6c-d104768a1214";
2const  characteristicsUUID = {
3  led:"19b10011-e8f2-537e-4f6c-d104768a1214",
4  button:"19b10012-e8f2-537e-4f6c-d104768a1214"
5}
6let  buttonCharacteristic;
7let ledCharacteristic;
8let myBLE;
9
10let buttonValue  = 0;
11
12function setup() {
13  createCanvas(400, 400);
14    // Create a p5ble  class
15  myBLE = new p5ble();
16
17  createCanvas(600, 400);
18  background("#FFF");
19
20  // Create a 'Connect and Start Notifications' button
21  const connectButton  = createButton('Connect and Start Notifications')
22  connectButton.mousePressed(connectAndStartNotify);
23  
24  // Create a 'Toggle' button
25  const toggleButton = createButton('Toggle');
26  toggleButton.position(15, 15);
27  toggleButton.mousePressed(toggleLED);
28}
29
30function  draw() {
31   noStroke();
32
33  if(buttonValue>0){
34    fill(color(200, 200,  200));
35  }else{
36    fill(color(100, 200, 200));
37  }
38  
39  rect(15,  40, 60, 60);
40}
41
42function connectAndStartNotify() {
43  // Connect to a  device by passing the service UUID
44  myBLE.connect(serviceUuid, gotCharacteristics);
45}
46
47//  A function that will be called once got characteristics
48function gotCharacteristics(error,  characteristics) {
49  if (error) console.log('error: ', error);
50  console.log(characteristics[1].uuid);
51  for(let i = 0; i < characteristics.length;i++){
52    if(characteristics[i].uuid  == characteristicsUUID.button){
53      buttonCharacteristic = characteristics[i];
54      myBLE.startNotifications(buttonCharacteristic, handleButton);
55    }else  if(characteristics[i].uuid == characteristicsUUID.led){
56      ledCharacteristic  = characteristics[i];
57    }else{
58      console.log("nothing");
59    }
60  }
61  // Start notifications on the first characteristic by passing the characteristic
62  // And a callback function to handle notifications
63  
64}
65
66// A function  that will be called once got characteristics
67function handleButton(data) {
68  console.log('Button: ', data);
69  buttonValue = Number(data);
70}
71
72//  A function that toggles the LED
73function toggleLED(){
74  myBLE.read(ledCharacteristic,  handleLED);
75}
76
77function handleLED(error, data){
78  if (error) console.log('error:  ', error);
79  console.log('LED: ', data);
80  myBLE.write(ledCharacteristic,  !data);
81}

const serviceUuid = "19b10010-e8f2-537e-4f6c-d104768a1214";
const  characteristicsUUID = {
  led:"19b10011-e8f2-537e-4f6c-d104768a1214",
  button:"19b10012-e8f2-537e-4f6c-d104768a1214"
}
let  buttonCharacteristic;
let ledCharacteristic;
let myBLE;

let buttonValue  = 0;

function setup() {
  createCanvas(400, 400);
    // Create a p5ble  class
  myBLE = new p5ble();

  createCanvas(600, 400);
  background("#FFF");

  // Create a 'Connect and Start Notifications' button
  const connectButton  = createButton('Connect and Start Notifications')
  connectButton.mousePressed(connectAndStartNotify);
  
  // Create a 'Toggle' button
  const toggleButton = createButton('Toggle');
  toggleButton.position(15, 15);
  toggleButton.mousePressed(toggleLED);
}

function  draw() {
   noStroke();

  if(buttonValue>0){
    fill(color(200, 200,  200));
  }else{
    fill(color(100, 200, 200));
  }
  
  rect(15,  40, 60, 60);
}

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

//  A function that will be called once got characteristics
function gotCharacteristics(error,  characteristics) {
  if (error) console.log('error: ', error);
  console.log(characteristics[1].uuid);
  for(let i = 0; i < characteristics.length;i++){
    if(characteristics[i].uuid  == characteristicsUUID.button){
      buttonCharacteristic = characteristics[i];
      myBLE.startNotifications(buttonCharacteristic, handleButton);
    }else  if(characteristics[i].uuid == characteristicsUUID.led){
      ledCharacteristic  = characteristics[i];
    }else{
      console.log("nothing");
    }
  }
  // Start notifications on the first characteristic by passing the characteristic
  // And a callback function to handle notifications
  
}

// A function  that will be called once got characteristics
function handleButton(data) {
  console.log('Button: ', data);
  buttonValue = Number(data);
}

//  A function that toggles the LED
function toggleLED(){
  myBLE.read(ledCharacteristic,  handleLED);
}

function handleLED(error, data){
  if (error) console.log('error:  ', error);
  console.log('LED: ', data);
  myBLE.write(ledCharacteristic,  !data);
}

sketch.js

javascript

This is the example p5 sketch. Paste it in the sketch.js file.

1const serviceUuid = "19b10010-e8f2-537e-4f6c-d104768a1214";
2const   characteristicsUUID = {
3  led:"19b10011-e8f2-537e-4f6c-d104768a1214",
4  button:"19b10012-e8f2-537e-4f6c-d104768a1214"
5}
6let   buttonCharacteristic;
7let ledCharacteristic;
8let myBLE;
9
10let buttonValue   = 0;
11
12function setup() {
13  createCanvas(400, 400);
14    // Create a p5ble   class
15  myBLE = new p5ble();
16
17  createCanvas(600, 400);
18  background("#FFF");
19
20   // Create a 'Connect and Start Notifications' button
21  const connectButton   = createButton('Connect and Start Notifications')
22  connectButton.mousePressed(connectAndStartNotify);
23   
24  // Create a 'Toggle' button
25  const toggleButton = createButton('Toggle');
26   toggleButton.position(15, 15);
27  toggleButton.mousePressed(toggleLED);
28}
29
30function   draw() {
31   noStroke();
32
33  if(buttonValue>0){
34    fill(color(200, 200,   200));
35  }else{
36    fill(color(100, 200, 200));
37  }
38  
39  rect(15,   40, 60, 60);
40}
41
42function connectAndStartNotify() {
43  // Connect to a   device by passing the service UUID
44  myBLE.connect(serviceUuid, gotCharacteristics);
45}
46
47//   A function that will be called once got characteristics
48function gotCharacteristics(error,   characteristics) {
49  if (error) console.log('error: ', error);
50  console.log(characteristics[1].uuid);
51   for(let i = 0; i < characteristics.length;i++){
52    if(characteristics[i].uuid   == characteristicsUUID.button){
53      buttonCharacteristic = characteristics[i];
54       myBLE.startNotifications(buttonCharacteristic, handleButton);
55    }else   if(characteristics[i].uuid == characteristicsUUID.led){
56      ledCharacteristic   = characteristics[i];
57    }else{
58      console.log("nothing");
59    }
60   }
61  // Start notifications on the first characteristic by passing the characteristic
62   // And a callback function to handle notifications
63  
64}
65
66// A function   that will be called once got characteristics
67function handleButton(data) {
68   console.log('Button: ', data);
69  buttonValue = Number(data);
70}
71
72//   A function that toggles the LED
73function toggleLED(){
74  myBLE.read(ledCharacteristic,   handleLED);
75}
76
77function handleLED(error, data){
78  if (error) console.log('error:   ', error);
79  console.log('LED: ', data);
80  myBLE.write(ledCharacteristic,   !data);
81}

const serviceUuid = "19b10010-e8f2-537e-4f6c-d104768a1214";
const   characteristicsUUID = {
  led:"19b10011-e8f2-537e-4f6c-d104768a1214",
  button:"19b10012-e8f2-537e-4f6c-d104768a1214"
}
let   buttonCharacteristic;
let ledCharacteristic;
let myBLE;

let buttonValue   = 0;

function setup() {
  createCanvas(400, 400);
    // Create a p5ble   class
  myBLE = new p5ble();

  createCanvas(600, 400);
  background("#FFF");

   // Create a 'Connect and Start Notifications' button
  const connectButton   = createButton('Connect and Start Notifications')
  connectButton.mousePressed(connectAndStartNotify);
   
  // Create a 'Toggle' button
  const toggleButton = createButton('Toggle');
   toggleButton.position(15, 15);
  toggleButton.mousePressed(toggleLED);
}

function   draw() {
   noStroke();

  if(buttonValue>0){
    fill(color(200, 200,   200));
  }else{
    fill(color(100, 200, 200));
  }
  
  rect(15,   40, 60, 60);
}

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

//   A function that will be called once got characteristics
function gotCharacteristics(error,   characteristics) {
  if (error) console.log('error: ', error);
  console.log(characteristics[1].uuid);
   for(let i = 0; i < characteristics.length;i++){
    if(characteristics[i].uuid   == characteristicsUUID.button){
      buttonCharacteristic = characteristics[i];
       myBLE.startNotifications(buttonCharacteristic, handleButton);
    }else   if(characteristics[i].uuid == characteristicsUUID.led){
      ledCharacteristic   = characteristics[i];
    }else{
      console.log("nothing");
    }
   }
  // Start notifications on the first characteristic by passing the characteristic
   // And a callback function to handle notifications
  
}

// A function   that will be called once got characteristics
function handleButton(data) {
   console.log('Button: ', data);
  buttonValue = Number(data);
}

//   A function that toggles the LED
function toggleLED(){
  myBLE.read(ledCharacteristic,   handleLED);
}

function handleLED(error, data){
  if (error) console.log('error:   ', error);
  console.log('LED: ', data);
  myBLE.write(ledCharacteristic,   !data);
}

Downloadable files

Breadboard View

This is the example wiring of the circuit.

Breadboard View

Comments

Only logged in users can leave comments

jingwen_zhu

0 Followers

•

0 Projects

Intro

Components and supplies

Apps and platforms

Project description

Code

Downloadable files