RC Car Controller App using Code2Play –
Step-by-Step Guide (Fully Detailed)
🚘 Objective:
To build a mobile application that controls an RC car using Bluetooth and directional buttons.
🟢 Step 1: Starting the Project
1. Open Google Chrome
Click on the Google Chrome icon on your desktop or taskbar.
In the search bar, type:
code2play
Press Enter on your keyboard.
2. Open the Code2Play Website
The first search result that appears will be the official Code2Play website.
Click on that first link to open the platform.
3. Log In to the Platform
If the platform is asking you to sign in, then:
o Click on “Sign in with Google” or use any other available account to log in.
If you’re already signed in, you will land on the main dashboard or project page.
🟢 Step 2: Starting a New Project
1. Navigate to the Project Tab
On the top menu bar, you will see an option called “Project”.
Click on “Project”.
2. Start a New Project
After clicking on “Project,” you will see an option that says “Start New Project.”
Click on “Start New Project.”
A dialog box will appear asking you to name your project.
Type in your project name (e.g., RC Car Project) and click OK or Start.
Now, you’ve successfully started a new blank project.
🟢 Step 3: Designing the User Interface (UI)
Now, we are going to pick UI components and design the layout.
1. Add Components from the User Interface Section
Look at the left sidebar of the Code2Play editor. You will see different sections like:
User Interface
Layout
Connectivity
Sensors
QTPi Mega Blocks
and more...
We’ll first use User Interface components.
i. Add a List Picker
On the left side, click on the arrow next to User Interface to expand it.
Scroll down a bit until you find List Picker.
Click and drag the List Picker component to your phone screen (middle design area).
ii. Add a Notifier
Still under the User Interface section:
Scroll and find Notifier.
Click and drag Notifier to the phone screen (you won’t see anything visually, but it will
appear under “Non-visible components” at the bottom).
iii. Add Four Buttons
Again under User Interface, find Button.
Click and drag one Button to the screen. Repeat this four times to have 4 buttons in
total.
2. Arrange the Buttons Using Table Arrangement
i. Go to Layout Section
In the left sidebar, click on the arrow next to Layout to expand it.
ii. Add Table Arrangement
Under Layout, find Table Arrangement.
Click and drag the Table Arrangement component to the screen.
iii. Place Buttons Inside the Table
Now click and drag each of the 4 buttons one by one inside the Table Arrangement.
Make sure each button goes into its own cell.
3. Renaming the Components
We will now rename the List Picker and each of the buttons to make their functions clear.
i. Rename the List Picker
Click on the List Picker component on your screen (in the Component tree or directly on
the screen).
In the right-side property panel, scroll down until you see the field named Text.
You’ll see the default text: ListPicker1.
Replace it with:
Connect
ii. Rename the Buttons
Repeat the same process for each button.
Click on Button1
o In the property panel, change text to:
Forward
Click on Button2
o Change text to:
Backward
Click on Button3
o Change text to:
Left
Click on Button4
o Change text to:
Right
🟢 Step 4: Adding Bluetooth and Motor Components
1. Add Bluetooth Client from Connectivity Tab
i. Go to the Connectivity Section
On the left sidebar, click on the arrow next to Connectivity to expand it.
ii. Add Bluetooth Client
Scroll down to find BluetoothClient.
Click and drag the BluetoothClient component to the screen.
It will appear at the bottom as a non-visible component.
2. Add Motors from QTPi Mega Blocks
i. Expand QTPi Mega Blocks
Scroll in the left sidebar and click on the arrow next to QTPi Mega Blocks.
ii. Search for Motor
Find the component named Motor.
Drag and drop two Motor components onto the screen.
These will also appear as non-visible components.
3. Configure Motors
Click on each motor one by one and update its settings.
For Motor1:
Select Motor1 from the non-visible components section.
In the property panel on the right:
o Select BluetoothClient1 in the Client dropdown.
o Set Port to 1.
For Motor2:
Click on Motor2.
In the property panel:
o Select BluetoothClient1
o Set Port to 2
Now your motors are properly linked to the Bluetooth client.
🟢 Step 5: Programming Blocks
At the top-right corner of the screen, you will see two tabs:
Designer
Blocks
Click on the Blocks tab to start programming.
A. List Picker - Before Picking
i. Click on List Picker / Connect → Events → BeforePicking
Drag the When Connect.BeforePicking block onto the canvas.
ii. Set List Elements
Go to the Connect / List Picker drawer.
Drag the block:
Set Connect.Elements to ...
Place this block inside the BeforePicking event.
iii. Get Bluetooth Addresses
Go to the BluetoothClient1 drawer.
Find and drag the block:
BluetoothClient1.AddressesAndNames
Place it in the blank part of the Set Elements to block.
B. List Picker - After Picking
i. Go to Connect → Events → AfterPicking
Drag When Connect.AfterPicking onto the canvas.
ii. Add Control Block: If-Then-Else
Go to Control section.
Drag If-Then-Else block into the AfterPicking event.
iii. Call Bluetooth Connect
From BluetoothClient1 drawer, drag:
Call BluetoothClient1.Connect address ...
Place it inside the then part of the If block.
iv. Set the Address to Connect.Selection
Go to Connect drawer.
Drag Connect.Selection block.
Place it into the address slot of the Connect function.
v. Add Notifier Alerts
From Notifier1 drawer, drag:
Notifier1.ShowAlert ...
Place one inside then, and one inside else part of the If block.
vi. Add Text: "Connected" and "Not Connected"
Go to Text section.
Drag blank text blocks and place them into both alert boxes.
Type "Connected" in one and "Not Connected" in the other.
🟢 Step 6: Button Touch Events for Motor Control
Repeat these steps for each of the 4 buttons.
Example: Forward Button
i. Click on Forward → Events → TouchDown
Drag When Forward.TouchDown block to canvas.
ii. Go to Motor1 → Drag Rotate Direction-Speed block
Set:
o Direction → True
o Speed → 200
iii. Do same for Motor2
iv. Click on Forward → TouchUp
Repeat above, but set speed → 0
Other Buttons Logic:
Backward:
Direction → False for both motors
Speed → 200 on TouchDown
Speed → 0 on TouchUp
Left:
Motor1 → Direction: False
Motor2 → Direction: True
Right:
Motor1 → Direction: True
Motor2 → Direction: False
🟢 Step 7: Handle Back Button Press
i. Go to Screen1 → Events → BackPressed
Drag When Screen1.BackPressed block to canvas.
ii. Go to Control → Drag Close Application
Place Close Application inside the BackPressed event.
🟢 Step 8: Build the APK
i. Look at the top bar → Click Build
A dropdown will appear.
ii. Click .apk
Your application will now begin building.
iii. Download the APK
Once the build completes, download the .apk file and install it on your phone.
🎯 Final Step
Go to the lab.
Show your app to your respective teacher.
Test whether all the functionalities like:
o Bluetooth connection
o Direction control
o Motor response
are working correctly.
Congratulations! 🎉 Your RC Car controller app is now fully functional.
