AI2: MyCalculator: A simple four-function calculator

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.

MyCalculator.aia

--
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)

--

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!.

--

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.

--

I have corrected this and attached the modified project, version 2.

--

video is all about invention of calculators

--

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.

--

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

--

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.

--

I believe Scott is away at present.

Maybe you want a Reverse Polish Calculator

?

-- 

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?

--

Abraham, something like this:

http://www.alcula.com/calculators/scientific-calculator/

--

But not to sofisticate.

--

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.

how to parse expressions

--

Thank you again Abraham for the tip. i will make.

--

How do we set up the decimal button?

--

Use my other tutorial for a basic desk calculator instead.

It supports decimal points.

--