Revamp qmlscatter example visuals and documentation

Pick-to: 6.5
Fixes: QTBUG-110702
Change-Id: I518e986832d68f39eb63154fea7869a0136c10f0
Reviewed-by: Dilek Akcay <dilek.akcay@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

5 files changed, 51 insertions, 33 deletions

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
diff --git a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
index 2055102e..aa2029d2 100644
--- a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
+++ b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
@@ -32,7 +32,7 @@
     To make deployment little simpler, we 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>
@@ -45,6 +45,20 @@
 
     \snippet qmlscatter/main.cpp 3
 
+    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
+
     Lastly, we want the application to run in a maximized window:
 
     \snippet qmlscatter/main.cpp 2
@@ -55,9 +69,6 @@
 
     \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:
 
     \snippet qmlscatter/qml/qmlscatter/main.qml 1
@@ -79,10 +90,11 @@
 
     \snippet qmlscatter/qml/qmlscatter/main.qml 3
 
-    We added a customized theme and changed the shadow quality.
+    We added a customized theme, changed the shadow quality, and adjusted the camera position.
     We're happy with the other visual properties, so we won't 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 we change the font
+    in it:
 
     \snippet qmlscatter/qml/qmlscatter/main.qml 13
 
diff --git a/examples/datavisualization/qmlscatter/main.cpp b/examples/datavisualization/qmlscatter/main.cpp
index 0c5e50a5..d64847c1 100644
--- a/examples/datavisualization/qmlscatter/main.cpp
+++ b/examples/datavisualization/qmlscatter/main.cpp
@@ -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/main.qml b/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
index ece0f0e0..7702156c 100644
--- a/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
+++ b/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
@@ -11,10 +11,15 @@ import QtDataVisualization
 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,6 +47,8 @@ Item {
         anchors.bottom: parent.bottom
         //! [9]
         width: parent.width
+        // 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]
@@ -49,12 +56,12 @@ Item {
         //! [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
@@ -89,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]
 
@@ -103,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 {
@@ -119,7 +126,7 @@ Item {
     //! [7]
     Button {
         id: shadowToggle
-        width: mainView.portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        width: mainView.buttonWidth // Calculated elsewhere based on screen orientation
         anchors.left: parent.left
         anchors.top: parent.top
         anchors.margins: 5
@@ -127,7 +134,7 @@ Item {
         enabled: scatterGraph.shadowsSupported
         onClicked: {
             if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
-                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow;
+                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityHigh;
                 text = "Hide Shadows";
             } else {
                 scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
@@ -139,13 +146,13 @@ Item {
 
     Button {
         id: smoothToggle
-        width: mainView.portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        width: mainView.buttonWidth
         anchors.left: shadowToggle.right
         anchors.top: parent.top
         anchors.margins: 5
         text: "Use Smooth for Series One"
         onClicked: {
-            if (scatterSeries.meshSmooth === false) {
+            if (!scatterSeries.meshSmooth) {
                 text = "Use Flat for Series One";
                 scatterSeries.meshSmooth = true;
             } else {
@@ -157,7 +164,7 @@ Item {
 
     Button {
         id: cameraToggle
-        width: mainView.portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        width: mainView.buttonWidth
         anchors.left: mainView.portraitMode ? parent.left : smoothToggle.right
         anchors.top: mainView.portraitMode ? smoothToggle.bottom : parent.top
         anchors.margins: 5
@@ -174,17 +181,17 @@ Item {
 
     Button {
         id: themeToggle
-        width: mainView.portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        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.ThemeArmyBlue)
-                scatterGraph.theme = themeIsabelle;
+            if (scatterGraph.theme.type === Theme3D.ThemeRetro)
+                scatterGraph.theme = themeQt;
             else
-                scatterGraph.theme = themeArmyBlue;
-            if (scatterGraph.theme.backgroundEnabled === true)
+                scatterGraph.theme = themeRetro;
+            if (scatterGraph.theme.backgroundEnabled)
                 backgroundToggle.text = "Hide Background";
             else
                 backgroundToggle.text = "Show Background";
@@ -193,13 +200,13 @@ Item {
 
     Button {
         id: backgroundToggle
-        width: mainView.portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        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 === true) {
+            if (scatterGraph.theme.backgroundEnabled) {
                 scatterGraph.theme.backgroundEnabled = false;
                 text = "Show Background";
             } else {
@@ -211,7 +218,7 @@ Item {
 
     Button {
         id: exitButton
-        width: mainView.portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        width: mainView.buttonWidth
         anchors.left: backgroundToggle.right
         anchors.top: mainView.portraitMode ? themeToggle.bottom : parent.top
         anchors.margins: 5
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