Sensors: How to use the Orientation Sensor

Smart phones and tablets contain several kinds of “sensors” to sense information about their environment. For example, an accelerometer provides information about movement of the phone (or tablet) – letting us know the speed and direction of travel in x, y and z coordinates (three dimensions).

The orientation sensor tells us if the phone is tilted to the left or right, or up or down (or flipped over). App Inventor provides a simple to use interface to the orientation sensor. We can use this to control a sprite or ball on the screen – by tilting our phone, we can make graphic items move around on the screen!

Sample source code that you can download is at the bottom of this post!

After going through this tutorial, you now know enough to create your own interactive smart phone game!

Review

Before we get started, please review these earlier tutorials:

Continue reading

Some history behind App Inventor

The history of App Inventor extends, in part, back to the 1980s, at least, which may sound odd.

App Inventor is a project, today, of the Massachusetts Institute of Technology but is based on the App Inventor project that was originally started by Google. Google’s project, turn, was based on an MIT Master’s thesis by Ricarose Roque.

The graphic building blocks approach to assembling program functionality was itself inspired by Scratch. Scratch is a simple programming system used for teaching programming concepts (especially to those age 8 to 16). Like App Inventor, Scratch has taken on a life of its own and is also hosted at MIT and runs in your Internet browser (plus a download version that runs on your own computer, is available). If you are interested, you can learn and use Scratch at scratch.mit.edu. You can learn about the history and philosophy of Scratch in this Communications of the ACM article. (ACM is a professional society for computer scientists and publishes many journals in the field of computer science.)

Continue reading

Controlling the sprite animation with your finger on the screen

In the prior tutorial, we created a sprite-based bouncing animation – which is surprisingly easy to do in App Inventor.

But how might we make the animation interactive? Such as touching the bouncing object with a finger and flinging it (throwing it) off in another direction? In other words, as the object travels around the screen, we would like to touch it with our finger and then “drag” the object off in a new direction.

To implement this, just handle the Image Sprite’s “Flung” event, like this:

ImageSprite-Flung

 

App Inventor (and the Android OS) handle the details of sensing our finger on the screen and translating that into some values we can use in our app.

When the “Flung” event occurs, App Inventor passes along several values – including the (x,y) coordinate values at the time we touch the object, the speed and heading in which we’ve dragged the object with our finger, and the x and y velocity.  When this event is detected, our program sets the sprite’s current heading and speed to the values determined by our finger drag across the screen.

Click on the “speed” and “heading” parameters in the Flung event to find the “get heading” and “get speed” values.

I multiplied the speed parameter by 3 as the values returned by Flung were small and resulted in slow movement of the sprite. You can set this value to a smaller or larger value based on your preference.

Here’s the app screen, when in use:

Screenshot_2014-10-20-15-53-14

 

As the sprite moves across the screen, touch it with your finger and “fling” it off in a new direction. (You may have to experiment for a bit in terms of how you do your “flings”).

Stopping the Sprite When Touched

If the sprite is moving quickly, it moves out from under your finger before you can take action. To fix this, we sense the finger touching the sprite and stop the sprite while it is being touched.

We implement the “TouchDown” event for ImageSprite1. The moment our finger touches the sprite, the sprite is stopped by setting its Speed property to zero. Now we can casually “fling” the sprite in a new direction.  When we stop touching the sprite, the “TouchUp” event occurs – here we restore the original speed so that the sprite resumes moving. Of course, the “Flung” event occurs next and sets a new speed for the sprite based on our finger movement.

Update: Delete – do not use – the .Touchup block, shown below. It is not needed. Instead, when you lift your finger up as part of a “flung” operation, the flung event handler will set the sprite’s speed proportional to your finger movement. Thus, it is not necessary to restore the saved speed value.

ImageSprite-Touch

What type of App Inventor tutorials do you prefer?

I have created an online poll – see side bar at right of this post – to learn about what type of tutorials you prefer? Please click on your choice —> at right! 

  • Do you like printed or text examples, like these blog posts, to read?
  • Do you like having or using online video tutorials?
  • Would your prefer both?

Help me know what works best for the most readers by answering the simple poll at right – you do not need to log in or go through extra hurdles. Just click on one of the selections.

Thank you!

Using ImageSprites for animated App Inventor graphics

I described the basics of creating a bouncing ball animation earlier and mentioned that “image sprites” are similar to the bouncing ball graphic, but provide a way to specify your own image for the ball. To introduce a bit about images in App Inventor, we took a quick look at using the phone’s camera.

This tutorial starts with the original bouncing ball program and then modifies it to use an Image Sprite instead of a ball. Be sure to read the bouncing ball and camera tutorials first!

Previous:

The ImageSprite component is almost identical to the ball component!

Continue reading

Using Lists in App Inventor

A frequent search topic on this blog is how to use lists. “Lists” are a way of storing a collection of data in App Inventor programs. Many other programming languages provide a number of methods for storing collections of data including arrays, records, even lists, and even something called “collections” (imagine that!)

App Inventor provides Lists, plus you can also use components like the TinyDB.

For a detailed description of using Lists, please refer to Chapter 8 – Introduction to Lists in my e-book “App Inventor 2: Tutorial”, available for $2.99 from Amazon. I hope to make this text available in additional e-reader formats during November.

Using Images and the Camera in App Inventor

In an earlier post, I mentioned that ImageSprites use images – and suggested I do a tutorial on images so here is a first look at using images in App Inventor 2.

For this tutorial, we create a very simple app that uses the camera to take a picture, or we can fetch a selected photo from the phone’s photo gallery. Either way, the image that is obtained is displayed on the screen.

First, create a simple user interface. To set this up, I used the VerticalArrangement layout and then added a button, an ImagePicker and an Image on to the Viewer:

Image1-UserInterface

The Image component is located in the User Interface section of the Palette, in the Designer.

The ImagePicker is located in the Media section of the Palette. Drag each to the Viewer window.

You also need to drag a Camera component to the Viewer; the Camera is also located in the Media section. Note that the Camera is an invisible component and will appear below your app’s user interface screen, as shown above.

After renaming the components, we should have a set of components like this:

Image1-Components

For the Image1 component, the Properties look like:

Image1-Properties1

Note that the text box field named Picture has the name of a .jpg image file entered into, in this example. Sorry for the ugly gibberish filename – I just grabbed a photo off of my own Flickr page, saved to my hard drive and then uploaded to App Inventor.

To upload a photo from your computer to the Image1 control, click on the Picture field – this displays a prompt:

Image1-Properties2

The prompt shows the full name of the image I have already uploaded, and this file is already highlighted. Or, click on Upload File … at bottom to select and upload your own .jpg image file.

This uploaded .jpg becomes the default image initially displayed in the program. If you want, you could leave this blank but having something to show on screen makes the program a bit more interesting and helps the user to see where photos will be displayed.

The Blocks

Taking a photo is absurdly easy. When the button for taking a photo (btnTakePhoto) is clicked on (or rather, pressed with your finger), the Click event is raised – and all this event handled need do is call the camera’s TakePicture method:

Image1-TakingPhoto

Once the camera completes taking the picture, the AfterPicture event occurs. This is where we fetch the image (hover your mouse over the pink “image” within the AfterPicture block and select “get image”). Assign the image that was just taken (the get image) to the Picture property of the Image1 control. This copies the photo that was just taken, and displays it on screen.

We could stop here, but let’s take a look at grabbing a picture from the photo gallery on the phone. To implement this, we use ImagePicker. The ImagePicker is a control that displays the photo gallery, let’s you select an image from the photo gallery, and then returns that selected image to the app.

The ImagePicker displayed in the Designer is effectively a button that contains its own event handler for the Click event. Pressing the ImagePicker button on the main screen automatically enters the gallery where you select your photo. When the selection is complete, the ImagePicker’s AfterPicking event is raised and we add a tiny bit of code to process the image, merely copying the “Selection” property of the ImagePicker control (renamed here as impgSelectPhoto) to the Image control on screen to display the selected photo.

Image1-ImagePickerAfter

Running the App

When activating the camera, take a photo and wait a moment – you should see a “checkmark” at the bottom of the screen after the photo is processed.  Tap the checkmark icon to signify you are done and you should be returned to the app and the photo you took should be displayed.

When selecting a photo from the gallery, wait for the gallery to appear, scroll through and select a photo. Tap the photo and wait for a moment – and control should return to the app and the selected photo will appear on the screen.

Note – if you have more than one photo gallery app registered on your phone (I have 3 such apps), Android will prompt you as to which of the gallery apps you wish to use.

There are additional features that are not shown here. For example, if your phone has a front facing and back facing camera, its possible to switch between the cameras.

SOURCE CODE

Source code is available in the MIT App Inventor Gallery –> here

MIT App Inventor Source Code

This is for advanced software developers only: MIT App Inventor Sources. That’s the actual source code that makes App Inventor work behind the scenes – from the browser based editor to the server side support to the AI Companion. It’s all there.

MIT has made the source code for App Inventor publicly available. At a minimum, you need to be proficient in Java, Javascript, and have familiarity with various web techniques, such as JSON. Exploring this source code is not for the neophyte.

With access to the source code it is possible to host App Inventor on your own server and it is possible to develop your own App Inventor components (this also requires making a custom version of AI Companion).

Again, this is for advanced software developers.

How to create a bouncing ball animation in App Inventor 2

App Inventor 2 provides easy to use features for creating games. These features have proven popular for introducing programming concepts to students in K-12, especially at the elementary and middle school level. While our focus is oriented towards practical applications rather than games, we can have a little fun too!

The purpose of the sample app in this blog post is to illustrate the basic programming concepts of a bouncing ball animation.

The “Game”

Well, its not much of a game! To keep the programming simple, all this does is enable a ball to bounce around on the screen, to change its heading or trajectory, and to make it travel faster or slower. When the ball hits the edge of the screen, it rebounds in an appropriate direction. Here’s the user interface as seen on the smart phone:

Screenshot_2014-10-13-11-40-46

Press the Start button to make the ball start moving; press Stop to end the movement.

To change the speed of movement press the Faster or Slower buttons. Pretty easy?

To change the trajectory, you may enter a heading value in degrees, in the field next to the Set heading button, and then press the Set heading button.

Continue reading

Using ListPicker for displaying and selecting from on screen lists

What is ListPicker?

ListPicker is a user interface component that makes it easy to display a list of items and have the user make a selection from the list. For example, let’s say we’d like to display six things on the screen and then have the user select an item from the list.

For simplicity, here is a sample ListPicker list showing six items labeled “A”, “B”, “C”, “D”, “E” and “F”.  Those items are arbitrary – your list could contain “Oranges”, “Bananas”, “Apples”, “Grapes” or whatever other text descriptions you would like to have. (The default color is white text on black but the color properties, as well as the text size, may be changed in the App Inventor Designer.)

Screenshot_2014-10-10-12-03-13

 

When this screen is displayed the user may touch an item in the list to select it.

Use ListPicker whenever you have a set of items from which the user is expected to make a selection. Example applications could include selecting a product from a list of inventory items, select a food item from a menu, select a name from a display of names and addresses and many more.

Learning how to use ListPicker is helpful for new App Inventor programmers as many online tutorials and example programs use ListPicker – but without explaining what it is or how to use it!  Becoming familiar with ListPicker will make those other tutorials easier to understand!

Example

When an item is selected an event is created, and your event handler can then identify which item was selected in this list.  To illustrate, let’s start with a simple app that displays a list of items when the “Click me to display a short list” is pressed:

Screenshot_2014-10-10-12-03-24

ListPicker does all the hard work for us – display the items on screen (as shown in the previous screen snap shot) and processing the selected element.

In the example above, “C” was selected.

How to Build the ListPicker Demonstration Application

Step 1 is to drag a ListPicker component from the Palette to the Viewer. Rename the control if you wish and change the text of the ListPicker control button to something useful 🙂 Here is the app after dragging the ListPicker component and changing the text (in the ListPicker properties) to “Click me to display a short list”:

LP-Designer

Step 2 is to place some items into the list. We do that by typing a comma separated list in the ElementsFromString property of ListPicker, as shown here:

LP-Properties

 

We have now added six items – A, B, C, D, E and F. We could enter longer text descriptions if we wished – for example “Oranges, Bananas,Apples” and so on:

LP-Properties2

Step 3 is to add an event handler for the list to process the list selection – this turns out to be really super hard – not! It is actually super easy! Click on the ListPicker component in the Blocks Editor and then drag the .AfterPicking event into your program:

LP-EventBlockListPicker handles all the details of the on screen selection. All that is needed is to fetch the item that was selected, store that in a variable, or, as in this example, display the selection in a label field on the app’s screen.

That’s it for the basic operation of the ListPicker. If you have many elements – too many to fit on one screen – the list automatically handles scrolling. Just use your finger to drag up or down the list. You can also change ListPicker properties such as the color of the list and more.

Of course there are many ListPicker features, but this is intended as a brief introduction.

But one feature we wish to mention is that you can add items to the list to display from within your program by putting your items in a list and assigning them as shown here:

LP-BlocksAddingThe ListPicker1.Elements property contains a programmatic list of items.  If you are not familiar with lists, please see Chapter 8 “Introduction to Lists” in my e-book “Guide to App Inventor 2:Tutorial – The fast and easy way to create Android apps”.