Scribd
Upload
117 views7 pages

BBC Micro:bit Bouncing Ball Tutorial

This tutorial teaches how to create an App Inventor app that controls the movement of a ball on screen using the buttons on a BBC micro:bit controller. The user must first pair their Android device to the micro:bit via Bluetooth. Then in App Inventor, the user adds components to receive input from the micro:bit buttons and move a ball component left and right accordingly. Pushing one button moves the ball left, the other moves it right. Reaching the edge of the canvas triggers text to display on the micro:bit's LED matrix.

Uploaded by

Thanh Pham Minh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
117 views7 pages

BBC Micro:bit Bouncing Ball Tutorial

This tutorial teaches how to create an App Inventor app that controls the movement of a ball on screen using the buttons on a BBC micro:bit controller. The user must first pair their Android device to the micro:bit via Bluetooth. Then in App Inventor, the user adds components to receive input from the micro:bit buttons and move a ball component left and right accordingly. Pushing one button moves the ball left, the other moves it right. Reaching the edge of the canvas triggers text to display on the micro:bit's LED matrix.

Uploaded by

Thanh Pham Minh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
  • Introduction and Hardware
  • App Inventor Tutorial

App Inventor + IoT: 60

Bouncing ball with BBC Micro:bit mins

buttons (with Basic Connection


tutorial completed)

Level: advanced

This tutorial will help you get started with App Inventor + IoT and
the BBC micro:bit controller. Press the two buttons on micro:bit
will make a ball on your app moving back and forth.
 source .aia

Hardware
You only need one BBC micro:bit to get started with this project.

Pairing with Micro:bit


First, you will need to pair your
Android phone or tablet to the
micro:bit controller, using these
directions. Your device must be
paired with the micro:bit in
order for the app to work.
App Inventor
This app can let you control a ball in the app to move back and forth
by pressing two Micro:bit buttons. Now log into MIT App Inventor
site and create a new project.

You should complete the App Inventor + IoT Basic Connection


tutorial to make a basic connection to the micro:bit device. If you
prefer, you can download the completed .aia file here.
● App Inventor’s micro:bit button component’s document

The remaining steps all build off of the starter code for Basic
Connection tutorial and its .aia source code.

Designer
First, we need to add the necessary extension.
● In the Palette window, click on Extension at the
bottom and then on "Import extension" and click
on "URL".
○ Paste micro:bit extension URL:
[Link]
cro:[Link]
● Add a Microbit_Buttons component to your
app by dragging it onto the Viewer, set its
BluetoothDevice property to "BluetoothLE1".
● Add a Microbit_Led extension, also set its
BluetoothDevice property to "BluetoothLE1".
Let’s add more components to our app to receive the micro:bit
buttons’ statuses.
● From the Drawing and animation drawer in the
Palette, drag in a Canvas and a Ball. Set
Canvas’s height to 320 pixels, width to fill parent
(or any parameters you like).
● Add a Ball component into the Canvas
component, set it X and Y property to both 160,
which means we want this ball to be initially in
the middle of the Canvas.
After some adjusting, your designer should look similar to
this. It doesn’t have to be exactly the same. Feel free to
modify the component’s background color, position and
text size.
Blocks
We want to control Ball component’s horizontal movement with the
two buttons on out micro:bit controller. Let’s begin:

STEP1: Request updates when connected


In the [Link] event, we show connection status
on label and request that the micro:bit update the two buttons’
statuses.

STEP2: Micro:bit’s A button pressedIn


Microbit_Button1.ButtonAStateReceived event:
● If A button is pressed (Button_State_Value is true), then we
set the ball_X variable to decrease by 10.
● Make Ball1 component move to position (ball_X, 100) to
make it move left by 10 pixels.

STEP3: Micro:bit’s B Button pressed


For the Micro:bit’s B Button, things are almost the same, just
in the opposite [Link]
Microbit_Button1.ButtonBStateReceived event:
● If user pressed Micro:bit’s A button is pressed
(Button_State_Value will be true), then we set ball_X
variable increase by10.
● Make Ball1 component move to position (ball_X, 100) to
make it move left by 10 pixels.

STEP4: Ball reached canvas’ edge


When Ball1 reached canvas’ edges ([Link] event), we
will show corresponding text (single character) on micro:bit’s Led
matrix.
In [Link] event, we use the if/else block if to check
which edge is reached, then send ‘E’ or ‘W’ character (meaning East
or West) to the micro:bit using the Microbit_Led1.WriteLEDText
method.
Tips
Your app should now be working! Pair the Bluetooth on your
Android device to test it out! Connect your micro:bit device using
the MIT AI2 Companion (if you haven't already) or install the .apk.
Press the two buttons on micro:bit, and the ball on the screen
should move left and right.

Brainstorming
1. Try to move a Micro:bit LED dot back and forth by Micro:bit
buttons (refer to our Micro:bit LED tutorial).

Common questions

Powered by AI

App Inventor uses the BBC Micro:bit's button components to send signals when the A or B button is pressed. These signals are interpreted by App Inventor's code blocks to adjust the position of a ball within the app's interface's Canvas component. Specifically, pressing the A button decreases the ball's X position by 10 units, moving it left, while pressing the B button increases the X position by 10 units, moving it right .

The App Inventor + IoT project demonstrates IoT principles by showing how physical devices can be controlled and monitored through software. With the App Inventor and BBC Micro:bit, users can press physical buttons to make a virtual ball move on a digital screen, symbolizing how IoT bridges the physical and digital worlds. This integration exemplifies IoT's core aspects: data exchange between devices and the ability to remotely control physical objects through networked connections .

To ensure proper functionality, necessary extensions such as the Microbit_Buttons and Microbit_Led components must be added in the App Inventor's Designer, each needing to be configured to connect appropriately using 'BluetoothLE1'. Furthermore, the Blocks editor requires configuration of event listeners for Bluetooth connectivity and button presses to update the app's state and control the ball movement .

Testing connectivity is crucial because it ensures the Android device and Micro:bit can communicate, a prerequisite for the app's functioning. Without successful Bluetooth pairing, the app could not send or receive commands from the Micro:bit, making it impossible to control or monitor the app's components effectively, leading to potential malfunctions or user frustration .

Importing specific extensions such as com.bbc.micro:bit.profile.aix is critical for enabling the App Inventor to communicate with the Micro:bit's hardware capabilities. These extensions provide necessary interface elements and functions, such as button status updates and LED controls, that integrate the App Inventor's environment with the Micro:bit, extending its functionality to include IoT capabilities .

Creating an app using App Inventor with Micro:bit components offers educational benefits by introducing learners to coding, user interface design, and hardware-software integration. It encourages problem-solving, logical thinking, and creativity in designing interactive IoT solutions, providing a practical approach to learning how to develop applications that interact with physical devices .

Pairing the BBC Micro:bit with a smartphone or tablet via Bluetooth is essential for the App Inventor project because it allows the mobile device to communicate with the Micro:bit. This connection is necessary for the app to send and receive commands, enabling the user to control objects in the app with the Micro:bit buttons .

The EdgeReached event enhances application functionality by providing interactive feedback when the ball reaches the boundary of the Canvas component. Triggering actions such as updating the Micro:bit LED display allows users to receive immediate, visual confirmation of the ball's position. This improves user experience by expanding interaction beyond the screen, making the app more engaging and informative .

The BBC Micro:bit's LED matrix can be used to provide visual feedback when the ball in the app hits the edge of the Canvas. When this event occurs, the app sends a signal to the Micro:bit's LED matrix to display 'E' for East or 'W' for West based on the direction the ball reaches the edge. This feature adds interactivity by physically representing the ball's position on the Micro:bit device itself. It enhances user engagement by bridging digital actions with a tangible visual output .

The integration illustrates user interaction concepts by allowing physical inputs (pressing Micro:bit buttons) to control digital outputs (moving a ball on a screen). This interaction signifies real-world user inputs converting into visible responses in a mobile application, creating a dynamic, interactive experience that underlines user-centered design principles in IoT-based mobile applications .

App Inventor + IoT: Bouncing ball with BBC (https://www.microbit.co.uk/device)Micro:bit buttons (with Basic Connectio
App Inventor This app can let you control a ball in the app to move back and forth by pressing two Micro:bit buttons. Now l
Let’s add more components to our app to receive the micro:bit buttons’ statuses. ● From the Drawing and animation dra
After some adjusting, your designer should look similar to this. It doesn’t have to be exactly the same. Feel free to modif
Blocks We want to control Ball component’s horizontal movement with the two buttons on out micro:bit controller. Let’s begi
(Button_State_Value will be true), then we set ball_X variable increase by10. ● Make Ball1 component move to position (bal
Tips Your app should now be working! Pair the Bluetooth on your Android device to test it out! Connect your micro:bit devi

You might also like