Qt Quick Controls - Démonstration d'un appareil connecté

La démo pour appareils portables se compose d’un lanceur d’applications et d’une collection de petites applications simples destinées aux appareils portables.

Structure

Le fichier .qml principal, wearable.qml, comprend une page d'accueil ( ApplicationWindow), une page de navigation ( StackView ) pour un modèle de navigation basé sur une pile, ainsi que des boutons permettant une navigation interactive.

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

Style

La démo utilise un style personnalisé «Qt Quick Controls 2 » intégré aux ressources de la démo. Ce style personnalisé n’est implémenté que pour quelques contrôles, car il est spécifique à cette démo particulière. Il utilise un type singleton pour divers attributs de style, tels que les polices et les couleurs.

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

Le style est appliqué dans main() à l'adresse wearable.cpp:

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

Le principal avantage de l’utilisation du système de style intégré est que la sélection du style est totalement transparente pour le code de l’application. Il n’est pas nécessaire d’importer un dossier spécifique contenant les contrôles stylisés. De cette manière, l’application peut également être exécutée avec d’autres styles.

Page de lancement

Le lanceur d’applications est implémenté à l’aide d’une PathView circulaire dans LauncherPage.qml. Chaque application se trouve dans un fichier .qml distinct, qui est ajouté à l’ ListModel sur la page du lanceur. Pour certaines applications, une option de secours est fournie afin de gérer les dépendances facultatives telles que 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
        }
    }
    ...
}

Applications

Les applications sont conçues pour une saisie tactile, en fonction des méthodes de saisie ou des moyens de communication généralement proposés par les appareils portables.

La plupart des applications disposent de leurs propres fichiers JavaScript qui font office de back-ends factices. Ils montrent comment récupérer, manipuler ou convertir des données externes. Par exemple, l’application Weather lit des données à partir de fichiers locaux à l’aide de XMLHttpRequest. Ces fichiers ont été générés en enregistrant les réponses de serveurs distants au format JSON. Ce code peut être facilement modifié pour récupérer des données depuis des serveurs distants.

Navigation

Cette application utilise le module QtLocation pour afficher un itinéraire à Oslo. Si QtLocation n’est pas installé, elle affiche une image statique en guise de carte ainsi que les informations d’itinéraire issues d’un fichier JSON. Actuellement, il n’est pas possible de spécifier le point de départ et la destination depuis l’application, mais cette fonctionnalité peut être ajoutée en fonction des capacités de l’appareil. Par exemple, vous pouvez collecter les informations nécessaires à l’aide de l’une des méthodes suivantes :

• Implémenter des écrans supplémentaires pour recueillir les saisies de l’utilisateur
• Communiquer avec un autre appareil (smartphone ou PC) via Bluetooth ou Wi-Fi.

Météo

Cette application affiche des informations météorologiques telles que la température, les heures de lever et de coucher du soleil, la pression atmosphérique, etc. Ces informations sont obtenues à partir du site https://openweathermap.org/ via son API REST. La réponse de l’API est au format JSON, qui est analysé par l’application à l’aide de JavaScript. Cette application peut également être modifiée en ajoutant des écrans permettant d’obtenir les données météorologiques d’un lieu donné.

Horloge mondiale

Cette application affiche l'heure dans différentes villes du monde. Pour l'instant, la liste des villes est codée en dur dans l'application, mais elle peut être modifiée en fonction des capacités de saisie de l'appareil.

Autres

Les autres applications renvoient pour l’instant des données statiques, mais elles peuvent être modifiées pour traiter les données de réponse obtenues auprès des services respectifs.

Exécution de l’exemple

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l'exemple à l'adresse Examples. Pour plus d'informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Exemple de projet sur code.qt.io