Dashboard für Windturbinen

Das Beispiel für das Windturbinen-Dashboard zeigt, wie 2D- und 3D-Diagramme in einer simulierten realen Anwendung verwendet werden können.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorzu starten, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

Überblick über die Anwendung

Das Beispiel demonstriert ein Dashboard zur Überwachung von Windturbinen, das als Aerospace Hub bezeichnet wird und simulierte Daten aus einem imaginären Windturbinenfeld anzeigt. Es wird eine Vielzahl von Diagrammtypen verwendet, um verschiedene Arten von Daten zu visualisieren. Ein 2D-Diagramm mit einer Spline-Reihe veranschaulicht beispielsweise die stündliche Leistungsabgabe, während eine begleitende Flächenreihe die akkumulierte Leistung über denselben Zeitraum darstellt. Es stehen mehrere Datenansichten zur Verfügung, die es dem Benutzer ermöglichen, die Informationen aus verschiedenen Perspektiven zu untersuchen und zu analysieren.

Die Hauptschnittstelle verfügt über eine Einstellungssymbolleiste auf der linken Seite. Je nach ausgewähltem Modus kann das Layout einen Statusbereich, ein Dashboard mit kleineren Diagrammen, ein primäres großes Diagramm oder ein detailliertes Einstellungsfeld enthalten - entweder einzeln oder in Kombination. Dieses flexible Design ermöglicht es den Benutzern, ihre Ansicht anzupassen und sich auf die für ihre aktuelle Analyse wichtigsten Daten zu konzentrieren.

Dashboard-Ansicht

Die Dashboard-Ansicht zeigt den aktuellen Systemstatus neben einem scrollbaren Bereich, der Miniaturvorschauen der verschiedenen Diagramme anzeigt. Es werden bis zu vier Diagramme gleichzeitig angezeigt, so dass die Benutzer bequem durch alle sechs verfügbaren Visualisierungen blättern und die wichtigsten Leistungskennzahlen auf einen Blick erfassen können.

Detail-Ansicht

In der Detailansicht, die durch Auswahl eines Miniaturdiagramms aus dem Dashboard aufgerufen werden kann, können die Benutzer die gewählte Visualisierung eingehender und in einem größeren Maßstab betrachten. Je nach Diagrammtyp können die Benutzer die Ansicht zoomen, schwenken oder drehen, um die Daten interaktiv zu erkunden. Darüber hinaus können einzelne Datenpunkte mit dem Mauszeiger überfahren oder angeklickt werden, um detailliertere Informationen über das jeweilige Element zu erhalten.

Ansicht "Einstellungen

In der Einstellungsansicht, die durch Klicken auf die Schaltfläche "Einstellungen" in der Symbolleiste oder in einem Miniaturdiagramm aufgerufen werden kann, können die Benutzer das visuelle Thema der Diagramme anpassen und die für jeden Diagrammtyp spezifischen Einstellungen ändern. Bestimmte Konfigurationen bleiben nach dem Verlassen der Einstellungsansicht erhalten, während andere nur in der aktuellen Ansicht gelten, was Flexibilität für temporäre und permanente Anpassungen bietet.

Details zur Implementierung

Alles in der Anwendung ist modular aufgebaut. Die Hauptansicht, d. h. die Datei Main.qml, ist ein ApplicationWindow, in dem die Datensimulatoren für jedes Diagramm instanziiert sind, sowie die Wurzel Item mit allen Elementen der Benutzeroberfläche.

Die FontLoader wird für die Anwendung einer globalen Schriftart für die gesamte Benutzeroberfläche verwendet.

ApplicationWindow {
    ...

    FontLoader { ... }
    font.family: interFont.name

    // Data simulators
    PieSimulator {
        id: piesim
        ...
    }

    BarSimulator {
        id: barsim
        ...
    }

    LineSimulator {
        id: linesim
        ...
    }

    Data3DSimulator {
        id: barDataSimulator
        ...
    }

    Data3DSimulator {
        id: scatterDataSimulator
        ...
    }

    Data3DSimulator {
        id: surfaceDataSimulator
        ...
    }

    // Root item
    Item {...}
}

Das Root-Element enthält die Hintergrundgrafiken und ein Layout, das die Platzierung der einzelnen UI-Elemente in der Ansicht regelt:

// Background image
Image {
    anchors.fill: parent
    source: root.state === "ShowSettings" ? "images/settings-bg.png"
                                          : "images/dashboard-bg.png"
    fillMode: Image.PreserveAspectCrop
}

// Everything except background image
ColumnLayout {
    anchors.fill: parent
    ...

Die meisten Elemente wurden aus der Datei Main.qml in eigene QML-Komponenten ausgelagert, um in den Layouts verwendet zu werden, wie z. B. die ToolBarItem im folgenden Ausschnitt:

// Vertical toolbar
ToolBarItem {
    Layout.preferredWidth: GlobalSettings.toolbarwidth
    Layout.fillHeight: true
}

// Everything except vertical toolbar, header, and background image
ColumnLayout {
    id: maincontentview
    Layout.fillWidth: true
    Layout.fillHeight: true
    ...

Die Übergänge zwischen den verschiedenen Ansichten werden mit states und transitions gehandhabt:

states: [
    State {
        name: "ShowDashboard"
    },
    State {
        name: "ShowSettings"
        PropertyChanges {
            maincontent.opacity: 0
            settingscontent.opacity: 1
        }
        PropertyChanges {
            viewtextdesc.text: "/  Settings"
        }
    },
    ...
// Use transitions to bring the selected view to the front
transitions: [
    Transition {
        NumberAnimation {
            properties: "opacity"
            easing.type: Easing.InOutCubic
            duration: 1000
        }
    }
]

Dashboard

Dashboard ist ein Teil des Hauptinhalts, ein weiteres RowLayout innerhalb der Layout Hierarchie:

// Main content
RowLayout {
    id: maincontent
    Layout.fillWidth: true
    Layout.fillHeight: true
    ...

Es besteht aus einem Statusbereich und einem Dashboardbereich:

// Status area; turbine image, notification, status texts, and turbine name
StatusPane {
    id: statuspane
    Layout.preferredWidth: GlobalSettings.statusimagewidth
    Layout.fillHeight: true
}

// Scrollable dashboard graph area, shown when in ShowDashboard state
DashboardPane {
    id: dashboardpane
    contentheight: statuspane.height * 1.5
    Layout.preferredWidth: GlobalSettings.dashboardwidth
    Layout.fillHeight: true
}

Statusbereich

Der Statusbereich besteht ebenfalls aus kleineren Elementen, die in eigenen QML-Komponenten implementiert sind:

// Masking the turbine image of the background image
ImageItem {
    anchors.fill: parent
}

// Notification
NotificationItem {
    anchors.top: turbineimage.top
    anchors.horizontalCenter: turbineimage.horizontalCenter
    anchors.topMargin: GlobalSettings.doublespacing
    width: turbineimage.width / 1.25
}

// Status
StatusItem {
    anchors.centerIn: turbineimage
    width: turbineimage.width / 1.5
    height: turbineimage.width / 1.75
}

// Turbine name
Label {
    ...

Die Implementierung dieser Elemente ist nicht relevant, daher wird dieser Teil übersprungen.

Dashboard-Fenster

Das Dashboard ist das Element, das die sechs kleinen Diagrammvorschauen enthält. Da nur vier davon gleichzeitig sichtbar sind, müssen sie in ein Element eingefügt werden, das gescrollt werden kann. In diesem Fall geschieht dies mit einem Flickable, das ein GridLayout enthält:

Flickable {
    property alias contentheight: content.height

    clip: true

    contentHeight: contentheight

    boundsBehavior: Flickable.StopAtBounds
    interactive: true
    visible: opacity > 0.5

    Item {
        id: content
        width: parent.width

        GridLayout {
            id: grid
            columns: 2
    ...

Die Diagrammvorschauen werden in das Rasterlayout eingefügt, und wie die meisten anderen Elemente wurden sie in eigene Elemente implementiert:

// Graph 1: Power output over time
SmallGraphItem {
    Layout.fillWidth: true
    Layout.fillHeight: true
    state: "Area2D"
    linesimulator: linesim
}

// Graph 2: Energy production x Turbine
SmallGraphItem {
    Layout.fillWidth: true
    Layout.fillHeight: true
    state: "Bar2D"
    barsimulator: barsim
}
...

Das Element SmallGraphItem ist ein generisches Element, das alle verschiedenen Graphtypen enthält, und der erforderliche Typ wird ihm als state übergeben.

SmallGraphItem hat:

• Ein Kopf-Element
• Eine Instanz jedes Diagrammtyps, für den die Sichtbarkeit mit Hilfe eines Opazitätsauslösers standardmäßig auf false gesetzt wird
• Ein Rechteck, um die Vorschau zu verdunkeln
• Einen Mausbereich, um Hover und Mausklicks auf die Vorschau zu verarbeiten

Pie2DGraph {
    id: pie2d
    anchors.topMargin: header.height + GlobalSettings.defaultspacing
    anchors.rightMargin: GlobalSettings.defaultspacing
    anchors.fill: parent
    opacity: 0
    piesimulator: smallgraph.piesimulator
}

Bar3DGraph {
    id: bar3d
    anchors.topMargin: header.height + GlobalSettings.defaultspacing
    anchors.bottomMargin: GlobalSettings.defaultspacing
    anchors.fill: parent
    opacity: 0
    cameraZoomLevel: GlobalSettings.defaultzoom
    cameraPreset: GlobalSettings.defaultpreset
}
...

Die Deckkraft wird für Übergangsanimationen verwendet, weshalb sie in den Vorschauen standardmäßig auf 0 gesetzt wurde. Wenn die Deckkraft über 0,5 animiert wird, wird die Vorschaugrafik selbst sichtbar gemacht:

Bars3D {
    id: graph
    visible: opacity > 0.5
    ...

Details

Details ist ebenfalls ein Teil des Hauptinhalts und verwendet dieselbe RowLayout innerhalb der Layout Hierarchie. Sie bestehen aus demselben Statusbereich wie das Dashboard und einem Detailbereich:

// Details graph, shown when in correct state
BigGraphItem {
    id: detailspane
    Layout.preferredWidth: GlobalSettings.dashboardwidth
    Layout.fillHeight: true
    state: root.state
    radius: GlobalSettings.defaultradius
    piesimulator: piesim
    barsimulator: barsim
    linesimulator: linesim
    detailsview: true
}

Der Detailbereich, BigGraphItem, ähnelt dem SmallGraphItem in dem Sinne, dass er neben anderen Elementen auch eine Instanz jedes Graphen darin enthält:

// Graphs
Area2DGraph {
    id: area2dbig
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.margins: GlobalSettings.defaultmargin
    opacity: 0
    panStyle: GraphsView.PanStyle.Drag
    zoomStyle: GraphsView.ZoomStyle.Center
    linesimulator: biggraph.linesimulator
    onVisibleChanged: {
        if (visible)
            biggraph.activegraph = area2dbig
    }
}

Bar2DGraph {
    id: bar2dbig
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.margins: GlobalSettings.defaultmargin
    opacity: 0
    panStyle: GraphsView.PanStyle.Drag
    zoomStyle: GraphsView.ZoomStyle.Center
    barsimulator: biggraph.barsimulator
    onVisibleChanged: {
        if (visible)
            biggraph.activegraph = bar2dbig
    }
}
...

Weitere Elemente sind eine Dropdown-Kombibox zur Auswahl des Diagrammtyps, Schaltflächen zum Drehen, Schwenken und Zoomen - je nach Diagrammtyp - sowie ein Tooltip für die Schaltflächen. Wie bei SmallGraphItem wird der angezeigte Diagrammtyp anhand des Zustands bestimmt.

Einstellungen

Die Einstellungen wurden aus dem Hauptinhalt Layout herausgenommen, da sie keine Teile der Dashboard- oder Detailansichten verwenden:

// Settings
SettingsItem {
    id: settingscontent
    anchors.fill: parent
    ...

Die Ansicht "Einstellungen" enthält eine weitere BigGraphItem für die Anzeige des Diagramms und einen Einstellungsbereich, in dem entweder die Eigenschaften von GraphsTheme oder einige für den ausgewählten Diagrammtyp spezifische Eigenschaften angepasst werden können.

// Graph detail
BigGraphItem {
    id: settingsgraph
    width: GlobalSettings.settingsgraphwidth
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.topMargin: GlobalSettings.graphdetailmargin
    radius: GlobalSettings.defaultradius
    opacity: parent.opacity
    piesimulator: settingsitem.piesimulator
    barsimulator: settingsitem.barsimulator
    linesimulator: settingsitem.linesimulator
}

// Settings pane
StackLayout {
    id: settingspane
    ...

Globales Thema

Die Einstellungen auf der Registerkarte General Settings wirken sich auf alle Diagramme in der Anwendung aus. Ein globales GraphsTheme wurde als Singleton in GlobalSettings.qml implementiert:

pragma Singleton
...
QtObject {
    id: global
    ...
// Common graph theme
property var theme: GraphsTheme {
    plotAreaBackgroundVisible: false
    backgroundVisible: false
    colorScheme: GraphsTheme.ColorScheme.Dark
    theme: GraphsTheme.Theme.BlueSeries
    labelTextColor: "#AEAEAE"
    labelBackgroundVisible: true
    labelFont.pointSize: global.fontsize28px
    grid.mainColor: "#AEAEAE"
    grid.mainWidth: 1
    baseGradients: [ global.customgradient ]
}

Dieses globale gemeinsame Thema wird für jeden Graphen als Thema festgelegt:

theme: GlobalSettings.theme

Da es sich um ein Singleton handelt, muss GlobalSettings.qml auch in CMakeLists.txt als solches gekennzeichnet werden, damit es in der Anwendung verwendet werden kann:

set_source_files_properties(qml/GlobalSettings.qml
    PROPERTIES QT_QML_SINGLETON_TYPE TRUE)

Graph-Einstellungen

Die Einstellungen auf der Registerkarte Graph Settings wirken sich nur auf den aktuell ausgewählten Graphen aus. Diese Einstellungen ändern nicht das globale Thema, sondern nur die Serien im aktiven Diagramm.

Beispielprojekt @ code.qt.io