Supplies
For micro:bit
For examples
For Paper Playground
Step 1: Install Paper Playground and Upload Projects
Step 2: Add Micro:bitv2 MakeCode Code
UPDATE - No Pairing Required Bluetooth mode for micro:bit
Step 4: Connect Micro:bit to Paper Playground
Example 1: Servo Control by Paper Program Example
Example 2: LED (Pin Control) Via BLE UART Example
Example 3: Time Ratio Game Using Buttons Example

Published June 4, 2024 © CC BY

Micro:bit and Paper Playground: Tangible-Virtual Interfaces

Craft physical-virtual, interactive experiences using code, paper, and web components with Paper Playground & BBC micro:bit!

BeginnerProtip1 hour162

Micro:bit and Paper Playground: Tangible-Virtual Interfaces

Things used in this project

Hardware components

BBC micro:bit board

(optional) BBC micro:bit battery pack

SG90 Micro-servo motor

Alligator Clips

LED (generic)

Webcam (generic, at least 720p+ resolution, 1080p recommended)

(optional) structural support to suspend webcam

Software apps and online services

Paper Playground

Microsoft Makecode for BBC micro:bit

Story

This is a series of example projects for connecting a BBC micro:bit device to Paper Playground, an open-source desktop application that lets you design multimodal interactive experiences by mapping physical pieces of paper with code. Paper Playground lets you easily bring the physical to the virtual and vice versa using nothing more than a webcam and some pieces of paper, with near-infinite extensibility, bringing more human sensory engagement with virtual content. Code can be written in JavaScript or built up using Paper Playground's unique code abstraction Creator interface.

By connecting up a micro:bit (or other microcontrollers with BLE), the physical possibilities with Paper Playground are greatly expanded to include reciprocal control of physical computing components and virtual web components.

In this guide, you will install Paper Playground on your local machine, upload the necessary micro:bit code through Microsoft MakeCode, set up the micro:bit circuits, and upload pre-configured "paper programs" to Paper Playground to experience each example, in order to set yourself up to explore your own ideas.

Examples include: Controlling a servo by rotating a piece of paper, communicating with a micro:bit over UART to change digital pin output to light LEDs, and a game with a tangible interface incorporating paper interaction, button interaction, and feedback on both a virtual screen and micro:bit device.

Learn more about Paper Playground

This material is based upon work supported by the National Science Foundation under Award #2119303.

This project was developed with the Craft Tech Lab and PhET Interactive Simulations at the University of Colorado, Boulder. Project members include Brett Fiedler, Jesse Greenberg, Taliesin Smith, Ann Eisenberg, and Emily Moore.

Supplies

All parts used in this project.

For micro:bit:

micro:bit v2 x1: e.g., https://a.co/d/eMIshYf
(optional) micro:bit battery pack x1: e.g., https://a.co/d/9QPCcQl

For examples:

micro servo 9g, SG90: e.g., https://a.co/d/7we30Qh
alligator wires x4: e.g., https://a.co/d/ijUx7IH
LED x2: e.g., https://a.co/d/1qT5Mzi

For Paper Playground:

Webcam (at least 720p+ resolution, 1080p recommended)
Browser that supports Web Bluetooth (Chrome or Edge).
White paper (see Step 1 for options for adding encoded dots to paper)
(optional) Markers for creating dots or marking up paper programs
(optional) structural support to suspend webcam (extendable microphone mount used in this project)

Step 1: Install Paper Playground and Upload Projects

You will need to begin by installing Paper Playground onto your desktop/laptop computer. The software is free and open source. At the time of writing, installation is done through a command-line interface (e.g., Terminal) and requires cloning a GitHub repository.

Find up-to-date instructions in the Paper Playground Installation Guide.

Once installed, ensure you have opened up all four windows of the interface (Camera, Canvas, Display, and Creator). Set up your equipment and calibrate your webcam following the instructions in Paper Playground Device Setup. Find usage instructions in Paper Playground Interface Overview.

Space and project selection in Creator interface

For all examples, you can find them pre-installed within Creator by selecting the "microcontroller-ble-demos" space and selecting from the respective project (see image). If necessary, you can download the JSON file for each project and use the "Load Project" button to load the desired project after creating a new project in your desired space.

Printing Papers to use in this Project

The paper program numbers used in this project are numbers 7-9. When you're ready to print papers, from Creator, set the currently viewed project as the active program set by pressing "Send to Playground". Once that is done, move over to Camera, and select the correct space ("microcontroller-ble-demos" for this project), which will populate the list on the sidebar with the programs. Select the printer icon beside each program to download a PNG of the paper that can be printed or used as a guide to draw your paper dot sequence using colored markers/pencils. Once printed, you can reuse papers for any project by changing the Paper Number in Creator (dot sequences are assigned by program number).

Alternatively, you will find printable templates for programs 1-20 attached in letter-sized, half-sheet, quarter-sheet, and smaller sizes, ready to be printed and cut.

Printing Markers:

For the programs that use markers, draw a larger dot to use as a marker of the specified color, or print a paper larger than the ones in use.

Step 2: Add Micro:bitv2 MakeCode Code

Add hex file to micro:bit

You will need to program your micro:bit to start its Bluetooth service and the relevant services for each component on the board (e.g., temperature, button, UART, etc).

Use the attached microbit-playper-bridge-v3.hex and drop it directly into your micro:bit or upload it to a new MakeCode micro:bit project.

MakeCode for micro:bit interface with Paper Playground to micro:bit bridge code for examples

UPDATE - No Pairing Required Bluetooth mode for micro:bit

We discovered some issues in pairing the micro:bit to Mac devices. We found that setting No Pairing Required toggle in the Settings (cog) > Project Settings menu allows you to discover the micro:bit device in Paper Playground without pairing the micro:bit with your device. This works on Windows as well. The attached MakeCode .hex file has been updated with this setting already enabled.

--------------------------------------------------------------------------------

(BELOW IS AN OPTIONAL STEP on Windows if using JustWorks pairing) Connect micro:bit as Bluetooth device to your computer

If using the JustWorks pairing setting in the Project Settings of MakeCode, make sure to add the micro:bit to your Bluetooth devices on your device, otherwise you will not find the device in the list of Bluetooth devices available to your web browser. Hold the A and B buttons, then press Reset to enter Bluetooth Pairing Mode on the micro:bit v2.

Make sure to add the micro:bit to your Bluetooth devices on your device, otherwise you will not find the device in the list of Bluetooth devices available to your web browser.Hold the A and B buttons, then press Reset to enter Bluetooth Pairing Mode on the micro:bit v2.

e.g., on Windows 10, open the Bluetooth and Other Device Settings, select Add Bluetooth or other device, and follow the prompts to connect to your BBC micro:bit. Note the ID.

Here are a few recommended, related micro:bit resources:

Information on connecting multiple servos and recommended breakout boards: https://www.papermech.net/bbcmicrobit/
micro:bit Bluetooth profile: https://lancaster-university.github.io/microbit-docs/resources/bluetooth/bluetooth_profile.html
micro:bit BLE UART Example: https://lancaster-university.github.io/microbit-docs/ble/uart-service/#example-microbit-application-animal-vegetable-mineral-game

Step 4: Connect Micro:bit to Paper Playground

Select the Connect to BLE button on the Interactive Display (board.html) to connect the micro:bit to Paper Playground

Connect micro:bit to Paper Playground

If using the provided.hex file, once the micro:bit is powered on (by micro USB cable or battery pack), it should signal that the Bluetooth services have been initiated by displaying a Checkmark on the LED Matrix.

Open the Display (localhost:3000/board.html) and select "Connect to BLE", which will open your browser's Bluetooth Device connection dialog. Select your micro:bit device (it should have the same ID as the step above).

If successful, you should see a Bluetooth icon flash on the LED Matrix of the micro:bit. Opening the Console (checkbox: "Show Console") should also reveal a success message. You can also use the browser's developer console, which may have additional information.

---Troubleshooting---

micro:bit connection using the Web Bluetooth API can be buggy at times (the API is currently experimental at the time of writing).

If you are having trouble connecting your device to your browser or the programs are not behaving as expected, try the following:

Check Console (below, or browser dev console for more detail) for clues.
Refresh the Display (board.html) and reconnect the micro:bit to the browser via "Connect to BLE". (this will fix most problems with one or two refreshes).
If everything looks okay on the micro:bit and Display side, but programs are not behaving as expected, try refreshing Canvas (projector.html).

Feel free to report errors/bugs that are not fixed after troubleshooting using the above steps to the Paper Playground GitHub Discussions board.

Example 1: Servo Control by Paper Program Example

1 / 3 • Servo example in action

This example lets you control a micro servo's position by rotating a piece of paper!

Circuit Design:

Connect one wire (pictured in yellow) from the signal wire of the servo to the "0" Pin breakout on the micro:bit.
Connect one wire (pictured in red) from the power wire of the servo to the 3.3V breakout on the micro:bit.
Connect one wire (pictured in black) from the ground wire of the servo to the ground (GRD) breakout on the micro:bit.

Paper Design:

This example uses one paper program (default: #7) that maps the servo position (0-180) to the rotation angle of the paper.

Example 2: LED (Pin Control) Via BLE UART Example

1 / 4 • LED UART example in action.

This example lets you use paper dot markers to turn on and off LEDs by sending messages over BLE UART!

Circuit Design:

Connect one wire (yellow in picture) from the "0" Pin breakout on the micro:bit to the positive (+, longer) lead of an LED (pictured in red). A 220-ohm resistor was used in this example to set lower LED brightness, but may not be necessary depending on your chosen LED. (grey sticky-tack used to hold components in position)
Connect one wire (pictured in white) from the "1" Pin breakout on the micro:bit to the positive (+, longer) lead of a second LED (green in picture).
Connect the negative (-, shorter) leads of both LEDs to a wire (green in picture) that is connected to the ground (GRD) breakout on the micro:bit.

Paper Design:

This example uses one paper program (default: #7) that sends a UART message depending on the color of the paper dot marker placed on the program. A RED dot marker sends a UART message to set pin 0 to UP (1). Removing it sets pin 0 to DOWN (0). A GREEN dot marker sends a UART message to set pin 1 to UP (1). Removing it sets pin 1 to DOWN (0). A string of Text updates on the Display that echoes what the micro:bit received over UART TX.

NOTE: There are other programs in this Paper Playground project that you can try out including making an on-screen frog jump by pressing the B button

Example 3: Time Ratio Game Using Buttons Example

Time Ratio Game example in action (video demo below)

Guess the target ratio (numerator:denominator) by using your sense of time!

Holding the left (A) or right (B) button on the micro:bit records the duration either button was pressed and maps it to the dog (left) or fox (right) on screen, with a goal of hitting a target ratio for the time either button is pressed. The paper programs on the right track the numerator (top right, #7) and denominator (bottom right, #8) using paper dot marker counting to set the target ratio (default 1:2). Once the button press durations are set, a dot marker placed on the Launch program (left, #9) sends the dog and fox to the relative height set by the length of time their respective button was pressed. The longer you press a button, the higher the dog/fox will go (up to 10 seconds). If the ratio between dog and fox height is correct, within a small window, a happy face is sent to the micro:bit over BLE UART RX and displayed on the LED Matrix. Otherwise, a sad face is sent.

Try finding more than one set of button durations that achieve success and enhance your sense of proportion!

Video demo:

Circuit Design:

This example uses the built-in buttons on the micro:bit. No external circuit components are necessary.

Paper Design:

This program uses three (3) papers and 3 to 10+ paper dot markers (any color) to set the numerator/denominators. Program 7 is the Numerator and the numerator value is set by the total number of dot markers detected on the paper program. Program 8 is the Denominator and the denominator value is set by the total number of dot markers detected on the paper program.

Code

{"programs":[{"number":5,"title":"Hopping Frog","keywords":"microbit, button","description":"When triggered, buttonPressed boolean triggers an image change to animate a hopping frog (pair with BLE Button program).","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":331,"y":326.4286175999101},"modelContainer":{"namedBooleanProperties":[{"name":"buttonPressed","defaultValue":false,"propertyType":"BooleanProperty"}],"namedVector2Properties":[],"namedNumberProperties":[],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[],"numberPropertyControllers":[],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"speechViews":[],"textViews":[],"shapeViews":[],"backgroundViews":[{"name":"blueBackground","modelComponentNames":[],"referenceComponentNames":[],"controlFunctionString":"","lazyLink":false,"fillColor":"#AFEEEE"}],"imageViews":[{"name":"hoppingImage","modelComponentNames":["buttonPressed"],"referenceComponentNames":[],"controlFunctionString":"// hopping when button is pressed\r\nsetVisible( buttonPressed );\r\n\r\nsetCenterX( 0.5 );\r\nsetCenterY( 0.5 );","lazyLink":false,"defaultViewOptions":{"centerX":0.5,"centerY":0.5,"scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"},"imageFileName":"hopping-frog.gif"},{"name":"idleImage","modelComponentNames":["buttonPressed"],"referenceComponentNames":[],"controlFunctionString":"// idle when not pressed - boolean is false\r\nsetVisible( !buttonPressed );\r\n\r\nsetCenterX( 0.5 );\r\nsetCenterY( 0.5 );","lazyLink":false,"defaultViewOptions":{"centerX":0.5,"centerY":0.5,"scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"},"imageFileName":"idle-frog.gif"}]},"listenerContainer":{"linkListeners":[],"animationListeners":[],"bluetoothListeners":[]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}},{"number":4,"title":"BLE Button","keywords":"microbit, button, controller","description":"Example for reading and setting a model component value using a button press from a micro:bit.","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":331,"y":125.69665612297524},"modelContainer":{"namedBooleanProperties":[],"namedVector2Properties":[],"namedNumberProperties":[],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[],"numberPropertyControllers":[],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"speechViews":[],"textViews":[],"shapeViews":[],"backgroundViews":[],"imageViews":[]},"listenerContainer":{"linkListeners":[],"animationListeners":[],"bluetoothListeners":[{"name":"bleButtonController","controlledPropertyNames":["buttonPressed"],"controlFunctionString":"\r\n// The button is pressed if the deviceValue (8bit unsigned int)\r\n// is greater than 0.\r\nsetButtonPressed( deviceValue.getUint8( 0 ) > 0 );","dependencyNames":[],"referenceComponentNames":[],"writeToCharacteristic":false,"serviceId":"e95d9882-251d-470a-a062-fa1922dfa9a8","characteristicId":"e95dda91-251d-470a-a062-fa1922dfa9a8"}]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}},{"number":2,"title":"LED Text Emoji by Rotation","keywords":"","description":"A simple program to send a happy or sad face as LED Text to the micro:bit by rotating the paper program.","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":21.863280662047472,"y":86.93885923569876},"modelContainer":{"namedBooleanProperties":[{"name":"paperRotated","defaultValue":false,"propertyType":"BooleanProperty"}],"namedVector2Properties":[],"namedNumberProperties":[],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[{"name":"rotationController","controlledComponentName":"paperRotated","controlType":"ROTATION","controlTypeFamily":"","whiskerConfiguration":{"topLength":0.2,"rightLength":0.2,"bottomLength":0.2,"leftLength":0.2,"otherPaperNumber":null},"markerColor":""}],"numberPropertyControllers":[],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"speechViews":[],"textViews":[],"shapeViews":[],"backgroundViews":[],"imageViews":[]},"listenerContainer":{"linkListeners":[],"animationListeners":[],"bluetoothListeners":[{"name":"bleFaceController","controlledPropertyNames":[],"controlFunctionString":"// micro:bit LED Text expects a UTF8 string.\r\n// Create an encoder and encode. Do not use writeStringToCharacteristic()\r\n// as this will add delimiters to your string.\r\n\r\nconst encoder = new TextEncoder();\r\n\r\nconst faceString = paperRotated ? ':)' : ':(';\r\nwriteToCharacteristic( encoder.encode( faceString ) );\r\n\r\nconsole.log( `sent data: ${faceString}` );","dependencyNames":["paperRotated"],"referenceComponentNames":[],"writeToCharacteristic":true,"serviceId":"e95dd91d-251d-470a-a062-fa1922dfa9a8","characteristicId":"e95d93ee-251d-470a-a062-fa1922dfa9a8"}]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}},{"number":7,"title":"UART to IO Pins (LEDs) with Markers","keywords":"","description":"This program sends a string over UART RX to set p0 to up (red marker) or p1 to up (green marker), which will light up an LED in circuit with those pins.","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":138.38747850334147,"y":188.20450434275028},"modelContainer":{"namedBooleanProperties":[{"name":"led1p0UpBoolean","defaultValue":false,"propertyType":"BooleanProperty"},{"name":"led2p1UpBoolean","defaultValue":false,"propertyType":"BooleanProperty"}],"namedVector2Properties":[],"namedNumberProperties":[],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[{"name":"receivedUARTString","propertyType":"StringProperty","defaultValue":""}]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[{"name":"p0RedMarkerController","controlledComponentName":"led1p0UpBoolean","controlType":"MARKER","controlTypeFamily":"","whiskerConfiguration":{"topLength":0.2,"rightLength":0.2,"bottomLength":0.2,"leftLength":0.2,"otherPaperNumber":null},"markerColor":"red"},{"name":"p1GreenMarkerController","controlledComponentName":"led2p1UpBoolean","controlType":"MARKER","controlTypeFamily":"","whiskerConfiguration":{"topLength":0.2,"rightLength":0.2,"bottomLength":0.2,"leftLength":0.2,"otherPaperNumber":null},"markerColor":"green"}],"numberPropertyControllers":[],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"speechViews":[],"textViews":[{"name":"receivedUARTText","modelComponentNames":["receivedUARTString"],"referenceComponentNames":[],"controlFunctionString":"setTop(0.5);\r\nsetLeft(0.5);\r\nsetFontSize(32);\r\nsetString( \"micro:bit confirms:\" + receivedUARTString );","lazyLink":false,"defaultViewOptions":{"centerX":0.5,"centerY":0.5,"scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"}}],"shapeViews":[],"backgroundViews":[],"imageViews":[]},"listenerContainer":{"linkListeners":[],"animationListeners":[],"bluetoothListeners":[{"name":"p0BLEWriter","controlledPropertyNames":[],"controlFunctionString":"let str = \"\";\r\n\r\nif (led1p0UpBoolean) {\r\n    str = \"p0U\";\r\n} else {\r\n    str = \"p0D\";\r\n}\r\n\r\nwriteStringToCharacteristic(str);\r\n\r\nconsole.log(`pin 0 being set to ${str}`);\r\n","dependencyNames":["led1p0UpBoolean"],"referenceComponentNames":[],"writeToCharacteristic":true,"serviceId":"6e400001-b5a3-f393-e0a9-e50e24dcca9e","characteristicId":"6e400003-b5a3-f393-e0a9-e50e24dcca9e"},{"name":"p1BLEWriter","controlledPropertyNames":[],"controlFunctionString":"let str = \"\";\r\n\r\nif (led2p1UpBoolean) {\r\n    str = \"p1U\";\r\n} else {\r\n    str = \"p1D\";\r\n}\r\n\r\nwriteStringToCharacteristic(str);\r\n\r\nconsole.log(`pin 1 being set to ${str}`);","dependencyNames":["led2p1UpBoolean"],"referenceComponentNames":[],"writeToCharacteristic":true,"serviceId":"6e400001-b5a3-f393-e0a9-e50e24dcca9e","characteristicId":"6e400003-b5a3-f393-e0a9-e50e24dcca9e"},{"name":"readMicrobitUARTStrings","controlledPropertyNames":["receivedUARTString"],"controlFunctionString":"setReceivedUARTString( deviceValueString );\r\n\r\nconsole.log( `received ${deviceValueString}` );","dependencyNames":[],"referenceComponentNames":[],"writeToCharacteristic":false,"serviceId":"6e400001-b5a3-f393-e0a9-e50e24dcca9e","characteristicId":"6e400002-b5a3-f393-e0a9-e50e24dcca9e"}]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}},{"number":9,"title":"Simple UART Example","keywords":"","description":"","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":180.07511944486933,"y":527.4271624275366},"modelContainer":{"namedBooleanProperties":[{"name":"happyBoolean","defaultValue":false,"propertyType":"BooleanProperty"}],"namedVector2Properties":[],"namedNumberProperties":[],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[{"name":"happyBooleanController","controlledComponentName":"happyBoolean","controlType":"MARKER","controlTypeFamily":"","whiskerConfiguration":{"topLength":0.2,"rightLength":0.2,"bottomLength":0.2,"leftLength":0.2,"otherPaperNumber":null},"markerColor":""}],"numberPropertyControllers":[],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"speechViews":[],"textViews":[],"shapeViews":[],"backgroundViews":[],"imageViews":[]},"listenerContainer":{"linkListeners":[],"animationListeners":[],"bluetoothListeners":[{"name":"writeToMicrobit","controlledPropertyNames":[],"controlFunctionString":"let str = \"\";\r\n\r\nif (happyBoolean) {\r\n    str = \"happy\";\r\n} else {\r\n    str = \"sad\";\r\n}\r\n\r\nwriteStringToCharacteristic(str);\r\n\r\nconsole.log(`Sent ${str} to micro:bit.`);","dependencyNames":["happyBoolean"],"referenceComponentNames":[],"writeToCharacteristic":true,"serviceId":"6e400001-b5a3-f393-e0a9-e50e24dcca9e","characteristicId":"6e400003-b5a3-f393-e0a9-e50e24dcca9e"}]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}}]}

{"programs":[{"number":7,"title":"Servo Control by Rotation","keywords":"rotation, servo, microbit, uart","description":"Sends rotation value mapped from 0 - 180 as UART string to be read by micro:bit and set servo pin in order to set servo position.","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":194.49221091091607,"y":285.21493020035035},"modelContainer":{"namedBooleanProperties":[],"namedVector2Properties":[],"namedNumberProperties":[{"name":"servoPositionNumber","propertyType":"NumberProperty","min":"-90","max":"270","defaultValue":"90"}],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[{"name":"servoValueString","propertyType":"StringProperty","defaultValue":""}]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[],"numberPropertyControllers":[{"name":"setServoPosition","controlledComponentName":"servoPositionNumber","controlType":"ROTATION","controlTypeFamily":"PAPER_MOVEMENT","markerColor":"all","relationshipControlType":"LINEAR"}],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"descriptionViews":[],"textViews":[],"shapeViews":[],"backgroundViews":[],"imageViews":[]},"listenerContainer":{"linkListeners":[{"name":"numberToStringforUART","controlledPropertyNames":["servoValueString"],"controlFunctionString":"//Only send integers to the servo, easier on the makecode string to number parser to have an integer\r\nsetServoValueString(String(Math.round(servoPositionNumber)));","dependencyNames":["servoPositionNumber"],"referenceComponentNames":[]}],"animationListeners":[],"bluetoothListeners":[{"name":"sendServoPositionToMicroBitRX","controlledPropertyNames":[],"controlFunctionString":"writeToCharacteristic(servoValueString);\r\n\r\nconsole.log(`Sending ${servoValueString} to microbit`);","dependencyNames":["servoValueString"],"referenceComponentNames":[],"writeToCharacteristic":true,"serviceId":"6e400001-b5a3-f393-e0a9-e50e24dcca9e","characteristicId":"6e400003-b5a3-f393-e0a9-e50e24dcca9e"}]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}}]}

{"programs":[{"number":9,"title":"Ratio Game Logic (required)","keywords":"microbit, button, uart","description":"Creates a simple game to guess the ratio between the jumping heights of the dog and fox. Reads and logs the duration of a micro:bit button A and B press. Duration is stored to guess the goal ratio between the left and right animal jumping heights after rotating the paper to \"begin\". Duration is received by button service, while a UART RX sends the result as a happy or sad face to the micro:bit LED matrix.","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":223.86789338066544,"y":167.56653478945907},"modelContainer":{"namedBooleanProperties":[{"name":"buttonAPressed","defaultValue":false,"propertyType":"BooleanProperty"},{"name":"buttonBPressed","defaultValue":false,"propertyType":"BooleanProperty"},{"name":"readyToLaunch","defaultValue":false,"propertyType":"BooleanProperty"},{"name":"readyForNext","defaultValue":false,"propertyType":"BooleanProperty"}],"namedVector2Properties":[{"name":"leftObjectPosition","propertyType":"Vector2Property","defaultX":"0.25","defaultY":"1"},{"name":"rightObjectPosition","propertyType":"Vector2Property","defaultX":"0.75","defaultY":"1"}],"namedNumberProperties":[{"name":"buttonADuration","propertyType":"NumberProperty","min":0,"max":"10000","defaultValue":"0"},{"name":"buttonBDuration","propertyType":"NumberProperty","min":0,"max":"10000","defaultValue":"0"},{"name":"buttonAPressTime","propertyType":"NumberProperty","min":0,"max":"9999999999999","defaultValue":"0"},{"name":"buttonBPressTime","propertyType":"NumberProperty","min":0,"max":"999999999999","defaultValue":"0"},{"name":"toleranceValue","propertyType":"NumberProperty","min":0,"max":"1","defaultValue":"0.1"}],"namedEnumerationProperties":[],"namedDerivedProperties":[{"name":"logger","propertyType":"DerivedProperty","dependencyNames":["buttonADuration","buttonBDuration"],"derivation":"console.log(`button A: ${buttonADuration}`);\r\nconsole.log(`button B: ${buttonBDuration}`);"},{"name":"buttonPressedLogger","propertyType":"DerivedProperty","dependencyNames":["buttonAPressed","buttonBPressed"],"derivation":"console.log(`button A pressed?: ${buttonAPressed}`);\r\nconsole.log(`button B pressed?: ${buttonBPressed}`);"},{"name":"goalRatio","propertyType":"DerivedProperty","dependencyNames":["numeratorValue","denominatorValue"],"derivation":"let goal = 0.5;\r\n\r\nif (numeratorValue && denominatorValue) {\r\n    goal = numeratorValue / denominatorValue;\r\n} else {\r\n    goal = 0.5;\r\n}\r\n\r\nconsole.log(`Goal Ratio set to ${goal}`);\r\n\r\nreturn goal;"},{"name":"isInGoalRatioDerived","propertyType":"DerivedProperty","dependencyNames":["buttonADuration","buttonBDuration","readyToLaunch","goalRatio","toleranceValue"],"derivation":"const ratio = buttonADuration / buttonBDuration;\r\nconst isWithinTolerance = Math.abs(ratio - goalRatio) <= toleranceValue;\r\nconsole.log(`Are we within tolerance? ${isWithinTolerance}`);\r\nreturn isWithinTolerance;"},{"name":"readyToLaunchLogger","propertyType":"DerivedProperty","dependencyNames":["readyToLaunch"],"derivation":"if (readyToLaunch) {\r\n    console.log(`Ready to Launch!`);\r\n} else {\r\n    console.log(`Waiting to begin...`);\r\n}"}],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[{"name":"setReadyToLaunch","controlledComponentName":"readyToLaunch","controlType":"MARKER","controlTypeFamily":"","whiskerConfiguration":{"topLength":0.2,"rightLength":0.2,"bottomLength":0.2,"leftLength":0.2,"otherPaperNumber":null},"markerColor":""}],"numberPropertyControllers":[],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"descriptionViews":[],"textViews":[],"shapeViews":[{"name":"buttonAIndicator","modelComponentNames":["buttonAPressed"],"referenceComponentNames":[],"controlFunctionString":"if (buttonAPressed) {\r\n    setVisible(true);\r\n} else {\r\n    setVisible(false);    \r\n}","lazyLink":false,"defaultViewOptions":{"centerX":"0.1","centerY":"0.1","scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"},"defaultShapeOptions":{"shapeType":"circle","fill":"red","stroke":"red","lineWidth":1,"rectWidth":0.5,"rectHeight":0.5,"circleRadius":0.05,"ellipseRadiusX":0.3,"ellipseRadiusY":0.15,"lineStartX":0,"lineStartY":0,"lineEndX":0.3,"lineEndY":0.3,"triangleBaseWidth":0.1,"triangleHeight":0.3,"polygonPoints":[[0,0],[0.1,0],[0.1,0.1],[0,0.1]]}},{"name":"buttonBIndicator","modelComponentNames":["buttonBPressed"],"referenceComponentNames":[],"controlFunctionString":"if (buttonBPressed) {\r\n    setVisible(true);\r\n} else {\r\n    setVisible(false);    \r\n}","lazyLink":false,"defaultViewOptions":{"centerX":"0.9","centerY":"0.1","scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"},"defaultShapeOptions":{"shapeType":"circle","fill":"green","stroke":"green","lineWidth":1,"rectWidth":0.5,"rectHeight":0.5,"circleRadius":0.05,"ellipseRadiusX":0.3,"ellipseRadiusY":0.15,"lineStartX":0,"lineStartY":0,"lineEndX":0.3,"lineEndY":0.3,"triangleBaseWidth":0.1,"triangleHeight":0.3,"polygonPoints":[[0,0],[0.1,0],[0.1,0.1],[0,0.1]]}}],"backgroundViews":[],"imageViews":[{"name":"leftObjectImage","modelComponentNames":["leftObjectPosition"],"referenceComponentNames":[],"controlFunctionString":"setCenterX( leftObjectPosition.x );\r\nsetCenterY( leftObjectPosition.y );\r\nsetScale( 0.5 );","lazyLink":false,"defaultViewOptions":{"centerX":0.5,"centerY":0.5,"scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"},"imageFileName":"brown-dog-leaping.png"},{"name":"rightObjectImage","modelComponentNames":["rightObjectPosition"],"referenceComponentNames":[],"controlFunctionString":"setCenterX( rightObjectPosition.x );\r\nsetCenterY( rightObjectPosition.y );\r\nsetScale( 0.5 );","lazyLink":false,"defaultViewOptions":{"centerX":0.5,"centerY":0.5,"scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"},"imageFileName":"brown-fox-leaping.png"},{"name":"backgroundImage","modelComponentNames":[],"referenceComponentNames":[],"controlFunctionString":"moveToBack();\r\nsetScale(0.75);\r\nsetCenterX(0.5);\r\nsetCenterY(0.5);","lazyLink":false,"defaultViewOptions":{"centerX":0.5,"centerY":0.5,"scale":1,"rotation":0,"opacity":1,"visible":true,"viewUnits":"model"},"imageFileName":"meadow-landscape.png"}]},"listenerContainer":{"linkListeners":[{"name":"setButtonAPressTime","controlledPropertyNames":["buttonAPressTime"],"controlFunctionString":"if ( buttonAPressed ) {\r\n    setButtonAPressTime(Date.now());\r\n} else {\r\n    setButtonAPressTime( 0 );    \r\n}","dependencyNames":["buttonAPressed"],"referenceComponentNames":[]},{"name":"setButtonBPressTime","controlledPropertyNames":["buttonBPressTime"],"controlFunctionString":"if ( buttonBPressed ) {\r\n    setButtonBPressTime(Date.now());\r\n} else {\r\n    setButtonBPressTime( 0 );    \r\n}","dependencyNames":["buttonBPressed"],"referenceComponentNames":[]}],"animationListeners":[{"name":"setButtonADuration","controlledPropertyNames":["buttonAPressed","buttonADuration","buttonAPressTime"],"controlFunctionString":"if (buttonAPressed) {\r\n    setButtonADuration(Date.now() - buttonAPressTime)\r\n}"},{"name":"setButtonBDuration","controlledPropertyNames":["buttonBPressed","buttonBDuration","buttonBPressTime"],"controlFunctionString":"if (buttonBPressed) {\r\n    setButtonBDuration(Date.now() - buttonBPressTime)\r\n}"},{"name":"animateObjectHeights","controlledPropertyNames":["readyToLaunch","readyForNext","leftObjectPosition","rightObjectPosition","buttonADuration","buttonBDuration"],"controlFunctionString":"if (readyToLaunch) {\r\n    // Calculate the target Y positions, normalizing to the screen's height.\r\n    // Assuming a maximum reasonable button press duration (e.g., 5 seconds),\r\n    // and inverting the height since 0 is the top and 1 is the bottom.\r\n    const maxDuration = 10000;  // Adjust maxDuration based on expected max button press time\r\n    const targetYLeft = 1 - Math.min(buttonADuration / maxDuration, 1);\r\n    const targetYRight = 1 - Math.min(buttonBDuration / maxDuration, 1);\r\n\r\n    // Gradually update positions using dt to create a smooth animation effect\r\n    const newYLeft = leftObjectPosition.y + (targetYLeft - leftObjectPosition.y) * dt;\r\n    const newYRight = rightObjectPosition.y + (targetYRight - rightObjectPosition.y) * dt;\r\n\r\n    setLeftObjectPosition(new phet.dot.Vector2(leftObjectPosition.x, newYLeft));\r\n    setRightObjectPosition(new phet.dot.Vector2(rightObjectPosition.x, newYRight));\r\n\r\n    // Check if both objects have nearly reached their target positions to stop the animation\r\n    if (Math.abs(newYLeft - targetYLeft) < 0.02 && Math.abs(newYRight - targetYRight) < 0.02) {\r\n        setReadyToLaunch(false); // Stop the animation when both targets are reached\r\n        setTimeout(() => {\r\n            console.log(\"2 seconds have passed.\");\r\n        }, 2000);  // 2000 milliseconds = 2 seconds\r\n        setLeftObjectPosition(new phet.dot.Vector2(0.25, 1));\r\n        setRightObjectPosition(new phet.dot.Vector2(0.75, 1));\r\n    }\r\n\r\n}"}],"bluetoothListeners":[{"name":"setButtonAPressed","controlledPropertyNames":["buttonAPressed"],"controlFunctionString":"if (deviceValue.getUint8(0) > 0) {\r\n    setButtonAPressed(true);\r\n} else {\r\n    setButtonAPressed(false);\r\n}","dependencyNames":[],"referenceComponentNames":[],"writeToCharacteristic":false,"serviceId":"e95d9882-251d-470a-a062-fa1922dfa9a8","characteristicId":"e95dda90-251d-470a-a062-fa1922dfa9a8"},{"name":"setButtonBPressed","controlledPropertyNames":["buttonBPressed"],"controlFunctionString":"if (deviceValue.getUint8(0) > 0) {\r\n    setButtonBPressed(true);\r\n} else {\r\n    setButtonBPressed(false);\r\n}","dependencyNames":[],"referenceComponentNames":[],"writeToCharacteristic":false,"serviceId":"e95d9882-251d-470a-a062-fa1922dfa9a8","characteristicId":"e95dda91-251d-470a-a062-fa1922dfa9a8"},{"name":"bleWriteSuccessOrFail","controlledPropertyNames":[],"controlFunctionString":"// Construct the command string based on LED state\r\nlet str = \"\";\r\n\r\nif (readyToLaunch) {\r\n    if (isInGoalRatioDerived) {\r\n        str = \"success\"; // Command for LED pin 0 Up\r\n    } else {\r\n        str = \"failure\"; // Command for LED pin 0 Down\r\n    }\r\n}\r\n\r\n// Send the command over BLE\r\nwriteStringToCharacteristic(str);\r\nconsole.log(`Command sent: ${str}`);\r\n","dependencyNames":["readyToLaunch","isInGoalRatioDerived"],"referenceComponentNames":[],"writeToCharacteristic":true,"serviceId":"6e400001-b5a3-f393-e0a9-e50e24dcca9e","characteristicId":"6e400003-b5a3-f393-e0a9-e50e24dcca9e"}]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}},{"number":7,"title":"Set Numerator with Markers","keywords":"marker","description":"Sets the numerator value by counting the number of markers on the program. If not present, the default ratio is 0.5.","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":407.5,"y":266.61477406305124},"modelContainer":{"namedBooleanProperties":[],"namedVector2Properties":[],"namedNumberProperties":[{"name":"numeratorValue","propertyType":"NumberProperty","min":0,"max":10,"defaultValue":"0"}],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[],"numberPropertyControllers":[{"name":"setNumeratorValueMarker","controlledComponentName":"numeratorValue","controlType":"MARKER_COUNT","controlTypeFamily":"MARKERS","markerColor":"all","relationshipControlType":null}],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"descriptionViews":[],"textViews":[],"shapeViews":[],"backgroundViews":[],"imageViews":[]},"listenerContainer":{"linkListeners":[],"animationListeners":[],"bluetoothListeners":[]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}},{"number":8,"title":"Set Denominator with Markers","keywords":"markers","description":"Sets the denominator value by counting the number of markers on the program. If not present, the default ratio is 0.5.","expanded":true,"topWhiskerLength":0.2,"rightWhiskerLength":0.2,"bottomWhiskerLength":0.2,"leftWhiskerLength":0.2,"positionProperty":{"x":407.5,"y":486.96403923693947},"modelContainer":{"namedBooleanProperties":[],"namedVector2Properties":[],"namedNumberProperties":[{"name":"denominatorValue","propertyType":"NumberProperty","min":0,"max":10,"defaultValue":"0"}],"namedEnumerationProperties":[],"namedDerivedProperties":[],"namedBounds2Properties":[],"namedObservableArrays":[],"namedArrayItems":[],"namedArrayItemReferences":[],"namedStringProperties":[]},"controllerContainer":{"vector2PropertyControllers":[],"boundsPropertyControllers":[],"booleanPropertyControllers":[],"numberPropertyControllers":[{"name":"setDenominatorValueMarker","controlledComponentName":"denominatorValue","controlType":"MARKER_COUNT","controlTypeFamily":"MARKERS","markerColor":"all","relationshipControlType":null}],"enumerationPropertyControllers":[]},"viewContainer":{"soundViews":[],"descriptionViews":[],"textViews":[],"shapeViews":[],"backgroundViews":[],"imageViews":[]},"listenerContainer":{"linkListeners":[],"animationListeners":[],"bluetoothListeners":[]},"customCodeContainer":{"onProgramAddedCode":"","onProgramRemovedCode":"","onProgramChangedPositionCode":"","onProgramMarkersAddedCode":"","onProgramMarkersRemovedCode":"","onProgramMarkersChangedPositionCode":"","onProgramAdjacentCode":"","onProgramSeparatedCode":""}}]}

Credits

Brett Fiedler

1 project • 0 followers

Micro:bit and Paper Playground: Tangible-Virtual Interfaces

Things used in this project

Hardware components

Software apps and online services

Story

Supplies

For micro:bit:

For examples:

For Paper Playground:

Step 1: Install Paper Playground and Upload Projects

Step 2: Add Micro:bitv2 MakeCode Code

UPDATE - No Pairing Required Bluetooth mode for micro:bit

Step 4: Connect Micro:bit to Paper Playground

Example 1: Servo Control by Paper Program Example

Example 2: LED (Pin Control) Via BLE UART Example

Example 3: Time Ratio Game Using Buttons Example

Schematics

microbit-playper-bridge-v3.hex

Small Paper Programs, 1-20

Quarter Sheet Paper Programs, 1-20

Half Sheet Paper Programs, 1-20

Letter-sized Paper Programs, 1-20

Code

microbit-ble-demos.json

microbit-servo-demo.json

microbit-ratio-game.json

Credits

Brett Fiedler

Comments

Embed the widget on your own site

Micro:bit and Paper Playground: Tangible-Virtual Interfaces

Micro:bit and Paper Playground: Tangible-Virtual Interfaces

Things used in this project

Hardware components

Software apps and online services

Story

Supplies

For micro:bit:

For examples:

For Paper Playground:

Step 1: Install Paper Playground and Upload Projects

Step 2: Add Micro:bitv2 MakeCode Code

UPDATE - No Pairing Required Bluetooth mode for micro:bit

Step 4: Connect Micro:bit to Paper Playground

Example 1: Servo Control by Paper Program Example

Example 2: LED (Pin Control) Via BLE UART Example

Example 3: Time Ratio Game Using Buttons Example

Schematics

microbit-playper-bridge-v3.hex

Small Paper Programs, 1-20

Quarter Sheet Paper Programs, 1-20

Half Sheet Paper Programs, 1-20

Letter-sized Paper Programs, 1-20

Code

microbit-ble-demos.json

microbit-servo-demo.json

microbit-ratio-game.json

Credits

Brett Fiedler

Comments

Related channels and tags