Accelerating lineseries with OpenGL

Added support for QAbstractSeries::useOpenGL property.
When true, the series in question is drawn on a separate
offscreen buffer using OpenGL and then superimposed on
the chart. Currently this property is only supported
for line and scatter series.

Change-Id: I174fec541f9f3c23464270c1fe08f824af16a0fb
Reviewed-by: Titta Heikkala <titta.heikkala@theqtcompany.com>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@theqtcompany.com>

3 files changed, 49 insertions, 10 deletions

diff --git a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml
index 478a2cc3..ccf53fa1 100644
--- a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml
+++ b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ControlPanel.qml
@@ -16,10 +16,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 import QtQuick.Layouts 1.0
 
 ColumnLayout {
+    property alias openGLButton: openGLButton
     spacing: 8
     Layout.fillHeight: true
     signal animationsEnabled(bool enabled)
@@ -27,6 +28,7 @@ ColumnLayout {
     signal refreshRateChanged(variant rate);
     signal signalSourceChanged(string source, int signalCount, int sampleCount);
     signal antialiasingEnabled(bool enabled)
+    signal openGlChanged(bool enabled)
 
     Text {
         text: "Scope"
@@ -35,6 +37,14 @@ ColumnLayout {
     }
 
     MultiButton {
+        id: openGLButton
+        text: "OpenGL: "
+        items: ["false", "true"]
+        currentSelection: 0
+        onSelectionChanged: openGlChanged(currentSelection == 1);
+    }
+
+    MultiButton {
         text: "Graph: "
         items: ["line", "spline", "scatter"]
         currentSelection: 0
diff --git a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml
index e422d056..443e515a 100644
--- a/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml
+++ b/examples/charts/qmloscilloscope/qml/qmloscilloscope/ScopeView.qml
@@ -17,13 +17,18 @@
 ****************************************************************************/
 
 import QtQuick 2.0
-import QtCharts 2.0
+import QtCharts 2.1
 
 //![1]
 ChartView {
     id: chartView
     animationOptions: ChartView.NoAnimation
     theme: ChartView.ChartThemeDark
+    property bool openGL: false
+    onOpenGLChanged: {
+        series("signal 1").useOpenGL = openGL;
+        series("signal 2").useOpenGL = openGL;
+    }
 
     ValueAxis {
         id: axisY1
@@ -40,7 +45,7 @@ ChartView {
     ValueAxis {
         id: axisX
         min: 0
-        max: 1000
+        max: 1024
     }
 
     LineSeries {
@@ -48,12 +53,14 @@ ChartView {
         name: "signal 1"
         axisX: axisX
         axisY: axisY1
+        useOpenGL: chartView.openGL
     }
     LineSeries {
         id: lineSeries2
         name: "signal 2"
         axisX: axisX
         axisYRight: axisY2
+        useOpenGL: chartView.openGL
     }
 //![1]
 
@@ -78,18 +85,28 @@ ChartView {
         // but the series have their own y-axes to make it possible to control the y-offset
         // of the "signal sources".
         if (type == "line") {
-            chartView.createSeries(ChartView.SeriesTypeLine, "signal 1", axisX, axisY1);
-            chartView.createSeries(ChartView.SeriesTypeLine, "signal 2", axisX, axisY2);
+            var series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
+                                                 axisX, axisY1);
+            series1.useOpenGL = chartView.openGL
+
+            var series2 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 2",
+                                                 axisX, axisY2);
+            series2.useOpenGL = chartView.openGL
         } else if (type == "spline") {
             chartView.createSeries(ChartView.SeriesTypeSpline, "signal 1", axisX, axisY1);
             chartView.createSeries(ChartView.SeriesTypeSpline, "signal 2", axisX, axisY2);
         } else {
-            var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1", axisX, axisY1);
+            var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
+                                                 axisX, axisY1);
             series1.markerSize = 3;
             series1.borderColor = "transparent";
-            var series2 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 2", axisX, axisY2);
+            series1.useOpenGL = chartView.openGL
+
+            var series2 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 2",
+                                                 axisX, axisY2);
             series2.markerSize = 3;
             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 0ff40c21..5340177e 100644
--- a/examples/charts/qmloscilloscope/qml/qmloscilloscope/main.qml
+++ b/examples/charts/qmloscilloscope/qml/qmloscilloscope/main.qml
@@ -21,8 +21,8 @@ import QtQuick 2.0
 //![1]
 Rectangle {
     id: main
-    width: 400
-    height: 300
+    width: 600
+    height: 400
     color: "#404040"
 
     ControlPanel {
@@ -39,11 +39,22 @@ Rectangle {
                 dataSource.generateData(0, signalCount, sampleCount);
             else
                 dataSource.generateData(1, signalCount, sampleCount);
+            scopeView.axisX().max = sampleCount;
         }
         onAnimationsEnabled: scopeView.setAnimations(enabled);
-        onSeriesTypeChanged: scopeView.changeSeriesType(type);
+        onSeriesTypeChanged: {
+            scopeView.changeSeriesType(type);
+            if (type === "spline") {
+                controlPanel.openGLButton.currentSelection = 0;
+                controlPanel.openGLButton.enabled = false;
+                scopeView.openGL = false;
+            } else {
+                controlPanel.openGLButton.enabled = true;
+            }
+        }
         onRefreshRateChanged: scopeView.changeRefreshRate(rate);
         onAntialiasingEnabled: scopeView.antialiasing = enabled;
+        onOpenGlChanged: scopeView.openGL = enabled;
     }
 
 //![2]
@@ -56,4 +67,5 @@ Rectangle {
         height: main.height
     }
 //![2]
+
 }