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
|
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\example wearable
\keyword Qt Quick Controls - Wearable Demo
\title Qt Quick Controls - Wearable Demo
\keyword Qt Quick Controls 2 - Wearable Demo
\ingroup qtquickcontrols-examples
\examplecategory {Embedded}
\examplecategory {Mobile}
\brief Demonstrates an application launcher designed for wearable devices.
\image qtquickcontrols-wearable.png
The \e {Wearable Demo} consists of an application launcher and a collection
of small and simple example applications aimed at wearable devices.
\section1 Structure
The main .qml file, \c wearable.qml, consists of an ApplicationWindow, a StackView
for a stack-based navigation model, and buttons for interactive navigation.
\snippet wearable/Wearable/Main.qml window start
\dots 4
\snippet wearable/Wearable/Main.qml stackview start
\dots 8
\snippet wearable/Wearable/Main.qml onLaunched connection
\dots 8
\snippet wearable/Wearable/Main.qml stackview end
\snippet wearable/Wearable/Main.qml DemoMode
\snippet wearable/Wearable/Main.qml DemoModeIndicator
\snippet wearable/Wearable/Main.qml MouseArea
\snippet wearable/Wearable/Main.qml window end
\section1 Styling
The demo uses a custom \l {Styling Qt Quick Controls}{Qt Quick Controls 2 style}
embedded into the demo's resources. The custom style is implemented for a
few controls only, as it is specific to this particular demo. It uses a
singleton type for various styling attributes, such as fonts and colors.
\list
\li \c WearableStyle/PageIndicator.qml
\li \c WearableStyle/Slider.qml
\li \c WearableStyle/Switch.qml
\li \c WearableStyle/UIStyle.qml
\endlist
The style is applied in \c main() in \c wearable.cpp:
\snippet wearable/wearable.cpp style
The main benefit of using the built-in styling system is that the style
selection is fully transparent to the application code. There is no need
to import a specific folder that contains the styled controls. This way,
the application can be run with other styles too.
\section1 Launcher Page
The application launcher is implemented using a circular PathView in
\c LauncherPage.qml. Each application is in a separate .qml file,
which are added to the ListModel on the launcher page. For some applications
a fallback option is provided to handle optional dependencies like QtLocation.
\snippet wearable/Wearable/LauncherPage.qml LauncherPage start
\dots 4
\snippet wearable/Wearable/LauncherPage.qml Model start
\snippet wearable/Wearable/LauncherPage.qml Model mid
\dots 8
\snippet wearable/Wearable/LauncherPage.qml Model end
\snippet wearable/Wearable/LauncherPage.qml Delegate start
\dots 8
\snippet wearable/Wearable/LauncherPage.qml Delegate mid
\dots 8
\snippet wearable/Wearable/LauncherPage.qml Delegate end
\dots 4
\snippet wearable/Wearable/LauncherPage.qml LauncherPage end
\section1 Applications
The applications are designed for touch input based on what input methods
or communication means are typically offered by wearable devices.
Most applications have their own JavaScript files that act as dummy
application backends. They demonstrate how to fetch and manipulate or
convert external data. For example, the \c Weather application reads data
from local files using \l XMLHttpRequest. These files were generated by
storing responses from remote servers in JSON format. This code can be
easily modified to acquire data from remote servers.
\section2 Navigation
This application uses the QtLocation module to display a route within Oslo.
If QtLocation is not installed, it shows a static image as the map and route
information based on a JSON file. Currently, it is not possible to specify
the source and destination from within the application, but it can be added
based on the device's capabilities. For example, you can collect necessary
info. using one of the following methods:
\list
\li Implement additional screens to collect input from user
\li Communicate with another device (smart phone or PC)
over Bluetooth or WiFi channels.
\endlist
\section2 Weather
This application displays weather information such as temperature, sunrise
and sunset times, air pressure, and so on. This information is obtained
from \l {https://openweathermap.org/} using its REST API. The API response is
in JSON format, which is parsed using JavaScript by the application. This
application can also be modified by adding screens to obtain weather data for
a given location.
\section2 World Clock
This application displays a world clock for different cities. As of now, the
list of cities is hard-coded in the application, but that can be changed based
on the input capabilities of the device.
\section2 Others
The remaining applications return static data for now, but they can be
modified to process response data obtained from respective services.
\include examples-run.qdocinc
*/
|
