88.113.8.125: /* CalcButton */

88.113.8.125 — Tue, 15 Jun 2010 17:05:50 GMT

CalcButton

← Older revision		Revision as of 17:05, 15 June 2010
Line 222:		Line 222:
	</source>		</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.	+	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">		<source lang="javascript">
Line 265:		Line 265:
	</source>		</source>

-	Above defines the transitions for the button.	+	Above defines the transitions for the button.
-		+

	== Calculator.js ==		== Calculator.js ==

88.113.8.125: /* Calculator.qml */

88.113.8.125 — Tue, 15 Jun 2010 17:04:54 GMT

Calculator.qml

← Older revision		Revision as of 17:04, 15 June 2010
Line 32:		Line 32:
	</source>		</source>

-	We use column layout for the numeric operations (the field that shows the ~~calcuations~~) layout, with small ~~intendation~~ (2 px) and small padding.	+	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">		<source lang="javascript">
Line 94:		Line 94:
	</source>		</source>

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

	<source lang="javascript">		<source lang="javascript">
Line 174:		Line 174:
	</source>		</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 ~~bacspace~~ to be visible, we move basic buttons a bit, we enable advanced and trigonometry buttons and move them a bit for visual candy.	+	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">		<source lang="javascript">
Line 185:		Line 185:

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

	== CalcButton ==		== CalcButton ==

amigadave: {{expand}}

amigadave — Mon, 31 May 2010 11:57:14 GMT

← Older revision		Revision as of 11:57, 31 May 2010
Line 1:		Line 1:
		+	{{expand}}
		+
	== About the Enhanced Calc Example ==		== About the Enhanced Calc Example ==

amigadave: use

amigadave — Mon, 31 May 2010 11:55:30 GMT

use <source>

Show changes

amigadave: Category:Development and Category:Qt

amigadave — Thu, 11 Feb 2010 14:57:50 GMT

Category:Development and Category:Qt

← Older revision		Revision as of 14:57, 11 February 2010
Line 345:		Line 345:
	}		}
	}		}
		+
		+	[[Category:Development]]
		+	[[Category:Qt]]

konttori: /* About the Enhanced Calc Example */

konttori — Mon, 04 Jan 2010 10:48:58 GMT

About the Enhanced Calc Example

← Older revision		Revision as of 10:48, 4 January 2010
Line 4:		Line 4:


-		+	Source code available from [http://qmlexamples.garage.maemo.org/ qml examples garage page]

	== Calculator.qml ==		== Calculator.qml ==

konttori: QML Calculator Example

konttori — Sun, 03 Jan 2010 19:56:03 GMT

QML Calculator Example

New page

== About the Enhanced Calc Example ==

See [http://www.youtube.com/watch?v=BGmw2IjLLv0&feature=player_embedded Youtube video] for demo of the app.

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

import Qt 4.6

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

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

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

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

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

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.

Item {
height:460; width: 420;

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

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.

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;}

}

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

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: "=" }
}

Normal numbers and . and = keys are in grid layout

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

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

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" }
}

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

}
}

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 }

}

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 bacspace to be visible, we move basic buttons a bit, we enable advanced and trigonometry buttons and move them a bit for visual candy.

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

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.

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 }

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.

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

Above handles the mouse clicks.

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 }

}
]

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.

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

}
Above defines the transitions for the button.

}

== Calculator.js ==

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

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";
}
}