{"id":5448,"date":"2024-12-28T16:26:38","date_gmt":"2024-12-28T16:26:38","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5448"},"modified":"2024-12-28T16:26:40","modified_gmt":"2024-12-28T16:26:40","slug":"mit-app-inventor-stop-watch","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-stop-watch\/","title":{"rendered":"MIT App Inventor Stop Watch"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft,<\/p>\n\n\n\n

Normally, in all mobile devices, stopwatch, timer, and alarm clock features are all rolled into one app called the Clock. I have already taught how to make an alarm clock and countdown timer but I haven\u2019t taught how to make a stopwatch.<\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

The difference between a timer and a stopwatch is that a timer counts down from the time given and a stopwatch counts up from 0 until you stop it. A stopwatch is a good way of finding out how long you take to do something and is a must for all test givers especially people taking tests like their SATs.<\/p>\n\n\n\n

Let\u2019s have a look at the screenshot of what we are making today:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

As you can see this stopwatch app looks quite professional and counts in minutes, seconds, and centiseconds just like Android\u2019s built-in stopwatch. It also has a resume feature which should be a must feature in all good stopwatches.<\/p>\n\n\n\n

So, let\u2019s begin\u2026<\/p>\n\n\n\n

Open up MIT App Inventor:<\/p>\n\n\n\n

https:\/\/ai2.appinventor.mit.edu<\/a><\/p>\n\n\n\n

Go to Projects in the menu bar and choose Start New Project.<\/p>\n\n\n\n

Name the project \u201cStopWatch\u201d, no spaces are allowed in the project name.<\/p>\n\n\n\n

The Designer view of the project will open where we design the screen.<\/p>\n\n\n\n

For screen1 properties on the right, make align horizontal: center, background color: white, screen orientation: portrait and turn off the title visible check box.<\/p>\n\n\n\n

From the Layout<\/strong> palette on the left, drag and drop a Horizontal Layout<\/strong> onto the device showing in the center.<\/p>\n\n\n\n

For horizontal arrangement1\u2019s properties, make align horizontal and align vertical both center. Make height: 30% and width: fill parent.<\/p>\n\n\n\n

Duplicate horizontal arrangement1 by selecting it and pressing Ctrl + C and Ctrl+ V<\/strong> on the keyboard for Windows<\/strong> OR Command + C and Command + V<\/strong> on the keyboard for MacOS.<\/strong><\/p>\n\n\n\n

From the User Interface<\/strong> Palette, drag and drop  a Label<\/strong> inside horizontal arrangement1 in viewer.  Rename to timeLbl and make font: bold, font size: 45, and change text to \u201c00 : 00 : 00\u201d.<\/strong><\/p>\n\n\n\n

From the User Interface<\/strong> Palette, drag and drop  a Button<\/strong> inside horizontal arrangement2 in viewer. Rename to resetBtn. Make background color: light gray, font: bold and font size: 20. Make width: 30%, shape: rounded, text: Reset, and textColor: Dark Gray.<\/p>\n\n\n\n

Duplicate the resetBtn by selecting it and pressing Ctrl + C and Ctrl+ V<\/strong> on the keyboard for Windows<\/strong> OR Command + C and Command + V<\/strong> for MacOS. <\/strong>Rename to startStopBtn. Make background color: blue, text: Start and textColor: white.<\/p>\n\n\n\n

Add an empty label between the two buttons for spacing. Make width 2%  and remove all text from it.<\/p>\n\n\n\n

Lastly, From the Sensors<\/strong> Palette, drag and drop  a Clock <\/strong>onto the Viewer. This is an invisible component. In the Clock1\u2019s properties,  turn off timer enabled checkbox but the timer always fires should stay on (this means that our stopwatch should keep on working if the app is open but not on screen). Make timer interval: 10 milliseconds which actually means 1 centiseconds. So, we want our clock to be triggered after every one centisecond.<\/p>\n\n\n\n

Our screen design is done so let\u2019s go to the blocks section. <\/p>\n\n\n\n

We have three global variables. startTime and pausedTime are for storing the actual device time at which the clock is started or paused respectively and timerStarted is a variable maintained to switch between the start and stop state of the stopwatch\u2019s startStop button.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

We will also make a procedure for converting single digits to a number with 0 before it. So, for example, 1 second will be displayed as 01 to keep the look of our timer uniform. <\/p>\n\n\n\n

From procedures, get the procedure that returns a result. Name it  \u201cformatTime\u201d.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Click on cogwheel in this procedure to add an input to it.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

From control, get the if-else block below the while test block as shown below:<\/p>\n\n\n\n

<\/p>\n\n\n\n

Plug it inside the formatTime procedure.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, check if x\u2019s length is equal to 1 then join 0 and x otherwise let x stay the same.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, get the click event of startStopBtn and use an if\/else block from control to check in if condition that timerStarted=false. This is the case when the timer hasn\u2019t started yet, so we should start it. In else section, we will add code for stopping the timer.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

So, what should happen when the timer is started. We should assign the current device time to startTime using Clock. Now procedure. We should set the status variable timerStarted to true. We should change the text on our startStopBtn to Stop and we should change its background color to red. And most importantly we should enable our clock\u2019s sensor time. And we should also disable our resetBtn. The stopwatch should only be allowed to be reset when we stop it.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

And what happens in the else section: we stop the timer by making timerStarted false, startStopBtn\u2019s text Resume, and color back to blue. We disable our clock\u2019s timer and we enable resetBtn.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Let\u2019s work on our clock\u2019s timer event code. <\/p>\n\n\n\n

We will find the duration between the device\u2019s current time and the time at which the stopwatch was started and we will show this time duration in minutes, seconds, and centiseconds and this will be updated every 1 centisecond as that is the timer interval for our clock (10 milliseconds = 1 centisecond)<\/p>\n\n\n\n

In the clock1\u2019s timer event block, first, add a local variable timeDuration and use Clock1\u2019s duration procedure to find the duration between startTime and Clock1.Now. This timeDuration is returned to us in milliseconds.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Within the orange section of the local variable, set the timeLbl to the join of 5 blocks in which plug in \u201d : \u201d text blocks as separators between mins, seconds, and centiseconds.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, we have these procedures in the clock that convert a duration into minutes and seconds:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

However, if we consider the seconds one, it will give us the entire duration in seconds so it can even give us 220 seconds but we don\u2019t want to show 220 seconds to the user as 220 seconds has 3 minutes and 40 seconds in it. So, how to fix this? Just take thhe modulo of seconds with 60. So, 220 % 60 is 40 (modulo returns the remainder of a division)<\/p>\n\n\n\n

So, do this for both minutes and seconds slots but besides the modulo, we have to call our custom procedure formatTime to add a 0 before single digits.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The last slot is for centiseconds which is a little trickier as we don\u2019t have a procedure for converting duration to centiseconds so we will find it using our own code i.e. take modulo with 1000 (our time duration is already in milliseconds) and divide by 10 to get centiseconds. We need rounding off too before formatTime.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Our final timer event looks like this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Next is our resetBtn code:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

If you test the timer right now, it will function very nicely but instead of resuming, the timer will start from 0 again. So, what do we need for the resuming feature?<\/p>\n\n\n\n

In our startStopBtn click event, inside the else section, start storing the time duration at which the stopwatch was stopped:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Once we have the duration at which stopwatch was paused, we need to subtract it from the current device time when the clock is started again and we will only do it if the pauseTime isn\u2019t 0. If pausedTime = 0, then this means that the stopwatch is either being started after a reset or it is being started for the first time<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

(There is no Subtract Duration procedure in clock sensor, so we can get the correct subtraction result by multiplying pausedTime by -1 and then adding this to current time).<\/p>\n\n\n\n

So our final startStopBtn click event looks like this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The stopwatch app is done and I hope you liked this tutorial.<\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

<\/a>You can download aia file for the project from here:<\/p>\n\n\n\n

Stopwatch.aia<\/strong><\/a><\/p>\n\n\n\n

You can also watch the video tutorial on my channel: Obsidian Soft.<\/p>\n\n\n\n

[youtube https:\/\/www.youtube.com\/watch?v=hOXCDuNSugg]<\/p>\n\n\n\n

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don\u2019t miss any of the great projects I have planned for you.<\/p>\n\n\n\n

https:\/\/www.youtube.com\/c\/obsidiansofteducation<\/a><\/p>\n\n\n\n

Please like my social media pages for more educational resources and tips.<\/p>\n\n\n\n

Facebook: https:\/\/www.facebook.com\/ObsidianSoft\/<\/a><\/p>\n\n\n\n

Instagram: https:\/\/www.instagram.com\/obsidiansoftapps\/<\/a><\/p>\n\n\n\n

Pinterest:<\/p>\n\n\n\n

https:\/\/www.pinterest.co.uk\/obsidiansoft\/_created<\/a><\/p>\n\n\n\n

For links to free educational apps, have a look at the\u00a0educational apps page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Hello friends and welcome to Obsidian Soft, Normally, in all mobile devices, stopwatch, timer, and alarm clock features are all rolled into one app called the Clock. I have already taught how to make an alarm clock and countdown timer but I haven\u2019t taught how to make a stopwatch. The difference between a timer and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5448","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/comments?post=5448"}],"version-history":[{"count":1,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5448\/revisions"}],"predecessor-version":[{"id":5449,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5448\/revisions\/5449"}],"wp:attachment":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/media?parent=5448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}