Connect Your Android Phone to Arduino Using App Inventor #tt23

Tinkerer: Lory Livezey

In this tutoria, we're going to continue to set the foundation for our Android Gyroscope Robot Remote. That was a mouthful, but basically, when we tilt the phone, the robot will go. We're taking this in steps, so we're not going to add the gyroscope just yet. In this step, we're just going to pass values to the Arduino when we press a button on the Android device.


Objectives

You'll learn and practice how to:

  • Use a Horizontal Arrangment Container in App Inventor
  • Create test buttons and labels in App Inventor to simulate values that will later come from the gyroscope
  • Duplicate and program blocks in App Inventor
  • Use the Arduino SoftwareSerial library to simulate a serial connection on regular GPIO pins
  • Accept and read serial data one character at a time from the Android device over bluetooth
  • Upload sketch to Arduino

Previous Step

  Creating a Bluetooth Android App using App Inventor #tt22


Starter Breakpoint

The Android Project (continuing from #tt20):

The App Inventor Project:


Open App Inventor

I usually remote into my Raspberry Pi to program, because I like to show just how many things you can do using the Pi as your mini computer. But you can just as easily use a PC, Mac or Linux.

You'll start by browsing to the App Inventor web site, and log in using your Google account. We're going to build on the project we started in Tinker #22, Creating a Bluetooth Android App using App Inventor.

Project List


Open Previous Project

Open the project you created in TurboTinker #22, or download the starter file. Drag a HorizontalArrangement Container over, that will eventually hold the values from the gyroscope.

HorizontalArrangement Container

Drag two labels inside the container and center them.

Create 2 labels

Hint: There is an alignment for the HorizontalAlignment block and the labels themselves. Play around with these and see what looks good.

Center the HorizontalAlignment

Center the label

Increase the font to 32px:

Change Font Size

Set the width to fill parent:

Fill Parent

Hint: You can set the "width" on both the HorizontalArrangment container and the Label. You'll want to set it for both.

Set the Text to "X=0" and "Y=0" and call them "XLabel" and "YLabel".

Rename Label

The values will eventually come from the gyroscope, but I think it's usually a good idea to add features in small steps that you can test. That way, if there's a problem, it's easier to track down.

For now, we're going to add a button next to each of the labels. Set the text to "TestX" and "TestY" and you can name them the same. They are just temporary.

Add Test Buttons


Blocks View

Go into Blocks view, click on TestX and drag the "When Click" event over. Remember, and event is something that's going to cause your block to run when something else happens, in the case a "click".

We're going to send text to the Bluetooth Client when we click the button. For the text, we'll actually send a number, which is under Math. This is going to simulate what our gyroscope will eventually be sending. Drag over another block and send a string this time..x. We'll also set the Label that will eventually hold our gyroscope reading to "X=111".

Test X Block

Duplicate the block and set everything to Y.

Test Y Block

Next open the Arduino Sketch.


Arduino Sketch

The first thing to do, is switch from using the physical transmit and receive pins, to GPIO pins 2 and 3. The reason for this, is that if we use the Tx and Rx pins, then we can't upload the sketch without unplugging them. Not only is that a pain, but if you're anything like me, you may forget about that later and wonder why you're getting an error.

Change Serial Pins

There is a library called SoftwareSerial, and it's used to make regular input/output pins act like serial pins. You'll include the library and that sets it up for use. Then set the Receive Pin to 3 and the Transmit pin to 2. Then move them over from pins 0 and 1.

Add SoftwareSerial to the very top of the file:

#include <SoftwareSerial.h>
SoftwareSerial mySerial(3, 2); //RX, TX
int val;
int ledpin=13;

The variable val was an integer, but you're going to need that to hold a string. Next, create two floats. A float is a type of decimal number. These will eventually store the values coming across from the phone's gyroscope as you tilt it.

Replace these 2 lines:

int val;
int ledpin=13;

With these:

String value = "";
float x = 0;
float y = 0;

Add another line for the new serial connection using SoftwareSerial, also 9600 baud. The Setup Loop should look like this:

void setup(){
  Serial.begin(9600);
  mySerial.begin(9600);
}

We will next re-write the loop. This new loop will continually check to see if anything has come across the serial pins 2 and 3 that we've hooked the Bluetooth module to.

Remember that when we push the button, the phone will send the string "111x" or "222y" The x or y at the end of the string will tell the Arduino whether the value it just read is from the X or Y axis. So as we loop, we're going to read those values one at a time. First 1, then 1, then 1, then x. Each loop, it will "concatenate" or combine those values together, so once it gets to the x, we'll have the value 111 in our variable.

So once we have 111x, we'll print the value out, set our variables back to 0, then continue looping. Once we get to our robot, we're going to use those values to determine the direction and speed of the wheels.

The entire loop:

void loop(){
  
  while(mySerial.available()){
    
    char character = mySerial.read();         // read each character as it comes across the serial port
    //Serial.println(character);              // this is for debugging, if necessary
    
    if (character=='x' or character=='y')     // if we get to an 'x' or a 'y', that means the value has been read
    {
      
      Serial.print(character);                // this will print the 'x' or 'y' to the console
      Serial.print("=");
      Serial.println(value);
      
      if (character=='x')
        x=value.toFloat();
      else
        y=value.toFloat();

      x=0;
      y=0;
      value="";
         
    }
    else {
      value.concat(character); 
    }
      
  }
}

Back to App Inventor

Now, we're ready to test our project. From App Inventor, Click Connect and AI Companion.

Connect to AI Companion

Displays QR Code

Go to the Android device, open the AI Companion, and scan or type the QR code. Connect to the Bluetooth module.

Type in QR Code

I'll open the Serial monitor on the Arduino, and as I click on the buttons, you can see the values coming across.

Final Project

In TurboTinker 24, we'll build on this and add the Android's Gyroscope and pass those values to the Arduino.


Finish Breakpoint

The Android Project:

The App Inventor Project:


Next Up

Turn a DC Motor From an Android Phone Using App Inventor #tt25

Be sure to subscribe to our channel!