From 581de908fbb31c442eda2bea67be2c10123d7e0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomi=20Korpip=C3=A4=C3=A4?= Date: Mon, 2 Sep 2013 09:45:50 +0300 Subject: QML examples cleaned up Moved data and axes into separate qml files. Change-Id: I2aaf828d7e7cba3bdc1d03379ccdf0b55c3e9922 Reviewed-by: Miikka Heikkinen --- examples/qmlbarchart/qml/qmlbarchart/axes.qml | 51 ++++++++++++ examples/qmlbarchart/qml/qmlbarchart/data.qml | 83 +++++++++++++++++++ examples/qmlbarchart/qml/qmlbarchart/main.qml | 113 ++++---------------------- examples/qmlbarchart/qmlbarchart.qrc | 2 + examples/qmlscatter/qml/qmlscatter/data.qml | 63 ++++++++++++++ examples/qmlscatter/qml/qmlscatter/main.qml | 47 ++--------- examples/qmlscatter/qmlscatter.qrc | 1 + 7 files changed, 224 insertions(+), 136 deletions(-) create mode 100644 examples/qmlbarchart/qml/qmlbarchart/axes.qml create mode 100644 examples/qmlbarchart/qml/qmlbarchart/data.qml create mode 100644 examples/qmlscatter/qml/qmlscatter/data.qml diff --git a/examples/qmlbarchart/qml/qmlbarchart/axes.qml b/examples/qmlbarchart/qml/qmlbarchart/axes.qml new file mode 100644 index 00000000..6bbfef9e --- /dev/null +++ b/examples/qmlbarchart/qml/qmlbarchart/axes.qml @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** 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 QtDataVis3D 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.QtDataVis3D 1.0 + +Item { + property alias row: rowAxis + property alias column: columnAxis + property alias expenses: expensesAxis + property alias income: incomeAxis + + CategoryAxis { + id: rowAxis + categoryLabels: ["2000", "2001", "2002", "2003", "2004"] + } + CategoryAxis { + id: columnAxis + categoryLabels: ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"] + } + ValueAxis { + id: incomeAxis + min: 0 + max: 35 + labelFormat: "%.2f M\u20AC" + title: "Monthly income" + } + ValueAxis { + id: expensesAxis + min: 0 + max: 35 + labelFormat: "-%.2f M\u20AC" + title: "Monthly expenses" + } +} diff --git a/examples/qmlbarchart/qml/qmlbarchart/data.qml b/examples/qmlbarchart/qml/qmlbarchart/data.qml new file mode 100644 index 00000000..da053734 --- /dev/null +++ b/examples/qmlbarchart/qml/qmlbarchart/data.qml @@ -0,0 +1,83 @@ +/**************************************************************************** +** +** 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 QtDataVis3D 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.QtDataVis3D 1.0 + +Item { + property alias mapping: valueMapping + property alias model: dataModel + + BarDataMapping { + id: valueMapping + rowRole: "year" + columnRole: "month" + valueRole: "expenses" + rowCategories: ["2000", "2001", "2002", "2003", "2004"] + columnCategories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] + } + + ListModel { + id: dataModel + ListElement{ year: "2000"; month: "Jan"; expenses: "3"; income: "8" } + ListElement{ year: "2000"; month: "Feb"; expenses: "8"; income: "14" } + ListElement{ year: "2000"; month: "Mar"; expenses: "10"; income: "20" } + ListElement{ year: "2000"; month: "Apr"; expenses: "12"; income: "24" } + ListElement{ year: "2000"; month: "May"; expenses: "10"; income: "19" } + ListElement{ year: "2000"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2000"; month: "Jul"; expenses: "1"; income: "4" } + ListElement{ year: "2000"; month: "Aug"; expenses: "7"; income: "12" } + ListElement{ year: "2000"; month: "Sep"; expenses: "4"; income: "16" } + ListElement{ year: "2000"; month: "Oct"; expenses: "22"; income: "33" } + ListElement{ year: "2000"; month: "Nov"; expenses: "16"; income: "25" } + ListElement{ year: "2000"; month: "Dec"; expenses: "2"; income: "7" } + + ListElement{ year: "2001"; month: "Jan"; expenses: "4"; income: "5" } + ListElement{ year: "2001"; month: "Feb"; expenses: "4"; income: "7" } + ListElement{ year: "2001"; month: "Mar"; expenses: "11"; income: "14" } + ListElement{ year: "2001"; month: "Apr"; expenses: "16"; income: "22" } + ListElement{ year: "2001"; month: "May"; expenses: "3"; income: "5" } + ListElement{ year: "2001"; month: "Jun"; expenses: "4"; income: "8" } + ListElement{ year: "2001"; month: "Jul"; expenses: "7"; income: "9" } + ListElement{ year: "2001"; month: "Aug"; expenses: "9"; income: "13" } + ListElement{ year: "2001"; month: "Sep"; expenses: "1"; income: "6" } + ListElement{ year: "2001"; month: "Oct"; expenses: "14"; income: "25" } + ListElement{ year: "2001"; month: "Nov"; expenses: "19"; income: "29" } + ListElement{ year: "2001"; month: "Dec"; expenses: "5"; income: "7" } + + ListElement{ year: "2002"; month: "Jan"; expenses: "14"; income: "22" } + ListElement{ year: "2002"; month: "Feb"; expenses: "5"; income: "7" } + ListElement{ year: "2002"; month: "Mar"; expenses: "1"; income: "9" } + ListElement{ year: "2002"; month: "Apr"; expenses: "1"; income: "12" } + ListElement{ year: "2002"; month: "May"; expenses: "5"; income: "9" } + ListElement{ year: "2002"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2002"; month: "Jul"; expenses: "3"; income: "7" } + ListElement{ year: "2002"; month: "Aug"; expenses: "1"; income: "5" } + ListElement{ year: "2002"; month: "Sep"; expenses: "2"; income: "4" } + ListElement{ year: "2002"; month: "Oct"; expenses: "10"; income: "13" } + ListElement{ year: "2002"; month: "Nov"; expenses: "12"; income: "17" } + ListElement{ year: "2002"; month: "Dec"; expenses: "6"; income: "9" } + + ListElement{ year: "2003"; month: "Jan"; expenses: "2"; income: "6" } + ListElement{ year: "2003"; month: "Feb"; expenses: "4"; income: "8" } + ListElement{ year: "2003"; month: "Mar"; expenses: "7"; income: "12" } + ListElement{ year: "2003"; month: "Apr"; expenses: "9"; income: "15" } + // rest of 2003 missing on purpose, as well as whole of 2004 + } +} diff --git a/examples/qmlbarchart/qml/qmlbarchart/main.qml b/examples/qmlbarchart/qml/qmlbarchart/main.qml index 781e7517..89e4198d 100644 --- a/examples/qmlbarchart/qml/qmlbarchart/main.qml +++ b/examples/qmlbarchart/qml/qmlbarchart/main.qml @@ -27,6 +27,13 @@ Item { height: 600 visible: true + Data { + id: chartData + } + + Axes { + id: chartAxes + } Item { id: dataView @@ -36,88 +43,6 @@ Item { property point storedSelection: Qt.point(-1, -1) - BarDataMapping { - id: valueMapping - rowRole: "year" - columnRole: "month" - valueRole: "expenses" - rowCategories: ["2000", "2001", "2002", "2003", "2004"] - columnCategories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", - "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] - } - - ListModel { - id: dataModel - ListElement{ year: "2000"; month: "Jan"; expenses: "3"; income: "8" } - ListElement{ year: "2000"; month: "Feb"; expenses: "8"; income: "14" } - ListElement{ year: "2000"; month: "Mar"; expenses: "10"; income: "20" } - ListElement{ year: "2000"; month: "Apr"; expenses: "12"; income: "24" } - ListElement{ year: "2000"; month: "May"; expenses: "10"; income: "19" } - ListElement{ year: "2000"; month: "Jun"; expenses: "5"; income: "8" } - ListElement{ year: "2000"; month: "Jul"; expenses: "1"; income: "4" } - ListElement{ year: "2000"; month: "Aug"; expenses: "7"; income: "12" } - ListElement{ year: "2000"; month: "Sep"; expenses: "4"; income: "16" } - ListElement{ year: "2000"; month: "Oct"; expenses: "22"; income: "33" } - ListElement{ year: "2000"; month: "Nov"; expenses: "16"; income: "25" } - ListElement{ year: "2000"; month: "Dec"; expenses: "2"; income: "7" } - - ListElement{ year: "2001"; month: "Jan"; expenses: "4"; income: "5" } - ListElement{ year: "2001"; month: "Feb"; expenses: "4"; income: "7" } - ListElement{ year: "2001"; month: "Mar"; expenses: "11"; income: "14" } - ListElement{ year: "2001"; month: "Apr"; expenses: "16"; income: "22" } - ListElement{ year: "2001"; month: "May"; expenses: "3"; income: "5" } - ListElement{ year: "2001"; month: "Jun"; expenses: "4"; income: "8" } - ListElement{ year: "2001"; month: "Jul"; expenses: "7"; income: "9" } - ListElement{ year: "2001"; month: "Aug"; expenses: "9"; income: "13" } - ListElement{ year: "2001"; month: "Sep"; expenses: "1"; income: "6" } - ListElement{ year: "2001"; month: "Oct"; expenses: "14"; income: "25" } - ListElement{ year: "2001"; month: "Nov"; expenses: "19"; income: "29" } - ListElement{ year: "2001"; month: "Dec"; expenses: "5"; income: "7" } - - ListElement{ year: "2002"; month: "Jan"; expenses: "14"; income: "22" } - ListElement{ year: "2002"; month: "Feb"; expenses: "5"; income: "7" } - ListElement{ year: "2002"; month: "Mar"; expenses: "1"; income: "9" } - ListElement{ year: "2002"; month: "Apr"; expenses: "1"; income: "12" } - ListElement{ year: "2002"; month: "May"; expenses: "5"; income: "9" } - ListElement{ year: "2002"; month: "Jun"; expenses: "5"; income: "8" } - ListElement{ year: "2002"; month: "Jul"; expenses: "3"; income: "7" } - ListElement{ year: "2002"; month: "Aug"; expenses: "1"; income: "5" } - ListElement{ year: "2002"; month: "Sep"; expenses: "2"; income: "4" } - ListElement{ year: "2002"; month: "Oct"; expenses: "10"; income: "13" } - ListElement{ year: "2002"; month: "Nov"; expenses: "12"; income: "17" } - ListElement{ year: "2002"; month: "Dec"; expenses: "6"; income: "9" } - - ListElement{ year: "2003"; month: "Jan"; expenses: "2"; income: "6" } - ListElement{ year: "2003"; month: "Feb"; expenses: "4"; income: "8" } - ListElement{ year: "2003"; month: "Mar"; expenses: "7"; income: "12" } - ListElement{ year: "2003"; month: "Apr"; expenses: "9"; income: "15" } - // rest of 2003 missing on purpose, as well as whole of 2004 - } - - CategoryAxis { - id: rowAxis - categoryLabels: ["2000", "2001", "2002", "2003", "2004"] - } - CategoryAxis { - id: columnAxis - categoryLabels: ["January", "February", "March", "April", "May", "June", - "July", "August", "September", "October", "November", "December"] - } - ValueAxis { - id: incomeAxis - min: 0 - max: 35 - labelFormat: "%.2f M\u20AC" - title: "Monthly income" - } - ValueAxis { - id: expensesAxis - min: 0 - max: 35 - labelFormat: "-%.2f M\u20AC" - title: "Monthly expenses" - } - Bars3D { id: testchart width: dataView.width @@ -129,14 +54,14 @@ Item { theme: Bars3D.ThemeBrownSand rows: 5 columns: 12 - mapping: valueMapping + mapping: chartData.mapping barThickness: 0.5 barSpacing: Qt.size(0.5, 0.5) barSpacingRelative: false barType: Bars3D.BevelBars - rowAxis: rowAxis - columnAxis: columnAxis - valueAxis: expensesAxis + rowAxis: chartAxes.row + columnAxis: chartAxes.column + valueAxis: chartAxes.expenses itemLabelFormat: "@valueTitle for @colLabel, @rowLabel: @valueLabel" onDataResolved: { @@ -144,14 +69,12 @@ Item { selectedBarPos = dataView.storedSelection } } - } Component.onCompleted: { - testchart.data = dataModel + testchart.data = chartData.model } - TableView { id: tableView x: 0 @@ -162,7 +85,7 @@ Item { TableViewColumn{ role: "month" ; title: "Month" ; width: 80 } TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: 70 } TableViewColumn{ role: "income" ; title: "Income" ; width: 70 } - model: dataModel + model: chartData.model } Button { @@ -171,14 +94,14 @@ Item { width: tableView.width text: "Show Income" onClicked: { - if (valueMapping.valueRole == "expenses") { - valueMapping.valueRole = "income" + if (chartData.mapping.valueRole === "expenses") { + chartData.mapping.valueRole = "income" text = "Show Expenses" - testchart.valueAxis = incomeAxis + testchart.valueAxis = chartAxes.income } else { - valueMapping.valueRole = "expenses" + chartData.mapping.valueRole = "expenses" text = "Show Income" - testchart.valueAxis = expensesAxis + testchart.valueAxis = chartAxes.expenses } dataView.storedSelection = testchart.selectedBarPos } diff --git a/examples/qmlbarchart/qmlbarchart.qrc b/examples/qmlbarchart/qmlbarchart.qrc index 8564db14..999cc888 100644 --- a/examples/qmlbarchart/qmlbarchart.qrc +++ b/examples/qmlbarchart/qmlbarchart.qrc @@ -2,5 +2,7 @@ qml/qmlbarchart/main.qml qml/qmlbarchart/button.qml + qml/qmlbarchart/data.qml + qml/qmlbarchart/axes.qml diff --git a/examples/qmlscatter/qml/qmlscatter/data.qml b/examples/qmlscatter/qml/qmlscatter/data.qml new file mode 100644 index 00000000..1eb93092 --- /dev/null +++ b/examples/qmlscatter/qml/qmlscatter/data.qml @@ -0,0 +1,63 @@ +/**************************************************************************** +** +** 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 QtDataVis3D 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.QtDataVis3D 1.0 + +Item { + property alias mapping: scatterMapping + property alias model: dataModel + + ScatterDataMapping { + id: scatterMapping + xPosRole: "xPos" + yPosRole: "yPos" + zPosRole: "zPos" + } + + ListModel { + id: dataModel + ListElement{ xPos: -10.0; yPos: 4.9; zPos: -5.0 } + ListElement{ xPos: 10.0; yPos: 4.9; zPos: -5.0 } + ListElement{ xPos: -10.0; yPos: 4.9; zPos: 5.0 } + ListElement{ xPos: 10.0; yPos: 4.9; zPos: 5.0 } + ListElement{ xPos: -10.0; yPos: -4.9; zPos: -5.0 } + ListElement{ xPos: 10.0; yPos: -4.9; zPos: -5.0 } + ListElement{ xPos: -10.0; yPos: -4.9; zPos: 5.0 } + ListElement{ xPos: 10.0; yPos: -4.9; zPos: 5.0 } + + ListElement{ xPos: -1.0; yPos: 0.3; zPos: -0.5 } + ListElement{ xPos: 1.0; yPos: 2.105; zPos: 0.5 } + ListElement{ xPos: 0.5; yPos: -0.65; zPos: -0.5 } + ListElement{ xPos: -0.5; yPos: 1.225; zPos: 0.5 } + ListElement{ xPos: 0.0; yPos: 0.0; zPos: 0.0 } + ListElement{ xPos: 0.0; yPos: 2.0; zPos: 0.0 } + ListElement{ xPos: 0.0; yPos: -0.5; zPos: 0.0 } + + ListElement{ xPos: 6.0; yPos: 0.0; zPos: 4.0 } + ListElement{ xPos: 5.8; yPos: 0.2; zPos: 5.0 } + ListElement{ xPos: 5.6; yPos: 0.4; zPos: 4.5 } + ListElement{ xPos: 5.4; yPos: 0.6; zPos: 3.8 } + ListElement{ xPos: 5.2; yPos: 0.8; zPos: 4.8 } + ListElement{ xPos: 5.0; yPos: 0.3; zPos: 4.1 } + ListElement{ xPos: 4.9; yPos: -0.3; zPos: 4.9 } + ListElement{ xPos: 4.7; yPos: -0.5; zPos: 3.5 } + ListElement{ xPos: 4.5; yPos: -0.7; zPos: 3.3 } + ListElement{ xPos: 4.3; yPos: -0.4; zPos: 3.7 } + } +} diff --git a/examples/qmlscatter/qml/qmlscatter/main.qml b/examples/qmlscatter/qml/qmlscatter/main.qml index a85c2d21..24088cf6 100644 --- a/examples/qmlscatter/qml/qmlscatter/main.qml +++ b/examples/qmlscatter/qml/qmlscatter/main.qml @@ -24,65 +24,30 @@ Item { id: mainview visible: true + Data { + id: chartData + } + Item { id: dataView width: parent.width height: parent.height - shadowToggle.height anchors.bottom: parent.bottom - ScatterDataMapping { - id: scatterMapping - xPosRole: "xPos" - yPosRole: "yPos" - zPosRole: "zPos" - } - - ListModel { - id: dataModel - ListElement{ xPos: -10.0; yPos: 4.9; zPos: -5.0 } - ListElement{ xPos: 10.0; yPos: 4.9; zPos: -5.0 } - ListElement{ xPos: -10.0; yPos: 4.9; zPos: 5.0 } - ListElement{ xPos: 10.0; yPos: 4.9; zPos: 5.0 } - ListElement{ xPos: -10.0; yPos: -4.9; zPos: -5.0 } - ListElement{ xPos: 10.0; yPos: -4.9; zPos: -5.0 } - ListElement{ xPos: -10.0; yPos: -4.9; zPos: 5.0 } - ListElement{ xPos: 10.0; yPos: -4.9; zPos: 5.0 } - - ListElement{ xPos: -1.0; yPos: 0.3; zPos: -0.5 } - ListElement{ xPos: 1.0; yPos: 2.105; zPos: 0.5 } - ListElement{ xPos: 0.5; yPos: -0.65; zPos: -0.5 } - ListElement{ xPos: -0.5; yPos: 1.225; zPos: 0.5 } - ListElement{ xPos: 0.0; yPos: 0.0; zPos: 0.0 } - ListElement{ xPos: 0.0; yPos: 2.0; zPos: 0.0 } - ListElement{ xPos: 0.0; yPos: -0.5; zPos: 0.0 } - - ListElement{ xPos: 6.0; yPos: 0.0; zPos: 4.0 } - ListElement{ xPos: 5.8; yPos: 0.2; zPos: 5.0 } - ListElement{ xPos: 5.6; yPos: 0.4; zPos: 4.5 } - ListElement{ xPos: 5.4; yPos: 0.6; zPos: 3.8 } - ListElement{ xPos: 5.2; yPos: 0.8; zPos: 4.8 } - ListElement{ xPos: 5.0; yPos: 0.3; zPos: 4.1 } - ListElement{ xPos: 4.9; yPos: -0.3; zPos: 4.9 } - ListElement{ xPos: 4.7; yPos: -0.5; zPos: 3.5 } - ListElement{ xPos: 4.5; yPos: -0.7; zPos: 3.3 } - ListElement{ xPos: 4.3; yPos: -0.4; zPos: 3.7 } - } - Scatter3D { id: testscatter width: dataView.width height: dataView.height font.family: "Times New Roman" font.pointSize: 40 - mapping: scatterMapping + mapping: chartData.mapping shadowQuality: Scatter3D.ShadowNone selectionMode: Scatter3D.ModeItem labelTransparency: Scatter3D.TransparencyNoBackground itemLabelFormat: "X:@xLabel Y:@yLabel Z:@zLabel" Component.onCompleted: { - console.log("testscatter complete"); - data = dataModel + data = chartData.model } } } diff --git a/examples/qmlscatter/qmlscatter.qrc b/examples/qmlscatter/qmlscatter.qrc index 3208d88b..61f0f4fe 100644 --- a/examples/qmlscatter/qmlscatter.qrc +++ b/examples/qmlscatter/qmlscatter.qrc @@ -2,5 +2,6 @@ qml/qmlscatter/main.qml qml/qmlscatter/Button.qml + qml/qmlscatter/data.qml -- cgit v1.2.3