Oscilloscope QML
Cet exemple montre comment implémenter une application soumise à des exigences de performances strictes à l'aide de l'API QML Qt Charts.
L'application oscilloscope illustre comment utiliser l'API QML « Qt Charts » pour développer une application soumise à des exigences de performances strictes. L'application utilise des données générées dont les caractéristiques sont configurables afin de reproduire l'interface utilisateur d'un oscilloscope simple.
Pour obtenir des informations sur la vitesse de rendu réelle affichée dans la console de sortie de l’application, vous pouvez définir QSG_RENDER_TIMING = 1 dans les paramètres de votre environnement d’exécution. Pour ce faire, accédez à Projets - Exécuter - Environnement d'exécution dans Qt Creator et sélectionnez Ajouter. Vous pouvez ensuite tester les différentes options configurables de l’application d’exemple afin de déterminer la configuration offrant les meilleures performances dans votre environnement.
Exécution de l'exemple
Vous pouvez exécuter l’exemple à partir de :
- Qt Creator
Ouvrez le mode « Welcome » et sélectionnez l’exemple à l’adresse Examples. Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.
- Qt Extension for Visual Studio Code
Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.
Création de vues
La fenêtre de l’application est partagée entre les vues de contrôle et de portée :
Item {
id: main
width: 600
height: 400
ControlPanel {
id: controlPanel
anchors.top: parent.top
anchors.topMargin: 10
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: 10
...
ScopeView {
id: scopeView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.left: controlPanel.right
height: main.height
}ControlView implémente les boutons utilisés pour la configuration. ScopeView utilise un ChartView pour afficher un graphique comportant deux séries de lignes :
ChartView {
id: chartView
property bool openGL: openGLSupported
animationOptions: ChartView.NoAnimation
theme: ChartView.ChartThemeDark
onOpenGLChanged: {
if (openGLSupported) {
var series1 = series("signal 1")
if (series1)
series1.useOpenGL = openGL;
var series2 = series("signal 2")
if (series2)
series2.useOpenGL = openGL;
}
}
ValueAxis {
id: axisY1
min: -1
max: 4
}
ValueAxis {
id: axisY2
min: -10
max: 5
}
ValueAxis {
id: axisX
min: 0
max: 1024
}
LineSeries {
id: lineSeries1
name: "signal 1"
axisX: axisX
axisY: axisY1
useOpenGL: chartView.openGL
}
LineSeries {
id: lineSeries2
name: "signal 2"
axisX: axisX
axisYRight: axisY2
useOpenGL: chartView.openGL
}
...Les données des séries de lignes sont mises à jour à l’aide d’un minuteur Qt Qml. Dans une application réelle, la mise à jour pourrait être déclenchée par un signal provenant du code Qt C++.
Timer {
id: refreshTimer
interval: 1 / 60 * 1000 // 60 Hz
running: true
repeat: true
onTriggered: {
dataSource.update(chartView.series(0));
dataSource.update(chartView.series(1));
}
}L'oscilloscope vous permet également de changer le type de série utilisé pour visualiser les sources de signal. Cela est mis en œuvre en détruisant et en créant dynamiquement des séries :
function changeSeriesType(type) {
chartView.removeAllSeries();
// 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".
var series1
var series2
if (type === "line") {
series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
axisX, axisY1);
series1.useOpenGL = chartView.openGL
series2 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 2",
axisX, axisY2);
series2.useOpenGL = chartView.openGL
} else {
series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
axisX, axisY1);
series1.markerSize = 2;
series1.borderColor = "transparent";
series1.useOpenGL = chartView.openGL
series2 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 2",
axisX, axisY2);
series2.markerSize = 2;
series2.borderColor = "transparent";
series2.useOpenGL = chartView.openGL
}
}
function createAxis(min, max) {
// The following creates a ValueAxis object that can be then set as a x or y axis for a series
return Qt.createQmlObject("import QtQuick 2.0; import QtCharts 2.0; ValueAxis { min: "
+ min + "; max: " + max + " }", chartView);
}© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
