Added Camera QML API and Example

Change-Id: Ibc790ac6c720b6d22d68f662ff2f50e74a9abaae
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@digia.com>

4 files changed, 386 insertions, 0 deletions

diff --git a/tests/qmlcamera/qml/qmlcamera/Axes.qml b/tests/qmlcamera/qml/qmlcamera/Axes.qml
new file mode 100644
index 00000000..b0ba3eb2
--- /dev/null
+++ b/tests/qmlcamera/qml/qmlcamera/Axes.qml
@@ -0,0 +1,50 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the QtDataVisualization module.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import com.digia.QtDataVisualization 1.0
+
+Item {
+    property alias column: columnAxis
+    property alias expenses: expensesAxis
+    property alias income: incomeAxis
+
+    // For row labels we can use row labels from data proxy, so default axis
+    // suffices for rows.
+
+    // Custom labels for columns, since the data contains abbreviated month names.
+    CategoryAxis3D {
+        id: columnAxis
+        categoryLabels: ["January", "February", "March", "April", "May", "June",
+            "July", "August", "September", "October", "November", "December"]
+    }
+    ValueAxis3D {
+        id: incomeAxis
+        min: 0
+        max: 35
+        labelFormat: "%.2f M\u20AC"
+        title: "Monthly income"
+    }
+    ValueAxis3D {
+        id: expensesAxis
+        min: 0
+        max: 35
+        labelFormat: "-%.2f M\u20AC"
+        title: "Monthly expenses"
+    }
+}
diff --git a/tests/qmlcamera/qml/qmlcamera/ControlSurface.qml b/tests/qmlcamera/qml/qmlcamera/ControlSurface.qml
new file mode 100644
index 00000000..c655e016
--- /dev/null
+++ b/tests/qmlcamera/qml/qmlcamera/ControlSurface.qml
@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the QtDataVisualization module.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: controlRect
+    color: "#000000"
+    property real xValue : 0
+    property real yValue : 0
+    property real minXValue : 0
+    property real minYValue : 0
+    property real maxXValue : 0
+    property real maxYValue : 0
+
+    property real halfWidth: width / 2.0;
+    property real halfHeight: height / 2.0;
+
+    Rectangle {
+        id: pointer
+        color: "#FFFFFF"
+        width: 5
+        height: 5
+    }
+
+    MouseArea {
+        id: inputArea
+        anchors.fill: parent
+        onPositionChanged: {
+            pointer.x = Math.min(Math.max(0, mouse.x), controlRect.width - pointer.width );
+            pointer.y = Math.min(Math.max(0, mouse.y), controlRect.height - pointer.height);
+            var mixX = (mouse.x / controlRect.width);
+            var mixY = (mouse.y / controlRect.width);
+            controlRect.xValue = minXValue*(1-mixX) + maxXValue*mixX;
+            controlRect.yValue = minYValue*(1-mixY) + maxYValue*mixY;
+        }
+    }
+}
diff --git a/tests/qmlcamera/qml/qmlcamera/Data.qml b/tests/qmlcamera/qml/qmlcamera/Data.qml
new file mode 100644
index 00000000..fff568cc
--- /dev/null
+++ b/tests/qmlcamera/qml/qmlcamera/Data.qml
@@ -0,0 +1,133 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the QtDataVisualization module.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import com.digia.QtDataVisualization 1.0
+
+Item {
+    property alias mapping: valueMapping
+    property alias model: dataModel
+    property alias proxy: modelProxy
+
+    BarDataMapping {
+        id: valueMapping
+        rowRole: "year"
+        columnRole: "month"
+        valueRole: "expenses"
+    }
+
+    ItemModelBarDataProxy {
+        id: modelProxy
+        activeMapping: valueMapping
+        itemModel: dataModel
+    }
+
+    ListModel {
+        id: dataModel
+        ListElement{ year: "2006"; month: "Jan"; expenses: "4";  income: "5" }
+        ListElement{ year: "2006"; month: "Feb"; expenses: "5";  income: "6" }
+        ListElement{ year: "2006"; month: "Mar"; expenses: "7";  income: "4" }
+        ListElement{ year: "2006"; month: "Apr"; expenses: "3";  income: "2" }
+        ListElement{ year: "2006"; month: "May"; expenses: "4";  income: "1" }
+        ListElement{ year: "2006"; month: "Jun"; expenses: "2";  income: "2" }
+        ListElement{ year: "2006"; month: "Jul"; expenses: "1";  income: "3" }
+        ListElement{ year: "2006"; month: "Aug"; expenses: "5";  income: "1" }
+        ListElement{ year: "2006"; month: "Sep"; expenses: "2";  income: "3" }
+        ListElement{ year: "2006"; month: "Oct"; expenses: "5";  income: "2" }
+        ListElement{ year: "2006"; month: "Nov"; expenses: "8";  income: "5" }
+        ListElement{ year: "2006"; month: "Dec"; expenses: "3";  income: "3" }
+
+        ListElement{ year: "2007"; month: "Jan"; expenses: "3";  income: "1" }
+        ListElement{ year: "2007"; month: "Feb"; expenses: "4";  income: "2" }
+        ListElement{ year: "2007"; month: "Mar"; expenses: "12"; income: "4" }
+        ListElement{ year: "2007"; month: "Apr"; expenses: "13"; income: "6" }
+        ListElement{ year: "2007"; month: "May"; expenses: "14"; income: "11" }
+        ListElement{ year: "2007"; month: "Jun"; expenses: "7";  income: "7" }
+        ListElement{ year: "2007"; month: "Jul"; expenses: "6";  income: "4" }
+        ListElement{ year: "2007"; month: "Aug"; expenses: "4";  income: "15" }
+        ListElement{ year: "2007"; month: "Sep"; expenses: "2";  income: "18" }
+        ListElement{ year: "2007"; month: "Oct"; expenses: "29"; income: "25" }
+        ListElement{ year: "2007"; month: "Nov"; expenses: "23"; income: "29" }
+        ListElement{ year: "2007"; month: "Dec"; expenses: "5";  income: "9" }
+
+        ListElement{ year: "2008"; month: "Jan"; expenses: "3";  income: "8" }
+        ListElement{ year: "2008"; month: "Feb"; expenses: "8";  income: "14" }
+        ListElement{ year: "2008"; month: "Mar"; expenses: "10"; income: "20" }
+        ListElement{ year: "2008"; month: "Apr"; expenses: "12"; income: "24" }
+        ListElement{ year: "2008"; month: "May"; expenses: "10"; income: "19" }
+        ListElement{ year: "2008"; month: "Jun"; expenses: "5";  income: "8" }
+        ListElement{ year: "2008"; month: "Jul"; expenses: "1";  income: "4" }
+        ListElement{ year: "2008"; month: "Aug"; expenses: "7";  income: "12" }
+        ListElement{ year: "2008"; month: "Sep"; expenses: "4";  income: "16" }
+        ListElement{ year: "2008"; month: "Oct"; expenses: "22"; income: "33" }
+        ListElement{ year: "2008"; month: "Nov"; expenses: "16"; income: "25" }
+        ListElement{ year: "2008"; month: "Dec"; expenses: "2";  income: "7" }
+
+        ListElement{ year: "2009"; month: "Jan"; expenses: "4";  income: "5"  }
+        ListElement{ year: "2009"; month: "Feb"; expenses: "4";  income: "7"  }
+        ListElement{ year: "2009"; month: "Mar"; expenses: "11"; income: "14"  }
+        ListElement{ year: "2009"; month: "Apr"; expenses: "16"; income: "22"  }
+        ListElement{ year: "2009"; month: "May"; expenses: "3";  income: "5"  }
+        ListElement{ year: "2009"; month: "Jun"; expenses: "4";  income: "8"  }
+        ListElement{ year: "2009"; month: "Jul"; expenses: "7";  income: "9"  }
+        ListElement{ year: "2009"; month: "Aug"; expenses: "9";  income: "13"  }
+        ListElement{ year: "2009"; month: "Sep"; expenses: "1";  income: "6"  }
+        ListElement{ year: "2009"; month: "Oct"; expenses: "14"; income: "25"  }
+        ListElement{ year: "2009"; month: "Nov"; expenses: "19"; income: "29"  }
+        ListElement{ year: "2009"; month: "Dec"; expenses: "5";  income: "7"  }
+
+        ListElement{ year: "2010"; month: "Jan"; expenses: "14"; income: "22"  }
+        ListElement{ year: "2010"; month: "Feb"; expenses: "5";  income: "7"  }
+        ListElement{ year: "2010"; month: "Mar"; expenses: "1";  income: "9"  }
+        ListElement{ year: "2010"; month: "Apr"; expenses: "1";  income: "12"  }
+        ListElement{ year: "2010"; month: "May"; expenses: "5";  income: "9"  }
+        ListElement{ year: "2010"; month: "Jun"; expenses: "5";  income: "8"  }
+        ListElement{ year: "2010"; month: "Jul"; expenses: "3";  income: "7"  }
+        ListElement{ year: "2010"; month: "Aug"; expenses: "1";  income: "5"  }
+        ListElement{ year: "2010"; month: "Sep"; expenses: "2";  income: "4"  }
+        ListElement{ year: "2010"; month: "Oct"; expenses: "10"; income: "13"  }
+        ListElement{ year: "2010"; month: "Nov"; expenses: "12"; income: "17"  }
+        ListElement{ year: "2010"; month: "Dec"; expenses: "6";  income: "9"  }
+
+        ListElement{ year: "2011"; month: "Jan"; expenses: "2";  income: "6"  }
+        ListElement{ year: "2011"; month: "Feb"; expenses: "4";  income: "8"  }
+        ListElement{ year: "2011"; month: "Mar"; expenses: "7";  income: "12"  }
+        ListElement{ year: "2011"; month: "Apr"; expenses: "9";  income: "15"  }
+        ListElement{ year: "2011"; month: "May"; expenses: "7";  income: "19"  }
+        ListElement{ year: "2011"; month: "Jun"; expenses: "9";  income: "18"  }
+        ListElement{ year: "2011"; month: "Jul"; expenses: "13"; income: "17"  }
+        ListElement{ year: "2011"; month: "Aug"; expenses: "5";  income: "9"  }
+        ListElement{ year: "2011"; month: "Sep"; expenses: "3";  income: "8"  }
+        ListElement{ year: "2011"; month: "Oct"; expenses: "13"; income: "15"  }
+        ListElement{ year: "2011"; month: "Nov"; expenses: "8";  income: "17"  }
+        ListElement{ year: "2011"; month: "Dec"; expenses: "7";  income: "10"  }
+
+        ListElement{ year: "2012"; month: "Jan"; expenses: "12";  income: "16"  }
+        ListElement{ year: "2012"; month: "Feb"; expenses: "24";  income: "28"  }
+        ListElement{ year: "2012"; month: "Mar"; expenses: "27";  income: "22"  }
+        ListElement{ year: "2012"; month: "Apr"; expenses: "29";  income: "25"  }
+        ListElement{ year: "2012"; month: "May"; expenses: "27";  income: "29"  }
+        ListElement{ year: "2012"; month: "Jun"; expenses: "19";  income: "18"  }
+        ListElement{ year: "2012"; month: "Jul"; expenses: "13";  income: "17"  }
+        ListElement{ year: "2012"; month: "Aug"; expenses: "15";  income: "19"  }
+        ListElement{ year: "2012"; month: "Sep"; expenses: "3";   income: "8"  }
+        ListElement{ year: "2012"; month: "Oct"; expenses: "3";   income: "6"  }
+        ListElement{ year: "2012"; month: "Nov"; expenses: "4";   income: "8"  }
+        ListElement{ year: "2012"; month: "Dec"; expenses: "5";   income: "9"  }
+    }
+}
diff --git a/tests/qmlcamera/qml/qmlcamera/main.qml b/tests/qmlcamera/qml/qmlcamera/main.qml
new file mode 100644
index 00000000..0518c1c8
--- /dev/null
+++ b/tests/qmlcamera/qml/qmlcamera/main.qml
@@ -0,0 +1,150 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the QtDataVisualization module.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+import com.digia.QtDataVisualization 1.0
+import "."
+
+Item {
+    id: mainview
+    width: 1280
+    height: 1024
+    visible: true
+
+    Data {
+        id: chartData
+    }
+
+    Axes {
+        id: chartAxes
+    }
+
+    Item {
+        id: dataView
+        width: parent.width - camControlArea.width
+        height: parent.height
+        anchors.right: parent.right;
+
+        Bars3D {
+            id: testChart
+            width: dataView.width
+            height: dataView.height
+            shadowQuality: Bars3D.ShadowQualityMedium
+            selectionMode: Bars3D.SelectionModeItem
+            font.pointSize: 35
+            theme: Bars3D.ThemeRetro
+            labelStyle: Bars3D.LabelStyleFromTheme
+            dataProxy: chartData.proxy
+            barThickness: 0.5
+            barSpacing: Qt.size(0.5, 0.5)
+            barSpacingRelative: false
+
+            columnAxis: chartAxes.column
+            valueAxis: chartAxes.expenses
+            itemLabelFormat: "@valueTitle for @colLabel, @rowLabel: @valueLabel"
+
+            onSelectedBarPosChanged: {
+                // Set camControlArea current row to selected bar
+                var rowRole = chartData.proxy.rowLabels[position.x];
+                var colRole = chartData.proxy.columnLabels[position.y];
+            }
+
+            // Bind UI controls to the camera
+            scene.activeCamera.wrapXRotation: false
+            scene.activeCamera.xRotation: camControlArea.xValue
+            scene.activeCamera.yRotation: camControlArea.yValue
+            scene.activeCamera.zoomLevel: zoomSlider.value
+            inputHandler: null
+        }
+    }
+
+    ControlSurface {
+        id: camControlArea
+        x: 0
+        y: 0
+        width:  298
+        height: 298
+        minXValue: testChart.scene.activeCamera.minXRotation
+        minYValue: testChart.scene.activeCamera.minYRotation
+        maxXValue: testChart.scene.activeCamera.maxYRotation
+        maxYValue: testChart.scene.activeCamera.maxYRotation
+    }
+
+    Slider {
+        id: zoomSlider
+        width: camControlArea.width
+        anchors.top: camControlArea.bottom
+        value: 100
+        minimumValue: 10
+        maximumValue: 300
+    }
+
+    Button {
+        id: mappingToggle
+        anchors.bottom: parent.bottom
+        width: camControlArea.width
+        text: "Show Income"
+        onClicked: {
+            if (chartData.mapping.valueRole === "expenses") {
+                chartData.mapping.valueRole = "income"
+                text = "Show Expenses"
+                testChart.valueAxis = chartAxes.income
+            } else {
+                chartData.mapping.valueRole = "expenses"
+                text = "Show Income"
+                testChart.valueAxis = chartAxes.expenses
+            }
+        }
+    }
+
+    Button {
+        id: shadowToggle
+        anchors.bottom: mappingToggle.top
+        width: camControlArea.width
+        text: "Hide Shadows"
+        onClicked: {
+            if (testChart.shadowQuality == Bars3D.ShadowQualityNone) {
+                testChart.shadowQuality = Bars3D.ShadowQualityMedium;
+                text = "Hide Shadows"
+            } else {
+                testChart.shadowQuality = Bars3D.ShadowQualityNone;
+                text = "Show Shadows"
+            }
+        }
+    }
+
+    Button {
+        id: dataToggle
+        anchors.bottom: shadowToggle.top
+        width: camControlArea.width
+        text: "Show 2010 - 2012"
+        onClicked: {
+            if (testChart.rowAxis.max !== 6) {
+                text = "Show 2010 - 2012"
+                chartData.mapping.autoRowCategories = true
+            } else {
+                text = "Show all years"
+                // Explicitly defining row categories, since we do not want to show data for
+                // all years in the model, just for the selected ones.
+                chartData.mapping.autoRowCategories = false
+                chartData.mapping.rowCategories = ["2010", "2011", "2012"]
+            }
+        }
+    }
+}