Merge lp:~zsombi/ubuntu-ui-toolkit/calculator-example into lp:ubuntu-ui-toolkit

[Zsombor Egri]

Calculator example which turns from simple calculator (phone portrait mode) into scientific one (phone landscape mode) reflecting the use of Ubuntu.Layouts.

[lp:~zsombi/ubuntu-ui-toolkit/calculator-example]

567. By Zsombor Egri on 2013-07-02

makefile removed; pro-file added to fix application installation; desktop file corrected

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:567
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/257/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/114/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/114/console

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/257/rebuild

review: Needs Fixing (continuous-integration)

[lp:~zsombi/ubuntu-ui-toolkit/calculator-example]

568. By Zsombor Egri on 2013-07-02

license headers updated

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:568
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/258/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/115/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/115
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/115/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/258/rebuild

review: Needs Fixing (continuous-integration)

[lp:~zsombi/ubuntu-ui-toolkit/calculator-example]

569. By Zsombor Egri on 2013-07-03

trunk merge

570. By Zsombor Egri on 2013-07-03

memory indication added

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:570
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/263/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/120
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/120
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/120/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/263/rebuild

review: Approve (continuous-integration)

[Tim Peeters (tpeeters)]

on desktop, the text is very tiny, can we scale the text with the buttons?

[Tim Peeters (tpeeters)]

why add this example? We have a calculator app https://wiki.ubuntu.com/Touch/CoreApps/Calculator

[Tim Peeters (tpeeters)]

why do you have a Flickable? The buttons resize to fit in the view without flicking.

[Zsombor Egri (zsombi)]

> on desktop, the text is very tiny, can we scale the text with the buttons?

Button label cannot be enlarged only with creating a different style for it.

[Zsombor Egri (zsombi)]

> why add this example? We have a calculator app
> https://wiki.ubuntu.com/Touch/CoreApps/Calculator

As we discussed, the app we have does not forbid us to create a simplier one to illustrate what we can do with certain SDK building blocks.

[Zsombor Egri (zsombi)]

> why do you have a Flickable? The buttons resize to fit in the view without
> flicking.

Without Flickable the content goes below the Header :(. Haven't found a better way atm to circumvent that...

=== added directory 'examples/calculator'
=== added file 'examples/calculator/calculator.desktop'
--- examples/calculator/calculator.desktop	1970-01-01 00:00:00 +0000
+++ examples/calculator/calculator.desktop	2013-07-03 06:43:28 +0000
@@ -0,0 +1,8 @@
+[Desktop Entry]
+Name=calculator
+Comment=My project description
+Exec=/usr/bin/qmlscene $@ /usr/lib/ubuntu-ui-toolkit/examples/calculator/calculator.qml
+Icon=qmlscene
+Terminal=false
+Type=Application
+X-Ubuntu-Touch=true

=== added file 'examples/calculator/calculator.pro'
--- examples/calculator/calculator.pro	1970-01-01 00:00:00 +0000
+++ examples/calculator/calculator.pro	2013-07-03 06:43:28 +0000
@@ -0,0 +1,18 @@
+TEMPLATE = subdirs
+
+filetypes = qml png svg js qmltheme jpg qmlproject desktop wav
+
+OTHER_FILES = ""
+
+for(filetype, filetypes) {
+  OTHER_FILES += *.$$filetype
+}
+
+desktop_files.path = /usr/share/applications
+desktop_files.files = calculator.desktop
+
+other_files.path = /usr/lib/ubuntu-ui-toolkit/examples/calculator
+other_files.files = $$OTHER_FILES
+
+INSTALLS += other_files desktop_files
+

=== added file 'examples/calculator/calculator.qml'
--- examples/calculator/calculator.qml	1970-01-01 00:00:00 +0000
+++ examples/calculator/calculator.qml	2013-07-03 06:43:28 +0000
@@ -0,0 +1,126 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Zsombor Egri <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Layouts 0.1
+import "components"
+import "components/calculator.js" as Calculator
+
+/*!
+    \brief MainView with a Label and Button elements.
+*/
+
+MainView {
+    id: mainView
+    // objectName for functional testing purposes (autopilot-qt5)
+    objectName: "mainView"
+    
+    // Note! applicationName needs to match the .desktop filename
+    applicationName: "calculator"
+    
+    /*
+     This property enables the application to change orientation
+     when the device is rotated. The default is false.
+    */
+    automaticOrientation: true
+    
+    width: units.gu(40)
+    height: units.gu(71)
+
+    property var calculator: new Calculator.Calculator(numericInput, memoryIndicator);
+
+    // default portrait layout
+    Page {
+        id: page
+        title: i18n.tr("Calculator")
+        anchors.fill: parent
+
+        Flickable {
+            anchors.fill: parent
+            contentWidth: column.width
+            contentHeight: column.height
+            Column {
+                id: column
+                width: page.width
+                height: childrenRect.height
+                spacing: units.gu(0.5)
+                TextField {
+                    id: numericInput
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    readOnly: true
+                    font.pixelSize: FontUtils.sizeToPixels("x-large")
+                    font.bold: true
+                    horizontalAlignment: Text.AlignRight
+                    height: layout.currentLayout === "landscape" ?
+                                units.gu(5) : units.gu(7)
+                    primaryItem: Label {
+                        id: memoryIndicator
+                        width: units.gu(3)
+                        height: parent.height
+                        text: "M"
+                        fontSize: "large"
+                        font.bold: true
+                    }
+                }
+
+                Layouts {
+                    id: layout
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    height: page.height - numericInput.height - mainView.header.height
+
+                    layouts: [
+                        ConditionalLayout {
+                            name: "landscape"
+                            when: mainView.width > mainView.height
+                            Item {
+                                anchors.fill: parent
+                                Functions {
+                                    operations: calculator
+                                    anchors.fill: parent
+                                    anchors.rightMargin: parent.width / 2 + units.gu(0.25)
+                                    spacing: units.gu(0.4)
+                                }
+
+                                ItemLayout {
+                                    item: "buttons"
+                                    anchors.fill: parent
+
+                                    anchors.leftMargin: parent.width / 2 + units.gu(0.25)
+                                }
+                            }
+                        }
+
+                    ]
+                    DefaultLayout {
+                        anchors.fill: parent
+                        anchors.margins: units.gu(0.5)
+                        operations: calculator
+                        spacing: (layout.currentLayout === "landscape") ? units.gu(0.4) : units.gu(2)
+                    }
+                }
+            }
+        }
+    }
+}

=== added file 'examples/calculator/calculator.qmlproject'
--- examples/calculator/calculator.qmlproject	1970-01-01 00:00:00 +0000
+++ examples/calculator/calculator.qmlproject	2013-07-03 06:43:28 +0000
@@ -0,0 +1,31 @@
+/* File generated by Qt Creator (with Ubuntu Plugin), version 2.7.1 */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "calculator.qml"
+    
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    Files {
+        filter: "*.desktop"
+    }
+    Files {
+        directory: "html"
+        filter: "*"
+    }
+    Files {
+        directory: "debian"
+        filter: "*"
+    }
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "." ,"/usr/bin","/usr/lib/*/qt5/qml" ]
+}

=== added directory 'examples/calculator/components'
=== added file 'examples/calculator/components/DefaultLayout.qml'
--- examples/calculator/components/DefaultLayout.qml	1970-01-01 00:00:00 +0000
+++ examples/calculator/components/DefaultLayout.qml	2013-07-03 06:43:28 +0000
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Zsombor Egri <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Layouts 0.1
+
+Item {
+    id: buttonGrid
+    Layouts.item: "buttons"
+
+    property real spacing: units.gu(0.5)
+    property real buttonHeight: (buttonGrid.height - 5 * buttonGrid.spacing) / 6
+    property real buttonWidth: (buttonGrid.width - 3 * buttonGrid.spacing) / 4
+
+    property var operations
+
+    property var __model: [
+        {"label": "mc", "color": "darkgray", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "m+", "color": "darkgray", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "m-", "color": "darkgray", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "mr", "color": "darkgray", "width" : buttonWidth, "height": buttonHeight},
+
+        {"label": "c", "color": "brown", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "+/-", "color": "brown", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "/", "color": "brown", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "*", "color": "brown", "width" : buttonWidth, "height": buttonHeight},
+
+        {"label": "7", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "8", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "9", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "-", "color": "brown", "width" : buttonWidth, "height": buttonHeight},
+
+        {"label": "4", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "5", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "6", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "+", "color": "brown", "width" : buttonWidth, "height": buttonHeight},
+
+        {"label": "1", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "2", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "3", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+        {"label": "=", "color": "orange", "width" : buttonWidth, "height": buttonHeight * 2 + spacing},
+    ]
+    property var __lastRow: [
+        {"label": "0", "color": "#5f5f5f", "width" : 2 * buttonWidth + spacing, "height": buttonHeight},
+        {"label": ".", "color": "#5f5f5f", "width" : buttonWidth, "height": buttonHeight},
+    ]
+    Grid {
+        id: grid
+        spacing: buttonGrid.spacing
+        anchors.fill: parent
+
+        // memory
+        Repeater {
+            model: __model
+            delegate: Button {
+                text: modelData.label
+                color: modelData.color
+                width: modelData.width
+                height: modelData.height
+                onClicked: operations.execute(modelData.label)
+            }
+        }
+    }
+    Row {
+        anchors{
+            top: grid.bottom
+            topMargin: -buttonHeight
+        }
+
+        spacing: buttonGrid.spacing
+
+        // memory
+        Repeater {
+            model: __lastRow
+            delegate: Button {
+                text: modelData.label
+                color: modelData.color
+                width: modelData.width
+                height: modelData.height
+                onClicked: operations.execute(modelData.label)
+            }
+        }
+    }
+}

=== added file 'examples/calculator/components/Functions.qml'
--- examples/calculator/components/Functions.qml	1970-01-01 00:00:00 +0000
+++ examples/calculator/components/Functions.qml	2013-07-03 06:43:28 +0000
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Zsombor Egri <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Layouts 0.1
+
+Grid {
+    id: buttonGrid
+    columns: 4
+    rows: 7
+    spacing: units.gu(1)
+
+    property var operations
+
+    Repeater {
+        model: [
+            "%", "1/x", "x!", "x^2",
+            "x^3", "x^y", "2^x", "sqrt",
+            "ln", "e^x", "sin()", "cos()",
+            "tan()", "cot()", "sec()", "csc()",
+        ]
+        delegate: Button {
+            text: modelData
+            width: (buttonGrid.width - 3 * buttonGrid.spacing) / 4
+            height: (buttonGrid.height - 3 * buttonGrid.spacing) / 4
+            onClicked: operations.execute(modelData)
+        }
+    }
+
+}

=== added file 'examples/calculator/components/calculator.js'
--- examples/calculator/components/calculator.js	1970-01-01 00:00:00 +0000
+++ examples/calculator/components/calculator.js	2013-07-03 06:43:28 +0000
@@ -0,0 +1,219 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Zsombor Egri <[e-mail]>
+ */
+
+.pragma library
+
+function Calculator(textInput, memoryIndicator) {
+    var operationStage = 0; // 0-lvalue, 1-rvalue
+    var lvalue = 0.0;
+    var rvalue = 0.0;
+    var lastOperation = -1;
+    var memory = 0.0;
+    var clearInputNext = true;
+
+    textInput.text = lvalue;
+    memoryIndicator.visible = false;
+
+    function setValue(value) {
+        if (operationStage === 0) {
+            lvalue = parseFloat(value);
+            return lvalue;
+        } else if (operationStage === 1) {
+            rvalue = parseFloat(value);
+            return rvalue;
+        }
+    }
+    function value() {
+        return (operationStage === 0) ? lvalue : rvalue;
+    }
+
+    function clear() {
+        operationStage = 1;
+        lvalue = rvalue = 0;
+        lastOperation = -1;
+        textInput.text = 0.0;
+    }
+    function memClear() {
+        memory = 0;
+        memoryIndicator.visible = false;
+    }
+    function memRecall() {
+        if (memory <= 0)
+            return;
+        textInput.text = setValue(memory);
+    }
+    function memAdd() {
+        memory += value();
+        textInput.text = setValue(memory);
+        memoryIndicator.visible = true;
+    }
+    function memDec() {
+        memory -= value();
+        textInput.text = setValue(memory);
+        memoryIndicator.visible = true;
+    }
+
+    // arythmetic functions
+    function add() {
+        lvalue += rvalue;
+    }
+    function dec() {
+        lvalue -= rvalue;
+    }
+    function mul() {
+        lvalue *= rvalue;
+    }
+    function div() {
+        lvalue /= rvalue;
+    }
+
+    function sign() {
+        textInput.text = setValue(-value());
+    }
+
+    function invert() {
+        textInput.text = setValue(1/value());
+    }
+    function percent() {
+        textInput.text = setValue(value() / 100);
+    }
+    function sqr() {
+        textInput.text = setValue(Math.pow(value(), 2));
+    }
+    function cube() {
+        textInput.text = setValue(Math.pow(value(), 3));
+    }
+    function power() {
+        lvalue = Math.pow(lvalue, rvalue);
+    }
+    function powerOf2() {
+        textInput.text = setValue(Math.pow(2, value()));
+    }
+    function factorial() {
+        var rval = 1;
+        for (var i = 2; i <= value(); i++) {
+            rval *= i;
+        }
+        textInput.text = setValue(rval);
+    }
+    function sqrt() {
+        textInput.text = setValue(Math.sqrt(value()));
+    }
+    function ln() {
+        textInput.text = setValue(Math.log(value()));
+    }
+    function exp()
+    {
+        textInput.text = setValue(Math.exp(value()));
+    }
+    function sin() {
+        textInput.text = setValue(Math.sin(value()));
+    }
+    function cos() {
+        textInput.text = setValue(Math.cos(value()));
+    }
+    function tan() {
+        textInput.text = setValue(Math.tan(value()));
+    }
+    function cot() {
+        textInput.text = setValue(1/Math.tan(value()));
+    }
+    function sec() {
+        textInput.text = setValue(1/Math.cos(value()));
+    }
+    function csc() {
+        textInput.text = setValue(1/Math.sin(value()));
+    }
+
+    var operations = [
+                {code: "+", operationFunc: add},
+                {code: "-", operationFunc: dec},
+                {code: "*", operationFunc: mul},
+                {code: "/", operationFunc: div},
+
+                {code: "+/-", controlFunc: sign},
+                {code: "c", controlFunc: clear},
+
+                {code: "mc", controlFunc: memClear},
+                {code: "mr", controlFunc: memRecall},
+                {code: "m+", controlFunc: memAdd},
+                {code: "m-", controlFunc: memDec},
+
+                {code: "%", controlFunc: percent},
+                {code: "1/x", controlFunc: invert},
+                {code: "x!", controlFunc: factorial},
+                {code: "x^2", controlFunc: sqr},
+                {code: "x^3", controlFunc: cube},
+                {code: "x^y", operationFunc: power},
+                {code: "2^x", controlFunc: powerOf2},
+                {code: "sqrt", controlFunc: sqrt},
+                {code: "ln", controlFunc: ln},
+                {code: "e^x", controlFunc: exp},
+                {code: "sin()", controlFunc: sin},
+                {code: "cos()", controlFunc: cos},
+                {code: "tan()", controlFunc: tan},
+                {code: "cot()", controlFunc: cot},
+                {code: "sec()", controlFunc: sec},
+                {code: "csc()", controlFunc: csc},
+
+            ];
+
+    this.execute = function (operation) {
+        if (operation === "=") {
+            if (lastOperation > -1) {
+                operations[lastOperation].operationFunc();
+                textInput.text = lvalue;
+            }
+            operationStage = 0;
+            clearInputNext = true;
+        } else {
+            for (var i = 0; i < operations.length; i++) {
+                if (operations[i].code === operation) {
+                    if (operations[i].operationFunc) {
+                        clearInputNext = true;
+                        if (operations[i].singleOp) {
+                            operations[i].operationFunc();
+                            return;
+                        }
+
+                        lastOperation = i;
+                        if (operationStage === 0) {
+                            operationStage = 1;
+                        } else if (operationStage === 1) {
+                            // evaluate and continue receiving rvalue
+                            operations[i].operationFunc(lvalue, rvalue);
+                            textInput.text = lvalue;
+                        }
+                    } else if (operations[i].controlFunc) {
+                        operations[i].controlFunc();
+                        clearInputNext = true;
+                    }
+
+                    return;
+                }
+            }
+
+            // if no opeartion was performed, add operation to input
+            if (clearInputNext) {
+                clearInputNext = false;
+                textInput.text = "";
+            }
+            textInput.text = setValue(textInput.text + operation);
+        }
+    }
+}

=== modified file 'examples/examples.pro'
--- examples/examples.pro	2013-06-26 22:55:34 +0000
+++ examples/examples.pro	2013-07-03 06:43:28 +0000
@@ -4,7 +4,8 @@
     ubuntu-ui-toolkit-gallery\
     jokes \
     locale \
-    unit-converter
+    unit-converter \
+    calculator
 
 
 #examples = jokes unit-converter