AI2: MyCalculator: A simple four-function calculator

14,854 views
Skip to first unread message

Scott Ferguson

unread,
Aug 1, 2014, 8:35:41 PM8/1/14
to

2014-08-01:

When a digit is entered after equals buton is pressed, the result is cleared before displaying the digit.

This fixes the bug where the digit was appended to the result.




2013-11-23:

Added C (clear) button explanation.

---



This calculator is a good exercise in using some of the basic features and blocks of App Inventor 2.
It supports entering whole positive numbers only to keep things as simple as possible, but does provide some error handling without too much fuss.
The four functions add, subtract, multiply, divide are supported.
Chain calculations can be done as follows: 3 + 4 = (7 is displayed) * 3 = (21 is displayed) etc.

You may either download the aia project or recreate it with the following instructions.

Start MIT App Inventor 2 and give your project the name MyCalculator

Designer

In the Designer, Set the Screen Title to My Calculator
Uncheck Scrollable.

Calculator Display:

Create a label named DisplayLBL
Set it's properties as follows:
BackgroundColor Black
FontBold checked
FontSize 48
Text (empty)
TextAlignment right
TextColor Cyan

Numeric Keypad:

I chose to use the cell phone keypad layout rather than the traditional calculator layout. 

Below this put a VerticalArrangment set to Fill parent in width and height

Inside the VSA put four HorizontalArrangements
Set each to Fill parent in width and height

Inside each HSA put four buttons (16 buttons in all)

Set each button's Text as follows:
1,2,3,+
4,5,6,-
7,8,9,x
C,0,=,/

Rename these buttons as follows:
OneBTN,TwoBTN,ThreeBTN,AddBTN
FourBTN,FiveBTN,SixBTN,SubtractBTN
SevenBTN,EightBTN,NineBTN,MultiplyBTN
ClearBTN,ZeroBTN,EqualsBTN,DivideBTN

Then set each button's Width and Height to Fill parent

That is all for the Designer!
Your Viewer pane in the Designer should look like this:


Blocks Editor

Now switch to the Blocks editor

Drag out ten Button Click blocks -- one for each of the digits 0 to 9.

Consider what happens when the user touches one of the digit buttons.
Suppose DisplayLBL.Text contains 45 and the user touches the 6 button.
You want 456 to display. This can be done with the 'join' Text block.

You can write blocks inside each of the digit click blocks to do this, but a more efficient way is by using a reusable procedure block.

Here is how to make a reusable procedure that can be called from each of the ZeroBTN to NineBTN Click blocks to join digits to the number in DisplayLBL.Text.

In the Blocks panel, Procedures section, drag out a 'to procedure do' block
Rename it to AddDigit
Add an argument named digit to this procedure to allow us to pass the value of the digit pressed.
Inside the procedure place a 'set DisplayLBL.Text to' block.
Attach a Text 'join' block to this.
Inside the join block put a 'DisplayLBL.Text' and a 'get digit' block.
The procedure should look like this:

Now we can add a call to this reusable procedure in each of our digit button blocks.

Here is what the OneBTN.Click block looks like with a call to AddDigit. Do this for ZeroBTN.Click to NineBTN.Click as well.


At this point the user can type digits into the display.

We now need to be able to perform an arithmetic calculation based on two operands and an operator.

The user touches the digit buttons (ZeroBTN to NineBTN) for Operand1 first, then touches an Operator button(AddBTN,SubtractBTN,MulitplyBTN,DivideBTN), then digit buttons for Operand2, and finally the EqualsBTN.

Create three global variables:

Operand1, Operator, Operand2

Set their default values to Empty Text.

Suppose the user has typed in a number for Operand1, then touched an Operator button.

We need to save the typed number in DisplayLBL.Text in Operand1, clear the text in DisplayLBL.Text and remember what Operator was touched.

After the user has typed in Operand2  into DisplayLBL then pressed the EqualsBTN button we can determine what arithmetic operation to perform by looking at the saved Operator.

Create a procedure called SetOperator with an argument operator.

When this procedure is called from one of the four operator Click blocks (AddBTN.Click,SubtractBTN.Click,MultiplyBTN.Click,DivideBTN.Click):

  • Operand1 will contain the first number typed in
  • DisplayLBL.Text will be emptied for the next number to be entered
  • The operator symbol will be saved in global Operator variable



Here is a call to SetOperator from the SubtractBTN.Click block. Repeat this for the AddBTN.Click, MultiplyBTN.Click and DivideBTN.Click blocks:

Finally, when the user touches the = symbol button, the EqualsBTN.Click block is triggered.

At this point we need to store the contents of DisplayLBL.Text in global Operand2.

Next we need to determine what operation to perform based on the symbol stored in global Operator.

This is accomplished with 'if then else blocks' that return the calculated value to DisplayLBL.Text

The blocks to do this are as follows:


The initial blocks in EqualsBTN.Click make sure that there are numbers in the operand and operator variables. This is one example of error handling.

Finally, the C (clear) button clears the display and resets the variables:


At this point you can test your project. If there are errors, compare it to the attached project.

---

END



MyCalculator.aia

Lorenzo Poerio Piterà

unread,
Dec 8, 2013, 1:10:05 PM12/8/13
to app-inventor-de...@googlegroups.com
Thank you very much Scott for your post.

I'd like to ask you an extension to your tutorial to test Storage.
Would you please add an example of Log of all 
input and output to test TinyDB?

Or maybe you can suggest an example (url)

Thank you again,

Lorenzo

Scott Ferguson

unread,
Dec 8, 2013, 9:24:59 PM12/8/13
to app-inventor-de...@googlegroups.com
I have worked on that somewhat but it is a much more complex app when testing Components. I may create several apps linked by a menu app - each focused on a component category such as User Interface or Storage (which contains TinyDB).
Your question was the spark that I needed to figure out how to do it in a manageable way, so thanks!.
---
hAPPy INVENTORing!

Ricardo González Viera

unread,
Aug 1, 2014, 2:55:30 AM8/1/14
to app-inventor-de...@googlegroups.com
Hi Scott, thanks you for this tutorial, is really usefull. I have a question: when I do an operation the result appear in the screen, but when I press another number, it add to the result appeared after the operation, are there a form that the result disappear when I press another number? I'm trying to do it but can't found the form. Thanks you again and sorry about my bad explanation, I'm Spanish and my english is not so good. If you have a question about my problem, you don't have any doubt to ask me.

Scott Ferguson

unread,
Aug 1, 2014, 8:36:37 PM8/1/14
to app-inventor-de...@googlegroups.com
I have corrected this and attached the modified project, version 2.
---
sf

nivedit...@jsw.in

unread,
Jan 29, 2015, 4:18:18 AM1/29/15
to app-inventor-de...@googlegroups.com
vedio is all about invention of calculators

On Thursday, January 29, 2015 at 2:47:18 PM UTC+5:30, nivedit...@jsw.in wrote:


<iframe width="560" height="315" src="https://www.youtube.com/embed/8OZQrm9kuAo" frameborder="0" allowfullscreen></iframe>


Watch it



Watch my good vedios

Pls give your feed back through your LIKES. & COMMENTS

do SUBSCRIBE for more informative vedio



https://www.youtube.com/playlist?list=PLkx_Oenh09_5_7DJf9FJmRKsDUa5QV-fe

Scott Ferguson

unread,
Feb 5, 2015, 4:47:27 AM2/5/15
to app-inventor-de...@googlegroups.com
I could not get the link to work but found the video on your page: http://youtu.be/9-qACTNl-x0?list=PLkx_Oenh09_5_7DJf9FJmRKsDUa5QV-fe
That worked for me.
I used a Hewlett Packard calculator similar to the one you show in the video for a physics class.
It had no equals button but used reverse polish notation to enter formulas with an Enter button.
A bit of a learning curve to use but it did not require entering braces or parenthese if you entered the formula by following the order of operations.
I also see the possibility of an App Inventor user making a simulation of the mechanical calculator or perhaps a mechanical adding machine.
Thanks for the video.
---
sf

Igor Chaves

unread,
Apr 16, 2015, 9:30:45 AM4/16/15
to app-inventor-de...@googlegroups.com
Scott,

You could show how this correction was in its second version.

Regards,

Igor

Igor Chaves

unread,
Apr 17, 2015, 5:57:16 PM4/17/15
to app-inventor-de...@googlegroups.com
Hello Scott,

I'm developing a similar application with your but I would go showing the command line values that are entered and only after the equal button is pressed, the values would be calculated and the result shown. i'm just broke my head with this but could not yet reach a conclusion. Maybe you have any idea what you can give me.

Regards,

Igor.

Em sexta-feira, 1 de agosto de 2014 21:36:37 UTC-3, Scott Ferguson escreveu:

Abraham Getzler

unread,
Apr 17, 2015, 6:57:55 PM4/17/15
to app-inventor-de...@googlegroups.com
I believe Scott is away at present.
Maybe you want a Reverse Polish Calculator
?
ABG



--
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Igor Chaves

unread,
Apr 17, 2015, 7:15:43 PM4/17/15
to app-inventor-de...@googlegroups.com
Hello Abraham, thanks again for the answers.
My idea came from own calculator that comes with the android system cell, where the values are entered and being shown simultaneously on the display and when you press the equal key, the result is shown. I do not got to repair if it works this way RPN that you mentioned, but I think so.
I tried using lists to store the values and go showing them on the display but without results.
Any idea?

Regards,

Igor
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-developers-library+unsubscribe@googlegroups.com.

Igor Chaves

unread,
Apr 17, 2015, 10:43:18 PM4/17/15
to app-inventor-de...@googlegroups.com

Igor Chaves

unread,
Apr 17, 2015, 10:45:48 PM4/17/15
to app-inventor-de...@googlegroups.com
But not to sofisticated.

Abraham Getzler

unread,
Apr 18, 2015, 9:41:18 PM4/18/15
to app-inventor-de...@googlegroups.com
You should start this discussion in the regular App Inventor board when you have
blocks to show.  This board is more of a library for completed solutions than a help desk.

In the meantime, here is a web search term for what you might want.

ABG


But not to sofisticated.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.

Igor Chaves

unread,
Apr 19, 2015, 9:11:47 AM4/19/15
to app-inventor-de...@googlegroups.com
Thank you again Abraham for the tip. i will make.

Igor.
But not to sofisticated.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-developers-library+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-developers-library+unsubscribe@googlegroups.com.

nivedit...@jsw.in

unread,
Jan 29, 2015, 4:17:18 AM1/29/15
to app-inventor-de...@googlegroups.com

shelley...@ksd403.org

unread,
May 2, 2016, 6:14:06 PM5/2/16
to App Inventor Developers Library
How do we set up the decimal button?

Scott Ferguson

unread,
May 2, 2016, 9:26:25 PM5/2/16
to App Inventor Developers Library
Use my other tutorial for a basic desk calculator instead.
It supports decimal points.
---
Reply all
Reply to author
Forward
0 new messages