{"id":260,"date":"2014-11-05T21:11:22","date_gmt":"2014-11-06T05:11:22","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=260"},"modified":"2014-11-05T21:11:22","modified_gmt":"2014-11-06T05:11:22","slug":"tip-calculator-app-version-2-for-app-inventor","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/11\/05\/tip-calculator-app-version-2-for-app-inventor\/","title":{"rendered":"Tip Calculator App (version 2) for App Inventor"},"content":{"rendered":"<p><strong>What the App Does<\/strong><\/p>\n<p>This is a simple app to calculate the tip and total bill at a restaurant \u2013 or other service provider where a tip is common place.<\/p>\n<p>This is the second\u00a0of 3 apps that implement a tip calculator.<\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=245\">Version 1<\/a>\u00a0introduced the basic app and the use of error checking to handle user data entry mistakes.<\/li>\n<li>Version 2 (this tutorial) introduces\u00a0the <em>Slider<\/em> user interface component to select the tip amount. Using the <em>Slider<\/em>, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.<\/li>\n<li>Version 3 will introduce a way to avoid all user data entry errors \u2013 by designing the app in such a way that the user can enter only correct values.<\/li>\n<\/ul>\n<p><strong>The Tip Calculator User Interface<\/strong><\/p>\n<p>In version 2, we eliminate the text box for tip percentage and replace it with a <em>Slider<\/em> component and we use a <em>Label<\/em> component to display the current setting of the <em>Slider<\/em>. A slider is something you drag with your finger, as shown in this screen shot:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/Screenshot_2014-11-05-12-31-57.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-266\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/Screenshot_2014-11-05-12-31-57-168x300.png\" alt=\"Screenshot_2014-11-05-12-31-57\" width=\"168\" height=\"300\" \/><\/a><\/p>\n<p>We set the tip amount by putting our finger on the &#8220;thumb&#8221; and dragging the thumb left or right. &#8220;Thumb&#8221; is the name given to the moveable control that appears on the slider.<\/p>\n<p>As we drag the &#8220;thumb&#8221; control on the slider, the amount of the selected tip is shown &#8211; which is 20% in this screen shot. \u00a0Using this design with a <em>Slider<\/em>, it is impossible for someone to enter an invalid tip!<\/p>\n<p><!--more--><\/p>\n<p>The <em>Slider<\/em> component is dragged from the palette to the Viewer when in the Designer:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderUI.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-268\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderUI-128x300.png\" alt=\"TipCalculator2_SliderUI\" width=\"128\" height=\"300\" \/><\/a><\/p>\n<p>And then dropped on to the Viewer &#8211; note that the <em>Slider<\/em>\u00a0appears really small! as shown below I added a <em>VerticalArrangement<\/em>\u00a0layout first, and then dropped the slider inside the vertical layout box:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderDesigner.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-261\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderDesigner-604x1024.png\" alt=\"TipCalculator2_SliderDesigner\" width=\"384\" height=\"651\" \/><\/a><\/p>\n<p>Select the <em>Slider1<\/em> component and then change the Properties. The <em>MinValue<\/em> should be set to 0 and the <em>MaxValue<\/em> to 30 (unless you prefer to choose other values) and the <em>ThumbPosition<\/em> is set to 20 as the initial starting point. In other words, the default or assumed\u00a0tip amount is 20% before adjustment:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderProperties.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-269\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderProperties.png\" alt=\"TipCalculator2_SliderProperties\" width=\"237\" height=\"805\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Use the <em>Width<\/em> property to set the size of the Slider on the app&#8217;s screen. I chose to set it to the full screen width but it could also be set to a specific number of screen pixels.<\/p>\n<p><strong>The Blocks Code<\/strong><\/p>\n<p>When the app is running, each time the slider position is adjusted, a <em>PositionChanged<\/em> event is thrown. Our app adds a block to process the <em>PositionChanged<\/em> event:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderThumbBlocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-264\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_SliderThumbBlocks.png\" alt=\"TipCalculator2_SliderThumbBlocks\" width=\"888\" height=\"208\" \/><\/a>As the slider is adjusted by the user, the current position\u00a0is updated on the screen to show the selected tip amount. Since the range of Slider values is from 0 to 30, we use the <em>thumbPosition<\/em> property directly and copy it to the label on the screen.<\/p>\n<p>Using the <em>Slider<\/em> is quite easy!<\/p>\n<p>The remaining blocks code is simplified since we can remove\u00a0the error checking used in Version 1. Instead, we just take the <em>ThumbPosition<\/em> and divide it by 100 (to convert into a fraction &#8211; remember 20% is really 0.20) for use in the calculations.<\/p>\n<p>(Click on the image &#8211; once or twice &#8211; for a larger version)<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_Blocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-265\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator2_Blocks-1024x391.png\" alt=\"TipCalculator2_Blocks\" width=\"625\" height=\"238\" \/><\/a><\/p>\n<p><strong>Key Features Shown<\/strong><\/p>\n<ul>\n<li>Introduced the <em>Slider<\/em> user interface component<\/li>\n<li>Demonstrated how a user interface design change can eliminate a source of potential user errors<\/li>\n<\/ul>\n<p><strong>Downloads<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/source\/tutorials\/TipCalculator2_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>What the App Does This is a simple app to calculate the tip and total bill at a restaurant \u2013 or other service provider where a tip is common place. This is the second\u00a0of 3 apps that implement a tip calculator. Version 1\u00a0introduced the basic app and the use of error checking to handle user &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/11\/05\/tip-calculator-app-version-2-for-app-inventor\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Tip Calculator App (version 2) for App Inventor<\/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,14],"tags":[22,28,169],"class_list":["post-260","post","type-post","status-publish","format-standard","hentry","category-components","category-user-interfacedesign","tag-app-inventor","tag-appinventor","tag-slider"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/260","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=260"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}