summaryrefslogtreecommitdiffstats
path: root/examples/datavisualization/qmlscatter
diff options
context:
space:
mode:
Diffstat (limited to 'examples/datavisualization/qmlscatter')
-rw-r--r--examples/datavisualization/qmlscatter/CMakeLists.txt20
-rw-r--r--examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.pngbin98086 -> 107603 bytes
-rw-r--r--examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc101
-rw-r--r--examples/datavisualization/qmlscatter/main.cpp4
-rw-r--r--examples/datavisualization/qmlscatter/qml/qmlscatter/Data.qml2
-rw-r--r--examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml213
-rw-r--r--examples/datavisualization/qmlscatter/qmlscatter.pro1
7 files changed, 182 insertions, 159 deletions
diff --git a/examples/datavisualization/qmlscatter/CMakeLists.txt b/examples/datavisualization/qmlscatter/CMakeLists.txt
index 65e5d2a7..381ffd79 100644
--- a/examples/datavisualization/qmlscatter/CMakeLists.txt
+++ b/examples/datavisualization/qmlscatter/CMakeLists.txt
@@ -1,3 +1,6 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
cmake_minimum_required(VERSION 3.16)
project(qmlscatter LANGUAGES CXX)
@@ -34,16 +37,13 @@ target_link_libraries(qmlscatter PUBLIC
Qt::DataVisualization
)
-set(qmlscatter_resource_files
- "qml/qmlscatter/Data.qml"
- "qml/qmlscatter/main.qml"
-)
-
-qt6_add_resources(qmlscatter "qmlscatter"
- PREFIX
- "/"
- FILES
- ${qmlscatter_resource_files}
+qt6_add_qml_module(qmlscatter
+ URI Scatter
+ VERSION 1.0
+ NO_RESOURCE_TARGET_PATH
+ QML_FILES
+ qml/qmlscatter/Data.qml
+ qml/qmlscatter/main.qml
)
install(TARGETS qmlscatter
diff --git a/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png
index 65ec4816..5d5de700 100644
--- a/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png
+++ b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png
Binary files differ
diff --git a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
index 18263edc..980fc60d 100644
--- a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
+++ b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
@@ -3,16 +3,18 @@
/*!
\example qmlscatter
- \title Qt Quick 2 Scatter Example
- \ingroup qtdatavisualization_examples
+ \meta tags {DataVisualization, Scatter3D, Multiple Series}
+ \title Simple Scatter Graph
+ \ingroup qtdatavisualization_qmlexamples
\brief Using Scatter3D in a QML application.
- The Qt Quick 2 scatter example shows how to make a simple scatter graph visualization using
- Scatter3D and Qt Quick 2.
+ \e {Simple Scatter Graph} shows how to make a simple scatter graph visualization using
+ Scatter3D and QML.
- For instructions about how to interact with the graph, see \l{Qt Data Visualization Interacting with Data}{this page}.
+ For instructions about how to interact with the graph, see
+ \l{Qt Data Visualization Interacting with Data}{this page}.
- For instructions how to create a new Qt Quick 2 application of your own, see Qt Creator help.
+ For instructions on how to create a new Qt Quick application of your own, see Qt Creator help.
\image qmlscatter-example.png
@@ -20,17 +22,17 @@
\section1 Application Basics
- Before diving into the QML code, let's take a look at the application \c main.cpp.
+ Before diving into the QML code, take a look at the application \c main.cpp.
- This application implements a 'Quit' button in the UI, so we want to connect the QQmlEngine::quit()
- signal to our application's QWindow::close() slot:
+ This application implements a 'Quit' button in the UI, so you want to connect the QQmlEngine::quit()
+ signal to the application's QWindow::close() slot:
\snippet qmlscatter/main.cpp 4
- To make deployment little simpler, we gather all of the application's \c .qml files to a resource
+ To make deployment a little simpler, gather all of the application's \c .qml files to a resource
file (\c qmlscatter.qrc):
- \code
+ \badcode
<RCC>
<qresource prefix="/">
<file>qml/qmlscatter/Data.qml</file>
@@ -39,112 +41,123 @@
</RCC>
\endcode
- This also requires us to set the \c main.qml to be read from the resource (\c{qrc:}):
+ This also requires setting the \c main.qml to be read from the resource (\c{qrc:}):
\snippet qmlscatter/main.cpp 3
- Lastly, we want the application to run in a maximized window:
+ When using cmake instead of qmake, the \c .qml files are added into a QML module in the
+ \c {CMakeLists.txt} instead:
+
+ \badcode
+ qt6_add_qml_module(qmlscatter
+ URI Scatter
+ VERSION 1.0
+ NO_RESOURCE_TARGET_PATH
+ QML_FILES
+ qml/qmlscatter/Data.qml
+ qml/qmlscatter/main.qml
+ )
+ \endcode
+
+ Finally, make the application run in a maximized window:
\snippet qmlscatter/main.cpp 2
\section1 Setting up the Graph
- First we'll import all the QML modules we need:
+ First, import all the needed QML modules:
\snippet qmlscatter/qml/qmlscatter/main.qml 0
- The last \c import just imports all the qml files in the same directory as our \c {main.qml},
- because that's where \c Data.qml is.
-
- Then we create our main \c Item and call it \c mainView:
+ Then, create the main \c Item and call it \c mainView:
\snippet qmlscatter/qml/qmlscatter/main.qml 1
- Then we'll add another \c Item inside the main \c Item, and call it \c dataView.
- This will be the item to hold the Scatter3D graph. We'll anchor it to the parent bottom:
+ Then, add another \c Item inside the main \c Item, and call it \c {dataView}.
+ This will be the item to hold the Scatter3D graph. Anchor it to the parent bottom:
\snippet qmlscatter/qml/qmlscatter/main.qml 9
- Next we're ready to add the Scatter3D graph itself. We'll add it inside the \c dataView and
- name it \c {scatterGraph}. Let's make it fill the \c {dataView}:
+ Next, add the Scatter3D graph itself. Add it inside the \c dataView and
+ name it \c {scatterGraph}. Make it fill the \c {dataView}:
\snippet qmlscatter/qml/qmlscatter/main.qml 2
Now the graph is ready for use, but has no data. It also has the default axes and visual
properties.
- Let's modify some visual properties first by adding the following inside \c {scatterGraph}:
+ Next, modify some visual properties first by adding the following inside \c {scatterGraph}:
\snippet qmlscatter/qml/qmlscatter/main.qml 3
- We added a customized theme and changed the shadow quality.
- We're happy with the other visual properties, so we won't change them.
+ A customized theme was added, the shadow quality changed, and the camera position adjusted.
+ The other visual properties are fine, so there is no need to change them.
- The custom theme is based on a predefined theme, but we change the font in it:
+ The custom theme is based on a predefined theme, \c {Theme3D.ThemeQt}, but the font in it
+ is changed:
\snippet qmlscatter/qml/qmlscatter/main.qml 13
- Then it's time to start feeding the graph some data.
+ Then, start feeding the graph some data.
\section1 Adding Data to the Graph
- Let's create a \c Data item inside the \c mainView and name it \c seriesData:
+ Create a \c Data item inside the \c mainView and name it \c seriesData:
\snippet qmlscatter/qml/qmlscatter/main.qml 4
- The \c seriesData item contains the data models for all three series we use in this example.
+ The \c seriesData item contains the data models for all three series used in this example.
- This is the component that holds our data in \c {Data.qml}. It has an \c Item as the main
+ This is the component that holds the data in \c {Data.qml}. It has an \c Item as the main
component.
- In the main component we'll add the data itself in a \c ListModel and name it
- \c {dataModel}:
+ In the main component, add the data itself to a \c ListModel and name it \c {dataModel}:
\snippet qmlscatter/qml/qmlscatter/Data.qml 0
\dots
- We'll add two more of these for the other two series, and name them \c dataModelTwo and
+ Add two more of these to the other two series, and name them \c dataModelTwo and
\c {dataModelThree}.
- Then we need to expose the data models to be usable from \c {main.qml}. We do this by defining
+ Then, expose the data models to be usable from \c {main.qml}. Do this by defining
them as aliases in the main data component:
\snippet qmlscatter/qml/qmlscatter/Data.qml 1
- Now we can use the data from \c Data.qml with \c scatterGraph in \c {main.qml}. First we'll add
+ Now you can use the data from \c Data.qml with \c scatterGraph in \c {main.qml}. First, add
a Scatter3DSeries and call it \c {scatterSeries}:
\snippet qmlscatter/qml/qmlscatter/main.qml 5
- Then we'll set up selection label format for the series:
+ Then, set up selection label format for the series:
\snippet qmlscatter/qml/qmlscatter/main.qml 10
- And finally the data for series one in a ItemModelScatterDataProxy. We set the data itself as
- \c itemModel for the proxy:
+ And finally, add the data for series one in a ItemModelScatterDataProxy. Set the data itself as
+ the \c itemModel for the proxy:
\snippet qmlscatter/qml/qmlscatter/main.qml 11
- We'll add the other two series in the same way, but modify some series-specific details a bit:
+ Add the other two series in the same way, but modify some series-specific details a bit:
\snippet qmlscatter/qml/qmlscatter/main.qml 12
\dots
- Then we'll modify the properties of the default axes in \c scatterGraph a bit:
+ Then, modify the properties of the default axes in \c scatterGraph a bit:
\snippet qmlscatter/qml/qmlscatter/main.qml 6
- After that we'll just add a few buttons to the \c mainView to control the graph. We'll only
- show one as an example:
+ After that, add a few buttons to the \c mainView to control the graph, one of which is shown as
+ an example:
\snippet qmlscatter/qml/qmlscatter/main.qml 7
- Then we'll modify \c dataView to make room for the buttons at the top:
+ Then, modify \c dataView to make some room for the buttons at the top:
\snippet qmlscatter/qml/qmlscatter/main.qml 8
\dots
- And we're done!
+ And you're done!
\section1 Example Contents
*/
diff --git a/examples/datavisualization/qmlscatter/main.cpp b/examples/datavisualization/qmlscatter/main.cpp
index 0c5e50a5..e9332869 100644
--- a/examples/datavisualization/qmlscatter/main.cpp
+++ b/examples/datavisualization/qmlscatter/main.cpp
@@ -1,5 +1,5 @@
// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
#include <QtGui/QGuiApplication>
#include <QtCore/QDir>
@@ -26,7 +26,7 @@ int main(int argc, char *argv[])
QObject::connect(viewer.engine(), &QQmlEngine::quit, &viewer, &QWindow::close);
//! [4]
- viewer.setTitle(QStringLiteral("QML scatter example"));
+ viewer.setTitle(QStringLiteral("Simple Scatter Graph"));
//! [3]
viewer.setSource(QUrl("qrc:/qml/qmlscatter/main.qml"));
diff --git a/examples/datavisualization/qmlscatter/qml/qmlscatter/Data.qml b/examples/datavisualization/qmlscatter/qml/qmlscatter/Data.qml
index 2cdc068a..e38bba91 100644
--- a/examples/datavisualization/qmlscatter/qml/qmlscatter/Data.qml
+++ b/examples/datavisualization/qmlscatter/qml/qmlscatter/Data.qml
@@ -1,5 +1,5 @@
// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
diff --git a/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml b/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
index da260298..f1ccabde 100644
--- a/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
+++ b/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
@@ -1,20 +1,25 @@
// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
//! [0]
import QtQuick
-import QtQuick.Layouts
import QtQuick.Controls
-import QtDataVisualization 1.2
-import "."
+import QtDataVisualization
//! [0]
//! [1]
Item {
id: mainView
//! [1]
- width: 500
- height: 500
+ width: 1600
+ height: 1200
+
+ property bool portraitMode: width < height
+ // Adjust the button width based on screen orientation:
+ // If we're in portrait mode, just fit two buttons side-by-side, otherwise
+ // fit all of the buttons side-by-side.
+ property real buttonWidth: mainView.portraitMode ? (mainView.width / 2 - 8)
+ : (mainView.width / 6 - 6)
//! [4]
Data {
@@ -24,15 +29,15 @@ Item {
//! [13]
Theme3D {
- id: themeIsabelle
- type: Theme3D.ThemeIsabelle
+ id: themeQt
+ type: Theme3D.ThemeQt
font.pointSize: 40
}
//! [13]
Theme3D {
- id: themeArmyBlue
- type: Theme3D.ThemeArmyBlue
+ id: themeRetro
+ type: Theme3D.ThemeRetro
}
//! [8]
@@ -42,18 +47,21 @@ Item {
anchors.bottom: parent.bottom
//! [9]
width: parent.width
- height: parent.height - buttonLayout.height
+ // Adjust the space based on screen orientation:
+ // If we're in portrait mode, we have 3 rows of buttons, otherwise they are all in one row.
+ height: parent.height - (mainView.portraitMode ? shadowToggle.implicitHeight * 3 + 25
+ : shadowToggle.implicitHeight + 10)
//! [8]
//! [2]
Scatter3D {
id: scatterGraph
- width: dataView.width
- height: dataView.height
+ anchors.fill: parent
//! [2]
//! [3]
- theme: themeIsabelle
- shadowQuality: AbstractGraph3D.ShadowQualitySoftLow
+ theme: themeQt
+ shadowQuality: AbstractGraph3D.ShadowQualityHigh
+ scene.activeCamera.cameraPreset: Camera3D.CameraPresetFront
//! [3]
//! [6]
axisX.segmentCount: 3
@@ -88,7 +96,7 @@ Item {
Scatter3DSeries {
id: scatterSeriesTwo
itemLabelFormat: "Series 2: X:@xLabel Y:@yLabel Z:@zLabel"
- itemSize: 0.1
+ itemSize: 0.05
mesh: Abstract3DSeries.MeshCube
//! [12]
@@ -102,7 +110,7 @@ Item {
Scatter3DSeries {
id: scatterSeriesThree
itemLabelFormat: "Series 3: X:@xLabel Y:@yLabel Z:@zLabel"
- itemSize: 0.2
+ itemSize: 0.1
mesh: Abstract3DSeries.MeshMinimal
ItemModelScatterDataProxy {
@@ -115,103 +123,106 @@ Item {
}
}
- RowLayout {
- id: buttonLayout
- Layout.minimumHeight: cameraToggle.height
- width: parent.width
+ //! [7]
+ Button {
+ id: shadowToggle
+ width: mainView.buttonWidth // Calculated elsewhere based on screen orientation
anchors.left: parent.left
- spacing: 0
- //! [7]
- Button {
- id: shadowToggle
- Layout.fillHeight: true
- Layout.fillWidth: true
- text: scatterGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
- enabled: scatterGraph.shadowsSupported
- onClicked: {
- if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
- scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow;
- text = "Hide Shadows";
- } else {
- scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
- text = "Show Shadows";
- }
+ anchors.top: parent.top
+ anchors.margins: 5
+ text: scatterGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
+ enabled: scatterGraph.shadowsSupported
+ onClicked: {
+ if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
+ scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityHigh;
+ text = "Hide Shadows";
+ } else {
+ scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
+ text = "Show Shadows";
}
}
- //! [7]
-
- Button {
- id: smoothToggle
- Layout.fillHeight: true
- Layout.fillWidth: true
- text: "Use Smooth for Series One"
- onClicked: {
- if (scatterSeries.meshSmooth === false) {
- text = "Use Flat for Series One";
- scatterSeries.meshSmooth = true;
- } else {
- text = "Use Smooth for Series One"
- scatterSeries.meshSmooth = false;
- }
+ }
+ //! [7]
+
+ Button {
+ id: smoothToggle
+ width: mainView.buttonWidth
+ anchors.left: shadowToggle.right
+ anchors.top: parent.top
+ anchors.margins: 5
+ text: "Use Smooth for Series One"
+ onClicked: {
+ if (!scatterSeries.meshSmooth) {
+ text = "Use Flat for Series One";
+ scatterSeries.meshSmooth = true;
+ } else {
+ text = "Use Smooth for Series One";
+ scatterSeries.meshSmooth = false;
}
}
+ }
- Button {
- id: cameraToggle
- Layout.fillHeight: true
- Layout.fillWidth: true
- text: "Change Camera Placement"
- onClicked: {
- if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) {
- scatterGraph.scene.activeCamera.cameraPreset =
- Camera3D.CameraPresetIsometricRightHigh;
- } else {
- scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront;
- }
+ Button {
+ id: cameraToggle
+ width: mainView.buttonWidth
+ anchors.left: mainView.portraitMode ? parent.left : smoothToggle.right
+ anchors.top: mainView.portraitMode ? smoothToggle.bottom : parent.top
+ anchors.margins: 5
+ text: "Change Camera Placement"
+ onClicked: {
+ if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) {
+ scatterGraph.scene.activeCamera.cameraPreset =
+ Camera3D.CameraPresetIsometricRightHigh;
+ } else {
+ scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront;
}
}
+ }
- Button {
- id: themeToggle
- Layout.fillHeight: true
- Layout.fillWidth: true
- text: "Change Theme"
- onClicked: {
- if (scatterGraph.theme.type === Theme3D.ThemeArmyBlue) {
- scatterGraph.theme = themeIsabelle
- } else {
- scatterGraph.theme = themeArmyBlue
- }
- if (scatterGraph.theme.backgroundEnabled === true) {
- backgroundToggle.text = "Hide Background";
- } else {
- backgroundToggle.text = "Show Background";
- }
- }
+ Button {
+ id: themeToggle
+ width: mainView.buttonWidth
+ anchors.left: cameraToggle.right
+ anchors.top: mainView.portraitMode ? smoothToggle.bottom : parent.top
+ anchors.margins: 5
+ text: "Change Theme"
+ onClicked: {
+ if (scatterGraph.theme.type === Theme3D.ThemeRetro)
+ scatterGraph.theme = themeQt;
+ else
+ scatterGraph.theme = themeRetro;
+ if (scatterGraph.theme.backgroundEnabled)
+ backgroundToggle.text = "Hide Background";
+ else
+ backgroundToggle.text = "Show Background";
}
+ }
- Button {
- id: backgroundToggle
- Layout.fillHeight: true
- Layout.fillWidth: true
- text: "Hide Background"
- onClicked: {
- if (scatterGraph.theme.backgroundEnabled === true) {
- scatterGraph.theme.backgroundEnabled = false;
- text = "Show Background";
- } else {
- scatterGraph.theme.backgroundEnabled = true;
- text = "Hide Background";
- }
+ Button {
+ id: backgroundToggle
+ width: mainView.buttonWidth
+ anchors.left: mainView.portraitMode ? parent.left : themeToggle.right
+ anchors.top: mainView.portraitMode ? themeToggle.bottom : parent.top
+ anchors.margins: 5
+ text: "Hide Background"
+ onClicked: {
+ if (scatterGraph.theme.backgroundEnabled) {
+ scatterGraph.theme.backgroundEnabled = false;
+ text = "Show Background";
+ } else {
+ scatterGraph.theme.backgroundEnabled = true;
+ text = "Hide Background";
}
}
+ }
- Button {
- id: exitButton
- Layout.fillHeight: true
- Layout.fillWidth: true
- text: "Quit"
- onClicked: Qt.quit();
- }
+ Button {
+ id: exitButton
+ width: mainView.buttonWidth
+ anchors.left: backgroundToggle.right
+ anchors.top: mainView.portraitMode ? themeToggle.bottom : parent.top
+ anchors.margins: 5
+ text: "Quit"
+ onClicked: Qt.quit();
}
}
diff --git a/examples/datavisualization/qmlscatter/qmlscatter.pro b/examples/datavisualization/qmlscatter/qmlscatter.pro
index b97ca7be..2ca00874 100644
--- a/examples/datavisualization/qmlscatter/qmlscatter.pro
+++ b/examples/datavisualization/qmlscatter/qmlscatter.pro
@@ -2,7 +2,6 @@
error( "Couldn't find the examples.pri file!" )
}
-# The .cpp file which was generated for your project. Feel free to hack it.
SOURCES += main.cpp
RESOURCES += qmlscatter.qrc
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-25 15:45:34 +0000