This tutorial relies on a laptop or device that runs chrome or chromium:
A subset of the Web Bluetooth API is available in Chrome OS, Chrome for Android 6.0, Mac (Chrome 56) and Windows 10 (Chrome 70).
This means that it is impossible to connect an iPhone f.e. using this Bluetooth protocol to the micro:bit, there might be a possibility that it works with the WebBLE app for iOS but I haven't tried it. on most Android devices it works when you install the chrome browser. It also needs to be run in a secure environment (meaning https:// ), so the p5 web editor is perfect for that. Check https://web.dev/bluetooth/ for the latest updates on the protocol.
StepsAll these steps are explained in the video below.
- Find a cool game, in this case, we used pong, but there is plenty of other cool games, like platform games, space invaders, racing games. Just google "P5.js " + the name of the game
- Replace some variables in the sketch that need to be changed by the micro:bit, if it is controlled by the mouse, look for mouseX and mouseY, if the game is controlled by a keyboard, look for keyPressed and keyReleased, and replace these with your own functions.
- Add the bluetoothConnection.js to the sketch, you can find it in the codes underneath
- Add the script to the index.html file, by adding this line to the header
<script src="bluetoothConnection.js"></script>
- Make sure the
microBitConnect()
is triggered by a user-event - Make the
function microBitReceivedMessage(message){}
- Make the code for the micro:bit, example code from the video can be found here
- Make sure you check the project settings and check No Pairing Required there.
P5 code (since a security update in chrome you can not trigger Bluetooth connections from iFrames (such as in the p5 editor). Use this link to run the code above, if you want to run your own code, login to the p5 editor and go to file>share>embed and copy the URL of the iFrame in the browser.
Learning moreIf you want to send or receive multiple values at the same time, for example, the roll and pitch, you can join these values
and in the p5 sketch split them again
Comments