{"id":205,"date":"2014-10-29T18:46:36","date_gmt":"2014-10-30T01:46:36","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=205"},"modified":"2014-10-29T18:46:36","modified_gmt":"2014-10-30T01:46:36","slug":"sensors-using-the-orientation-sensor","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/10\/29\/sensors-using-the-orientation-sensor\/","title":{"rendered":"Sensors: How to use the Orientation Sensor"},"content":{"rendered":"<p>Smart phones and tablets contain several kinds of &#8220;sensors&#8221; to sense information about their environment. For example, an accelerometer provides information about movement of the phone (or tablet) &#8211; letting us know the speed and direction of travel in x, y and z coordinates (three dimensions).<\/p>\n<p>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 &#8211; by tilting our phone, we can make graphic items move around on the screen!<\/p>\n<p><em>Sample source code that you can download is at the bottom of this post!<\/em><\/p>\n<p>After going through this tutorial, you now know enough to create your own interactive smart phone game!<\/p>\n<p><strong>Review<\/strong><\/p>\n<p>Before we get started, please review these earlier tutorials:<\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=125\">How to Create a Bouncing Ball Animation in App Inventor 2<\/a><\/li>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=167\">Using ImageSprites for Animated App Inventor Graphics<\/a><\/li>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=183\">Controlling the sprite animation with the finger on your screen<\/a><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p><strong>What the Sample Program Does<\/strong><\/p>\n<p>The sample program, in this tutorial, adds the orientation sensor to the earlier sprite-based animation. By tilting the phone, we control the image sprite (or if you prefer, a ball object) on the screen. The sprite moves in the direction of the phone&#8217;s tilt angle &#8211; the steeper the tilt, the faster the sprite moves in the tilt direction.<\/p>\n<p>Here&#8217;s a video clip to illustrate how this works:<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/TpwPiS2d0jY\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>This program also adds a button &#8220;<em>Orient<\/em>&#8221; and introduces a simple way to\u00a0see what&#8217;s going on inside an app.<\/p>\n<p>When the program starts running, it operates as it did in the earlier tutorial &#8211; the sprite just moves around and bounces off the wall. But if we press the &#8220;<em>Orient<\/em>&#8221; button, the app switches to using the orientation sensor to control the sprite&#8217;s movement. \u00a0Press the &#8220;<em>Orient<\/em>&#8221; button again, and the orientation mode is switched off.<\/p>\n<blockquote><p>Tip: Turn off Auto-Rotate on your phone<\/p>\n<p>When rotating your phone around in odd directions, Android may think you are switching from &#8220;portrait&#8221; viewing mode to &#8220;landscape&#8221; viewing mode. Which is probably not want you want the phone to do when using this demo program. You can turn off the automatic screen rotation by going to:<\/p>\n<p>Settings | Display | Auto-rotate screen<\/p>\n<p>and remove the check mark next to this item.<\/p><\/blockquote>\n<p>Additionally, the &#8220;<em>txtCurrentHeading<\/em>&#8221; text box displays\u00a0the values returned by the orientation sensor so we can see what the program is doing on the &#8220;inside&#8221;.<\/p>\n<p><strong>Introduction to the Orientation Sensor\u00a0<\/strong><\/p>\n<p>The orientation sensor appears in the &#8220;<em>Sensors<\/em>&#8221; section of the Palette &#8211; drag the <em>OrientationSensor<\/em> component to the Viewer and drop on your app.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/UI_OrientationPalette.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-202\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/UI_OrientationPalette.png\" alt=\"UI_OrientationPalette\" width=\"218\" height=\"228\" \/><\/a>The sensor is added as a non-visible component, at the bottom:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/UI_OrientationSensor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-201\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/UI_OrientationSensor.png\" alt=\"UI_OrientationSensor\" width=\"357\" height=\"576\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The orientation sensor provides the angle of tilt of the phone in an x and y axis &#8211; known as <em>roll<\/em> and <em>pitch<\/em>.<\/p>\n<p>Think of an airplane in flight. When the plane turns to the left, the left wing drops down and the right wing raises up &#8211; <em>that&#8217;s called &#8220;roll&#8221;.<\/em><\/p>\n<p>When the pilot pushes the control wheel (or stick) forward, the nose drops down &#8211; <em>that&#8217;s &#8220;pitch&#8221;.<\/em> When the pilot pulls back on the controls, the nose moves upwards &#8211; in fact, <em>we say &#8220;the nose pitched up&#8221;.<\/em><\/p>\n<p>Hold your phone in front of you in &#8220;portrait&#8221; mode so that the short sides are at top and bottom and the long sides at left and right. Hold the phone so that it&#8217;s basically flat (backside down).<\/p>\n<p><em>(You don&#8217;t need to know the next two paragraphs to use\u00a0this example &#8211; but it may be helpful to understand some of the orientation sensor features.)<\/em><\/p>\n<p>If you rotate your phone so the right edge goes up at a 45 degree angle, then its &#8220;roll&#8221; is +45 degrees. If you rotate your phone so the left edge goes up instead, at a 45 degree angle, this &#8220;roll&#8221; is -45 degrees.<\/p>\n<p>If you tilt the phone so that the top of the phone is pointed down, then the pitch might have a value -45 or even -90 degrees if you point the top all the way down. If you pitch the top up, then the pitch goes in positive degrees between 0 and 90 degrees.<\/p>\n<p>The amount of roll in the x and y axes (roll and pitch) can be used to calculate the angle of trajectory for the the sprite, on the screen, and the speed of movement. That is, the steeper we tilt the phone, the faster the sprite should move on the screen. (Please see &#8220;Afterword&#8221; at the bottom of this post.)<\/p>\n<p><strong>Using the Orientation Sensor<\/strong><\/p>\n<p>In the Blocks editor, we can look at the code. When the phone is moved, the orientation sensor throws an event &#8220;<em>OrientationChanged<\/em>&#8220;. Our blocks code handles this with a &#8220;<em>when OrientationSensor1.OrientationChanged<\/em>&#8221; event handler. In the sample code below, the last two lines are the two lines that change the direction and speed of the sprite based on the phone&#8217;s angle &#8211; the rest of the blocks code is to display the orientation sensor values in <em>txtCurrentHeading<\/em>.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/OrientationChangedHandler.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-204\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/OrientationChangedHandler.png\" alt=\"OrientationChangedHandler\" width=\"998\" height=\"399\" \/><\/a><\/p>\n<p>The orientation sensor has a property value called &#8220;<em>Angle<\/em>&#8220;, which conveniently is the angle determined by the phone&#8217;s tilt, and in a form that we can assign to the sprite&#8217;s <em>Heading<\/em> property.<\/p>\n<p>Similarly, the sensor returns a &#8220;magnitude&#8221; value that we can use to set the sprite&#8217;s movement speed. The <em>Magnitude<\/em> has a value between 0 and 1, while the <em>Speed<\/em> is set to positive integer values, like 10 or 20 or 30, and so on. To convert the fractional magnitude to a useful speed, we multiply by a constant value &#8211; in this example 50. Why 50? I experimented with the program and found that 50 produced a nice speed that felt right &#8211; but you can certainly change this value to something else and see what happens!<\/p>\n<p><strong>Important Note<\/strong> &#8211; not all Android devices have an orientation sensor built in! You can check the OrientationSensor1 property &#8220;Available&#8221; &#8211; if true, then there is an orientation sensor on board the device. The sample demo code in this tutorial does not check the Available property &#8211; its possible that if your device is missing an orientation sensor, then this code will not work for you.<\/p>\n<p><strong>How the Orient Button Works<\/strong><\/p>\n<p>The orient button acts like a &#8220;toggle&#8221;. Press it once and the orientation feature is switched to on; press it again, and the orientation feature is switched to off.<\/p>\n<p>There are many ways to implement a &#8220;toggle&#8221; in software &#8211; the method I used relies on a &#8220;boolean&#8221; variable. A boolean variable may have only one of\u00a0two values &#8211; &#8220;true&#8221; or &#8220;false&#8221;. When set to false, the orientation mode of the program is off, but when set to true, the orientation mode of the program is on.<\/p>\n<p>The <em>Orient<\/em> button&#8217;s <em>Click<\/em> event turns the orientation feature on or off. We could implement this with an <em>if-then-else<\/em> block (<em>if<\/em> orientation is off <em>then<\/em> set orientation on, <em>else<\/em> set orientation to off). But instead we implement this using a\u00a0Boolean\u00a0algebra operator: the &#8220;Not&#8221; function in Boolean algebra inverts the value of a boolean. If the value is true, then <em>NOT true<\/em> is actually a value of false and <em>NOT false<\/em> is actually a value of true.<\/p>\n<p>The following blocks code inverts the current orientation setting from true to false or false to true.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/OrientationSensorBoolean.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-203\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/OrientationSensorBoolean.png\" alt=\"OrientationSensorBoolean\" width=\"550\" height=\"125\" \/><\/a><\/p>\n<p><strong>Downloads<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/source\/tutorials\/SimpleGameAccelSensor_Final.aia\">Source code App Inventor &#8220;.aia&#8221; 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 &#8220;Import project (.aia) from my computer&#8230;&#8221;<\/li>\n<\/ul>\n<p><strong>Afterword<\/strong><\/p>\n<p>The roll and pitch values can be used to calculate the appropriate angle and speed.The roll and pitch can also be combined using trigonometry to calculate the new <em>Heading<\/em> for the sprite. And the\u00a0greater the angles, the greater the resulting speed. \u00a0It just takes a little math to convert the angles into a heading and speed.<\/p>\n<p>But some days I can be dense. I actually scribbled out circles and triangles and started down a path of calculating the arc tangent for the heading and the slant distance for the speed. As the code became complex I said to myself, &#8220;<em>You know, App Inventor is supposed to be easy &#8211; this approach isn&#8217;t easy. May be I&#8217;d better look at the documentation again!<\/em>&#8220;.<\/p>\n<p>Followed by a whopping big DUH: The <em>Angle<\/em> and <em>Magnitude<\/em> properties do all these calculations behind the scenes, making it easy to use the orientation sensor for controlling sprites. I didn&#8217;t need to do all those calculations myself!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Smart phones and tablets contain several kinds of &#8220;sensors&#8221; to sense information about their environment. For example, an accelerometer provides information about movement of the phone (or tablet) &#8211; 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 &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/10\/29\/sensors-using-the-orientation-sensor\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Sensors: How to use the Orientation Sensor<\/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,15],"tags":[22,140,164,165],"class_list":["post-205","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method","category-video","tag-app-inventor","tag-orientation-sensor","tag-sensor","tag-sensors"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/205","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=205"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}