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

22707 views

14 respects

Components and supplies

1

Arduino Nano 33 BLE

Apps and platforms

1

Chrome

1

p5.js Editor

1

Arduino IDE

Project description

Code

sketch.js

javascript

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

sketch.js

javascript

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

Downloadable files

Breadboard View

This is the example wiring of the circuit.

Breadboard View

Comments

Only logged in users can leave comments

Anonymous user

2 years ago

Hi Jingwen, thank you for this comprehensive and valuable tutorial, I discovered by the way thanks to Mauro Alfieri during a Milan Arduino User Group meeting in December. I followed all the steps and Arduino Nano 33 Iot is working with your sketch and discoverbale on Bluetooth both on the LightBlue App you suggested and directly by the Bluetooth Device app on my Windows 10 PC. But when I press the "Connect and Start Notification" button on the p5.js web editor page, a message "editor.P5js.org wants to pair" pops up but nothing follows and no further button is active, such as "Rescan" or "Pair". After a while following error appears: Error: NotFoundError: User cancelled the requestDevice() chooser. Could you please provide some suggestions how to solve it? Thanks in advance for your kind support. Andrea

Anonymous user

2 years ago

Very great project and explanation. I discovered the p5js tool and I tested the code with success. Many Thank you. Mauro

Anonymous user

3 years ago

Dear Jinwen_zhu. I greatly appreciate the detailed explanations you provided. I was able to get the project working on my Arduino Nano 33 IoT board, using the sketch Button_LED and using the "Live Demo" provided here: https://itpnyu.github.io/p5ble-website/docs/connect-disconnect#try-it-in-p5-web-editor-https-editorp5jsorg-jingwen-zhu-sketches-r3-iitn8h However, when I loaded the same index.html and sketch.js into https://editor.p5js.org/ and hit the "Connect and Start Notifications" button, p5js threw these errors, which I do not understand: TypeError: Cannot read properties of undefined (reading '1') Requesting Bluetooth Device... Error: SecurityError: requestDevice() called from cross-origin iframe. error: TypeError: Cannot read properties of undefined (reading '1') When I pressed the "Toggle" button, it threw this error 2 The characteristic does not exist. When running the sketch.js on https://editor.p5js.org/, there was NEVER a dialog box opened saying ButtonLED - wants to Pair (there WAS such a dialog box when using the "Live Demo" at https://itpnyu.github.io/p5ble-website/docs/connect-disconnect#try-it-in-p5-web-editor-https-editorp5jsorg-jingwen-zhu-sketches-r3-iitn8h BTW, when running the sketch.js on https://editor.p5js.org/ the Arduino serial monitor had printed "Bluetooth device active, waiting for connections..." SO, the Arduiino thought it was ready to pair. Do you know what I am doing wrongg? TTHANKSS !! Tom Low

Anonymous user

5 years ago

Hi Jingwen, thank you for this comprehensive and valuable tutorial, I discovered by the way thanks to Mauro Alfieri during a Milan Arduino User Group meeting in December. I followed all the steps and Arduino Nano 33 Iot is working with your sketch and discoverbale on Bluetooth both on the LightBlue App you suggested and directly by the Bluetooth Device app on my Windows 10 PC. But when I press the "Connect and Start Notification" button on the p5.js web editor page, a message "editor.P5js.org wants to pair" pops up but nothing follows and no further button is active, such as "Rescan" or "Pair". After a while following error appears: Error: NotFoundError: User cancelled the requestDevice() chooser. Could you please provide some suggestions how to solve it? Thanks in advance for your kind support. Andrea

Anonymous user

5 years ago

Very great project and explanation. I discovered the p5js tool and I tested the code with success. Many Thank you. Mauro