Tableau de bord des éoliennes

L'exemple de tableau de bord d'une éolienne montre comment utiliser des graphiques 2D et 3D dans une application réelle simulée.

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.

Présentation de l'application

L'exemple présente un tableau de bord de surveillance d'une éolienne, appelé Aerospace Hub, qui affiche des données simulées provenant d'un champ d'éoliennes imaginaire. Plusieurs types de graphiques sont utilisés pour visualiser différents types de données. Par exemple, un graphique en 2D avec une série de splines illustre la production d'énergie horaire, tandis qu'une série d'aires d'accompagnement représente la puissance accumulée au cours de la même période. Plusieurs vues de données sont disponibles, ce qui permet aux utilisateurs d'explorer et d'analyser les informations sous différentes perspectives.

L'interface principale comporte une barre d'outils de paramétrage sur la gauche. Selon le mode sélectionné, la présentation peut inclure un volet d'état, un tableau de bord de petits graphiques, un grand graphique principal ou un panneau de paramètres détaillés - individuellement ou en combinaison. Cette conception flexible permet aux utilisateurs de personnaliser leur vue et de se concentrer sur les données les plus pertinentes pour leur analyse en cours.

Vue du tableau de bord

La vue tableau de bord présente l'état actuel du système à côté d'un panneau déroulant qui affiche des aperçus miniatures des différents graphiques. Jusqu'à quatre graphiques sont affichés simultanément, ce qui permet aux utilisateurs de parcourir facilement les six visualisations disponibles et d'évaluer rapidement les principales mesures de performance en un coup d'œil.

Vue détaillée

La vue détaillée, accessible en sélectionnant un graphique miniature dans le tableau de bord, permet aux utilisateurs d'examiner la visualisation choisie plus en profondeur et à plus grande échelle. Selon le type de graphique, les utilisateurs peuvent zoomer, faire un panoramique ou faire pivoter la vue pour explorer les données de manière interactive. En outre, il est possible de survoler ou de cliquer sur des points de données individuels pour obtenir des informations plus détaillées sur l'élément en question.

Vue des paramètres

La vue des paramètres, accessible en cliquant sur le bouton des paramètres dans la barre d'outils ou dans un graphique miniature, permet aux utilisateurs d'ajuster le thème visuel des graphiques et de modifier les paramètres spécifiques à chaque type de graphique. Certaines configurations persistent après avoir quitté la vue des paramètres, tandis que d'autres ne s'appliquent qu'à la vue actuelle, ce qui permet de procéder à des ajustements temporaires ou permanents.

Détails de la mise en œuvre

Tous les éléments de l'application ont été conçus de manière modulaire. La vue principale, qui est le fichier Main.qml, est une ApplicationWindow, qui instancie les simulateurs de données pour chaque graphique, ainsi que la racine Item contenant tous les éléments de l'interface utilisateur.

Le fichier FontLoader est utilisé pour appliquer une police globale à l'ensemble de l'interface utilisateur.

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

L'élément racine contient les graphiques d'arrière-plan et un Layout qui gère le placement de chaque élément de l'interface utilisateur dans la vue :

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

La plupart des éléments ont été retirés du fichier Main.qml pour être intégrés dans leurs propres composants QML à utiliser dans les présentations, comme le ToolBarItem dans l'extrait ci-dessous :

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

Les transitions entre les différentes vues sont gérées à l'aide de states et transitions:

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

Tableau de bord

Le tableau de bord fait partie du contenu principal, un autre RowLayout à l'intérieur de la hiérarchie Layout:

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

Il se compose d'un volet d'état et d'un volet de tableau de bord :

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

Volet d'état

Le volet d'état est également constitué d'éléments plus petits, implémentés dans leurs propres composants QML :

// 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 {
    ...

L'implémentation de ces éléments n'étant pas pertinente, cette partie sera sautée.

Volet tableau de bord

Le tableau de bord est l'élément qui contient les six petits aperçus de graphiques. Seuls quatre d'entre eux sont visibles à la fois, ils doivent donc être ajoutés à l'intérieur d'un élément qui peut être déroulé. Dans ce cas, il s'agit d'un élément Flickable, qui contient un élément GridLayout:

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

Les aperçus des graphiques sont ajoutés à la grille, et comme la plupart des autres éléments, ils ont été implémentés à l'intérieur de leurs propres éléments :

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

L'élément SmallGraphItem est un élément générique, qui contient tous les types de graphes différents, et le type requis lui est donné sous la forme d'un élément state.

L'élément SmallGraphItem possède :

• un élément d'en-tête
• Une instance de chaque type de graphique, dont la visibilité est fixée à false par défaut à l'aide d'un déclencheur d'opacité.
• Un rectangle pour assombrir l'aperçu
• Une zone de souris pour gérer les survols et les clics de souris sur l'aperçu.

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

Les opacités sont utilisées pour les animations de transition, c'est pourquoi elles ont été fixées par défaut à 0 dans les aperçus. Lorsque l'opacité est animée au-delà de 0,5, le graphique de prévisualisation lui-même devient visible :

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

Détails

Les détails font également partie du contenu principal et utilisent le même site RowLayout dans la hiérarchie Layout. Il se compose du même volet d'état que le tableau de bord et d'un volet de détails :

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

Le volet de détails, BigGraphItem, est similaire au volet SmallGraphItem en ce sens qu'il contient également une instance de chaque graphique, en plus d'autres éléments :

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

Les autres éléments inclus sont une boîte combobox déroulante pour sélectionner le type de graphique, des boutons de contrôle pour la rotation, le panoramique et le zoom - en fonction du type de graphique - et une infobulle pour les boutons. Comme pour SmallGraphItem, le type de graphique affiché est déterminé en fonction de l'état.

Paramètres

La vue Paramètres a été retirée du contenu principal Layout, car elle n'utilise aucune partie des vues Tableau de bord ou Détails:

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

La vue Paramètres contient un autre site BigGraphItem pour l'affichage du graphique, ainsi qu'un volet de paramètres permettant d'ajuster les propriétés de GraphsTheme ou certaines propriétés spécifiques au type de graphique sélectionné.

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

Thème global

Les paramètres de l'onglet General Settings affectent tous les graphiques de l'application. Un thème global GraphsTheme a été implémenté en tant que Singleton dans GlobalSettings.qml:

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

Ce thème global partagé est défini comme thème pour chaque graphique :

theme: GlobalSettings.theme

En tant que singleton, le GlobalSettings.qml doit également être marqué comme tel dans le CMakeLists.txt pour être utilisable dans l'application :

set_source_files_properties(qml/GlobalSettings.qml
    PROPERTIES QT_QML_SINGLETON_TYPE TRUE)

Paramètres du graphique

Les paramètres de l'onglet Graph Settings n'affectent que le graphique actuellement sélectionné. Ces paramètres ne modifient pas le thème global, mais uniquement les séries du graphique actif.

Exemple de projet @ code.qt.io