QMLmultigraph example updated

Task-number: QTRD-2840

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

3 files changed, 98 insertions, 88 deletions

diff --git a/examples/qmlmultigraph/doc/src/qmlmultigraph.qdoc b/examples/qmlmultigraph/doc/src/qmlmultigraph.qdoc
index f3ba172d..5fa25500 100644
--- a/examples/qmlmultigraph/doc/src/qmlmultigraph.qdoc
+++ b/examples/qmlmultigraph/doc/src/qmlmultigraph.qdoc
@@ -33,11 +33,14 @@
     \section1 Multiple Graphs
 
     Using multiple graphs in a single application doesn't require anything special, simply define
-    and position the graphs as normal. In this example the graphs are shown side by side in a RowLayout:
+    and position the graphs as normal. In this example the graphs are shown in a 2 x 2 grid with
+    \c{GridLayout}:
 
     \snippet ../examples/qmlmultigraph/qml/qmlmultigraph/main.qml 0
 
-    Each graph has a parent Rectangle item to provide it with a border. The color of the rectangle is set
-    to fully transparent, because otherwise the rectangles would hide the graphs, which are always drawn behind
-    all other QML elements.
+    Each graph has a parent \c Rectangle item to provide it with a border. The color of the rectangle
+    is set to fully transparent, because otherwise the rectangles would hide the graphs, which are
+    always drawn behind all other QML elements.
+
+    Note that one of the grid cells is used for buttons in an another \c{GridLayout}.
 */
diff --git a/examples/qmlmultigraph/qml/qmlmultigraph/Data.qml b/examples/qmlmultigraph/qml/qmlmultigraph/Data.qml
index 51bee741..998e4be3 100644
--- a/examples/qmlmultigraph/qml/qmlmultigraph/Data.qml
+++ b/examples/qmlmultigraph/qml/qmlmultigraph/Data.qml
@@ -19,38 +19,10 @@
 import QtQuick 2.1
 
 Item {
-    property alias barData: barDataModel
-    property alias scatterData: scatterDataModel
-    property alias surfaceData: surfaceDataModel
+    property alias data: dataModel
 
     ListModel {
-        id: barDataModel
-        ListElement{ year: "2012"; city: "Oulu";     expenses: "4200"; income: "8300"; }
-        ListElement{ year: "2012"; city: "Kemi";     expenses: "2100"; income: "6500"; }
-        ListElement{ year: "2012"; city: "Helsinki"; expenses: "7040"; income: "7500"; }
-        ListElement{ year: "2012"; city: "Tampere";  expenses: "4330"; income: "5800"; }
-        ListElement{ year: "2013"; city: "Oulu";     expenses: "3960"; income: "9000"; }
-        ListElement{ year: "2013"; city: "Kemi";     expenses: "1990"; income: "3000"; }
-        ListElement{ year: "2013"; city: "Helsinki"; expenses: "7230"; income: "9900"; }
-        ListElement{ year: "2013"; city: "Tampere";  expenses: "4650"; income: "7600"; }
-    }
-
-    ListModel {
-        id: scatterDataModel
-        ListElement{ xPos: "2.754"; yPos: "1.000"; zPos: "3.362"; }
-        ListElement{ xPos: "3.164"; yPos: "2.022"; zPos: "4.348"; }
-        ListElement{ xPos: "4.564"; yPos: "1.865"; zPos: "1.000"; }
-        ListElement{ xPos: "1.000"; yPos: "1.224"; zPos: "2.983"; }
-        ListElement{ xPos: "2.323"; yPos: "2.502"; zPos: "3.133"; }
-        ListElement{ xPos: "3.663"; yPos: "3.186"; zPos: "2.843"; }
-        ListElement{ xPos: "4.190"; yPos: "4.875"; zPos: "3.942"; }
-        ListElement{ xPos: "3.569"; yPos: "3.685"; zPos: "1.456"; }
-        ListElement{ xPos: "5.000"; yPos: "5.000"; zPos: "4.678"; }
-        ListElement{ xPos: "4.349"; yPos: "3.850"; zPos: "5.000"; }
-    }
-
-    ListModel {
-        id: surfaceDataModel
+        id: dataModel
         ListElement{ row: "0"; col: "0"; longitude: "20.0"; latitude: "10.0"; pop_density: "4.75"; }
         ListElement{ row: "1"; col: "0"; longitude: "21.1"; latitude: "10.3"; pop_density: "3.00"; }
         ListElement{ row: "2"; col: "0"; longitude: "22.5"; latitude: "10.7"; pop_density: "1.24"; }
diff --git a/examples/qmlmultigraph/qml/qmlmultigraph/main.qml b/examples/qmlmultigraph/qml/qmlmultigraph/main.qml
index 1761ed34..7691563a 100644
--- a/examples/qmlmultigraph/qml/qmlmultigraph/main.qml
+++ b/examples/qmlmultigraph/qml/qmlmultigraph/main.qml
@@ -23,18 +23,20 @@ import "."
 
 Item {
     id: mainView
-    width: 1280
-    height: 400
+    width: 800
+    height: 600
 
     Data {
         id: data
     }
 
     //! [0]
-    RowLayout {
-        id: graphLayout
-        spacing: 1
-        anchors.top: buttonLayout.bottom
+    GridLayout {
+        id: gridLayout
+        columns: 2
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        anchors.top: mainView.top
         anchors.bottom: mainView.bottom
         anchors.left: mainView.left
         anchors.right: mainView.right
@@ -59,7 +61,7 @@ Item {
                 Surface3DSeries {
                     itemLabelFormat: "Pop density at (@xLabel N, @zLabel E): @yLabel"
                     ItemModelSurfaceDataProxy {
-                        itemModel: data.surfaceData
+                        itemModel: data.data
                         // The surface data points are not neatly lined up in rows and columns,
                         // so we define explicit row and column roles.
                         rowRole: "row"
@@ -72,6 +74,52 @@ Item {
             }
         }
 
+        // We'll use one grid cell for buttons
+        Rectangle {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            border.color: surfaceGraph.theme.gridLineColor // Let's use neighbor's border color
+            border.width: 2
+
+            GridLayout {
+                anchors.right: parent.right
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                columns: 2
+
+                NewButton {
+                    Layout.minimumWidth: parent.width / 2
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    text: "Clear Selections"
+                    onClicked: clearSelections() // call a helper function to keep button itself simpler
+                }
+
+                NewButton {
+                    Layout.minimumWidth: parent.width / 2
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    text: "Quit"
+                    onClicked: Qt.quit(0);
+                }
+
+                NewButton {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    text: "Reset Cameras"
+                    onClicked: resetCameras() // call a helper function to keep button itself simpler
+                }
+
+                NewButton {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    text: "Toggle Mesh Styles"
+                    onClicked: toggleMeshStyle() // call a helper function to keep button itself simpler
+                }
+            }
+        }
+
         Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
@@ -90,12 +138,13 @@ Item {
                 scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh
 
                 Scatter3DSeries {
+                    itemLabelFormat: "Pop density at (@xLabel N, @zLabel E): @yLabel"
                     ItemModelScatterDataProxy {
-                        itemModel: data.scatterData
+                        itemModel: data.data
                         // Mapping model roles to scatter series item coordinates.
-                        xPosRole: "xPos"
-                        yPosRole: "yPos"
-                        zPosRole: "zPos"
+                        xPosRole: "latitude"
+                        zPosRole: "longitude"
+                        yPosRole: "pop_density"
                     }
                 }
             }
@@ -120,28 +169,15 @@ Item {
                 scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh
 
                 Bar3DSeries {
-                    itemLabelFormat: "@seriesName for @colLabel, @rowLabel: @valueLabel"
-                    name: "Yearly expenses"
+                    itemLabelFormat: "@seriesName: @valueLabel"
+                    name: "Population density"
 
                     ItemModelBarDataProxy {
-                        itemModel: data.barData
+                        itemModel: data.data
                         // Mapping model roles to bar series rows, columns, and values.
-                        rowRole: "year"
-                        columnRole: "city"
-                        valueRole: "expenses"
-                    }
-                }
-
-                Bar3DSeries {
-                    itemLabelFormat: "@seriesName for @colLabel, @rowLabel: @valueLabel"
-                    name: "Yearly income"
-
-                    ItemModelBarDataProxy {
-                        itemModel: data.barData
-                        // Mapping model roles to bar series rows, columns, and values.
-                        rowRole: "year"
-                        columnRole: "city"
-                        valueRole: "income"
+                        rowRole: "row"
+                        columnRole: "col"
+                        valueRole: "pop_density"
                     }
                 }
             }
@@ -149,32 +185,31 @@ Item {
     }
     //! [0]
 
-    RowLayout {
-        id: buttonLayout
-        Layout.minimumHeight: exitButton.height
-        width: parent.width
-        anchors.left: parent.left
-        anchors.top: parent.top
-        spacing: 0
+    function clearSelections() {
+        barGraph.clearSelection()
+        scatterGraph.clearSelection()
+        surfaceGraph.clearSelection()
+    }
 
-        NewButton {
-            id: clearSelectionsButton
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: "Clear Selections"
-            onClicked: {
-                barGraph.clearSelection()
-                scatterGraph.clearSelection()
-                surfaceGraph.clearSelection()
-            }
-        }
+    function resetCameras() {
+        surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
+        scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
+        barGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
+        surfaceGraph.scene.activeCamera.zoomLevel = 100
+        scatterGraph.scene.activeCamera.zoomLevel = 100
+        barGraph.scene.activeCamera.zoomLevel = 100
+    }
 
-        NewButton {
-            id: exitButton
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: "Quit"
-            onClicked: Qt.quit(0);
+    function toggleMeshStyle() {
+        if (barGraph.seriesList[0].meshSmooth === true) {
+            barGraph.seriesList[0].meshSmooth = false
+            if (surfaceGraph.seriesList[0].flatShadingSupported)
+                surfaceGraph.seriesList[0].flatShadingEnabled = true
+            scatterGraph.seriesList[0].meshSmooth = false
+        } else {
+            barGraph.seriesList[0].meshSmooth = true
+            surfaceGraph.seriesList[0].flatShadingEnabled = false
+            scatterGraph.seriesList[0].meshSmooth = true
         }
     }
 }