Build a Currency Note Detector Game with BBC micro:bit, Web Bluetooth and Physical Web
I would like to walk through how do I build a currency note detector to distinguish between 5 dollar Singapore note and 10 dollar Singapore note. You insert the money to the device and the device will tell you whether it is 5 dollar note or 10 dollar note. We will use the Physical Web and Web Bluetooth for this purpose. The intention to build this is to demo the power of Web Bluetooth and Physical Web with micro:bit.
Web Bluetooth is a technology to connect the Web with Internet of Things with just using a web browser. Web Bluetooth lets you control any bluetooth Low Energy device directly from your PC or smart phone, without need to install an app first. You can read more details here.
Physical Web lets you broadcast any URL to the people around you. It is powered by bluetooth low energy (BLE) beacons that broadcast URLs using the Eddystone format. When you are near a bluetooth beacon (and have bluetooth enabled), you will receive a notification for the Physical Web. You can tap on the notification to see the list of nearby URLs. You can read more details here.
List of Components
- 1 x BBC micro:bit. We will be using micro:bit as a beacon for Physical Web and Web Bluetooth to communicate with your smartphone.
- 1 x battery holder with 2 x AAA batteries
- 1 x LDR (Light Dependent Resistor)
- 1 x bright LED
- 1 x resistor 10K Ohm
You also need a smartphone with Chrome browser installed. I am using Android 6 with Chrome version 59.
We also need to setup and install Yotta. We use Yotta to create the micro:bit firmware app for the Physical Web and Web Bluetooth.
Step by Step Guide
Build a Color Sensor to detect the currency
Construct the below circuit diagram to build a color sensor to detect the currency note based on its color and connect the circuit with micro:bit.
This configuration gives a low number when the LDR is lit up, a high one when it is covered.
I put everything in a box as shown below.
Create Web Bluetooth App
Create an HTML web app to connect and discover the necessary bluetooth GATT IO services from the micro:bit to use the bluetooth IO pin services. Read more details on the IO bluetooth pin services here.
IOPINSERVICE_SERVICE_UUID = "E95D127B251D470AA062FA1922DFA9A8"; PINDATA_CHARACTERISTIC_UUID = "E95D8D00251D470AA062FA1922DFA9A8"; PINADCONFIGURATION_CHARACTERISTIC_UUID = "E95D5899251D470AA062FA1922DFA9A8"; PINIOCONFIGURATION_CHARACTERISTIC_UUID = "E95DB9FE251D470AA062FA1922DFA9A8";
We need to configure Pin 1 on micro:bit as an Analog Input to read the value from the LDR:
- Set the Pin AD Configuration bit mask. The pin will be set as an Analog.
let cmdPinAd = new Uint32Array([0x02]);
- Set the Pin IO Configuration bit mask. The pin will be set as an Input. The function I wrote is initLDR().
let cmdPinIO = new Uint32Array([0x02]);
- Add event listener to monitor the value received from the Pin 1 that is connected to the LDR.
We need to calibrate the color sensor to measure the light reflection intensity when we insert the dollar note into the device.
- Get the value from the event listener function handleCharacteristicValueChanged().
- Insert 5 dollar note and note the value you received.
- Insert 10 dollar note and note the value you received.
- Write a logic to check and compare the value.
You can find the complete source code on my Git repo. The filename is LDR.html.
The next step is to host the web app in order to advertise the URL in Eddystone-URL format that will be used in PhysicalWeb. Eddystone-URL is a beacon broadcast format that sends out a URL to a user’s device.
This is my URL to LDR.html hosted on my Git repo:
That URL is too long to put in Eddystone-URL format, we need to shorten it first. Go https://goo.gl/ and enter the URL:
Then you will get shorten URL: https://goo.gl/sGtcjT. Note it down, we will use this later to create the Physcal Web app.
Create Physical Web
We need to install and setup Yotta to create the micro:bit firmware app. Yotta is the offline build tool to create the microbit firmware. We need to create an app to advertise the Eddystone bluetooth URL and to enable all the necessary bluetooth services in particularly Bluetooth IO Pin Service.
Follow this link to install and setup Yotta.
Once you have Yotta configured, let’s write a C++ code to advertise the bluetooth Eddystone-URL and to enable the Bluetooth IO Pin service.
Update the following code with your shorten URL that you created earlier (https://goo.gl/sGtcjT) :
char URL = “https://goo.gl/sGtcjT"; //Change this with your shorten URL
Activate the bluetooth IO service and start advertising Eddystone-URL:
new MicroBitIOPinService(*uBit.ble, uBit.io);
We also need to setup the config.json. Please make sure the pairing_mode = 1 (able to pair), open = 1 (no bluetooth security) and eddystone_url = 1 (to advertise Eddystone-URL).
Place the config.json in the root folder, while the main.cpp is under “source” folder.
Then execute the following commands to compile the program:
yt target bbc-microbit-classic-gcc
If no error, you will get the .hex file on the following location. Drag and drop .hex file onto your micro:bit and you are set!
Contribute to currency-note-game development by creating an account on GitHub.github.com
How to Use ?
- Install PhysicalWeb App from Google Playstore: https://play.google.com/store/apps/details?id=physical_web.org.physicalweb&hl=en
- Activate bluetooth on smartphone
- Switch on micro:bit
- You will receive the Eddystone-URL as shown in the below picture. Tap it and you will be directed to the URL: https://ferrygun.github.io/currency-note-game/WebBluetooth/ldr.html
- Click Connect to start.
So that’s it — A simple currency note detector game with micro:bit, Web Bluetooth and Physical Web ! Very simple and interesting !! Let me know in the comments what kinds of things you can create with this technology, or if you have any problem or issue to build.
Have fun! Get creative !!