##// END OF EJS Templates
Made Qml Oscilloscope example little more sensible...
Miikka Heikkinen -
r2832:faab188cb2e7
parent child
Show More
@@ -1,96 +1,92
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2015 The Qt Company Ltd
3 ** Copyright (C) 2015 The Qt Company Ltd
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
6 **
6 **
7 ** This file is part of the Qt Charts module.
7 ** This file is part of the Qt Charts module.
8 **
8 **
9 ** Licensees holding valid commercial license for Qt may use this file in
9 ** Licensees holding valid commercial license for Qt may use this file in
10 ** accordance with the Qt License Agreement provided with the Software
10 ** accordance with the Qt License Agreement provided with the Software
11 ** or, alternatively, in accordance with the terms contained in a written
11 ** or, alternatively, in accordance with the terms contained in a written
12 ** agreement between you and The Qt Company.
12 ** agreement between you and The Qt Company.
13 **
13 **
14 ** If you have questions regarding the use of this file, please use
14 ** If you have questions regarding the use of this file, please use
15 ** contact form at http://qt.io
15 ** contact form at http://qt.io
16 **
16 **
17 ****************************************************************************/
17 ****************************************************************************/
18
18
19 import QtQuick 2.1
19 import QtQuick 2.1
20 import QtQuick.Layouts 1.0
20 import QtQuick.Layouts 1.0
21
21
22 ColumnLayout {
22 ColumnLayout {
23 property alias openGLButton: openGLButton
23 property alias openGLButton: openGLButton
24 property alias antialiasButton: antialiasButton
24 spacing: 8
25 spacing: 8
25 Layout.fillHeight: true
26 Layout.fillHeight: true
26 signal animationsEnabled(bool enabled)
27 signal animationsEnabled(bool enabled)
27 signal seriesTypeChanged(string type)
28 signal seriesTypeChanged(string type)
28 signal refreshRateChanged(variant rate);
29 signal refreshRateChanged(variant rate);
29 signal signalSourceChanged(string source, int signalCount, int sampleCount);
30 signal signalSourceChanged(string source, int signalCount, int sampleCount);
30 signal antialiasingEnabled(bool enabled)
31 signal antialiasingEnabled(bool enabled)
31 signal openGlChanged(bool enabled)
32 signal openGlChanged(bool enabled)
32
33
33 Text {
34 Text {
34 text: "Scope"
35 text: "Scope"
35 font.pointSize: 18
36 font.pointSize: 18
36 color: "white"
37 color: "white"
37 }
38 }
38
39
39 MultiButton {
40 MultiButton {
40 id: openGLButton
41 id: openGLButton
41 text: "OpenGL: "
42 text: "OpenGL: "
42 items: ["false", "true"]
43 items: ["false", "true"]
43 currentSelection: 0
44 currentSelection: 1
44 onSelectionChanged: openGlChanged(currentSelection == 1);
45 onSelectionChanged: openGlChanged(currentSelection == 1);
45 }
46 }
46
47
47 MultiButton {
48 MultiButton {
48 text: "Graph: "
49 text: "Graph: "
49 items: ["line", "spline", "scatter"]
50 items: ["line", "scatter"]
50 currentSelection: 0
51 currentSelection: 0
51 onSelectionChanged: seriesTypeChanged(items[currentSelection]);
52 onSelectionChanged: seriesTypeChanged(items[currentSelection]);
52 }
53 }
53
54
54 MultiButton {
55 MultiButton {
55 id: signalSourceButton
56 id: signalSourceButton
56 text: "Source: "
57 text: "Source: "
57 items: ["sin", "linear"]
58 items: ["sin", "linear"]
58 currentSelection: 0
59 currentSelection: 0
59 onSelectionChanged: signalSourceChanged(
60 onSelectionChanged: signalSourceChanged(
60 selection,
61 selection,
61 5,
62 5,
62 sampleCountButton.items[sampleCountButton.currentSelection]);
63 sampleCountButton.items[sampleCountButton.currentSelection]);
63 }
64 }
64
65
65 MultiButton {
66 MultiButton {
66 id: sampleCountButton
67 id: sampleCountButton
67 text: "Samples: "
68 text: "Samples: "
68 items: ["6", "128", "1024", "10000"]
69 items: ["6", "128", "1024", "10000"]
69 currentSelection: 2
70 currentSelection: 2
70 onSelectionChanged: signalSourceChanged(
71 onSelectionChanged: signalSourceChanged(
71 signalSourceButton.items[signalSourceButton.currentSelection],
72 signalSourceButton.items[signalSourceButton.currentSelection],
72 5,
73 5,
73 selection);
74 selection);
74 }
75 }
75
76
76 MultiButton {
77 MultiButton {
77 text: "Refresh rate: "
78 text: "Refresh rate: "
78 items: ["1", "24", "60"]
79 items: ["1", "24", "60"]
79 currentSelection: 2
80 currentSelection: 2
80 onSelectionChanged: refreshRateChanged(items[currentSelection]);
81 onSelectionChanged: refreshRateChanged(items[currentSelection]);
81 }
82 }
82
83
83 MultiButton {
84 MultiButton {
84 text: "Animations: "
85 id: antialiasButton
85 items: ["OFF", "ON"]
86 currentSelection: 0
87 onSelectionChanged: animationsEnabled(currentSelection == 1);
88 }
89
90 MultiButton {
91 text: "Antialias: "
86 text: "Antialias: "
92 items: ["OFF", "ON"]
87 items: ["OFF", "ON"]
88 enabled: false
93 currentSelection: 0
89 currentSelection: 0
94 onSelectionChanged: antialiasingEnabled(currentSelection == 1);
90 onSelectionChanged: antialiasingEnabled(currentSelection == 1);
95 }
91 }
96 }
92 }
@@ -1,130 +1,127
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2015 The Qt Company Ltd
3 ** Copyright (C) 2015 The Qt Company Ltd
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
6 **
6 **
7 ** This file is part of the Qt Charts module.
7 ** This file is part of the Qt Charts module.
8 **
8 **
9 ** Licensees holding valid commercial license for Qt may use this file in
9 ** Licensees holding valid commercial license for Qt may use this file in
10 ** accordance with the Qt License Agreement provided with the Software
10 ** accordance with the Qt License Agreement provided with the Software
11 ** or, alternatively, in accordance with the terms contained in a written
11 ** or, alternatively, in accordance with the terms contained in a written
12 ** agreement between you and The Qt Company.
12 ** agreement between you and The Qt Company.
13 **
13 **
14 ** If you have questions regarding the use of this file, please use
14 ** If you have questions regarding the use of this file, please use
15 ** contact form at http://qt.io
15 ** contact form at http://qt.io
16 **
16 **
17 ****************************************************************************/
17 ****************************************************************************/
18
18
19 import QtQuick 2.0
19 import QtQuick 2.0
20 import QtCharts 2.1
20 import QtCharts 2.1
21
21
22 //![1]
22 //![1]
23 ChartView {
23 ChartView {
24 id: chartView
24 id: chartView
25 animationOptions: ChartView.NoAnimation
25 animationOptions: ChartView.NoAnimation
26 theme: ChartView.ChartThemeDark
26 theme: ChartView.ChartThemeDark
27 property bool openGL: false
27 property bool openGL: true
28 onOpenGLChanged: {
28 onOpenGLChanged: {
29 series("signal 1").useOpenGL = openGL;
29 series("signal 1").useOpenGL = openGL;
30 series("signal 2").useOpenGL = openGL;
30 series("signal 2").useOpenGL = openGL;
31 }
31 }
32
32
33 ValueAxis {
33 ValueAxis {
34 id: axisY1
34 id: axisY1
35 min: -1
35 min: -1
36 max: 4
36 max: 4
37 }
37 }
38
38
39 ValueAxis {
39 ValueAxis {
40 id: axisY2
40 id: axisY2
41 min: -10
41 min: -10
42 max: 5
42 max: 5
43 }
43 }
44
44
45 ValueAxis {
45 ValueAxis {
46 id: axisX
46 id: axisX
47 min: 0
47 min: 0
48 max: 1024
48 max: 1024
49 }
49 }
50
50
51 LineSeries {
51 LineSeries {
52 id: lineSeries1
52 id: lineSeries1
53 name: "signal 1"
53 name: "signal 1"
54 axisX: axisX
54 axisX: axisX
55 axisY: axisY1
55 axisY: axisY1
56 useOpenGL: chartView.openGL
56 useOpenGL: chartView.openGL
57 }
57 }
58 LineSeries {
58 LineSeries {
59 id: lineSeries2
59 id: lineSeries2
60 name: "signal 2"
60 name: "signal 2"
61 axisX: axisX
61 axisX: axisX
62 axisYRight: axisY2
62 axisYRight: axisY2
63 useOpenGL: chartView.openGL
63 useOpenGL: chartView.openGL
64 }
64 }
65 //![1]
65 //![1]
66
66
67 //![2]
67 //![2]
68 Timer {
68 Timer {
69 id: refreshTimer
69 id: refreshTimer
70 interval: 1 / 60 * 1000 // 60 Hz
70 interval: 1 / 60 * 1000 // 60 Hz
71 running: true
71 running: true
72 repeat: true
72 repeat: true
73 onTriggered: {
73 onTriggered: {
74 dataSource.update(chartView.series(0));
74 dataSource.update(chartView.series(0));
75 dataSource.update(chartView.series(1));
75 dataSource.update(chartView.series(1));
76 }
76 }
77 }
77 }
78 //![2]
78 //![2]
79
79
80 //![3]
80 //![3]
81 function changeSeriesType(type) {
81 function changeSeriesType(type) {
82 chartView.removeAllSeries();
82 chartView.removeAllSeries();
83
83
84 // Create two new series of the correct type. Axis x is the same for both of the series,
84 // Create two new series of the correct type. Axis x is the same for both of the series,
85 // but the series have their own y-axes to make it possible to control the y-offset
85 // but the series have their own y-axes to make it possible to control the y-offset
86 // of the "signal sources".
86 // of the "signal sources".
87 if (type == "line") {
87 if (type == "line") {
88 var series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
88 var series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
89 axisX, axisY1);
89 axisX, axisY1);
90 series1.useOpenGL = chartView.openGL
90 series1.useOpenGL = chartView.openGL
91
91
92 var series2 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 2",
92 var series2 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 2",
93 axisX, axisY2);
93 axisX, axisY2);
94 series2.useOpenGL = chartView.openGL
94 series2.useOpenGL = chartView.openGL
95 } else if (type == "spline") {
96 chartView.createSeries(ChartView.SeriesTypeSpline, "signal 1", axisX, axisY1);
97 chartView.createSeries(ChartView.SeriesTypeSpline, "signal 2", axisX, axisY2);
98 } else {
95 } else {
99 var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
96 var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
100 axisX, axisY1);
97 axisX, axisY1);
101 series1.markerSize = 3;
98 series1.markerSize = 2;
102 series1.borderColor = "transparent";
99 series1.borderColor = "transparent";
103 series1.useOpenGL = chartView.openGL
100 series1.useOpenGL = chartView.openGL
104
101
105 var series2 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 2",
102 var series2 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 2",
106 axisX, axisY2);
103 axisX, axisY2);
107 series2.markerSize = 3;
104 series2.markerSize = 2;
108 series2.borderColor = "transparent";
105 series2.borderColor = "transparent";
109 series2.useOpenGL = chartView.openGL
106 series2.useOpenGL = chartView.openGL
110 }
107 }
111 }
108 }
112
109
113 function createAxis(min, max) {
110 function createAxis(min, max) {
114 // The following creates a ValueAxis object that can be then set as a x or y axis for a series
111 // The following creates a ValueAxis object that can be then set as a x or y axis for a series
115 return Qt.createQmlObject("import QtQuick 2.0; import QtCharts 2.0; ValueAxis { min: "
112 return Qt.createQmlObject("import QtQuick 2.0; import QtCharts 2.0; ValueAxis { min: "
116 + min + "; max: " + max + " }", chartView);
113 + min + "; max: " + max + " }", chartView);
117 }
114 }
118 //![3]
115 //![3]
119
116
120 function setAnimations(enabled) {
117 function setAnimations(enabled) {
121 if (enabled)
118 if (enabled)
122 chartView.animationOptions = ChartView.SeriesAnimations;
119 chartView.animationOptions = ChartView.SeriesAnimations;
123 else
120 else
124 chartView.animationOptions = ChartView.NoAnimation;
121 chartView.animationOptions = ChartView.NoAnimation;
125 }
122 }
126
123
127 function changeRefreshRate(rate) {
124 function changeRefreshRate(rate) {
128 refreshTimer.interval = 1 / Number(rate) * 1000;
125 refreshTimer.interval = 1 / Number(rate) * 1000;
129 }
126 }
130 }
127 }
@@ -1,71 +1,65
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2015 The Qt Company Ltd
3 ** Copyright (C) 2015 The Qt Company Ltd
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
6 **
6 **
7 ** This file is part of the Qt Charts module.
7 ** This file is part of the Qt Charts module.
8 **
8 **
9 ** Licensees holding valid commercial license for Qt may use this file in
9 ** Licensees holding valid commercial license for Qt may use this file in
10 ** accordance with the Qt License Agreement provided with the Software
10 ** accordance with the Qt License Agreement provided with the Software
11 ** or, alternatively, in accordance with the terms contained in a written
11 ** or, alternatively, in accordance with the terms contained in a written
12 ** agreement between you and The Qt Company.
12 ** agreement between you and The Qt Company.
13 **
13 **
14 ** If you have questions regarding the use of this file, please use
14 ** If you have questions regarding the use of this file, please use
15 ** contact form at http://qt.io
15 ** contact form at http://qt.io
16 **
16 **
17 ****************************************************************************/
17 ****************************************************************************/
18
18
19 import QtQuick 2.0
19 import QtQuick 2.0
20
20
21 //![1]
21 //![1]
22 Rectangle {
22 Rectangle {
23 id: main
23 id: main
24 width: 600
24 width: 600
25 height: 400
25 height: 400
26 color: "#404040"
26 color: "#404040"
27
27
28 ControlPanel {
28 ControlPanel {
29 id: controlPanel
29 id: controlPanel
30 anchors.top: parent.top
30 anchors.top: parent.top
31 anchors.topMargin: 10
31 anchors.topMargin: 10
32 anchors.bottom: parent.bottom
32 anchors.bottom: parent.bottom
33 anchors.left: parent.left
33 anchors.left: parent.left
34 anchors.leftMargin: 10
34 anchors.leftMargin: 10
35 //![1]
35 //![1]
36
36
37 onSignalSourceChanged: {
37 onSignalSourceChanged: {
38 if (source == "sin")
38 if (source == "sin")
39 dataSource.generateData(0, signalCount, sampleCount);
39 dataSource.generateData(0, signalCount, sampleCount);
40 else
40 else
41 dataSource.generateData(1, signalCount, sampleCount);
41 dataSource.generateData(1, signalCount, sampleCount);
42 scopeView.axisX().max = sampleCount;
42 scopeView.axisX().max = sampleCount;
43 }
43 }
44 onAnimationsEnabled: scopeView.setAnimations(enabled);
44 onSeriesTypeChanged: scopeView.changeSeriesType(type);
45 onSeriesTypeChanged: {
46 scopeView.changeSeriesType(type);
47 if (type === "spline") {
48 controlPanel.openGLButton.currentSelection = 0;
49 controlPanel.openGLButton.enabled = false;
50 scopeView.openGL = false;
51 } else {
52 controlPanel.openGLButton.enabled = true;
53 }
54 }
55 onRefreshRateChanged: scopeView.changeRefreshRate(rate);
45 onRefreshRateChanged: scopeView.changeRefreshRate(rate);
56 onAntialiasingEnabled: scopeView.antialiasing = enabled;
46 onAntialiasingEnabled: scopeView.antialiasing = enabled;
57 onOpenGlChanged: scopeView.openGL = enabled;
47 onOpenGlChanged: {
48 scopeView.openGL = enabled;
49 antialiasButton.enabled = !enabled;
50 antialiasButton.currentSelection = 0;
51 }
58 }
52 }
59
53
60 //![2]
54 //![2]
61 ScopeView {
55 ScopeView {
62 id: scopeView
56 id: scopeView
63 anchors.top: parent.top
57 anchors.top: parent.top
64 anchors.bottom: parent.bottom
58 anchors.bottom: parent.bottom
65 anchors.right: parent.right
59 anchors.right: parent.right
66 anchors.left: controlPanel.right
60 anchors.left: controlPanel.right
67 height: main.height
61 height: main.height
68 }
62 }
69 //![2]
63 //![2]
70
64
71 }
65 }
@@ -1,57 +1,57
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2015 The Qt Company Ltd
3 ** Copyright (C) 2015 The Qt Company Ltd
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
5 ** For any questions to The Qt Company, please use contact form at http://qt.io
6 **
6 **
7 ** This file is part of the Qt Charts module.
7 ** This file is part of the Qt Charts module.
8 **
8 **
9 ** Licensees holding valid commercial license for Qt may use this file in
9 ** Licensees holding valid commercial license for Qt may use this file in
10 ** accordance with the Qt License Agreement provided with the Software
10 ** accordance with the Qt License Agreement provided with the Software
11 ** or, alternatively, in accordance with the terms contained in a written
11 ** or, alternatively, in accordance with the terms contained in a written
12 ** agreement between you and The Qt Company.
12 ** agreement between you and The Qt Company.
13 **
13 **
14 ** If you have questions regarding the use of this file, please use
14 ** If you have questions regarding the use of this file, please use
15 ** contact form at http://qt.io
15 ** contact form at http://qt.io
16 **
16 **
17 ****************************************************************************/
17 ****************************************************************************/
18
18
19 /*!
19 /*!
20 \example qmloscilloscope
20 \example qmloscilloscope
21 \title QML Oscilloscope
21 \title Qml Oscilloscope
22 \ingroup qtcharts_examples
22 \ingroup qtcharts_examples
23
23
24 \image examples_qmloscilloscope.png
24 \image examples_qmloscilloscope.png
25
25
26 \brief The example shows how to implement application with strict performance requirements
26 \brief The example shows how to implement application with strict performance requirements
27 using the Qt Charts QML API.
27 using the Qt Charts QML API.
28
28
29 The oscilloscope application demonstrates how to use the Qt Charts QML API to implement an
29 The oscilloscope application demonstrates how to use the Qt Charts QML API to implement an
30 application with strict performance requirements. The application uses generated data with
30 application with strict performance requirements. The application uses generated data with
31 configurable characteristics to mimic a simple oscilloscope user interface.
31 configurable characteristics to mimic a simple oscilloscope user interface.
32
32
33 To get information about actual rendering speed shown in the application output console, you can
33 To get information about actual rendering speed shown in the application output console, you can
34 set QSG_RENDER_TIMING = 1 to your run environment settings. To do so go to Projects - Run -
34 set QSG_RENDER_TIMING = 1 to your run environment settings. To do so go to Projects - Run -
35 Run environment in Qt Creator and select Add. Then you can experiment with the different
35 Run environment in Qt Creator and select Add. Then you can experiment with the different
36 configurable options of the example application to find the configuration that gives you the
36 configurable options of the example application to find the configuration that gives you the
37 best performance in your environment.
37 best performance in your environment.
38
38
39 The application window is shared by control and scope views:
39 The application window is shared by control and scope views:
40 \snippet qmloscilloscope/qml/qmloscilloscope/main.qml 1
40 \snippet qmloscilloscope/qml/qmloscilloscope/main.qml 1
41 \dots
41 \dots
42 \snippet qmloscilloscope/qml/qmloscilloscope/main.qml 2
42 \snippet qmloscilloscope/qml/qmloscilloscope/main.qml 2
43
43
44 ControlView implements the buttons used for configuring. ScopeView uses a ChartView to show
44 ControlView implements the buttons used for configuring. ScopeView uses a ChartView to show
45 a chart with two line series:
45 a chart with two line series:
46 \snippet qmloscilloscope/qml/qmloscilloscope/ScopeView.qml 1
46 \snippet qmloscilloscope/qml/qmloscilloscope/ScopeView.qml 1
47 \dots
47 \dots
48
48
49 The data of the line series is updated with a QML timer. In a real life application the
49 The data of the line series is updated with a QML timer. In a real life application the
50 updating could be triggered with a signal from Qt C++ code.
50 updating could be triggered with a signal from Qt C++ code.
51 \snippet qmloscilloscope/qml/qmloscilloscope/ScopeView.qml 2
51 \snippet qmloscilloscope/qml/qmloscilloscope/ScopeView.qml 2
52
52
53 The oscilloscope also allows you to switch the type of the series used for visualizing the
53 The oscilloscope also allows you to switch the type of the series used for visualizing the
54 signal sources. This is implemented by dynamically destroying and creating series:
54 signal sources. This is implemented by dynamically destroying and creating series:
55 \snippet qmloscilloscope/qml/qmloscilloscope/ScopeView.qml 3
55 \snippet qmloscilloscope/qml/qmloscilloscope/ScopeView.qml 3
56
56
57 */
57 */
General Comments 0
You need to be logged in to leave comments. Login now