Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

Qml Oscilloscope

L'exemple montre comment mettre en œuvre une application avec des exigences de performance strictes à l'aide de l'API QML Qt Charts.

Capture d'écran montrant une application d'oscilloscope affichant les ondes de deux signaux différents, le signal un étant vert et le signal deux étant bleu. Sur le côté gauche se trouvent des options permettant de modifier le graphique et la source, de choisir le nombre d'échantillons et le taux de rafraîchissement, ainsi que des boutons permettant d'activer et de désactiver l'anticrénelage ou les animations.

L'application oscilloscope montre comment utiliser l'API QML Qt Charts pour mettre en œuvre une application avec des exigences de performance strictes. L'application utilise des données générées avec des caractéristiques configurables pour imiter une interface utilisateur d'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, allez dans Projets - Exécuter - Environnement d'exécution dans Qt Creator et sélectionnez Ajouter. Vous pouvez ensuite expérimenter les différentes options configurables de l'application d'exemple pour trouver la configuration qui vous donne les meilleures performances dans votre environnement.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Création de vues

La fenêtre de l'application est partagée entre les vues de contrôle et les vues d'étendue :

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 met en œuvre les boutons utilisés pour la configuration. ScopeView utilise une page ChartView pour afficher un graphique avec 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 de la série de lignes sont mises à jour à l'aide d'une minuterie 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 signaux. Cette fonction est mise 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);
}

Exemple de projet @ code.qt.io

© 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.