c
Cpsc 110-08 -- Spring 2011 -- Timer
CPSC 110-08: Computing on Mobile Phones
One Minute Timer
A One Minute Timer
This tutorial teaches you how to use App Inventor's Clock
component to create a simple alarm clock.
Snapshot
The User Interface
The user interface for this app uses the following visible components. Follow the
layout provided in the snapshot.
- A HorizontalArrangement component -- in the Screen Arrangement drawer.
- Four Buttons -- in the Basic drawer.
- A TextBox -- in the Basic drawer.
Drag these items onto the Viewer from the Palette. Place the
+ and - Buttons and the TextBox inside the HorizontalArrangement component
as shown in the snapshot above. Then place the Start and Stop buttons below the
HorizontalArrangement.
It's a good idea to rename some of these component so they will be
easier to keep straight in the Blocks Editor. Use the following names
(no internal spaces):
- Buttons: ButtonPlus, ButtonMinus, ButtonStart, ButtonStop.
Adjust the Properties of the visible components as follows:
- Place the appropriate Text on each button and set the FontSize
to 30.0.
- Set the Text property of the TextBox to 10.
- Set the Width of all components to Fill parent. Set the
Height to Automatic.
Invisible Components
This app uses two invisible components, a Clock (in the Basic drawer),
and a Sound in the Media drawer. Drag each of these onto the Viewer.
Uncheck the TimerEnabled for the Clock.
For the Sound component, it will be necessary to do upload a sound effect:
- Click on the Annoying Alarm Clock wav file
and download it to your desktop or to your downloads folder.
- Click on the Source text box in the Properties panel and then on the Add button.
- Use the Upload File dialog to navigate to wav file you just downloaded and click Ok.
Then click Ok in the Source dialog to associate the file with your Sound component.
When you're done with the user interface, it should look like the picture shown here (click to enlarge).
The Blocks Editor
We will use the Blocks Editor to program the behavior of our
app. Click on the Open the Blocks Editor button (top right of
the appinventor page) and click approval on the download permission.
Plug your phone into your laptop using the USB Cable and after
a second or two, click on the the Connect to Device button in the
Blocks Editor. You should see your phone listed there. Select it.
After a few moments, you should see the app starting up on your phone.
It should look like this (click to enlarge):
Programming ButtonPlus
When the ButtonPlus button is clicked we want the number in the TextBox to
increase by one. Here's how to write this piece of code:
- Click on the My Blocks tab (top left) and then click on the ButtonPlus drawer.
This will open up a list of blocks that apply to Button components.
- Select the When ButtonPlus.Click block. It looks like this:
This is an example of an Event Handler block. It will be execute automatically whenever
the user clicks on ButtonPlus. We need to specify the exact behavior we want the app
to take when this button is clicked.
- When ButtonOne is clicked we want to add 1 to the number in TextBox1 and display
the new value. To do this we need to contstruct the following expression:
Follow these steps:
- Click on the My Blocks tab and then click on the TextBox1 drawer.
Select the Set TextBox1.Text block and plug it into the When ButtonPlus.Click.do slot.
It should snap into place.
- Click on the Built-in tab (top left), open the Math drawer, select the +
block and plug it into the slot on the right-hand-side of the Set TextBox1.Text block. It
should snap into place.
- Now fill in the empty slots of the + block. You will find a Number block in the
Math drawer. Set it to 1 and plug it into the right-hand-slot of the + button.
- You will find the TextBox1.Text block in the TextBox1 drawer (under My Blocks). Plug
it into the slot on the left-hand-side of the + button.
When you are finished, your When ButtonPlus.Clicked block should look like this:
Now try clicking this button on your phone. Every time you click, the number in the
text box should increase by 1.
Hands-on Exercises
Download the app's sourcecode and
import it into App Inventor as one of your projects.
Here's a couple of revisions you could try.
- Prettify it. Add some color and think about other ways
to improve the app's appearance.
- Improve the sound effects. Add a tick/tock sound to the
countdown.
- Improve the logic. Make the + button reset the timer to 0
when it exceeds 60 and make the - button reset it to 60 when it goes
below 0.
- Add graphics and animation. For example, add a colored
ball and change the color each second.
Brainstorm: Propose a change and we'll try to do it together.
