{"id":337,"date":"2014-11-13T04:52:51","date_gmt":"2014-11-13T12:52:51","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=337"},"modified":"2014-11-13T04:52:51","modified_gmt":"2014-11-13T12:52:51","slug":"app-inventor-tip-calculator-version-5-fully-automated","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/11\/13\/app-inventor-tip-calculator-version-5-fully-automated\/","title":{"rendered":"App Inventor Tip Calculator version 5: Fully automated!"},"content":{"rendered":"<p><strong>What the App Does<\/strong><\/p>\n<p>This is the fifth\u00a0version\u00a0of 5 app versions\u00a0that implement a tip calculator &#8211; and the final version is\u00a0pretty cool! This app is useful &#8211; I was recently traveling and used it on my smart phone to calculate restaurant tips &#8211; I will post a short tutorial on how to install this app on your phone.<\/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><a href=\"http:\/\/appinventor.pevest.com\/?p=260\">Version 2<\/a> introduced the <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><a href=\"http:\/\/appinventor.pevest.com\/?p=296\">Version 3<\/a>\u00a0introduced an improved\u00a0user interface to eliminate user data entry errors.<\/li>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=316\">Version 4<\/a> introduces &#8220;procedures&#8221; to clean up the code in preparation for version 5.<\/li>\n<li><strong>Version 5 revises\u00a0Version 4 to make the calculation of the tip fully automatic\u00a0plus\u00a0fixes some minor oddities.<\/strong><\/li>\n<\/ul>\n<blockquote><p>In Version 5, we eliminate the &#8220;Calculate tip and total amount&#8221; button by making the calculation automatic. Each time we enter a digit or adjust the slider, the tip is calculated immediately. There is no need to press a button to do the calculation. \u00a0Just enter a bill amount and optionally adjust the slider to select a tip percentage.<\/p><\/blockquote>\n<p><strong>The Tip Calculator User Interface<\/strong><\/p>\n<p>The new user interface eliminates the Calculate button and adds\u00a0a single &#8220;Clear All&#8221; button as a quick way to reset the calculator. This sets the bill amount back to zero and the tip amount to 20%.<\/p>\n<p>Here is a view of the app in operation &#8211; the bill amount of 23.45 has been entered on the keypad and the tip amount is 20%. The tip and total bill are shown at the bottom of the screen.<\/p>\n<p>Each time any digit is entered &#8211; or the tip is adjusted &#8211; the tip and total is automatically calculated.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalc5-Screenshot_2014-11-12-17-43-32.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-341\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalc5-Screenshot_2014-11-12-17-43-32-576x1024.png\" alt=\"TipCalc5-Screenshot_2014-11-12-17-43-32\" width=\"271\" height=\"482\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><!--more--><\/p>\n<p><strong>The Designer View<\/strong><\/p>\n<p>Minor changes to the user interface are also made to fix some minor problems with the user interface. We &#8220;clean up&#8221; these problems by setting the text of the label that shows the bill amount to the null string &#8220;&#8221; (and make some minor changes to the blocks). We have also removed the old &#8220;Calculate&#8221; button and replaced it with a &#8220;Clear All&#8221; button. Finally, the original &#8220;20&#8221; % is changed to &#8220;20.0&#8221; %.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_Designer1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-339\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_Designer1.png\" alt=\"TipCalculator5_Designer\" width=\"277\" height=\"410\" \/><\/a><\/p>\n<p>The <em>Notifier1<\/em> component is no longer needed in this version of the app and has been deleted.<\/p>\n<p><strong>The Blocks Code<\/strong><\/p>\n<p><em>How do we implement the automatic tip calculator?<\/em><\/p>\n<p>First, the blocks that calculate the tip are placed into a &#8220;to&#8221; procedure, like this:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_CalcDisplayTip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-346\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_CalcDisplayTip-1024x350.png\" alt=\"TipCalculator5_CalcDisplayTip\" width=\"631\" height=\"216\" \/><\/a><\/p>\n<p><em>(Click on the above image to view a larger version &#8211; depending on your browser you can click twice to see a fully enlarged view.)<\/em><\/p>\n<p>Then, call the <em>CalculateDisplayTip<\/em> procedure each time either the slider is changed or a digit is entered. Each time the <em>PositionChanged<\/em> event occurs, we &#8220;<em>call CalculateDisplayTip<\/em>&#8220;.\u00a0<a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_BlocksPosChanged.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-345\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_BlocksPosChanged.png\" alt=\"TipCalculator5_BlocksPosChanged\" width=\"796\" height=\"232\" \/><\/a><\/p>\n<p>To update the tip calculation when digits are entered, a &#8220;<em>call CalculateDisplayTip<\/em>&#8221; block is added to <em>UpdateDisplay<\/em>. \u00a0Since each button &#8220;<em>Click<\/em>&#8221; handler calls <em>UpdateDisplay<\/em>, the screen is automatically updated\u00a0each time a digit button is pressed.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_BlocksCalcDisplay.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-344\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_BlocksCalcDisplay-1024x499.png\" alt=\"TipCalculator5_BlocksCalcDisplay\" width=\"625\" height=\"304\" \/><\/a><\/p>\n<p>In version 4, there is a minor problem &#8211; deleting numbers can lead to an extra &#8220;0&#8221; zero on the display. To clean up this code, the event handler for the <em>del<\/em> button is improved as shown here &#8211; if everything has been deleted (or\u00a0the length of the <em>AmountBilled<\/em> string is 0), then the <em>AmountBilled<\/em> is set to the null string &#8220;&#8221; instead of &#8220;0&#8221;.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_BtnDel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-347\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_BtnDel-1024x379.png\" alt=\"TipCalculator5_BtnDel\" width=\"625\" height=\"231\" \/><\/a><\/p>\n<p>Finally, the &#8220;Clear All&#8221; button is implemented to set <em>AmountBilled<\/em> to the null string and reset the slider to &#8220;20%&#8221;.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_btnClearAll.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-348\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator5_btnClearAll.png\" alt=\"TipCalculator5_btnClearAll\" width=\"390\" height=\"139\" \/><\/a><\/p>\n<p>There are still some minor problems with this app. For example, with the slider set to a minimum tip of 0% and a maximum of 30%, when you slide it around, you cannot force the fractional percentages to land on whole numbers as you move the thumb. There is an easy fix for this that you can implement on your own &#8211; in the <em>PositionChanged<\/em> handler, use the <em>round<\/em> math block\u00a0to adjust the <em>thumbPosition<\/em> values to whole numbers. A value of 20.1% would be converted to 20%. Give it a try!<\/p>\n<p><strong>Key Features Shown<\/strong><\/p>\n<ul>\n<li>Version 5\u00a0enhances the newer user interface design by eliminating the &#8220;Calculate&#8221; button. This shows how a re-thinking of the original design can lead to a much improved program. Now, user data entry errors are no longer possible. Plus, the program is simplified by elimination of the &#8220;Calculate&#8221; button and\u00a0making the tip calculation automatic.<\/li>\n<\/ul>\n<p><strong>Summary of Versions 1 to 5<\/strong><\/p>\n<ul>\n<li>Version 1 used a simple user interface to quickly build an App Inventor app. This &#8220;simple&#8221; user interface worked but required checks for possible data entry errors by the user.<\/li>\n<li>Version 2 replaced the entry of a tip value with a <em>slider control <\/em>for selecting a tip percentage<em>. This user interface improvement eliminated the possibility of a data entry error for the tip percentage.<\/em><\/li>\n<li>Version 3 removed the <em>Amount Billed<\/em> text entry and replaced this with a numeric key pad. This redesigned user interface eliminated data entry errors completely.<\/li>\n<li>Version 4 cleaned up the code by &#8220;re-factoring&#8221; the blocks into <em>procedures<\/em>, which reduced\u00a0the duplicated code.<\/li>\n<li>Version 5 made an additional improvement to the user interface by making the tip calculation automatic. \u00a0The automatic version eliminates the &#8220;Calculate Tip&#8221; button by automatically calculating the tip as each digit is entered or if the tip value is changed with the slider. Because we had re-factored the app in to &#8220;procedures&#8221;, adding the automatic calculation feature was easy &#8211; just create the <em>CalculateDisplayTip<\/em> procedure and call it from two places in the existing code &#8211; and we are done! \u00a0Subdividing a complex problem into sub-problems is an important part of software design and implementation.<\/li>\n<\/ul>\n<p>This tutorial introduced new App Inventor features &#8211; and introduced the idea of evolving a design to a better design, both in terms of the code (by using procedures) and in terms of the user interface (replacing the original text input with a slider and a numeric keypad).<\/p>\n<p><strong>Downloads<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/source\/tutorials\/TipCalculator5_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<p><strong>Please Share on Social Media<\/strong><\/p>\n<p>Please click on the buttons below this post to share with your friends on Facebook or other social media.<\/p>\n<p>If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!<\/p>\n<p><a href=\"https:\/\/www.facebook.com\/appinventor2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/facebook-like.png\" alt=\"\" width=\"150\" \/><\/a><a href=\"https:\/\/plus.google.com\/107302082825289724871\/posts\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/plus-badge.png\" alt=\"\" width=\"48\" \/><\/a><a href=\"http:\/\/twitter.com\/appinventorplus\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/twitter-follow.png\" alt=\"\" width=\"100\" \/><\/a><a href=\"http:\/\/appinventor.pevest.com\/?feed=rss2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/rss.png\" alt=\"\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What the App Does This is the fifth\u00a0version\u00a0of 5 app versions\u00a0that implement a tip calculator &#8211; and the final version is\u00a0pretty cool! This app is useful &#8211; I was recently traveling and used it on my smart phone to calculate restaurant tips &#8211; I will post a short tutorial on how to install this app &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/11\/13\/app-inventor-tip-calculator-version-5-fully-automated\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">App Inventor Tip Calculator version 5: Fully automated!<\/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,13,14],"tags":[],"class_list":["post-337","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method","category-tips","category-user-interfacedesign"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/337","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=337"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}