Basics project 107l Building Stopwatch app with MIT App Inventor 2

Basics: Project 107l

Project name: Building Stopwatch app with MIT App Inventor 2

Tags: MIT App Inventor 2, Stopwatch, Android app

Attachments: stopwatch.jpg, stopwatch.aia, stopwatch.apk

General

We will learn how to build stopwatch app with the MIT App Inventor 2 software.

We assume that you have read our previous projects about MIT App Inventor 2.

Step By Step instruction

1.Go to appinventor.mit.edu and click on Create Apps! orange button.

2.Click on Start new project and give your project a name, you can name it as Stopwatch. Click on OK button. Your project will be saved.

3.Go to Designer editor tab.

4. Select components to design your app. We will use TableArrangement for our buttons, it’s the formatting element which is used as a place for components that should be displayed in tabular form. From Layout pallete drag out the TableArrangement1 component and drop it in the Viewer.

5. To use a Button component in your app, you need to click and drag it from the User Interface palette into the Viewer. We will need five buttons for our stopwatch app. Please note that if you need to change the columns number select TableArrangement1 component, go to Properties pane of TableArrangement1 and change Columns field number to 5 and Rows field number to 1.

6.Select the Button1 component and click on Rename button. Give a new name – START. Change the Text field in the Properties pane to START too. Do the same with other buttons – give them names: STOP, RESET, SAVE, LOAD.

7.Select STOP component and tick off the Enabled box in Properties pane. Do the same with RESET, SAVE and LOAD components. It means that, by default, the only one active button on the beginning will be START.

8. Select Screen1 component and go to Properties pane. Change AlignHorizontal field and AlignVertical field to Center and Title field to Stopwatch app. And drag each button to the second row of the TableArrnagement1 component.

9. To use a Label component in your app, you need to click and drag it from the User Interface palette into the Viewer. Select Label1 component and click on Rename button. Give the new name – RESULT. Change Text field in Properties pane to 00:00:00.00 , FontSize field to 30.

10. Go to Sensors drawer in Pallete pane, drag out Clock component and drop it into the Viewer. You will see it in Non-visible components area.

11.If we want the Timer not to start till we click on START button select Clock1 element and go to Properties pane – make sure that TimerEnabled box is ticked off and TimerInterval (in milliseconds) set to 10.

12. Go to User Interface drawer in Pallete pane, drag out Image component and drop it into the Viewer. Select Image1 component and go to Properties pane. In Picture field click on None… and then click on Upload file button. Click on Choose file button, find the image file (you can download it from the link which is attached on the beginning of this project), open it and click on OK button.Change Height and Width fields to 300 pixels in Properties pane.

12.Go to Blocks editor tab. So far you have been arranging your app’s screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks editor. Click the Blocks button in the upper right of your screen to go to the Blocks Editor.

13. To update our time in Label1 more frequently we need to compare the current time with the time when we pressed START button. To remember what time it was when we pressed the START button we need to create the global variable to store this time. Go to Variables drawer in the Built-in and drag out the initialize global name to block to work area and change “name“to “StartTime“.

14. The starting number of stopwatch will be 0. Go to Math drawer and drag out the number block.

15.We are going to tell your app how to behave when the START button is clicked. Under Screen1, click on START. Drag the when START.Click do event handler block into the work area.

16.Select Clock1 drawer and drag out the set Clock1.TimerEnabled to block and add it to when START.Click do event handler block. Select Logic drawer and drag out the true block and add to set Clock1.TimerEnabled to block.

17. Go to Variables drawer in the Built-in and drag out the set to block to work area and select “global StartTime“.

18. Select Clock1 drawer and drag out the call Clock1.Now procedure block and add it to set global StartTime to block.

19. Select START drawer and drag out the set START.Enabled to block and add it to when START.Click do block. Do the same with STOP drawer.

20. Select Logic drawer and drag out false and true blocks and attach as shown below. We disable the START button and enable the STOP button.

21. Select STOP drawer and drag out the when STOP.Click do event handler block into the work area. We are going to disable timer, disable the STOP button, enable RESET button.

22. Select RESET drawer and drag out the when RESET.Click do event handler block into the work area.

23. Select RESULT drawer, drag out the set RESULT.Text to block and add to when RESET.Click do event handler block. We are going to reset timer to 00:00:00.00.Select Text drawer and drag out the text string, attach to set RESULT.Text to. Change it to 00:00:00.00 . Let’s disable the RESET button, enable START button.

24.Select Clock1 drawer and drag out the when Clock1.Timer do event handler block into the work area. Every 10 milliseconds we are going to update timer on the smartphone screen. We need a local variable duration which will be the difference in time between the time now and the time when we clicked on START button. Go to Variables drawer, drag out the initialize local name to in block and add to the when Clock1.Timer do block. Change “name” to “duration”.

25. Select Clock1 drawer, drag out the call Clock1.Duration start stop block and add it to the initialize local duration to in block. We need to get duration between global StartTime and call Clock1.Now.

26. We need to update our RESULT label text. Select RESULT drawer, drag out the set RESULT.Text to block and attach as shown below.

27.We will need to join 7 pieces of text here – hours : minutes : seconds . miliseconds. Select Text drawer, drag out the join block and add it as shown below. Click on blue icon and make 7 spots.

28.We need to add 0 to minutes and seconds. Let’s create the procedure for this. Go to Procedures drawer, drag out the to procedure result block into the work area. We need to pass input to it (hours or minutes or seconds). So click on blue icon and insert input to inputs.

29. Go to Control drawer, drag out the if then else block and add it to procedure result block. Go to Math drawer, drag out two blocks: number block, returns true when two numbers are equal block and add as shown below. If length of input is equal 1 then we add 0 before the number (minutes or seconds) if not then it will be just input.

30. Go to Procedures drawer, drag out our procedure block – call procedure x and add it to join block as shown below. Then go to Text drawer, drag out the three text blocks and add them to join block as shown below. They will separate – hours : minutes : seconds . milliseconds.

31. Go to Math, drag out two modulo of blocks and add them to call procedure x blocks as shown below. We will need to use modulo of blocks to divide the minutes and seconds by 60 in order to find out the real amount of minutes and seconds otherwise the counting will continue after 60 – for example, 61,62,63…

32. Go to Clock1 drawer, drag out call Clock1.DurationTo…. blocks and add them as shown below. Select Variables drawer, drag out three get blocks, add them as shown below. Select duration in each get block.

33. As we do not have a block for milliseconds let’s create one with modulo of divided by 1000.

34.To test that it works, you either have to launch an emulator, or connect to a mobile device with the AI2 Companion.

35.While your device (emulator or phone/tablet) has been connected to App Inventor, your app has been running in real time on your device. If you disconnect the emulator/device from the Blocks Editor, the app will vanish. You can always make it return by reconnecting the device. To have an app running without being connected to App Inventor, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Under Build, select App (save to my computer) to download the app to your computer as an apk file, which you can distribute and share as you like by manually installing it on other devices.

Summary

We have successfully built the Stopwatch app with MIT App Inventor 2 and we will extend it in next project with SAVE and LOAD buttons. You will be able to save the result and load it if needed.