Android Programming with AppInventor2

A little break from the Arduino and ESP8266.  Wanted to broaden my skills with some Android programming to be able to come back and interface phone/tablet with the Arduino.

The Plan

I wanted to be able to use my Android phone or tablet to communicate with my Arduino through the ESP8266 or a Bluetooth module that I bought recently.  I saw some other examples on Youtube where they used MIT’s AppInventor platform to make some Android apps that could communicate through a Bluetooth module.  I decided to try my hand at making a few apps at http://appinventor.mit.edu/explore/ … and got very caught up in it.  The system is very easy to use and relatively powerful.  Very impressed with how easy they make it.  This post is focusing on the first app that I made.

The Android App

I followed the normal tutorials they have at the AppInventor web site.  They were painting type apps where you can draw pictures with your finger.  Was useful to get the feeling of the environment.  I pushed forward to make something I thought was a little more interesting.  I decided to incorporate the accelerometer with the drawing program.  It is kind of like a marble with wet paint on a pad of paper.  You can tilt the phone/tablet to move the marble around on the pad and leave a trail where the marble rolled.  Best to just show the video of the finished app….

The Research

To start, I needed to get familiar with AppInventor accelerometer interface.  I made a very simple app that would just print out what the x and y accelerometer returned whenever there was a change in the accelerometer readings.  Just 2 labels and 2 text boxes to fill in the accelerometer reading.  Here is a short video….

Here is what the screen layout looks like in AppInventor….

SimpleAccelAppInventorScreenLayoutSnap

The “code” looks like this…

SimpleAccelAppInventorCodeSnap

All this is saying is…

  • Whenever there is a change in the accelerometer…
    1. Change the text in text box1 to the value returned by the x-accelerometer.
    2. Change the text in text box2 to the value returned by the y-accelerometer.

That is it!!  That is the entire “code”!

From what I can tell, it looks like it is just reporting back in standard G’s.  If I have the phone vertical, the y-accelerometer shows around 9.8 ( m/sec^2 if I am not mistaken).  The same goes for the x-accelerometer.  I didn’t test the z since I am not trying to sense that for anything yet.

The Full Mable Pad App

Now that I figured out the accelerometer interface I moved on to making the marble pad app.  I already knew how to draw dots on the screen from the various on line tutorials.  Now just needed to mash the 2 together.

  1. First I create a button to reset the screen and a canvas that the dots will be painted on.  That is all that the screen setup needs to be…
    • MarblePadScreenLayoutSnap
  2. The code initialize an x and y variable to hold the current position of the marble.
    • See next section for picture.
  3. When the screen initializes, set the current x and y variables to the halfway point, ie: middle of the canvas.  Draw a purple dot at the current x,y coordinate (which we just set to middle of the canvas).
    • MarblePadInitCode
  4. Whenever the accelerometer value changes,
    1. increment the current y by the value returned by y accelerometer
    2. subtract the value returned by the x-accelerometer from the current x value.  We need to subtract the x accelerometer value because tilting it right causes a negative number
    3. Round the value of the accelerometer value since the x,y coordinates are pixels so need to be whole numbers.
    4. Check if the current x or y value is either below 10.  If either are less then 10, set it back to 10.  This is to keep a top and left border around where the marble can go.
    5. Check if the current x or y value is within 10 of the total width or total length of the canvas area.  If it is, set it back to 10 less than the max.  This is to keep a right and bottom border around where the marble can go.
    6. Once the new x,y coordinate is found, draw the new dot.

MarblePadAccelerometerCode

There is also some code for the reset screen which is the same as the screen init but adds a clear canvas at the start to wipe all the lines on the screen.

MarblePadScreenResetCode

That is pretty much it!  Not very hard at all.  If you have ever thought, “only if someone would write an app that could…”, I encourage you to give it a try.  You can be that someone that will write that app.

The Actual Code

If you want to play around with the Marble Pad app, you can download the .apk here: https://drive.google.com/file/d/0B1a0nPfCQQvKR05KSmtlTFV1d1k/view?usp=sharing

If you have your own AppInventor2 account and want to import the full code, you can get the .aia file here: https://drive.google.com/file/d/0B1a0nPfCQQvKdDBWQy12YVNjQ0U/view?usp=sharing

Have fun!

Advertisements

One thought on “Android Programming with AppInventor2

  1. Pingback: AppInventor2 Web Interface Trial | PetesTechProjects

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s