Osciloscopio Qml

El ejemplo muestra cómo implementar una aplicación con estrictos requisitos de rendimiento utilizando la API QML Qt Charts.

Captura de pantalla que muestra una aplicación de osciloscopio mostrando ondas de dos señales diferentes, la señal uno es verde y la señal dos es azul. En la parte izquierda hay opciones para cambiar el gráfico y la fuente, así como para elegir el número de muestras y la frecuencia de actualización, y también botones para activar y desactivar el antialiasing o las animaciones.

La aplicación osciloscopio demuestra cómo utilizar la API QML Qt Charts para implementar una aplicación con estrictos requisitos de rendimiento. La aplicación utiliza datos generados con características configurables para imitar una sencilla interfaz de usuario de osciloscopio.

Para obtener información sobre la velocidad de renderizado real mostrada en la consola de salida de la aplicación, puede establecer QSG_RENDER_TIMING = 1 en la configuración de su entorno de ejecución. Para ello ve a Proyectos - Ejecutar - Entorno de ejecución en Qt Creator y selecciona Añadir. A continuación puedes experimentar con las diferentes opciones configurables de la aplicación de ejemplo para encontrar la configuración que te ofrezca el mejor rendimiento en tu entorno.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Creación de vistas

La ventana de la aplicación es compartida por las vistas control y scope:

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 implementa los botones utilizados para configurar. ScopeView utiliza un ChartView para mostrar un gráfico con dos series de líneas:

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

Los datos de las series lineales se actualizan con un temporizador QML. En una aplicación de la vida real la actualización podría ser disparada con una señal desde código 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));
    }
}

El osciloscopio también permite cambiar el tipo de serie utilizada para visualizar las fuentes de señal. Esto se implementa mediante la destrucción y creación dinámica de series:

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);
}

Proyecto de ejemplo @ 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.