Machine à café

Cette application démontre une manière multiplateforme, multi-écran et réactive de mettre en œuvre une interface utilisateur typique pour la commande de produits.

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: Tutorial : Construire et exécuter.

Présentation de l'interface utilisateur

Cette section vous guide à travers le flux d'utilisateurs typique de l'application.

Sélection d'une recette

L'application de la machine à café vous permet de choisir un type de café et vous indique combien de cafés de ce type il vous reste à commander.

Personnalisation du café

Une fois la recette sélectionnée, l'application affiche la proportion de café que contiendra le mélange :

• café infusé
• lait chaud
• mousse de lait
• sucre

Cette proportion peut être modifiée à l'aide de curseurs.

Affichage de l'état de l'infusion

Une fois que l'utilisateur a confirmé que la tasse est dans la machine, l'infusion commence.

Une fois l'infusion lancée, l'application affiche une représentation animée du processus d'infusion.

Le café est prêt

Une fois le processus d'infusion terminé, l'application affiche une tasse de café contenant le mélange de café souhaité pendant quelques secondes avant de revenir à la page d'accueil.

Fonctionnement

Nous verrons ici comment ces fonctionnalités sont mises en œuvre.

Adaptation à la taille et à l'orientation de l'écran

L'objet racine de la fenêtre de l'application a des valeurs initiales pour la hauteur et la largeur, qui seront utilisées comme taille de la fenêtre sur les plateformes de bureau. La valeur par défaut QWindow::AutomaticVisibility garantit que la fenêtre sera affichée en mode maximisé ou plein écran sur les plateformes qui le requièrent, telles que les plateformes mobiles.

ApplicationWindow {
    visible: true
    width: 1000
    height: 600
    title: qsTr("Coffee")

    background: Rectangle {
        color: Colors.currentTheme.background
    }

À partir de là, les objets enfants de ApplicationWindow récupèrent la taille de ApplicationWindow pour déterminer leur propre taille en conséquence.

L'application utilise GridLayout dans tous les composants de la page d'application pour s'adapter facilement aux changements d'orientation de l'écran.

{L'écran passe en mode paysage lorsque l'appareil Android est orienté en mode paysage.}

{Le mode paysage est l'orientation par défaut sur le bureau de Windows}

Navigation dans les pages de l'application

L'application utilise le type QML StackView pour afficher les différentes pages de l'application. StackView La gestion des différents composants de la page est mise en œuvre à l'adresse ApplicationFlowForm.ui.qml.

La navigation d'une page à l'autre déclenche un changement d'état dans ApplicationFlow.qml où les changements de propriété nécessaires sont gérés par le type QML PropertyChanges:

states: [
    State {
        name: "Home"
        PropertyChanges {
            target: toolbar
            backButton.opacity: 0
            backButton.enabled: false
            themeButton.opacity: 0
            themeButton.enabled: false
            logo.sourceSize.width: 70
            logo.sourceSize.height: 50
        }

Les animations qui se produisent pendant ces changements d'état sont mises en œuvre avec Transition et PropertyAnimation à l'intérieur du composant StackView dans ApplicationFLowForm.ui.qml.

Mise en œuvre de la page d'accueil

L'application commence par afficher la page Home à l'utilisateur en tant qu'élément initial du site StackView:

StackView {
    id: stack
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.topMargin: parent.height / 20

    pushEnter: Transition {
        PropertyAnimation {
            property: "x"
            from: stack.width
            to: 0
            duration: 400
        }
    }

Le composant Home est structuré en plaçant le composant Item comme objet racine avec une machine d'état et des alias de propriété appropriés, suivi par GridLayout. Ce même type de structuration sera utilisé dans tous les composants de la page d'application.

La page Home affiche l'image d'une tasse de café surmontée du logo Qt, le titre Coffee Machine, une légende avec des informations accrocheuses sur ce à quoi l'utilisateur peut s'attendre et un bouton getStartedButton.

L'utilisateur peut avancer en appuyant sur le bouton getStartedButton, la fonction du bouton onClicked est implémentée ApplicationFlow.qml:

getStartedbutton.onClicked: {
    applicationFlow.state = "Coffee-selection"
    applicationFlow.stack.pushItem(applicationFlow.choosingCoffee, {appFlow: applicationFlow})
}

Cela déclenchera le changement d'état "Sélection de café" dans ApplicationFlow.qml et poussera le composant choosingCoffee au-dessus du composant Home dans StackView.

Mise en œuvre de la sélection du café

La page de sélection du café ChoosingCoffee.qml s'affiche. L'utilisateur a le choix entre quatre options de café différentes. Ces options sont affichées sous la forme de CoffeeCards qui se trouvent à l'intérieur de GridLayout dans ChoosingCoffee.qml:

GridLayout {
    id: cards
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    rowSpacing: 20
    columnSpacing: 20
    CoffeeCard {
        id: cappuccino
        coffeeName: "Cappuccino"
        ingredients: "Milk, Espresso, Foam"
        time: 2
    }
    CoffeeCard {
        id: latte
        coffeeName: "Latte"
        ingredients: "Coffee, Foam"
        time: 3
    }
    CoffeeCard {
        id: espresso
        coffeeName: "Espresso"
        ingredients: "Milk, Espresso"
        time: 2
    }
    CoffeeCard {
        id: macchiato
        coffeeName: "Macchiato"
        ingredients: "Milk foam, Espresso"
        time: 4
    }
}

L'implémentation de CoffeeCard se trouve à CoffeeCard.qml.

Ces cartes peuvent être affichées sous forme de grille ou de ligne en fonction des propriétés de largeur et de hauteur de l'écran que l'objet racine ApplicationWindow suit et transmet à ChoosingCoffee.qml et à GridLayout par l'intermédiaire de la machine à états.

CoffeeCards Les tasses de café varient en fonction de leur nom, de leur durée d'infusion, de leurs ingrédients et du nombre de tasses disponibles à ce moment-là.

Sur cette page, l'utilisateur peut également changer le thème de l'application pour la première fois en appuyant sur le petit bouton en forme de soleil dans le coin supérieur droit de l'écran. L'appui sur le bouton du thème appelle la fonction themeButton dans ApplicationFlow.qml:

function themeButton() {
    if (Colors.currentTheme == Colors.dark) {
        Colors.currentTheme = Colors.light
    } else {
        Colors.currentTheme = Colors.dark
    }
}

La fonction modifie la propriété currentTheme de Colors.qml et les couleurs changent automatiquement dans toute l'application grâce à des liens de propriété. Toutes les couleurs utilisées dans l'application se trouvent dans Colors.qml.

Si le thème est changé en thème clair, l'icône du bouton de changement de thème se transforme en demi-lune.

Le fait d'appuyer sur l'une des cartes de café déclenche un changement d'état à l'intérieur de AbstractButton dans CoffeeCard.qml qui déclenche ensuite NumberAnimation à Transition:

AbstractButton {
    width: parent.width - 2
    height: parent.height - 2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    id: button
    hoverEnabled: true
    checkable: true
    enabled: (root.cupsLeft != 0) ? true : false
    transitions: Transition {
        NumberAnimation {
            properties: "scale"
            duration: 50
            easing.type: Easing.InOutQuad
        }
    }

Cette action réduit la taille de la carte de café sélectionnée et fait passer les bords de la carte au vert, ce qui indique à l'utilisateur que le café a bien été sélectionné.

Chaque propriété de carte de café button alias onClicked fonction se lie à une fonction située dans ApplicationFlow.qml. Lorsque l'utilisateur appuie sur l'une des cartes de café, la fonction dont le nom correspond à l'option de café choisie est appelée. La fonction définit l'état de ApplicationFlow.qml à Settings, ajoute un nouveau composant à StackView et définit les propriétés de l'ingrédient en conséquence.

Mise en œuvre des paramètres du café

Sur cette page, l'utilisateur peut personnaliser son option de café en fonction de ses préférences en ajustant les types QML personnalisés Slider. La modification de la valeur des curseurs affectera les niveaux de liquide vus à l'intérieur de la tasse de café, ce qui est rendu possible en liant la hauteur des images de liquide à l'intérieur de Cup.qml aux valeurs des curseurs correspondants.

Les valeurs des curseurs de la page Settings sont stockées dans CoffeeConfig pour une utilisation ultérieure à l'aide du type Qml Synchronizer.

Synchronizer {
     sourceObject: settingsForm.coffeeConfig
     sourceProperty: "sugarAmount"
     targetObject: settingsForm.sugarSlider
     targetProperty: "value"
}

En cliquant sur le bouton Start, l'état de ApplicationFlow.qml devient "Insert" et l'application affiche la page Insert.qml.

Mise en œuvre de la tasse d'insertion

Sur cette page, l'utilisateur est invité à insérer sa tasse dans la machine avant que le processus d'infusion ne puisse commencer.

En appuyant sur le bouton Continue, l'application passe à la page Progress.

Mise en œuvre de la préparation du café

La page de progression affiche une tasse de café et une barre de progression qui signalent toutes deux, à leur manière, le processus d'infusion en temps réel.

Une fois remplie, la tasse de café affichera exactement la même configuration que celle sélectionnée par l'utilisateur sur la page Settings, ce dont on s'assure en liant les variables de propriété de Cup aux valeurs correspondantes enregistrées sur ApplicationFlow.qml.

L'animation du remplissage de la tasse de café est réalisée par les moteurs d'état Transition et SmoothedAnimation.

Cup {
    id: cup
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
    state: "0"
}

L'animation de la barre de progression est mise en œuvre avec Behavior.

Behavior on greenBar.width {
    SmoothedAnimation {
        easing.type: Easing.Linear
        velocity: (progressForm.contentItem.width / progressForm.brewTime) * 1000
    }
}

Timer Le moteur d'état se chargera de mettre à jour l'état de l'application une fois l'infusion terminée.

Timer {
    id: timer
    interval: progressForm.brewTime
    running: true
    onTriggered: {
        progressForm.appFlow.onFinished()
    }
}

Mise en œuvre du café prêt

La page Ready affiche une tasse de café remplie de la configuration sélectionnée par l'utilisateur avec un texte "Votre café est prêt" et une icône de vérification.

Lorsque cette page est affichée, Timer commence à fonctionner et une fois que l'intervalle fixé est atteint, l'utilisateur est renvoyé à Home.qml.

Fichiers sources

Test de l'interface graphique Squish

Cette application est livrée avec des tests Squish GUI destinés à Qt Test pour Android. Les tests sont réalisés avec Squish for Qt et sont écrits en Python. Ils se trouvent dans le répertoire de test de l'application.

Lorsque vous utilisez Squish pour Qt pour Android, assurez-vous d'utiliser le crochet intégré à Qt et de transférer le port Squish avec adb. Si vous obtenez l'erreur "Cannot load library" lorsque dlopen échoue, désactivez QT_USE_TARGET_ANDROID_BUILD_DIR dans la configuration CMake, ou effacez-la de Projects->Build Settings->CMake->Current Configuration dans Qt Creator.

Si vous n'avez pas de licence Squish, vous pouvez obtenir une version d'essai gratuite.

Exemple de projet @ code.qt.io