Cuadro de mandos de aerogeneradores

El ejemplo del Cuadro de Mando de Aerogeneradores muestra cómo utilizar gráficos 2D y 3D en una aplicación real simulada.

Ejecución del 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.

Visión general de la aplicación

El ejemplo muestra un cuadro de mandos de monitorización de aerogeneradores, denominado Aerospace Hub, que muestra datos simulados de un campo de aerogeneradores imaginario. Se emplean varios tipos de gráficos para visualizar distintos tipos de datos. Por ejemplo, un gráfico 2D con una serie spline ilustra la producción de potencia por hora, mientras que una serie de áreas representa la potencia acumulada durante el mismo periodo. Se dispone de múltiples vistas de los datos, lo que permite a los usuarios explorar y analizar la información desde diferentes perspectivas.

La interfaz principal cuenta con una barra de herramientas de configuración a la izquierda. En función del modo seleccionado, el diseño puede incluir un panel de estado, un panel de gráficos más pequeños, un gráfico principal de gran tamaño o un panel de ajustes detallados, ya sea de forma individual o combinada. Este diseño flexible permite a los usuarios personalizar su vista y centrarse en los datos más relevantes para su análisis actual.

Vista del cuadro de mandos

La vista del cuadro de mandos presenta el estado actual del sistema junto a un panel desplazable que muestra vistas previas en miniatura de los distintos gráficos. Se muestran hasta cuatro gráficos simultáneamente, lo que permite a los usuarios navegar cómodamente por las seis visualizaciones disponibles y evaluar rápidamente las principales métricas de rendimiento de un vistazo.

Vista detallada

La vista detallada, a la que se accede seleccionando un gráfico en miniatura del cuadro de mandos, permite a los usuarios examinar la visualización elegida con mayor profundidad y a mayor escala. Dependiendo del tipo de gráfico, los usuarios pueden ampliar, desplazar o girar la vista para explorar los datos de forma interactiva. Además, se puede pasar el ratón por encima de los puntos de datos individuales o hacer clic en ellos para revelar información más detallada sobre el elemento específico de interés.

Vista de ajustes

La vista de configuración, a la que se accede haciendo clic en el botón de configuración de la barra de herramientas o en un gráfico en miniatura, permite a los usuarios ajustar el tema visual de los gráficos y modificar configuraciones específicas de cada tipo de gráfico. Ciertas configuraciones persisten después de salir de la vista de ajustes, mientras que otras sólo se aplican dentro de la vista actual, proporcionando flexibilidad tanto para ajustes temporales como permanentes.

Detalles de la aplicación

Todo en la aplicación se ha diseñado de forma modular. La vista principal, que es el archivo Main.qml, es una ApplicationWindow, que instantiaties los simuladores de datos para cada gráfico, así como la raíz Item que contiene todos los elementos de la interfaz de usuario.

El FontLoader se utiliza para aplicar una fuente global para toda la UI.

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

El elemento raíz contiene los gráficos de fondo y un Layout que gestiona la colocación de cada elemento de la IU en la vista:

// 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 mayoría de los elementos se han extraído del propio archivo Main.qml y se han colocado en sus propios componentes QML para utilizarlos en los diseños, como el ToolBarItem del siguiente fragmento:

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

Las transiciones entre las distintas vistas se realizan mediante states y 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
        }
    }
]

Panel de control

Dashboard es una parte del contenido principal, otro RowLayout dentro de la jerarquía Layout:

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

Se compone de un panel de estado y un panel de control:

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

Panel de Estado

El panel de estado también está formado por elementos más pequeños, implementados en sus propios componentes 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 {
    ...

La implementación de estos no es relevante, por lo que esa parte será omitida.

Panel de control

El panel de control es el elemento que contiene las seis pequeñas vistas previas de gráficos. Sólo cuatro de ellas son visibles a la vez, por lo que tienen que ser añadidas dentro de un elemento que pueda ser desplazado. En este caso, se hace con un Flickable, que contiene un 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
    ...

Las vistas previas de los gráficos se añaden dentro del diseño de la rejilla, y como la mayoría de los demás elementos, se han implementado dentro de sus propios elementos:

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

El elemento SmallGraphItem es un elemento genérico, que contiene todos los tipos de gráficos diferentes, y el tipo requerido se le da como state.

SmallGraphItem tiene:

• Un elemento de cabecera
• Una instancia de cada tipo de gráfico, cuya visibilidad se establece por defecto en false mediante un activador de opacidad
• Un rectángulo para oscurecer la vista previa
• Un área de ratón para manejar el hover y los clics del ratón en la vista previa

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

Las opacidades se utilizan para las animaciones de transición, por lo que se han establecido en 0 en las vistas previas por defecto. Cuando la opacidad se anima por encima de 0,5, el propio gráfico de la vista previa se hace visible:

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

Detalles

Detalles también forma parte del contenido principal, utilizando la misma RowLayout dentro de la jerarquía Layout. Se compone del mismo panel de estado que el Cuadro de Mando, y de un panel de detalles:

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

El panel de detalles, BigGraphItem, es similar al SmallGraphItem en el sentido de que también contiene una instancia de cada gráfico en él, además de otros elementos:

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

Otros elementos incluidos son un cuadro combinado desplegable para seleccionar el tipo de gráfico, botones de control para girar, desplazar y hacer zoom -según el tipo de gráfico- y un tooltip para los botones. Al igual que en SmallGraphItem, el tipo de gráfico mostrado se decide en función del estado.

Configuración

Ajustes se ha sacado del contenido principal Layout, ya que no utiliza ninguna parte de las vistas Panel o Detalles:

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

La vista Configuración contiene otro BigGraphItem para mostrar el gráfico y un panel de configuración para ajustar las propiedades de GraphsTheme o algunas propiedades específicas del tipo de gráfico seleccionado.

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

Tema global

Los ajustes de la pestaña General Settings afectan a todos los gráficos de la aplicación. Se ha implementado un tema global GraphsTheme como Singleton en 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 ]
}

Este tema global compartido se establece en cada gráfico como tema:

theme: GlobalSettings.theme

Como un singleton, el GlobalSettings.qml necesita ser etiquetado como uno en el CMakeLists.txt también, para ser utilizable en la aplicación:

set_source_files_properties(qml/GlobalSettings.qml
    PROPERTIES QT_QML_SINGLETON_TYPE TRUE)

Configuración de gráficos

Los ajustes de la pestaña Graph Settings sólo afectan al gráfico seleccionado en ese momento. Estos ajustes no cambian el tema global, sino las series en el gráfico activo solamente.

Proyecto de ejemplo @ code.qt.io