From 30a601f87a7121d2d9f9e87cd4f21fa26f541666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomi=20Korpip=C3=A4=C3=A4?= Date: Tue, 4 Feb 2014 12:28:39 +0200 Subject: QMLmultigraph example updated Task-number: QTRD-2840 Change-Id: I1f83a4129d3c8bd84eafbbf36beea44a0f94b94e Reviewed-by: Miikka Heikkinen --- examples/qmlmultigraph/doc/src/qmlmultigraph.qdoc | 11 +- examples/qmlmultigraph/qml/qmlmultigraph/Data.qml | 32 +---- examples/qmlmultigraph/qml/qmlmultigraph/main.qml | 143 ++++++++++++++-------- 3 files changed, 98 insertions(+), 88 deletions(-) (limited to 'examples') 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 } } } -- cgit v1.2.3