QML-EnhancedCalcExample

About the Enhanced Calc Example

See Youtube video for demo of the app.

Source code available from qml examples garage page

Calculator.qml

The file below defines the layouts of the calculator. It uses the button below to draw nice looking button shape, that has glow effect.

<source lang="javascript"> import Qt 4.6

Rectangle {
   width: parent.width; height: 480; color: palette.window
   anchors.fill: parent;
   SystemPalette { id: palette }
   Script { source: "calculator.js" }

</source>

We use the system palette for colors and the calculator.js file for all of the calculation logic.

<source lang="javascript">

   Column {
       x: 2; spacing: 2;
       Row {
         id: numericOperations
         spacing: 2

</source>

We use column layout for the numeric operations (the field that shows the calculations) layout, with small indentation (2 px) and small padding.

<source lang="javascript">

         Rectangle {
             id: container
             width: 400; height: 55
             border.color: palette.dark; color: palette.base
 
             Text {
                 id: curNum
                 font.bold: true; font.pointSize: 22
                 color: palette.text
                 anchors.right: container.right
                 anchors.rightMargin: 5
                 anchors.verticalCenter: container.verticalCenter
             }
 
             Text {
                 id: currentOperation
                 color: palette.text
                 font.bold: true; font.pointSize: 26
                 anchors.left: container.left
                 anchors.leftMargin: 5
                 anchors.verticalCenter: container.verticalCenter
             }
             
         }
         CalcButton { operation: "Bksp"; id: bksp; opacity: 0 }
       }

</source>

The Text area for the calculations, surrounded by dark border, with two text areas: the operation and the value. The operation (e.g. "*" to signal multiplication, is anchored left, and the calculation is anchored to the right.

<source lang="javascript">

       Item {
           height:460; width: 420;

           Item {
               id: basicButtons
               x: 55; width: 460; height: 400

</source>

The above defines the compound item of the basicButtons. The actual buttons are defined below. We intend by default this with 55 so that the buttons in basic layout don't feel like they are in the left side of the screen. This padding is changed in the transition to advanced layout.

<source lang="javascript">

               Row {
                   id: commonOperations
                   spacing: 0
                   height:150
                       
                   CalcButton { 
                       operation: "Advanced"
                       id: advancedCheckBox
                       width: 160
                       toggable: true
                   }
                   CalcButton { operation: "C"; id: c; }
                   CalcButton { operation: "AC"; id: ac;}
                   
               }

</source>

Common operations to clean the calculations are on one row, along with special wider toggle button for advanced mode.

<source lang="javascript">

               Grid {
                   id: numKeypad; y:60; spacing: 0; columns: 3
                   CalcButton { operation: "7" }
                   CalcButton { operation: "8" }
                   CalcButton { operation: "9" }
                   CalcButton { operation: "4" }
                   CalcButton { operation: "5" }
                   CalcButton { operation: "6" }
                   CalcButton { operation: "1" }
                   CalcButton { operation: "2" }
                   CalcButton { operation: "3" }
                   CalcButton { operation: "0" }
                   CalcButton { operation: "." }
                   CalcButton { operation: "=" }                    
               }

</source>

Normal numbers and . and = keys are in grid layout

<source lang="javascript">

               Column {
                   id: simpleOperations
                   x: 240;  y: 60; spacing: 0
                   CalcButton { operation: "x" }
                   CalcButton { operation: "/" }
                   CalcButton { operation: "-" }
                   CalcButton { operation: "+" }
               }
           }

</source>

Basic calculation operations are in one column (for easy layouting).

<source lang="javascript">

           Grid {
               id: advancedButtons
               x: 250; spacing: 0; columns: 2; opacity: 0
               CalcButton { operation: "Abs" }
               CalcButton { operation: "Int" }
               CalcButton { operation: "MC" }
               CalcButton { operation: "Sqrt" }
               CalcButton { operation: "MR" }
               CalcButton { operation: "^2" }
               CalcButton { operation: "MS" }
               CalcButton { operation: "1/x" }
               CalcButton { operation: "M+" }
               CalcButton { operation: "+/-" }
           }
           Row {
             id: trigonometryOperations
             spacing: 0;opacity: 0;y: 280;x:40
             CalcButton { operation: "Sin" }
             CalcButton { operation: "Cos" }
             CalcButton { operation: "Tan" }
             CalcButton { operation: "Log" }
             CalcButton { operation: "e^x" }
             CalcButton { operation: "x^y" }
           }

</source>

Advanced operations are in 2x5 grid and trigonometry operations are on one row. Easy positioning of those compound elements.

<source lang="javascript">

       }
   }

   states: State {
       name: "Advanced"; when: advancedCheckBox.toggled == true
       PropertyChanges { target: basicButtons; x: 0 }
       PropertyChanges { target: bksp; opacity: 1 }
       PropertyChanges { target: commonOperations; x: 0;  }
       PropertyChanges { target: advancedButtons; x: 320; opacity: 1 }
       PropertyChanges { target: trigonometryOperations; x:0; y: 300; opacity: 1 }
       
   }

</source>

States definition for advanced mode. Basic mode doesn't need to be defined, as we have defined that already as the default mode of operation. For advanced state, we modify the backspace to be visible, we move basic buttons a bit, we enable advanced and trigonometry buttons and move them a bit for visual candy.

<source lang="javascript">

   transitions: Transition {
       NumberAnimation { matchProperties: "x,y,width"; easing: "easeOutBounce"; duration: 500 }
       NumberAnimation { matchProperties: "opacity"; easing: "easeInOutQuad"; duration: 500 }
   }
}

</source>

Above defines the animations for the transition to and from advanced mode.

CalcButton

The code below makes a button that has a glow effect when tapped on.

<source lang="javascript"> import Qt 4.6

Rectangle {
   property alias operation: label.text
   property bool toggable: false
   property bool toggled: false
   signal clicked
   id: button; width: 80; height: 60
   color: "black"      
   BorderImage {
     id: img
     width: parent.width
     height: parent.height
     border.left: 14
     border.right: 14      
     source:"Button_h.png"
     transformOrigin: Item.Center  
     
   }
   
   BorderImage {
     id: bgimg
     width: parent.width
     height: parent.height
     border.left: 14
     border.right: 14      
     source:"Button.png"  
   }
   Text { id: label; anchors.centerIn: parent; color: palette.buttonText }

</source>

On the above, we define the bg of the button and the highlight of the button. The highlight is img and the bg image is, well, bgimg.

<source lang="javascript">

   MouseRegion {
       id: clickRegion
       anchors.fill: parent
       onClicked: {
           doOp(operation);
           button.clicked();
           if (!button.toggable) return;
           button.toggled ? button.toggled = false : button.toggled = true
       }
   }

</source>

Above handles the mouse clicks.

<source lang="javascript">

   states: [
       State {
           name: "Pressed"; when: clickRegion.pressed == true
           PropertyChanges { target: img; scale: 2.0 }
           PropertyChanges { target: button; z: 1 }
           PropertyChanges { target: button.parent; z: 1 }
           PropertyChanges { target: button.parent.parent; z: 1 }
           PropertyChanges { target: img; z: 1.1 }
           PropertyChanges { target: img; opacity: 0 }
           
       }
   ]

</source>

Above defines state "pressed", which triggers the highlight to come up all the way, moves all of the parent objects also up in the stack and sets target opacity for the highlight to be 0.

<source lang="javascript">

       transitions: Transition {
           NumberAnimation { matchProperties: "z,scale"; easing: "easeOutExpo"; duration: 200 }
           NumberAnimation { matchProperties: "opacity"; easing: "easeInQuad"; duration: 300 }
           
       }

} </source>

Above defines the transitions for the button.

Calculator.js

I won't comment the javascript code. It's self explanatory.

<source lang="javascript"> var curVal = 0; var memory = 0; var lastOp = ""; var timer = 0;

function disabled(op) {

   if (op == "." && curNum.text.toString().search(/\./) != -1) {
       return true;
   } else if (op == "Sqrt" &&  curNum.text.toString().search(/-/) != -1) {
       return true;
   } else {
       return false;
   }

}

function doOp(op) {

   if (disabled(op)) {
       return;
   }

   if (op.toString().length==1 && ((op >= "0" && op <= "9") || op==".") ) {
       if (curNum.text.toString().length >= 14)
           return; // No arbitrary length numbers
       if (lastOp.toString().length == 1 && ((lastOp >= "0" && lastOp <= "9") || lastOp==".") ) {
           curNum.text = curNum.text + op.toString();
       } else {
           curNum.text = op;
       }
       lastOp = op;
       return;
   }
   lastOp = op;

   // Pending operations
   if (currentOperation.text == "+") {
       curNum.text = Number(curNum.text.valueOf()) + Number(curVal.valueOf());
   } else if (currentOperation.text == "-") {
       curNum.text = Number(curVal) - Number(curNum.text.valueOf());
   } else if (currentOperation.text == "x") {
       curNum.text = Number(curVal) * Number(curNum.text.valueOf());
   } else if (currentOperation.text == "x^y") {
       curNum.text = (Math.pow(Number(curVal),curNum.text.valueOf())).toString();
   } else if (currentOperation.text == "/") {
       curNum.text = Number(Number(curVal) / Number(curNum.text.valueOf())).toString();
   } else if (currentOperation.text == "=") {
   }

   if (op == "+" || op == "-" || op == "x" || op=="x^y" || op == "/") {
       currentOperation.text = op;
       curVal = curNum.text.valueOf();
       return;
   }
   curVal = 0;
   currentOperation.text = "";

   // Immediate operations
   if (op == "1/x") { // reciprocal
       curNum.text = (1 / curNum.text.valueOf()).toString();
   } else if (op == "^2") { // squared
       curNum.text = (curNum.text.valueOf() * curNum.text.valueOf()).toString();
   } else if (op == "Abs") {
       curNum.text = (Math.abs(curNum.text.valueOf())).toString();
   } else if (op == "Sin") {
       curNum.text = (Math.sin(curNum.text.valueOf())).toString();
   } else if (op == "Cos") {
       curNum.text = (Math.cos(curNum.text.valueOf())).toString();
   } else if (op == "Tan") {
       curNum.text = (Math.tan(curNum.text.valueOf())).toString();
   } else if (op == "Log") {
       curNum.text = (Math.log(curNum.text.valueOf())).toString();
   } else if (op == "e^x") {
       curNum.text = (Math.exp(curNum.text.valueOf())).toString();
   } else if (op == "Int") {
       curNum.text = (Math.floor(curNum.text.valueOf())).toString();
   } else if (op == "+/-") { // plus/minus
       curNum.text = (curNum.text.valueOf() * -1).toString();
   } else if (op == "Sqrt") { // square root
       curNum.text = (Math.sqrt(curNum.text.valueOf())).toString();
   } else if (op == "MC") { // memory clear
       memory = 0;
   } else if (op == "M+") { // memory increment
       memory += curNum.text.valueOf();
   } else if (op == "MR") { // memory recall
       curNum.text = memory.toString();
   } else if (op == "MS") { // memory set
       memory = curNum.text.valueOf();
   } else if (op == "Bksp") {
       curNum.text = curNum.text.toString().slice(0, -1);
   } else if (op == "C") {
       curNum.text = "0";
   } else if (op == "AC") {
       curVal = 0;
       memory = 0;
       lastOp = "";
       curNum.text ="0";
   }

} </source>