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>

1 files changed, 32 insertions, 25 deletions

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