{"id":3127,"date":"2016-08-03T12:38:09","date_gmt":"2016-08-03T02:38:09","guid":{"rendered":"http:\/\/legoeng.local\/?p=3127"},"modified":"2016-12-16T12:56:33","modified_gmt":"2016-12-16T01:56:33","slug":"create-apps-for-nxt-with-mit-app-inventor","status":"publish","type":"post","link":"http:\/\/legoeng.local\/create-apps-for-nxt-with-mit-app-inventor\/","title":{"rendered":"Create apps for NXT with MIT App Inventor"},"content":{"rendered":"<p>MIT App Inventor is a web-based tool for creating apps for Android phones. The apps you create are stored on a server and can be downloaded to your phone or computer as well.<\/p>\n<p>In this tutorial, we will teach you how to create an app for your robot. You could, for example, create a simple remote control that uses your phone&#8217;s tilt sensors to drive the robot.<\/p>\n<p>Note: Although this tutorial is based around using the NXT brick, the MIT App Inventor also supports the EV3 brick as well.<\/p>\n<p><iframe loading=\"lazy\" title=\"Remote controlled NXT car\" src=\"https:\/\/player.vimeo.com\/video\/76817149?h=91a6ac6d68&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"281\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Get started<\/h2>\n<p>To start App Inventor, go to the site <a href=\"http:\/\/ai2.appinventor.mit.edu\/\">http:\/\/ai2.appinventor.mit.edu<\/a> and log in using a Google account.<\/p>\n<p>Once logged in, you will have access to a range of tutorials includes one for creating an app to control a MINDSTORMS robot, but we have created a NXT-based project template for you where you can start programming an NXT robot at once. You can download it <a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/NXT_Template.zip\">HERE <\/a>and unzip it. You can save the resulting file (NXT_Template.aia) in any folder.<\/p>\n<p>In App Inventor, press the More actions button and select upload source:<\/p>\n<p style=\"text-align: center;\">\u00a0<a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/upload_Source.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7077\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/upload_Source.png\" alt=\"upload_Source\" width=\"248\" height=\"240\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/upload_Source.png 310w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/upload_Source-300x290.png 300w\" sizes=\"(max-width: 248px) 100vw, 248px\" \/><\/a><\/p>\n<p>Browse to where the NXT_Template.aia is located, select the file and press OK. After a while the Designer screen will open.<\/p>\n<h2><span style=\"font-size: 1.17em;\">The designer screen<\/span><\/h2>\n<p>The designer\u00a0screen looks something like this:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/AI_Screen.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7082 aligncenter\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/AI_Screen.png\" alt=\"AI_Screen\" width=\"513\" height=\"189\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/AI_Screen.png 1024w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/AI_Screen-300x110.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/AI_Screen-600x221.png 600w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/a><\/p>\n<p>This window contains of 4 different areas: Palette, Viewer, Components, and Properties.<\/p>\n<h3><strong>Palette<\/strong><\/h3>\n<p>You will find the different components that an app can contain on the palette. Examples of components can be buttons, canvas, or a picture. The palette is divided into several groups. For example, the Basic group as shown here.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/08\/palette.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3565\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/08\/palette.png\" alt=\"palette\" width=\"179\" height=\"512\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/08\/palette.png 224w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/08\/palette-105x300.png 105w\" sizes=\"(max-width: 179px) 100vw, 179px\" \/><\/a><\/p>\n<h3>Viewer<\/h3>\n<p>The next area is the screen of the app that we will see on the phone.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Viewer-e1469588899390.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7125 size-medium\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Viewer-e1469588899390-272x300.png\" alt=\"Viewer\" width=\"272\" height=\"300\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Viewer-e1469588899390-272x300.png 272w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Viewer-e1469588899390.png 404w\" sizes=\"(max-width: 272px) 100vw, 272px\" \/><\/a><\/p>\n<p>Here we see all the components we have chosen for this project. Some components that are required to make your app work are <em>non-visible components<\/em>. For example, the BluetoothClient is required if we want to communicate with the NXT, but it won&#8217;t appear on the phone&#8217;s screen. Non-visible components are displayed below the window<\/p>\n<h3>Components<\/h3>\n<p>The Components area displays all the components of the project:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Components.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7127 size-medium aligncenter\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Components-e1469588987243-150x300.png\" alt=\"Components\" width=\"150\" height=\"300\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Components-e1469588987243-150x300.png 150w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Components-e1469588987243.png 215w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<p>We see that they are arranged in the same way as folders on a hard drive. In this project we can look at Screen1 as a &#8220;folder&#8221; with Listpicker1, Start program, and so on as files. It is possible to add more screens to the app which will then become a new &#8220;folder&#8221;.<\/p>\n<h3>Properties<\/h3>\n<p>In the properties window, you set the properties of the different components. The number of properties varies from component to component.<\/p>\n<p>For example, the properties for timer:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7131\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Timer_Properties.png\" alt=\"Timer_Properties\" width=\"204\" height=\"222\" \/><\/p>\n<p>When inserting a new component it is often necessary to change one or more of the properties of the component.<\/p>\n<h2>The Blocks Editor<\/h2>\n<p>We have now been through the four areas that together are used to build up the screen of our app. Now we are going to take a closer look at the blocks editor. We get this by pressing the blocks button up to the right:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blokcs_Button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7147\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blokcs_Button.png\" alt=\"Blokcs_Button\" width=\"516\" height=\"192\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blokcs_Button.png 516w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blokcs_Button-300x111.png 300w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><\/a><br \/>\nWe press this to open the blocks editor.<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blocks_Editor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7153 aligncenter\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blocks_Editor.png\" alt=\"Blocks_Editor\" width=\"547\" height=\"399\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blocks_Editor.png 978w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Blocks_Editor-300x218.png 300w\" sizes=\"(max-width: 547px) 100vw, 547px\" \/><\/a><\/p>\n<p>This window consists of two parts: the Blocks and the Viewer.<\/p>\n<p>Notice that the blocks are group into two main categories: Built-in and Screen1. The Built-in blocks are available to all App Inventor projects. Also, all App Inventor projects must of course have a screen, and it is by default called Screen1. If the there were two screens in our app, a new category would have been added. Below screen1 we see all the components that belongs to screen1. If we press one of these components, we get the blocks for this component.<\/p>\n<p>As an example let&#8217;s look into Listpicker1:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/listpicker1_Blcoks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7163\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/listpicker1_Blcoks.png\" alt=\"listpicker1_Blcoks\" width=\"633\" height=\"559\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/listpicker1_Blcoks.png 633w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/listpicker1_Blcoks-300x264.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/listpicker1_Blcoks-600x529.png 600w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/a><\/p>\n<p>We see that the blocks are divided into three different colors: brown, purple and green. The colour tells us what kind of block it is:<\/p>\n<p><span style=\"color: #e2b21d;\">Brown:<\/span> This an event block. For example the block listpicker1.Gotfocus will run when Listpciker1 gets focus.<\/p>\n<p><span style=\"color: #7b20de;\">Purple:<span style=\"color: #000000;\">\u00a0This is block is a procedure call. It will call the actual procedure. A procedure is a set of blocks. It is also possible to create your own procedures.<\/span><\/span><\/p>\n<p><span style=\"color: #99cc00;\"><span style=\"color: #45b951;\">Green: <\/span><span style=\"color: #000000;\">The green blocks deals with the properties of the components. When we add such a block the first text is the name of the component, the second \u00a0tells us which property is active. Above the backgroundColor is active for ListPciker1. But we can see there is an arrow for selection here, and by pressing it we get all the available properties for the component as shown below for the ListPicker and Start_Program:<\/span><\/span><\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Properties_selection.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7167\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Properties_selection.png\" alt=\"Properties_selection\" width=\"729\" height=\"321\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Properties_selection.png 729w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Properties_selection-300x132.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Properties_selection-600x264.png 600w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/a><\/p>\n<p>Here you should notice that the components have different kind of properties and also the number of properties are different. \u00a0The block above is used to read the value of the property. But it is of course also possible to \u00a0change the value of a property. You must then use the Set value block:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Set_Listpicker_Background_Color.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7168\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Set_Listpicker_Background_Color.png\" alt=\"Set_Listpicker_Background_Color\" width=\"415\" height=\"53\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Set_Listpicker_Background_Color.png 415w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Set_Listpicker_Background_Color-300x38.png 300w\" sizes=\"(max-width: 415px) 100vw, 415px\" \/><\/a>The code above will change the BackgroundColor of ListPicker1 to red. Let&#8217;s look at the work area of the blocks editor. The blocks are in fact code:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Block_editor_Work_Area.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7173\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Block_editor_Work_Area.png\" alt=\"Block_editor_Work_Area\" width=\"688\" height=\"478\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Block_editor_Work_Area.png 688w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Block_editor_Work_Area-300x208.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Block_editor_Work_Area-600x416.png 600w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><\/a><\/p>\n<p>We can see there are 8 blocks in the work area, and they are there to help on the way, and not leave you alone with an empty work area. It is important to know all this blocks are collapsed. This is done for two reasons. First to save workspace on the work area, and second to let you use these commands without having to know the code that lies behind work. If you are curious, just right-click one of the blocks and select Expand block:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Expand_Block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7174\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Expand_Block.png\" alt=\"Expand_Block\" width=\"247\" height=\"151\" \/><\/a><\/p>\n<p>Now we will see the code for the procedure Wait_for_time_msecs:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_msecs_Block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7175\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_msecs_Block.png\" alt=\"Wait_for_msecs_Block\" width=\"872\" height=\"356\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_msecs_Block.png 872w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_msecs_Block-300x122.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_msecs_Block-600x244.png 600w\" sizes=\"(max-width: 872px) 100vw, 872px\" \/><\/a><\/p>\n<p>The two event blocks at the top take care of the bluetooth connection (to connect the phone to the NXT). \u00a0The last block Start_program is an event block that start when we press the button Start_Program. Right-click this block and select Expand block:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Expand_Start_Program.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7177\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Expand_Start_Program.png\" alt=\"Expand_Start_Program\" width=\"269\" height=\"162\" \/><\/a><\/p>\n<p>This block is in fact very simple and a good way to start learning how to program the NXT:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Start_Program_Click.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7188\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Start_Program_Click.png\" alt=\"Start_Program_Click\" width=\"392\" height=\"399\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Start_Program_Click.png 392w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Start_Program_Click-294x300.png 294w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p>But: &#8220;Where do I find these blocks?&#8221; you might ask. \u00a0The figure below will give you the answer:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Where_are_the_blocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7189\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Where_are_the_blocks.png\" alt=\"Where_are_the_blocks\" width=\"750\" height=\"466\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Where_are_the_blocks.png 938w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Where_are_the_blocks-300x186.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Where_are_the_blocks-600x372.png 600w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<p>\u00a0To show you how to build this program I will delete all the blocks and start from scratch:<\/p>\n<p><a style=\"text-align: center;\" href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/start_Scratch.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7192\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/start_Scratch.png\" alt=\"start_Scratch\" width=\"242\" height=\"73\" \/><\/a><\/p>\n<p>So we must add the block MotorAC.MoveForwardIndefinitely. We find it under MotorAC:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7193\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef.png\" alt=\"MotorAC_Indef\" width=\"519\" height=\"395\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef.png 649w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef-300x228.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef-600x456.png 600w\" sizes=\"(max-width: 519px) 100vw, 519px\" \/><\/a><\/p>\n<p>We insert this block into the start_Program event. You can hear a clicking sound when it is in place. Now it looks like this:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef_Placed.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7194\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef_Placed.png\" alt=\"MotorAC_Indef_Placed\" width=\"350\" height=\"97\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef_Placed.png 350w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAC_Indef_Placed-300x83.png 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/a><\/p>\n<p>We see a block is missing. It is the power. Power is a number from -100 to 100.. We want 100 here, and we find the block under Built-In\/Math:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7195\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png\" alt=\"Number\" width=\"416\" height=\"119\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png 416w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number-300x85.png 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/a><\/p>\n<p>We place this in the power part of the MotorAC.MoveForwardIndefinitely. \u00a0We left-click the number brick\/block and type 100:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number_inserted.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7210\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number_inserted.png\" alt=\"Number_inserted\" width=\"389\" height=\"104\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number_inserted.png 389w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number_inserted-300x80.png 300w\" sizes=\"(max-width: 389px) 100vw, 389px\" \/><\/a><\/p>\n<p>The next block we need is Wait_for_time_secs. This block is one that is made specially for the NXT template and for that reason we must find it in Built-In\/Procedures:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7199\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu.png\" alt=\"Procedure_menu\" width=\"525\" height=\"346\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu.png 525w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu-300x197.png 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/a><\/p>\n<p>But what is wrong here? Where is the Wait_for_time_secs? Lets take out the Wait_for_time_msecs first:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/msecs_inserted.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7212\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/msecs_inserted.png\" alt=\"msecs_inserted\" width=\"393\" height=\"160\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/msecs_inserted.png 393w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/msecs_inserted-300x122.png 300w\" sizes=\"(max-width: 393px) 100vw, 393px\" \/><\/a><\/p>\n<p>To get Wait_for_secs we just press Wait_for_time_msecs to get a drop-down menu:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Waitfor_time_inserted.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7213\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Waitfor_time_inserted.png\" alt=\"Waitfor_time_inserted\" width=\"393\" height=\"194\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Waitfor_time_inserted.png 393w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Waitfor_time_inserted-300x148.png 300w\" sizes=\"(max-width: 393px) 100vw, 393px\" \/><\/a><\/p>\n<p>Now the block is changed to Wait_for_time_secs:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_timeSec.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7214\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_timeSec.png\" alt=\"Wait_for_timeSec\" width=\"388\" height=\"156\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_timeSec.png 388w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Wait_for_timeSec-300x120.png 300w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/a><\/p>\n<p>So we insert a number block found in Built-In\/Math to set the wait time (2 secs):<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7195\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png\" alt=\"Number\" width=\"416\" height=\"119\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png 416w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number-300x85.png 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/a><\/p>\n<p>Now it looks like this:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/2Secs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7215\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/2Secs.png\" alt=\"2Secs\" width=\"389\" height=\"149\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/2Secs.png 389w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/2Secs-300x114.png 300w\" sizes=\"(max-width: 389px) 100vw, 389px\" \/><\/a><\/p>\n<p>The next command is MotorA.Stop. We find it here:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorA_Stop.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7217\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorA_Stop.png\" alt=\"MotorA_Stop\" width=\"574\" height=\"192\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorA_Stop.png 574w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorA_Stop-300x100.png 300w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/a><\/p>\n<p>We insert this one:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAStopInserted.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7219\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAStopInserted.png\" alt=\"MotorAStopInserted\" width=\"393\" height=\"177\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAStopInserted.png 393w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/MotorAStopInserted-300x135.png 300w\" sizes=\"(max-width: 393px) 100vw, 393px\" \/><\/a><\/p>\n<p>Next block Wait_for_rotation. This block is one that is made specially for the NXT template so we must find it in Built-In\/Procedures:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7199\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu.png\" alt=\"Procedure_menu\" width=\"525\" height=\"346\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu.png 525w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Procedure_menu-300x197.png 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/a><\/p>\n<p>We insert the block:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/procedure_inserted.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7227\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/procedure_inserted.png\" alt=\"procedure_inserted\" width=\"392\" height=\"233\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/procedure_inserted.png 392w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/procedure_inserted-300x178.png 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p>Now press the drop-down menu inside the block and select Wait_for_rotation:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Select_Wait_for_rotation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7228\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Select_Wait_for_rotation.png\" alt=\"Select_Wait_for_rotation\" width=\"394\" height=\"277\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Select_Wait_for_rotation.png 394w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Select_Wait_for_rotation-300x210.png 300w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/a>Now it is correct:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Wait_for_time_done.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7230\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Wait_for_time_done.png\" alt=\"Wait_for_time_done\" width=\"392\" height=\"263\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Wait_for_time_done.png 392w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Wait_for_time_done-300x201.png 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/a>For Angle we insert the block \u00a0number (found in Built-In\/Math) :<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7195\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png\" alt=\"Number\" width=\"416\" height=\"119\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number.png 416w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/09\/Number-300x85.png 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/a><\/p>\n<p>We insert this and set the value to 1300:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Value_Set_to_1300.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7231\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Value_Set_to_1300.png\" alt=\"Value_Set_to_1300\" width=\"392\" height=\"264\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Value_Set_to_1300.png 392w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Value_Set_to_1300-300x202.png 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p>We need to select the motor port. The way we have this program we are using motor A and motor C. Since we have stopped motor A we want motor C to rotate 1300 degrees. Notice it says motorPortLetter. This means we must use a text block. We&#8217;ll find it here:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Text_block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7235\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Text_block.png\" alt=\"Text_block\" width=\"479\" height=\"183\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Text_block.png 479w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Text_block-300x114.png 300w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/a>\u00a0We insert this one and connect it to the \u00a0MotorPortLetter:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/text_Block_inserted.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7236\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/text_Block_inserted.png\" alt=\"text_Block_inserted\" width=\"388\" height=\"264\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/text_Block_inserted.png 388w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/text_Block_inserted-300x204.png 300w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/a><\/p>\n<p>In this text block we must enter the Motorport we want to use (A,B or C). \u00a0We are planning to use a two wheel car for this program, and use port A and C. Since we have already stopped port A we have to wait for port C to rotate 1300 degrees. Then the car will rotate 180 degrees. We left-click the text-block and enter the letter :<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorportC.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7445\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorportC.png\" alt=\"MotorportC\" width=\"390\" height=\"263\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorportC.png 390w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorportC-300x202.png 300w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><\/a><\/p>\n<p>Now we want the NXT car to go back to its start point moving forward in 2 seconds. The block we now is exactly the same as the first one. We select this block by left-clicking it. Observe the yellow line around the block:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Selected_yellow.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7446\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Selected_yellow.png\" alt=\"Selected_yellow\" width=\"392\" height=\"271\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Selected_yellow.png 392w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Selected_yellow-300x207.png 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p>Now we press copy (CTRL+C) and then paste (CTRL+V):<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopyPasteBlock.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7447\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopyPasteBlock.png\" alt=\"CopyPasteBlock\" width=\"414\" height=\"273\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopyPasteBlock.png 414w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopyPasteBlock-300x197.png 300w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/a><\/p>\n<p>Finally we place this block at the end of this event:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopiedBlockPlaced.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7448\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopiedBlockPlaced.png\" alt=\"CopiedBlockPlaced\" width=\"407\" height=\"318\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopiedBlockPlaced.png 407w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/CopiedBlockPlaced-300x234.png 300w\" sizes=\"(max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>We now need to wait for two seconds. We can just copy and paste the earlier Wait_for_time_secs block. Here is the result:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Wait_for2_secs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7449\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Wait_for2_secs.png\" alt=\"Wait_for2_secs\" width=\"400\" height=\"385\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Wait_for2_secs.png 400w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/Wait_for2_secs-300x288.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>Finally we must stop motor A and C. We use the block MotorAC.stop for this:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/MotorAC_stop.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7242\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/MotorAC_stop.png\" alt=\"MotorAC_stop\" width=\"608\" height=\"457\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/MotorAC_stop.png 608w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/MotorAC_stop-300x225.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/MotorAC_stop-600x450.png 600w\" sizes=\"(max-width: 608px) 100vw, 608px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">We insert this one, and the program is finished:<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorAC_stop_new.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7450\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorAC_stop_new.png\" alt=\"MotorAC_stop_new\" width=\"398\" height=\"405\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorAC_stop_new.png 398w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/11\/MotorAC_stop_new-294x300.png 294w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">If you haven&#8217;t already worked it out, this program will make the NXT car drive forward for 2 seconds, turn 180 degrees, and return to the start point.<\/p>\n<h2 style=\"text-align: left;\">How to install the app on your phone<\/h2>\n<p>There are two ways to install the app on your phone, but here we will describe how to download the app using a barcode scanner. You will need to installed a barcode scanner if you don&#8217;t already have one. There are many options, but we recommended <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.google.zxing.client.android\" target=\"_blank\">Barcode Scanner from ZXing Team<\/a> (we found this one worked well, but there are plenty of other options).<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshoot_press_to_install1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7298\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshoot_press_to_install1.png\" alt=\"screenshoot_press_to_install\" width=\"271\" height=\"447\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshoot_press_to_install1.png 334w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshoot_press_to_install1-181x300.png 181w\" sizes=\"(max-width: 271px) 100vw, 271px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">After you have installed the barcode scanner on our phone, you can go back to App Inventor. From the top-right corner, select Package for Phone &gt; Show Barcode:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/show_Barcode.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7301\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/show_Barcode.png\" alt=\"show_Barcode\" width=\"506\" height=\"185\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/show_Barcode.png 506w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/show_Barcode-300x109.png 300w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">A progress bar will soon pop up on the screen:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Progress_Bar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7302\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Progress_Bar.png\" alt=\"Progress_Bar\" width=\"294\" height=\"186\" \/><\/a><\/p>\n<p style=\"text-align: left;\">After a while a barcode will appear on the screen:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Scan_Barcode.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7303\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Scan_Barcode.png\" alt=\"Scan_Barcode\" width=\"282\" height=\"365\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Scan_Barcode.png 282w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Scan_Barcode-231x300.png 231w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">Scan this barcode with the \u00a0the downloaded barcode scanner:<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_OPen_Browser.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7290\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_OPen_Browser.png\" alt=\"Screenshot_OPen_Browser\" width=\"447\" height=\"271\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_OPen_Browser.png 931w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_OPen_Browser-300x182.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_OPen_Browser-600x364.png 600w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/a><\/p>\n<p>\u00a0After a while the following window will appear on your phone:<\/p>\n<p style=\"text-align: center;\">\u00a0<a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_download1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7286\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_download1.png\" alt=\"screenshot_download\" width=\"275\" height=\"448\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_download1.png 344w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_download1-184x300.png 184w\" sizes=\"(max-width: 275px) 100vw, 275px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">This is just a warning and nothing be afraid of, so select OK. After the .APK file is downloaded tap on it in the notifications window on your phone:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_download_Completed.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7287\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_download_Completed.png\" alt=\"Screenshot_download_Completed\" width=\"268\" height=\"451\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_download_Completed.png 407w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_download_Completed-178x300.png 178w\" sizes=\"(max-width: 268px) 100vw, 268px\" \/><\/a><\/p>\n<p>This window will pop up on your screen:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_install.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7288\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_install.png\" alt=\"screenshot_install\" width=\"276\" height=\"454\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_install.png 345w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_install-182x300.png 182w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">Just another warning. Select Install, and when the application is installed you should see something like this:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_Application_Instaleed.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7285\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_Application_Instaleed.png\" alt=\"screenshot_Application_Instaleed\" width=\"279\" height=\"466\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_Application_Instaleed.png 413w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_Application_Instaleed-180x300.png 180w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">We select Open and our app will run:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_NXT_Template.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7289\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_NXT_Template.png\" alt=\"screenshot_NXT_Template\" width=\"268\" height=\"373\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_NXT_Template.png 414w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/screenshot_NXT_Template-216x300.png 216w\" sizes=\"(max-width: 268px) 100vw, 268px\" \/><\/a><\/p>\n<h2 style=\"text-align: left;\">Remember to pair your phone with the NXT<\/h2>\n<p>Just one little problem. It seems logical to press the connect button, but if you do so you might get a blank screen:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_Blank_screen.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7310\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/Screenshot_Blank_screen.png\" alt=\"Screenshot_Blank_screen\" width=\"272\" height=\"377\" \/><\/a><\/p>\n<p>So, what is wrong? The answer is easy.<\/p>\n<p>You must pair the phone with the NXT brick so that your app will be able to communicate with it.<\/p>\n<h2 style=\"text-align: left;\">Remote controlled NXT<\/h2>\n<p>Most android phones on the market today have an built in orientation sensor. In App Inventor it is possible to use this feature in our program, and now we are going to create a program where we remote control a NXT car with our phone as shown in this video:<\/p>\n<p><iframe loading=\"lazy\" title=\"Remote controlled NXT car\" src=\"https:\/\/player.vimeo.com\/video\/76817149?h=91a6ac6d68&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"281\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>In App Inventor, the orientation sensor is a non-visible component that reports the following three values, in degrees:<\/p>\n<p><strong>Roll:<\/strong> 0 degree when the device is level, increasing to 90 degrees as the device is tilted up onto its left side, and decreasing to \u221290 degrees when the device is tilted up onto its right side:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/use_of_orientation_sensor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7275\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/use_of_orientation_sensor.png\" alt=\"use_of_orientation_sensor\" width=\"301\" height=\"175\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/use_of_orientation_sensor.png 301w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/10\/use_of_orientation_sensor-300x174.png 300w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/a><\/p>\n<p><strong>Pitch:<\/strong> 0 degree when the device is level, increasing to 90 degrees as the device is tilted so its top is pointing down, then decreasing to 0 degree as it gets turned over. Similarly, as the device is tilted so its bottom points down, pitch decreases to \u221290 degrees, then increases to 0 degree as it gets turned all the way over.<\/p>\n<p><strong>Azimuth:<\/strong> 0 degree when the top of the device is pointing north, 90 degrees when it is pointing east, 180 degrees when it is pointing south, 270 degrees when it is pointing west, etc.<\/p>\n<p>These measurements assume that the device itself is not moving. In this program wed want to use the tilt to decide whether the NXT car should turn left or right and the roll to decide whether the NXT car should move forward or backward.<\/p>\n<p>When the car is moving straight forward or backward, the power of both motors are set to 100. So when the phone tilted up on the left side, we want the car to turn right, and therefore we want the motor on the the right side (i.e. Motor C) to decrease its speed, and as the phone is tilted up on the right side, we want the car to turn left, and therefore we want the motor on the left side (i.e. Motor A) to decrease its speed.<\/p>\n<h3>How to program the remote controlled car<\/h3>\n<p>To be able to program this remote controlled car, we have to add the orientation sensor to our program.<\/p>\n<p>Here are a few hints to get you started.<\/p>\n<p>First, the orientation sensor is in the Sensors palette:<\/p>\n<p><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_sensor_menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7601\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_sensor_menu.png\" alt=\"Orientation_sensor_menu\" width=\"279\" height=\"413\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_sensor_menu.png 279w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_sensor_menu-202x300.png 202w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/><\/a><\/p>\n<p>This component is an invisible component.as shown below in the viewer:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_added.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7602\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_added.png\" alt=\"Orientation_added\" width=\"542\" height=\"373\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_added.png 677w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_added-300x206.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Orientation_added-600x412.png 600w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><\/a><\/p>\n<p>After this component is added, we can press the Blocks button to switch to the blocks editor:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/press_blocks_Button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7603\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/press_blocks_Button.png\" alt=\"press_blocks_Button\" width=\"434\" height=\"289\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/press_blocks_Button.png 543w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/press_blocks_Button-300x199.png 300w\" sizes=\"(max-width: 434px) 100vw, 434px\" \/><\/a><\/p>\n<p>When we press this button the blocks editor open and we can see the blocks available in the NXT_template:<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Open_Blcoks_editor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7605\" src=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Open_Blcoks_editor.png\" alt=\"Open_Blcoks_editor\" width=\"768\" height=\"411\" srcset=\"http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Open_Blcoks_editor.png 960w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Open_Blcoks_editor-300x160.png 300w, http:\/\/legoeng.local\/wp-content\/uploads\/2013\/12\/Open_Blcoks_editor-600x321.png 600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">And we&#8217;ll leave the rest to you! Enjoy!<\/p>\n<p style=\"text-align: left;\">\n","protected":false},"excerpt":{"rendered":"<p>MIT App Inventor is a web-based tool for creating apps for Android phones. The apps you create are stored on a server and can be downloaded to your phone or computer as well. In this tutorial, we will teach you how to create an app for your robot. You could, for example, create a simple [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":7077,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[99],"tags":[129,143],"_links":{"self":[{"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/posts\/3127"}],"collection":[{"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/comments?post=3127"}],"version-history":[{"count":0,"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/posts\/3127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/media\/7077"}],"wp:attachment":[{"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/media?parent=3127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/categories?post=3127"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/legoeng.local\/wp-json\/wp\/v2\/tags?post=3127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}