Fix qmloscilloscope example for Qt 6

OpenGL acceleration of series only works when OpenGL backend is used,
so added detection for that and also provided instruction how to
force it on.

Removed Quick Controls v1 usage as it's no longer supported in Qt 6.

Change-Id: I169f4b1cfeb33dded4b6a51c34cd35daf189954f
Reviewed-by: Michal Klocek <michal.klocek@qt.io>

5 files changed, 66 insertions, 53 deletions

diff --git a/examples/charts/qmloscilloscope/main.cpp b/examples/charts/qmloscilloscope/main.cpp
index d03c58b6..cf43580e 100644
--- a/examples/charts/qmloscilloscope/main.cpp
+++ b/examples/charts/qmloscilloscope/main.cpp
@@ -39,6 +39,14 @@ int main(int argc, char *argv[])
     // Qt Charts uses Qt Graphics View Framework for drawing, therefore QApplication must be used.
     QApplication app(argc, argv);
 
+    // OpenGL backend is required to make AbstractSeries.useOpenGL work.
+    // We don't force it programmatically, as OpenGL is not guaranteed to be available everywhere.
+    bool openGLSupported = QQuickWindow::graphicsApi() == QSGRendererInterface::OpenGLRhi;
+    if (!openGLSupported) {
+        qWarning() << "OpenGL is not set as the graphics backend, so AbstractSeries.useOpenGL will not work.";
+        qWarning() << "Set QSG_RHI_BACKEND=opengl environment variable to force the OpenGL backend to be used.";
+    }
+
     QQuickView viewer;
 
     // The following are needed to make examples run without having to install the module
@@ -56,6 +64,7 @@ int main(int argc, char *argv[])
 
     DataSource dataSource(&viewer);
     viewer.rootContext()->setContextProperty("dataSource", &dataSource);
+    viewer.rootContext()->setContextProperty("openGLSupported", openGLSupported);
 
     viewer.setSource(QUrl("qrc:/qml/qmloscilloscope/main.qml"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
diff --git a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml
index fe3bc869..acea6823 100644
--- a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml
+++ b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml
@@ -27,8 +27,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Layouts 1.0
+import QtQuick
+import QtQuick.Layouts
 
 ColumnLayout {
     property alias openGLButton: openGLButton
@@ -52,8 +52,9 @@ ColumnLayout {
         id: openGLButton
         text: "OpenGL: "
         items: ["false", "true"]
-        currentSelection: 1
+        currentSelection: openGLSupported ? 1 : 0
         onSelectionChanged: openGlChanged(currentSelection == 1);
+        enabled: openGLSupported
     }
 
     MultiButton {
diff --git a/examples/charts/qmloscilloscope/qml/qmloscilloscope/MultiButton.qml b/examples/charts/qmloscilloscope/qml/qmloscilloscope/MultiButton.qml
index 8eb6eb67..79322a29 100644
--- a/examples/charts/qmloscilloscope/qml/qmloscilloscope/MultiButton.qml
+++ b/examples/charts/qmloscilloscope/qml/qmloscilloscope/MultiButton.qml
@@ -27,9 +27,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import QtQuick.Controls 1.0
-import QtQuick.Controls.Styles 1.0
+import QtQuick
 
 Item {
     id: button
@@ -44,26 +42,39 @@ Item {
     implicitWidth: buttonText.implicitWidth + 5
     implicitHeight: buttonText.implicitHeight + 10
 
-    Button {
-        id: buttonText
-        width: parent.width
-        height: parent.height
+    Rectangle {
+        anchors.fill: parent
+        radius: 3
+        gradient: button.enabled ? enabledGradient : disabledGradient
 
-        style: ButtonStyle {
-            label: Component {
-                Text {
-                    text: button.text + button.items[currentSelection]
-                    clip: true
-                    wrapMode: Text.WordWrap
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-                    anchors.fill: parent
-                }
-            }
+        Gradient {
+            id: enabledGradient
+            GradientStop { position: 0.0; color: "#eeeeee" }
+            GradientStop { position: 1.0; color: "#cccccc" }
+        }
+        Gradient {
+            id: disabledGradient
+            GradientStop { position: 0.0; color: "#444444" }
+            GradientStop { position: 1.0; color: "#666666" }
+        }
+
+        Text {
+            id: buttonText
+            text: button.text + button.items[currentSelection]
+            clip: true
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            anchors.fill: parent
+            font.pointSize: 14
         }
-        onClicked: {
-            currentSelection = (currentSelection + 1) % items.length;
-            selectionChanged(button.items[currentSelection]);
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                currentSelection = (currentSelection + 1) % items.length;
+                selectionChanged(button.items[currentSelection]);
+            }
         }
     }
 }
diff --git a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml
index 9eb9f9af..46d1e342 100644
--- a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml
+++ b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml
@@ -27,26 +27,23 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import QtCharts 2.1
+import QtQuick
+import QtCharts
 
 //![1]
 ChartView {
     id: chartView
     animationOptions: ChartView.NoAnimation
     theme: ChartView.ChartThemeDark
-    property bool openGL: true
-    property bool openGLSupported: true
+    property bool openGL: openGLSupported
     onOpenGLChanged: {
         if (openGLSupported) {
-            series("signal 1").useOpenGL = openGL;
-            series("signal 2").useOpenGL = openGL;
-        }
-    }
-    Component.onCompleted: {
-        if (!series("signal 1").useOpenGL) {
-            openGLSupported = false
-            openGL = false
+            var series1 = series("signal 1")
+            if (series1)
+                series1.useOpenGL = openGL;
+            var series2 = series("signal 2")
+            if (series2)
+                series2.useOpenGL = openGL;
         }
     }
 
@@ -104,23 +101,25 @@ ChartView {
         // Create two new series of the correct type. Axis x is the same for both of the series,
         // but the series have their own y-axes to make it possible to control the y-offset
         // of the "signal sources".
-        if (type == "line") {
-            var series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
-                                                 axisX, axisY1);
+        var series1
+        var series2
+        if (type === "line") {
+            series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
+                                             axisX, axisY1);
             series1.useOpenGL = chartView.openGL
 
-            var series2 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 2",
-                                                 axisX, axisY2);
+            series2 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 2",
+                                             axisX, axisY2);
             series2.useOpenGL = chartView.openGL
         } else {
-            var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
-                                                 axisX, axisY1);
+            series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
+                                             axisX, axisY1);
             series1.markerSize = 2;
             series1.borderColor = "transparent";
             series1.useOpenGL = chartView.openGL
 
-            var series2 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 2",
-                                                 axisX, axisY2);
+            series2 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 2",
+                                             axisX, axisY2);
             series2.markerSize = 2;
             series2.borderColor = "transparent";
             series2.useOpenGL = chartView.openGL
diff --git a/examples/charts/qmloscilloscope/qml/qmloscilloscope/main.qml b/examples/charts/qmloscilloscope/qml/qmloscilloscope/main.qml
index 3479c523..e2d22f45 100644
--- a/examples/charts/qmloscilloscope/qml/qmloscilloscope/main.qml
+++ b/examples/charts/qmloscilloscope/qml/qmloscilloscope/main.qml
@@ -27,7 +27,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick
 
 //![1]
 Item {
@@ -67,13 +67,6 @@ Item {
         anchors.right: parent.right
         anchors.left: controlPanel.right
         height: main.height
-
-        onOpenGLSupportedChanged: {
-            if (!openGLSupported) {
-                controlPanel.openGLButton.enabled = false
-                controlPanel.openGLButton.currentSelection = 0
-            }
-        }
     }
 //![2]