{"id":220,"date":"2014-11-03T19:32:57","date_gmt":"2014-11-04T03:32:57","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=220"},"modified":"2014-11-03T19:32:57","modified_gmt":"2014-11-04T03:32:57","slug":"sensors-using-the-accelerometer-to-detect-motion","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/11\/03\/sensors-using-the-accelerometer-to-detect-motion\/","title":{"rendered":"Sensors: Using the Accelerometer to detect motion"},"content":{"rendered":"<p>This tutorial introduces the accelerometer &#8211; at a high level &#8211; as a tool to detect the phone being shaken. You can\u00a0use this feature as another kind of user input to your app &#8211; for example, make a game where shaking the phone resets the game play or starts a new game.<\/p>\n<p>An accelerometer is a hardware device that detects and measures motion, typically in three axes: X, Y and Z. For example, if the phone is moved left or right, the acceleration changes in the X axis and the accelerometer returns a value indicating the X axis movement.<\/p>\n<p>Smart phones &#8211; and many modern devices &#8211; have special hardware accelerometer components built in. <em>The orientation sensor, described previously, is actually a software sensor that uses the hardware accelerometer but converts acceleration into orientation values.<\/em><\/p>\n<p>The purpose of this demonstration app is to show one example\u00a0of using the accelerometer.<\/p>\n<p>The user interface is simple &#8211; it displays a <em>Start<\/em> button and a <em>Stop<\/em> button, and the status of the accelerometer.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccelUI.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-225\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccelUI.png\" alt=\"AccelUI\" width=\"334\" height=\"563\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><!--more--><\/p>\n<p>At the bottom of the Designer <em>Viewer<\/em>, you can see that three non-visible components have been added to this app. The <em>AccelerometerSensor1<\/em> is the component that detects phone movement. Find the Accelerometer in the Sensors section of the Palette.<\/p>\n<p>The <em>Player1<\/em> component is a media player &#8211; for our app, when the phone is shaken, it plays an mp3 audio file that is specified as the <em>Source<\/em> in\u00a0the properties for the player. Find the <em>Player<\/em> component in the Media section of the Palette.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-230\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccelPlayerProperties.png\" alt=\"AccelPlayerProperties\" width=\"213\" height=\"392\" \/><\/p>\n<p>To specify the mp3 file, click on source and select an mp3 file from your disk drive. I used a sound effects file from <a href=\"http:\/\/soundbible.com\/2070-Railroad-Crossing-Bell.html\">Soundbible.com<\/a>.<\/p>\n<p>Regardless of the length of the mp3 audio clip, in our app we will\u00a0limit the mp3 file to playing for just\u00a0two seconds (<em>because we feel like it!<\/em>)<\/p>\n<p>How do we limit the playing of the file to two seconds? By using the App Inventor clock timer. Find the <em>Clock<\/em> in the <em>Sensors<\/em> section of the Palette and\u00a0drag a <em>Clock<\/em> timer to the Viewer &#8211; this becomes a non-visible component. The clock acts as a timer &#8211; creating a time event at specified intervals. We write a clock event handler to process the timer event. \u00a0We set the timer to a two second time and then when the timer event occurs, the event handler turns off the media player.<\/p>\n<p><strong>How This Works &#8211; The Blocks<\/strong><\/p>\n<p>The <em>Start<\/em> button activates the accelerometer by setting its <em>Enabled<\/em> property to true. The sensitivity of the accelerometer &#8211; that is, how sensitive it is to motion &#8211; is set by adjusting the value of the Sensitivity property. Setting the value to 3 makes the accelerometer more sensitive, while a value of 1 makes the accelerometer less\u00a0sensitive. \u00a0For our demonstration app, the <em>Sensitivity<\/em> ought to be set to 1 (less sensitive) but because the app is intended to show some features of the accelerometer, we will detect the amount of shaking in a different way.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellStart.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-226\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellStart.png\" alt=\"AccellStart\" width=\"866\" height=\"200\" \/><\/a><\/p>\n<p>The remaining features, while simple, are explained in sort of reverse order &#8211; meaning we show how to stop the player before we see how to start it! \u00a0We start with the <em>Stop<\/em> button. When the <em>Stop<\/em> button is pressed on screen, we disable the accelerometer, disable the timer, and disable the media player.<\/p>\n<p>The accelerometer is disabled by setting its <em>Enabled<\/em> property to false. The <em>Clock&#8217;s<\/em> timer is disabled be setting the <em>TimerEnabled<\/em> property to false, and the media player is stopped by calling its <em>Stop<\/em> method.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellStop.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-227\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellStop.png\" alt=\"AccellStop\" width=\"838\" height=\"244\" \/><\/a><\/p>\n<p>The media player is started by calling it&#8217;s <em>Start<\/em> method, as seen below. Because this set of blocks is very wide, the blocks are displayed very narrow &#8211; click on the image to display in a larger size. The rest of the code blocks, here, will be explained in a moment.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellShaking1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-229\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellShaking1.png\" alt=\"AccellShaking1\" width=\"2812\" height=\"516\" \/><\/a><\/p>\n<p>When the <em>Clock&#8217;s<\/em> time interval has elapsed, the <em>Clock<\/em> throws a <em>Timer<\/em> event. When this event occurs, we stop the player and stop the clock timer:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellTimer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-228\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellTimer.png\" alt=\"AccellTimer\" width=\"720\" height=\"208\" \/><\/a><\/p>\n<p>Now, let&#8217;s go back and look at the Accelerometer event handler:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellShaking1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-229\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/AccellShaking1-1024x187.png\" alt=\"AccellShaking1\" width=\"625\" height=\"114\" \/><\/a><\/p>\n<p>The <em>Accelerometer<\/em> has an event called <em>Shaking<\/em>. Rather than detect each individual movement of the phone, we can let Android run some code behind the scenes that determines if the phone is being shaken &#8211; versus merely moved. \u00a0We do not need to know how this works &#8211; it just happens by magic and simplifies our programming.<\/p>\n<p>Remember that the <em>Accelerometer<\/em> indicates the device&#8217;s motion in X, Y and Z axes. Values corresponding to these directions of movement are\u00a0found in the <em>XAccel<\/em>, <em>YAccel<\/em> and <em>ZAccel<\/em> properties and represent <em>meters per second squared<\/em>. \u00a0Values may be either negative or positive.<\/p>\n<p>For our app, we want to restrict the shake detection to fairly aggressive shaking. To do this, an <em>if-then<\/em> block determines if any of the X, Y or Z values are fairly large &#8211; and if any of these comparisons is true, then the player is turned on and the two second timer is activated.<\/p>\n<p>Note that we use the &#8220;absolute&#8221; value of the X, Y and Z acceleration. \u00a0The absolute value function converts negative values to positive values (the absolute value of -5 is 5 and the absolute value of 5 is just 5, unchanged). The absolute value of each acceleration component is then compared to the value we have stored in a global variable named <em>SHAKELIMIT<\/em>. This is set with a global initialize variable and set to a value of 18 &#8211; but you can experiment with this to see if other values work better for you. <strong><em>With the value set at 18, you need to give the phone a very good shake to activate the media player.<\/em><\/strong><\/p>\n<p>The accelerometer may be used in other ways too &#8211; for example, it can be used to detect any device motion. Then the values of the X, Y and Z axis motion can be converted, using math, into angles, magnitude of the movement, and other values.<\/p>\n<p><strong>Downloads<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/source\/tutorials\/DetectShaking_Final.aia\">Source code App Inventor \u201c.aia\u201d source file<\/a>\u00a0(App Inventor source code files have the filename extension .aia)<\/li>\n<li>Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select \u201cImport project (.aia) from my computer\u2026\u201d<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial introduces the accelerometer &#8211; at a high level &#8211; as a tool to detect the phone being shaken. You can\u00a0use this feature as another kind of user input to your app &#8211; for example, make a game where shaking the phone resets the game play or starts a new game. An accelerometer is &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/11\/03\/sensors-using-the-accelerometer-to-detect-motion\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Sensors: Using the Accelerometer to detect motion<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[17,19,22,139,164],"class_list":["post-220","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method","tag-accelerometer","tag-android","tag-app-inventor","tag-orientation","tag-sensor"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}