1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*!
\example demos/coffee
\title Coffee Machine
\ingroup qtquickdemos
\brief A Qt Quick application with a state-based custom user interface.
\meta {tag} {quick,embedded,states,touch}
\examplecategory {Application Examples}
\examplecategory {Embedded}
\examplecategory {Mobile}
\borderedimage coffee_machine_overview.png
\section1 Coffee Machine example overview
This app demonstrates a cross platform, multi screen size and responsive way
of implementing a typical user interface for product ordering.
\section2 Selecting a recipe
\image coffee_machine_selection.png
\caption The coffee selection
The coffee machine application lets you choose a type of coffee and indicates
how many coffees of that type you have left to order.
\section2 Coffee customization
\borderedimage coffee_machine_modify.png
Once a recipe is selected, the app displays what ratio the coffee blend
will contain of:
\list
\li brewed coffee
\li hot milk
\li milk foam
\li sugar
\endlist
This can be modified using sliders.
\section2 Displaying the brewing status
Once the user has acknowledged that the cup is in the machine the brew starts.
When the brew has been started, the app shows an animated display of the
brewing process.
\section2 Coffee is ready
Once the brewing process has ended, the app shows coffee cup with the desired
coffee mix in it for a few seconds before returning to the starting page.
\section1 How it works
Here we discuss how these features are implemented.
\section2 Adapting to different screens
The app adapts at runtime to different target device screen types by
first setting the root object \l {ApplicationWindow} QML type width and
height properties to device screen available height and width.
\snippet demos/coffee/main.qml Set application window size
From there child objects of the \c ApplicationWindow fetch the size of the
\c ApplicationWindow to determine their own sizes accordingly.
The app uses \l {GridLayout} throughout the application page components to
easily adapt to changes in screen orientation.
\section2 Navigating through the app pages
The application uses \l {StackView} QML type to display different pages of
the app. The \c StackView handling the different page components is
implemented in \c ApplicationFlowForm.ui.qml.
Navigating from one page to next triggers a state change in
\c ApplicationFlow.qml where the needed property changes are handled by
\l {PropertyChanges} QML type:
\snippet demos/coffee/ApplicationFlow.qml States
The animations happening during these state changes are implemented with
\l {Transition} and \l {PropertyAnimation} inside the \c StackView component
in \c ApplicationFLowForm.ui.qml.
\section2 Implementing start page
The application starts by showing the \c Home page to the user as the initial
item in the \l {StackView}:
\snippet demos/coffee/ApplicationFlowForm.ui.qml Stack view
The \c Home component is structured by placing \l {Item} component as the
root object with state machine and appropriate property aliases, followed by
\l {GridLayout}. This same kind of structuring will be used in all of the app
page components.
The \c Home page displays an image of a coffee cup with
Qt logo on top, Coffee Machine as a title, caption with some catchy briefing
on what the user can expect and a \c getStartedButton button.
The user can move forward by pressing the \c getStartedButton, the button
\c onClicked function is implemented \c ApplicationFlow.qml:
\snippet demos/coffee/ApplicationFlow.qml On clicked
This will trigger the state change to "Coffee-selection" in
\c ApplicationFlow.qml and push the \c choosingCoffee component on top of
the \c Home component in \l{StackView}.
\section2 Implementing coffee selection
On the Coffee Selection page \c ChoosingCoffee.qml is displayed, here the
user sees 4 different coffee options to choose from. These options are
displayed as \c CoffeeCards which are located inside the \l{GridLayout} in
\c ChoosingCoffee.qml:
\snippet demos/coffee/ChoosingCoffeeForm.ui.qml Coffees
The implementation of the \c CoffeeCard is located \c CoffeeCard.qml.
These cards may be displayed in either grid or in a row type of way
depending on the available screen width and height properties that the
\c ApplicationWindow root object follows and passes down to the
\c ChoosingCoffee.qml and to the \l{GridLayout} in there through the state
machine.
\c CoffeeCards vary in their names, brewing times, ingredients and how many
cups there are available at the moment.
On this page the user can also change the application theme for the first time
by pressing the little sun looking icon button from the upper right corner of
the screen.
Pressing the theme button calls \c themeButton function in \c ApplicationFlow.qml:
\snippet demos/coffee/ApplicationFlow.qml Theme button
The function changes the \c currentTheme property of \c Colors.qml and colors
change throughout the app by property bindings automatically.
All the colors used in app are located in \c Colors.qml.
If theme is switched to light theme the theme changing icon button icon turns
to represent a half moon.
Pressing on any of the coffee cards triggers a state change inside
\l{AbstractButton} in \c CoffeeCard.qml which then triggers \l{NumberAnimation}
through \l{Transition}:
\snippet demos/coffee/CoffeeCardForm.ui.qml AbstractButton
This will scale the selected coffee card down to smaller size and
turns the edges of the card to green giving user the expression that the
coffee was indeed selected.
Every coffee cards \c button property alias \c onClicked function binds to a
function located in \c ApplicationFlow.qml. When user presses any of the
coffee cards the function with a name correlating with the chosen coffee
option gets called. The function will set the state of \c ApplicationFlow.qml
to \c Settings , push a new component to the \l{StackView} and set the
ingredient properties accordingly.
\section2 Implementing coffee settings
On this page the user can customize their coffee option to match their
preference by adjusting custom \l {Slider} QML types. Changing the value of
sliders will affect the liquid levels seen inside the coffee cup, this is
made possible by binding the height of the liquid images inside \c Cup.qml to
the values of corresponding sliders.
The values of the sliders will be stored to property variables in
\c ApplicationFLow.qml through \c onValueChanged function.
\snippet demos/coffee/Settings.qml Value changed
Clicking on Start button changes the state of \c ApplicationFlow.qml to
"Insert", and the app displays the \c Insert.qml.
\section2 Implementing insert cup
On this page the user is instructed to insert their cup on to the machine
before the brewing process can start.
Pressing the \c Continue button will move app to \c Progress page.
\section2 Implementing brewing coffee
Progress page displays a coffee cup and progress bar that will both in their
own way signal the brewing process in real time.
The coffee cup here once filled will display the exact same configuration as
the user selected on \c Settings page, this is made sure by binding the
\c Cup property variables to the saved corresponding values in
\c ApplicationFlow.qml.
The animation for filling the coffee cup happens with state engines
\l {Transition} and \l {SmoothedAnimation}.
\snippet demos/coffee/ProgressForm.ui.qml Cup
The progress bar animation is implemented with \l {Behavior}.
\snippet demos/coffee/Progress.qml Behavior
\l {Timer} will take care of updating the application state once the brewing
is done.
\snippet demos/coffee/Progress.qml Timer
\section2 Implementing coffee ready
Ready page displays a coffee cup filled with whatever configuration the user
selected with a "Your coffee is ready" text and a check icon.
When this page is displayed a \l {Timer} starts running and once the interval
set is reached user is directed back to \c Home.qml.
*/
|
