Qt Quick Controls - Demostración de wearables

La Demo Wearable consiste en un lanzador de aplicaciones y una colección de pequeñas y sencillas aplicaciones de ejemplo destinadas a dispositivos wearables.

Estructura

El archivo .qml principal, wearable.qml, consta de un ApplicationWindow, un StackView para un modelo de navegación basado en pilas, y botones para la navegación interactiva.

QQC2.ApplicationWindow {
    id: window
    ...
    QQC2.StackView {
        id: stackView
        ...
        initialItem: LauncherPage {
            onLaunched: (title, page, fallback) => {
                            var createdPage = Qt.createComponent(page)
                            if (createdPage.status !== Component.Ready)
                                createdPage = Qt.createComponent(fallback)
                            stackView.push(createdPage)
                            header.title = title
                        }
        }
        ...
    }

    DemoMode {
        stackView: stackView
    }

    DemoModeIndicator {
        id: demoModeIndicator
        visible: WearableSettings.demoMode
        y: WearableSettings.demoMode ? header.height + 3 : -height - header.height - 3
        anchors.horizontalCenter: parent.horizontalCenter
        z: header.z + 1
    }

    MouseArea {
        enabled: WearableSettings.demoMode
        anchors.fill: parent
        onClicked: {
            // Stop demo mode and return to the launcher page.
            WearableSettings.demoMode = false
            stackView.pop(null)
        }
    }
}

Estilización

La demo utiliza un estilo personalizado deQt Quick Controls 2 incrustado en los recursos de la demo. El estilo personalizado se implementa sólo para unos pocos controles, ya que es específico para esta demo en particular. Utiliza un tipo único para varios atributos de estilo, como fuentes y colores.

• WearableStyle/PageIndicator.qml
• WearableStyle/Slider.qml
• WearableStyle/Switch.qml
• WearableStyle/UIStyle.qml

El estilo se aplica en main() en wearable.cpp:

QQuickStyle::setStyle(QStringLiteral("WearableStyle"));

La principal ventaja de utilizar el sistema de estilos integrado es que la selección del estilo es totalmente transparente para el código de la aplicación. No es necesario importar una carpeta específica que contenga los controles con estilo. De esta forma, la aplicación puede ejecutarse también con otros estilos.

Página de inicio

El lanzador de aplicaciones se implementa utilizando una circular PathView en LauncherPage.qml. Cada aplicación se encuentra en un archivo .qml independiente, que se añade a ListModel en la página del lanzador. Para algunas aplicaciones se proporciona una opción fallback para manejar dependencias opcionales como QtLocation.

PathView {
    id: circularView

    signal launched(string title, string page, string fallbackpage)
    ...
    model: ListModel {
        ListElement {
            title: qsTr("Navigation")
            pageIcon: "maps"
            page: "NavigationPage.qml"
            fallback: "NavigationFallbackPage.qml"
        }
        ...
        ListElement {
            title: qsTr("Settings")
            pageIcon: "settings"
            page: "SettingsPage.qml"
            fallback: ""
        }
    }
    delegate: QQC2.RoundButton {
        ...
        icon.width: 36
        icon.height: 36
        icon.source: UIStyle.iconPath(pageIcon)
        icon.color: UIStyle.textColor
        ...
        onClicked: {
            if (PathView.isCurrentItem)
                circularView.launched(title, Qt.resolvedUrl(page), Qt.resolvedUrl(fallback))
            else
                circularView.currentIndex = index
        }
    }
    ...
}

Aplicaciones

Las aplicaciones están diseñadas para la entrada táctil en función de los métodos de entrada o los medios de comunicación que suelen ofrecer los dispositivos portátiles.

La mayoría de las aplicaciones tienen sus propios archivos JavaScript que actúan como backends de aplicaciones ficticias. Demuestran cómo obtener y manipular o convertir datos externos. Por ejemplo, la aplicación Weather lee datos de archivos locales mediante XMLHttpRequest. Estos archivos se generaron almacenando respuestas de servidores remotos en formato JSON. Este código puede modificarse fácilmente para adquirir datos de servidores remotos.

Navegación

Esta aplicación utiliza el módulo QtLocation para mostrar una ruta dentro de Oslo. Si QtLocation no está instalado, muestra una imagen estática como mapa e información de la ruta basada en un fichero JSON. Actualmente, no es posible especificar el origen y el destino desde la aplicación, pero puede añadirse en función de las capacidades del dispositivo. Por ejemplo, puede recopilar la información necesaria utilizando uno de los siguientes métodos:

• Implementar pantallas adicionales para recoger información del usuario
• Comunicarse con otro dispositivo (teléfono inteligente o PC) a través de canales Bluetooth o WiFi.

El tiempo

Esta aplicación muestra información meteorológica como la temperatura, las horas de salida y puesta del sol, la presión atmosférica, etc. Esta información se obtiene de https://openweathermap.org/ utilizando su API REST. La respuesta de la API está en formato JSON, que la aplicación analiza mediante JavaScript. Esta aplicación también puede modificarse añadiendo pantallas para obtener los datos meteorológicos de un lugar determinado.

Reloj mundial

Esta aplicación muestra un reloj mundial para diferentes ciudades. Por ahora, la lista de ciudades está codificada en la aplicación, pero puede modificarse en función de las capacidades de entrada del dispositivo.

Otras

El resto de aplicaciones devuelven datos estáticos por ahora, pero pueden modificarse para procesar datos de respuesta obtenidos de los respectivos servicios.

Ejecución del ejemplo

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

Proyecto de ejemplo @ code.qt.io