В этом примере показано, как реализовать приложение со строгими требованиями к производительности используя Qt Chart QML API.
Приложение «Осциллограф» демонстрирует как использовать QtCharts QML API для реализации приложения со строгими требованиями к производительности. Приложение использует сгенерированные данные с настраиваемыми характеристиками для имитации простого пользовательского интерфейса осциллографа.
Чтобы получить информацию о фактической скорости рендеринга, отображаемой в консоли вывода приложения, вы можете установить OSG_RENDER_TIMING = 1 в настройках среды выполнения.
Запуск примера
Чтобы запустить пример из QT Creator, откройте окно приветствия и выберите и выберите QML Oscilloscope в разделе «Примеры». Для получения дополнительной информации ознакомьтесь с «Сборка и Запуск Примера»
Создание Вида
Окно приложения разделяется на элементы управления и отображение осциллограммы.
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
onOpenGLSupportedChanged: {
if (!openGLSupported) {
controlPanel.openGLButton.enabled = false
controlPanel.openGLButton.currentSelection = 0
}
}
}ControlView реализует кнопки, используемые для настройки. ScopeView использует ChartView для отображения диаграммы с двумя линейными рядами:
ChartView {
id: chartView
animationOptions: ChartView.NoAnimation
theme: ChartView.ChartThemeDark
property bool openGL: true
property bool openGLSupported: true
onOpenGLChanged: {
if (openGLSupported) {
series("signal 1").useOpenGL = openGL;
series("signal 2").useOpenGL = openGL;
}
}
Component.onCompleted: {
if (!series("signal 1").useOpenGL) {
openGLSupported = false
openGL = false
}
}
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
}
...Данные графиков обновляются таймером QML. В реальном приложении обновление может быть вызвано сигналом из кода 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));
}
}Осциллограф также позволяет вам переключать тип серии, используемой для визуализации источников сигнала. Это осуществляется путем динамического уничтожения и создания серии:
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".
if (type == "line") {
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 {
var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
axisX, axisY1);
series1.markerSize = 2;
series1.borderColor = "transparent";
series1.useOpenGL = chartView.openGL
var 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);
}