summaryrefslogtreecommitdiffstats
path: root/demos/declarative
diff options
context:
space:
mode:
Diffstat (limited to 'demos/declarative')
-rw-r--r--demos/declarative/calculator/CalcButton.qml41
-rw-r--r--demos/declarative/calculator/Core/Button.qml39
-rw-r--r--demos/declarative/calculator/Core/Display.qml27
-rw-r--r--demos/declarative/calculator/Core/calculator.js91
-rw-r--r--demos/declarative/calculator/Core/images/button-.pngbin0 -> 1288 bytes
-rw-r--r--demos/declarative/calculator/Core/images/button-blue.pngbin0 -> 1565 bytes
-rw-r--r--demos/declarative/calculator/Core/images/button-green.pngbin0 -> 1543 bytes
-rw-r--r--demos/declarative/calculator/Core/images/button-purple.pngbin0 -> 1566 bytes
-rw-r--r--demos/declarative/calculator/Core/images/button-red.pngbin0 -> 1586 bytes
-rw-r--r--demos/declarative/calculator/Core/images/display.pngbin0 -> 998 bytes
-rw-r--r--demos/declarative/calculator/Core/qmldir2
-rw-r--r--demos/declarative/calculator/calculator.js87
-rw-r--r--demos/declarative/calculator/calculator.qml178
13 files changed, 238 insertions, 227 deletions
diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml
deleted file mode 100644
index a125346..0000000
--- a/demos/declarative/calculator/CalcButton.qml
+++ /dev/null
@@ -1,41 +0,0 @@
-import Qt 4.7
-
-Rectangle {
- property alias operation: label.text
- property bool toggable: false
- property bool toggled: false
- signal clicked
-
- id: button; width: 50; height: 30
- border.color: palette.mid; radius: 6
- gradient: Gradient {
- GradientStop { id: gradientStop1; position: 0.0; color: Qt.lighter(palette.button) }
- GradientStop { id: gradientStop2; position: 1.0; color: palette.button }
- }
-
- Text { id: label; anchors.centerIn: parent; color: palette.buttonText }
-
- MouseArea {
- id: clickRegion
- anchors.fill: parent
- onClicked: {
- doOp(operation);
- button.clicked();
- if (!button.toggable) return;
- button.toggled ? button.toggled = false : button.toggled = true
- }
- }
-
- states: [
- State {
- name: "Pressed"; when: clickRegion.pressed == true
- PropertyChanges { target: gradientStop1; color: palette.dark }
- PropertyChanges { target: gradientStop2; color: palette.button }
- },
- State {
- name: "Toggled"; when: button.toggled == true
- PropertyChanges { target: gradientStop1; color: palette.dark }
- PropertyChanges { target: gradientStop2; color: palette.button }
- }
- ]
-}
diff --git a/demos/declarative/calculator/Core/Button.qml b/demos/declarative/calculator/Core/Button.qml
new file mode 100644
index 0000000..8948adc
--- /dev/null
+++ b/demos/declarative/calculator/Core/Button.qml
@@ -0,0 +1,39 @@
+import Qt 4.7
+
+BorderImage {
+ id: button
+
+ property alias operation: buttonText.text
+ property string color: ""
+
+ signal clicked
+
+ source: "images/button-" + color + ".png"; clip: true
+ border { left: 10; top: 10; right: 10; bottom: 10 }
+
+ Rectangle {
+ id: shade
+ anchors.fill: button; radius: 10; color: "black"; opacity: 0
+ }
+
+ Text {
+ id: buttonText
+ anchors.centerIn: parent; anchors.verticalCenterOffset: -1
+ font.pixelSize: parent.width > parent.height ? parent.height * .5 : parent.width * .5
+ style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
+ }
+
+ MouseArea {
+ id: mouseArea
+ anchors.fill: parent
+ onClicked: {
+ doOp(operation)
+ button.clicked()
+ }
+ }
+
+ states: State {
+ name: "pressed"; when: mouseArea.pressed == true
+ PropertyChanges { target: shade; opacity: .4 }
+ }
+}
diff --git a/demos/declarative/calculator/Core/Display.qml b/demos/declarative/calculator/Core/Display.qml
new file mode 100644
index 0000000..b98c44b
--- /dev/null
+++ b/demos/declarative/calculator/Core/Display.qml
@@ -0,0 +1,27 @@
+import Qt 4.7
+
+BorderImage {
+ id: image
+
+ property alias text : displayText.text
+ property alias currentOperation : operationText
+
+ source: "images/display.png"
+ border { left: 10; top: 10; right: 10; bottom: 10 }
+
+ Text {
+ id: displayText
+ anchors {
+ right: parent.right; verticalCenter: parent.verticalCenter; verticalCenterOffset: -1
+ rightMargin: 6; left: operationText.right
+ }
+ font.pixelSize: parent.height * .6; text: "0"; horizontalAlignment: Text.AlignRight; elide: Text.ElideRight
+ color: "#343434"; smooth: true; font.bold: true
+ }
+ Text {
+ id: operationText
+ font.bold: true; font.pixelSize: parent.height * .7
+ color: "#343434"; smooth: true
+ anchors { left: parent.left; leftMargin: 6; verticalCenterOffset: -3; verticalCenter: parent.verticalCenter }
+ }
+}
diff --git a/demos/declarative/calculator/Core/calculator.js b/demos/declarative/calculator/Core/calculator.js
new file mode 100644
index 0000000..2b19de8
--- /dev/null
+++ b/demos/declarative/calculator/Core/calculator.js
@@ -0,0 +1,91 @@
+
+var curVal = 0
+var memory = 0
+var lastOp = ""
+var timer = 0
+
+function disabled(op) {
+ if (op == "." && display.text.toString().search(/\./) != -1) {
+ return true
+ } else if (op == squareRoot && display.text.toString().search(/-/) != -1) {
+ return true
+ } else {
+ return false
+ }
+}
+
+function doOperation(op) {
+ if (disabled(op)) {
+ return
+ }
+
+ if (op.toString().length==1 && ((op >= "0" && op <= "9") || op==".") ) {
+ if (display.text.toString().length >= 14)
+ return; // No arbitrary length numbers
+ if (lastOp.toString().length == 1 && ((lastOp >= "0" && lastOp <= "9") || lastOp == ".") ) {
+ display.text = display.text + op.toString()
+ } else {
+ display.text = op
+ }
+ lastOp = op
+ return
+ }
+ lastOp = op
+
+ if (display.currentOperation.text == "+") {
+ display.text = Number(display.text.valueOf()) + Number(curVal.valueOf())
+ } else if (display.currentOperation.text == "-") {
+ display.text = Number(curVal) - Number(display.text.valueOf())
+ } else if (display.currentOperation.text == multiplication) {
+ display.text = Number(curVal) * Number(display.text.valueOf())
+ } else if (display.currentOperation.text == division) {
+ display.text = Number(Number(curVal) / Number(display.text.valueOf())).toString()
+ } else if (display.currentOperation.text == "=") {
+ }
+
+ if (op == "+" || op == "-" || op == multiplication || op == division) {
+ display.currentOperation.text = op
+ curVal = display.text.valueOf()
+ return
+ }
+
+ curVal = 0
+ display.currentOperation.text = ""
+
+ if (op == "1/x") {
+ display.text = (1 / display.text.valueOf()).toString()
+ } else if (op == "^2") {
+ display.text = (display.text.valueOf() * display.text.valueOf()).toString()
+ } else if (op == "Abs") {
+ display.text = (Math.abs(display.text.valueOf())).toString()
+ } else if (op == "Int") {
+ display.text = (Math.floor(display.text.valueOf())).toString()
+ } else if (op == plusminus) {
+ display.text = (display.text.valueOf() * -1).toString()
+ } else if (op == squareRoot) {
+ display.text = (Math.sqrt(display.text.valueOf())).toString()
+ } else if (op == "mc") {
+ memory = 0;
+ } else if (op == "m+") {
+ memory += display.text.valueOf()
+ } else if (op == "mr") {
+ display.text = memory.toString()
+ } else if (op == "m-") {
+ memory = display.text.valueOf()
+ } else if (op == leftArrow) {
+ display.text = display.text.toString().slice(0, -1)
+ } else if (op == "C") {
+ display.text = "0"
+ } else if (op == "AC") {
+ curVal = 0
+ memory = 0
+ lastOp = ""
+ display.text ="0"
+ }
+
+ if (op == rotateLeft)
+ main.state = 'rotated'
+ if (op == rotateRight)
+ main.state = ''
+}
+
diff --git a/demos/declarative/calculator/Core/images/button-.png b/demos/declarative/calculator/Core/images/button-.png
new file mode 100644
index 0000000..544e514
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-.png
Binary files differ
diff --git a/demos/declarative/calculator/Core/images/button-blue.png b/demos/declarative/calculator/Core/images/button-blue.png
new file mode 100644
index 0000000..5f92de3
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-blue.png
Binary files differ
diff --git a/demos/declarative/calculator/Core/images/button-green.png b/demos/declarative/calculator/Core/images/button-green.png
new file mode 100644
index 0000000..36c9391
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-green.png
Binary files differ
diff --git a/demos/declarative/calculator/Core/images/button-purple.png b/demos/declarative/calculator/Core/images/button-purple.png
new file mode 100644
index 0000000..347cbbe
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-purple.png
Binary files differ
diff --git a/demos/declarative/calculator/Core/images/button-red.png b/demos/declarative/calculator/Core/images/button-red.png
new file mode 100644
index 0000000..3b33589
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-red.png
Binary files differ
diff --git a/demos/declarative/calculator/Core/images/display.png b/demos/declarative/calculator/Core/images/display.png
new file mode 100644
index 0000000..9507f43
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/display.png
Binary files differ
diff --git a/demos/declarative/calculator/Core/qmldir b/demos/declarative/calculator/Core/qmldir
new file mode 100644
index 0000000..a926b93
--- /dev/null
+++ b/demos/declarative/calculator/Core/qmldir
@@ -0,0 +1,2 @@
+Button Button.qml
+Display Display.qml
diff --git a/demos/declarative/calculator/calculator.js b/demos/declarative/calculator/calculator.js
deleted file mode 100644
index f172daf..0000000
--- a/demos/declarative/calculator/calculator.js
+++ /dev/null
@@ -1,87 +0,0 @@
-
-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 doOperation(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 == "/") {
- curNum.text = Number(Number(curVal) / Number(curNum.text.valueOf())).toString();
- } else if (currentOperation.text == "=") {
- }
-
- if (op == "+" || op == "-" || op == "x" || 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 == "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";
- }
-}
-
diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml
index b8e506e..fc2b95a 100644
--- a/demos/declarative/calculator/calculator.qml
+++ b/demos/declarative/calculator/calculator.qml
@@ -1,126 +1,106 @@
import Qt 4.7
-import "calculator.js" as CalcEngine
+import "Core"
+import "Core/calculator.js" as CalcEngine
Rectangle {
- width: 320; height: 270; color: palette.window
+ id: window
- function doOp(operation) { CalcEngine.doOperation(operation); }
+ width: 480; height: 360
+ color: "#282828"
- SystemPalette { id: palette }
+ property string rotateLeft: "\u2939"
+ property string rotateRight: "\u2935"
+ property string leftArrow: "\u2190"
+ property string division : "\u00f7"
+ property string multiplication : "\u00d7"
+ property string squareRoot : "\u221a"
+ property string plusminus : "\u00b1"
- Column {
- x: 2; spacing: 10;
+ function doOp(operation) { CalcEngine.doOperation(operation) }
- Rectangle {
- id: container
- width: 316; height: 50
- border.color: palette.dark; color: palette.base
+ Item {
+ id: main
+ state: (runtime.orientation == Orientation.Portrait) ? '' : 'rotated'
+ width: parent.width; height: parent.height; anchors.centerIn: parent
- Text {
- id: curNum
- font.bold: true; font.pointSize: 16
- color: palette.text
- anchors.right: container.right
- anchors.rightMargin: 5
- anchors.verticalCenter: container.verticalCenter
- }
+ Column {
+ id: box; spacing: 8
- Text {
- id: currentOperation
- color: palette.text
- font.bold: true; font.pointSize: 16
- anchors.left: container.left
- anchors.leftMargin: 5
- anchors.verticalCenter: container.verticalCenter
- }
- }
+ anchors { fill: parent; topMargin: 6; bottomMargin: 6; leftMargin: 6; rightMargin: 6 }
- Item {
- width: 320; height: 30
-
- CalcButton {
- id: advancedCheckBox
- x: 55; width: 206
- operation: "Advanced Mode"
- toggable: true
+ Row {
+ Display { id: display; width: box.width; height: 64 }
}
- }
- Item {
- width: 320; height: 160
+ Column {
+ id: column; spacing: 6
- Item {
- id: basicButtons
- x: 55; width: 160; height: 160
+ property real h: ((box.height - 72) / 6) - ((spacing * (6 - 1)) / 6)
- CalcButton { operation: "Bksp"; id: bksp; width: 67; opacity: 0 }
- CalcButton { operation: "C"; id: c; width: 76 }
- CalcButton { operation: "AC"; id: ac; x: 78; width: 76 }
-
- Grid {
- id: numKeypad; y: 32; spacing: 2; 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" }
+ Row {
+ spacing: 6
+ property real w: (box.width / 4) - ((spacing * (4 - 1)) / 4)
+
+ Button {
+ id: rotateButton
+ width: parent.w; height: column.h; color: 'purple'; operation: rotateLeft
+ }
+ Button { width: parent.w; height: column.h; color: 'purple'; operation: leftArrow }
+ Button { width: parent.w; height: column.h; color: 'purple'; operation: "C" }
+ Button { width: parent.w; height: column.h; color: 'purple'; operation: "AC" }
}
Row {
- y: 128; spacing: 2
+ spacing: 6
+ property real w: (box.width / 4) - ((spacing * (4 - 1)) / 4)
- CalcButton { operation: "0"; width: 50 }
- CalcButton { operation: "."; x: 77; width: 50 }
- CalcButton { operation: "="; id: equals; x: 77; width: 102 }
+ Button { width: parent.w; height: column.h; color: 'green'; operation: "mc" }
+ Button { width: parent.w; height: column.h; color: 'green'; operation: "m+" }
+ Button { width: parent.w; height: column.h; color: 'green'; operation: "m-" }
+ Button { width: parent.w; height: column.h; color: 'green'; operation: "mr" }
}
- Column {
- id: simpleOperations
- x: 156; y: 0; spacing: 2
-
- CalcButton { operation: "x" }
- CalcButton { operation: "/" }
- CalcButton { operation: "-" }
- CalcButton { operation: "+" }
+ Grid {
+ id: grid; rows: 4; columns: 5; spacing: 6
+
+ property real w: (box.width / columns) - ((spacing * (columns - 1)) / columns)
+
+ Button { width: grid.w; height: column.h; operation: "7"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "8"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "9"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: division }
+ Button { width: grid.w; height: column.h; operation: squareRoot }
+ Button { width: grid.w; height: column.h; operation: "4"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "5"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "6"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: multiplication }
+ Button { width: grid.w; height: column.h; operation: "x^2" }
+ Button { width: grid.w; height: column.h; operation: "1"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "2"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "3"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "-" }
+ Button { width: grid.w; height: column.h; operation: "1/x" }
+ Button { width: grid.w; height: column.h; operation: "0"; color: 'blue' }
+ Button { width: grid.w; height: column.h; operation: "." }
+ Button { width: grid.w; height: column.h; operation: plusminus }
+ Button { width: grid.w; height: column.h; operation: "+" }
+ Button { width: grid.w; height: column.h; operation: "="; color: 'red' }
}
}
-
- Grid {
- id: advancedButtons
- x: 350; spacing: 2; 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: "+/-" }
- }
}
- }
- states: State {
- name: "Advanced"; when: advancedCheckBox.toggled == true
- PropertyChanges { target: basicButtons; x: 0 }
- PropertyChanges { target: simpleOperations; y: 32 }
- PropertyChanges { target: bksp; opacity: 1 }
- PropertyChanges { target: c; x: 69; width: 67 }
- PropertyChanges { target: ac; x: 138; width: 67 }
- PropertyChanges { target: equals; width: 50 }
- PropertyChanges { target: advancedButtons; x: 210; opacity: 1 }
- }
+ states: State {
+ name: 'rotated'
+ PropertyChanges { target: main; rotation: -90; width: window.height; height: window.width }
+ PropertyChanges { target: rotateButton; operation: rotateRight }
+ }
- transitions: Transition {
- NumberAnimation { properties: "x,y,width"; easing.type: "OutBounce"; duration: 500 }
- NumberAnimation { properties: "opacity"; easing.type: "InOutQuad"; duration: 500 }
+ transitions: Transition {
+ SequentialAnimation {
+ PropertyAction { target: rotateButton; property: "operation" }
+ NumberAnimation { properties: "rotation"; duration: 300; easing.type: "InOutQuint" }
+ NumberAnimation { properties: "x,y,width,height"; duration: 300; easing.type: "InOutQuint" }
+ }
+ }
}
}
generated by cgit v0.12 at 2024-12-26 20:52:21 (GMT)