diff options
Diffstat (limited to 'examples/quickcontrols/wearable')
168 files changed, 2558 insertions, 0 deletions
diff --git a/examples/quickcontrols/wearable/CMakeLists.txt b/examples/quickcontrols/wearable/CMakeLists.txt new file mode 100644 index 0000000000..b61064d5d9 --- /dev/null +++ b/examples/quickcontrols/wearable/CMakeLists.txt @@ -0,0 +1,206 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + +cmake_minimum_required(VERSION 3.16) +project(wearable LANGUAGES CXX) + +set(CMAKE_AUTOMOC ON) + +if(NOT DEFINED INSTALL_EXAMPLESDIR) + set(INSTALL_EXAMPLESDIR "examples") +endif() + +set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quickcontrols2/wearable") + +find_package(Qt6 REQUIRED COMPONENTS Core Gui Quick QuickControls2) + +qt_add_executable(wearable + wearable.cpp +) + +set_target_properties(wearable PROPERTIES + WIN32_EXECUTABLE TRUE + MACOSX_BUNDLE TRUE +) + +target_link_libraries(wearable PUBLIC + Qt::Core + Qt::Gui + Qt::Quick + Qt::QuickControls2 +) + +if(UNIX AND NOT APPLE AND CMAKE_CROSSCOMPILING) + find_package(Qt6 REQUIRED COMPONENTS QuickTemplates2) + + # Work around QTBUG-86533 + target_link_libraries(wearable PRIVATE Qt::QuickTemplates2) +endif() + +# Resources: +set(wearable_resource_files + "icons/wearable/36x36/alarms.png" + "icons/wearable/36x36/fitness.png" + "icons/wearable/36x36/navigation.png" + "icons/wearable/36x36/notifications.png" + "icons/wearable/36x36/settings.png" + "icons/wearable/36x36/weather.png" + "icons/wearable/36x36/worldclock.png" + "icons/wearable/36x36@2/alarms.png" + "icons/wearable/36x36@2/fitness.png" + "icons/wearable/36x36@2/navigation.png" + "icons/wearable/36x36@2/notifications.png" + "icons/wearable/36x36@2/settings.png" + "icons/wearable/36x36@2/weather.png" + "icons/wearable/36x36@2/worldclock.png" + "icons/wearable/index.theme" + "images/back.png" + "images/back@2x.png" + "images/background-dark.png" + "images/background-light.png" + "images/home.png" + "images/home@2x.png" + "qml/Alarms/AlarmsPage.qml" + "qml/DemoMode.qml" + "qml/DemoModeIndicator.qml" + "qml/Fitness/FitnessPage.qml" + "qml/Fitness/fitness.js" + "qml/Fitness/images/man-running-dark.png" + "qml/Fitness/images/man-running-dark@2x.png" + "qml/Fitness/images/man-running-light.png" + "qml/Fitness/images/man-running-light@2x.png" + "qml/Fitness/images/man-walking-dark.png" + "qml/Fitness/images/man-walking-dark@2x.png" + "qml/Fitness/images/man-walking-light.png" + "qml/Fitness/images/man-walking-light@2x.png" + "qml/LauncherPage.qml" + "qml/NaviButton.qml" + "qml/Navigation/NavigationPage.qml" + "qml/Navigation/RouteElement.qml" + "qml/Navigation/images/end.png" + "qml/Navigation/images/end@2x.png" + "qml/Navigation/images/leftturn-dark.png" + "qml/Navigation/images/leftturn-dark@2x.png" + "qml/Navigation/images/leftturn-light.png" + "qml/Navigation/images/leftturn-light@2x.png" + "qml/Navigation/images/navigation-dark.png" + "qml/Navigation/images/navigation-dark@2x.png" + "qml/Navigation/images/navigation-light.png" + "qml/Navigation/images/navigation-light@2x.png" + "qml/Navigation/images/rightturn-dark.png" + "qml/Navigation/images/rightturn-dark@2x.png" + "qml/Navigation/images/rightturn-light.png" + "qml/Navigation/images/rightturn-light@2x.png" + "qml/Navigation/images/start.png" + "qml/Navigation/images/start@2x.png" + "qml/Navigation/images/straight-dark.png" + "qml/Navigation/images/straight-dark@2x.png" + "qml/Navigation/images/straight-light.png" + "qml/Navigation/images/straight-light@2x.png" + "qml/Navigation/images/uturn.png" + "qml/Navigation/images/uturn@2x.png" + "qml/Navigation/navigation.js" + "qml/Navigation/walk_route.json" + "qml/Notifications/NotificationsPage.qml" + "qml/Notifications/images/avatarf-dark.png" + "qml/Notifications/images/avatarf-dark@2x.png" + "qml/Notifications/images/avatarf-light.png" + "qml/Notifications/images/avatarf-light@2x.png" + "qml/Notifications/images/avatarm-dark.png" + "qml/Notifications/images/avatarm-dark@2x.png" + "qml/Notifications/images/avatarm-light.png" + "qml/Notifications/images/avatarm-light@2x.png" + "qml/Notifications/images/missedcall-dark.png" + "qml/Notifications/images/missedcall-dark@2x.png" + "qml/Notifications/images/missedcall-light.png" + "qml/Notifications/images/missedcall-light@2x.png" + "qml/Notifications/notifications.js" + "qml/Settings/SettingsPage.qml" + "qml/Settings/images/bluetooth-dark.png" + "qml/Settings/images/bluetooth-dark@2x.png" + "qml/Settings/images/bluetooth-light.png" + "qml/Settings/images/bluetooth-light@2x.png" + "qml/Settings/images/brightness-dark.png" + "qml/Settings/images/brightness-dark@2x.png" + "qml/Settings/images/brightness-light.png" + "qml/Settings/images/brightness-light@2x.png" + "qml/Settings/images/demo-mode-dark.png" + "qml/Settings/images/demo-mode-dark@2x.png" + "qml/Settings/images/demo-mode-light.png" + "qml/Settings/images/demo-mode-light@2x.png" + "qml/Settings/images/demo-mode-white.png" + "qml/Settings/images/demo-mode-white@2x.png" + "qml/Settings/images/theme-dark.png" + "qml/Settings/images/theme-dark@2x.png" + "qml/Settings/images/theme-light.png" + "qml/Settings/images/theme-light@2x.png" + "qml/Settings/images/wifi-dark.png" + "qml/Settings/images/wifi-dark@2x.png" + "qml/Settings/images/wifi-light.png" + "qml/Settings/images/wifi-light@2x.png" + "qml/Style/PageIndicator.qml" + "qml/Style/Slider.qml" + "qml/Style/Switch.qml" + "qml/Style/UIStyle.qml" + "qml/Style/qmldir" + "qml/SwipeViewPage.qml" + "qml/Weather/WeatherPage.qml" + "qml/Weather/images/humidity-dark.png" + "qml/Weather/images/humidity-dark@2x.png" + "qml/Weather/images/humidity-light.png" + "qml/Weather/images/humidity-light@2x.png" + "qml/Weather/images/pressure-dark.png" + "qml/Weather/images/pressure-dark@2x.png" + "qml/Weather/images/pressure-light.png" + "qml/Weather/images/pressure-light@2x.png" + "qml/Weather/images/sunrise-dark.png" + "qml/Weather/images/sunrise-dark@2x.png" + "qml/Weather/images/sunrise-light.png" + "qml/Weather/images/sunrise-light@2x.png" + "qml/Weather/images/sunset-dark.png" + "qml/Weather/images/sunset-dark@2x.png" + "qml/Weather/images/sunset-light.png" + "qml/Weather/images/sunset-light@2x.png" + "qml/Weather/images/temperature-dark.png" + "qml/Weather/images/temperature-dark@2x.png" + "qml/Weather/images/temperature-light.png" + "qml/Weather/images/temperature-light@2x.png" + "qml/Weather/images/wind-dark.png" + "qml/Weather/images/wind-dark@2x.png" + "qml/Weather/images/wind-light.png" + "qml/Weather/images/wind-light@2x.png" + "qml/Weather/weather.js" + "qml/Weather/weather.json" + "qml/WorldClock/Clock.qml" + "qml/WorldClock/WorldClockPage.qml" + "qml/WorldClock/images/center.png" + "qml/WorldClock/images/center@2x.png" + "qml/WorldClock/images/second.png" + "qml/WorldClock/images/second@2x.png" + "qml/WorldClock/images/swissdaydial.png" + "qml/WorldClock/images/swissdaydial@2x.png" + "qml/WorldClock/images/swissdayhour.png" + "qml/WorldClock/images/swissdayhour@2x.png" + "qml/WorldClock/images/swissdayminute.png" + "qml/WorldClock/images/swissdayminute@2x.png" + "qml/WorldClock/images/swissnightdial.png" + "qml/WorldClock/images/swissnightdial@2x.png" + "qml/WorldClock/images/swissnighthour.png" + "qml/WorldClock/images/swissnighthour@2x.png" + "qml/WorldClock/images/swissnightminute.png" + "qml/WorldClock/images/swissnightminute@2x.png" + "wearable.qml" +) + +qt6_add_resources(wearable "wearable" + PREFIX + "/" + FILES + ${wearable_resource_files} +) + +install(TARGETS wearable + RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" + LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" +) diff --git a/examples/quickcontrols/wearable/doc/images/qtquickcontrols2-wearable.png b/examples/quickcontrols/wearable/doc/images/qtquickcontrols2-wearable.png Binary files differnew file mode 100644 index 0000000000..c61055340c --- /dev/null +++ b/examples/quickcontrols/wearable/doc/images/qtquickcontrols2-wearable.png diff --git a/examples/quickcontrols/wearable/doc/src/qtquickcontrols2-wearable.qdoc b/examples/quickcontrols/wearable/doc/src/qtquickcontrols2-wearable.qdoc new file mode 100644 index 0000000000..8a1e021663 --- /dev/null +++ b/examples/quickcontrols/wearable/doc/src/qtquickcontrols2-wearable.qdoc @@ -0,0 +1,167 @@ +// 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 qtquickcontrols2-examples + \brief Demonstrates an application launcher designed for wearable devices. + + \image qtquickcontrols2-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. + + \quotefromfile wearable/wearable.qml + \skipuntil import "qml/Style" + \printuntil id: window + \dots + \skipto header + \printuntil id: homeButton + \dots 8 + \skipto onClicked + \printuntil } + \printuntil id: backButton + \dots 8 + \skipto onClicked + \printuntil id: stackView + \dots 8 + \skipuntil initialItem + \printuntil /^\}/ + + \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 qml/Style/PageIndicator.qml + \li \c qml/Style/Slider.qml + \li \c qml/Style/Switch.qml + \li \c qml/Style/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 Custom Type + + The demo application contains a custom button type implemented in + \c qml/NaviButton.qml. The navigation button is used as a home and back + button in \c wearable.qml. \c NaviButton extends the AbstractButton type + with properties that control the slide in and slide out transitions and + the button image. + + \quotefromfile wearable/qml/NaviButton.qml + \skipuntil import "Style" + \printuntil id: image + \dots 8 + \skipuntil } + \printuntil background: + \dots 8 + \skipto } + \printuntil /^\}/ + + \section1 Icons + + The demo ships a custom icon theme. The icons are bundled into the \c :/icons + folder in the application's resources. The \c index.theme file lists the contents + of the icon theme: + + \quotefile wearable/icons/wearable/index.theme + + Finally, the icon theme is selected in \c main(): + + \snippet wearable/wearable.cpp icons + + The icons are used on the Launcher Page, which is presented below. See + \l {Icons in Qt Quick Controls} for more details about icons and themes. + + \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 is added to the ListModel on the launcher page. + + \quotefromfile wearable/qml/LauncherPage.qml + \skipto PathView + \printuntil signal launched + \dots + \skipto ListModel + \printuntil } + \dots 8 + \printline ListElement + \skipto "Settings" + \printuntil delegate: + \dots 8 + \skipto icon.width + \printuntil icon.name + \dots 8 + \skipto onClicked: + \printto path: + \dots + \skipto /^\}/ + \printline } + + \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 illustrate fetching external data and help + manipulating or converting the data. In the \c Navigation and \c Weather + applications, data acquisition is implemented using \l XMLHttpRequest to + read from local files. 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 displays a walking route from source to destination. This + route information is obtained using the REST API provided by + \l {https://www.openstreetmap.org/}. The API response is in JSON format, which + is parsed using JavaScript by the application. 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, user input + could be implemented as screens with input fields, or can be communicated + over Bluetooth/Wifi from a paired application running on another device + such as a smart phone or PC. + + \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 +*/ diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36/alarms.png b/examples/quickcontrols/wearable/icons/wearable/36x36/alarms.png Binary files differnew file mode 100644 index 0000000000..252dcf938f --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36/alarms.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36/fitness.png b/examples/quickcontrols/wearable/icons/wearable/36x36/fitness.png Binary files differnew file mode 100644 index 0000000000..4b0679e271 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36/fitness.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36/navigation.png b/examples/quickcontrols/wearable/icons/wearable/36x36/navigation.png Binary files differnew file mode 100644 index 0000000000..08e73005fd --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36/navigation.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36/notifications.png b/examples/quickcontrols/wearable/icons/wearable/36x36/notifications.png Binary files differnew file mode 100644 index 0000000000..6309312122 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36/notifications.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36/settings.png b/examples/quickcontrols/wearable/icons/wearable/36x36/settings.png Binary files differnew file mode 100644 index 0000000000..c1552fb360 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36/settings.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36/weather.png b/examples/quickcontrols/wearable/icons/wearable/36x36/weather.png Binary files differnew file mode 100644 index 0000000000..61be79a24f --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36/weather.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36/worldclock.png b/examples/quickcontrols/wearable/icons/wearable/36x36/worldclock.png Binary files differnew file mode 100644 index 0000000000..d23e32e512 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36/worldclock.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36@2/alarms.png b/examples/quickcontrols/wearable/icons/wearable/36x36@2/alarms.png Binary files differnew file mode 100644 index 0000000000..6047e231fc --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36@2/alarms.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36@2/fitness.png b/examples/quickcontrols/wearable/icons/wearable/36x36@2/fitness.png Binary files differnew file mode 100644 index 0000000000..1d2caa3385 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36@2/fitness.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36@2/navigation.png b/examples/quickcontrols/wearable/icons/wearable/36x36@2/navigation.png Binary files differnew file mode 100644 index 0000000000..7d4a62b9e1 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36@2/navigation.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36@2/notifications.png b/examples/quickcontrols/wearable/icons/wearable/36x36@2/notifications.png Binary files differnew file mode 100644 index 0000000000..8d3b333350 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36@2/notifications.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36@2/settings.png b/examples/quickcontrols/wearable/icons/wearable/36x36@2/settings.png Binary files differnew file mode 100644 index 0000000000..e89188743d --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36@2/settings.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36@2/weather.png b/examples/quickcontrols/wearable/icons/wearable/36x36@2/weather.png Binary files differnew file mode 100644 index 0000000000..0a2ae7d54e --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36@2/weather.png diff --git a/examples/quickcontrols/wearable/icons/wearable/36x36@2/worldclock.png b/examples/quickcontrols/wearable/icons/wearable/36x36@2/worldclock.png Binary files differnew file mode 100644 index 0000000000..ca6eb879e1 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/36x36@2/worldclock.png diff --git a/examples/quickcontrols/wearable/icons/wearable/index.theme b/examples/quickcontrols/wearable/icons/wearable/index.theme new file mode 100644 index 0000000000..da702d4a92 --- /dev/null +++ b/examples/quickcontrols/wearable/icons/wearable/index.theme @@ -0,0 +1,14 @@ +[Icon Theme] +Name=Wearable +Comment=Qt Quick Controls 2 Wearable Demo Icon Theme + +Directories=36x36,36x36@2 + +[36x36] +Size=36 +Type=Fixed + +[36x36@2] +Size=36 +Scale=2 +Type=Fixed diff --git a/examples/quickcontrols/wearable/images/back.png b/examples/quickcontrols/wearable/images/back.png Binary files differnew file mode 100644 index 0000000000..cf80aa65f5 --- /dev/null +++ b/examples/quickcontrols/wearable/images/back.png diff --git a/examples/quickcontrols/wearable/images/back@2x.png b/examples/quickcontrols/wearable/images/back@2x.png Binary files differnew file mode 100644 index 0000000000..02f27981e0 --- /dev/null +++ b/examples/quickcontrols/wearable/images/back@2x.png diff --git a/examples/quickcontrols/wearable/images/back@3x.png b/examples/quickcontrols/wearable/images/back@3x.png Binary files differnew file mode 100644 index 0000000000..6d2d6cf120 --- /dev/null +++ b/examples/quickcontrols/wearable/images/back@3x.png diff --git a/examples/quickcontrols/wearable/images/back@4x.png b/examples/quickcontrols/wearable/images/back@4x.png Binary files differnew file mode 100644 index 0000000000..03193681b1 --- /dev/null +++ b/examples/quickcontrols/wearable/images/back@4x.png diff --git a/examples/quickcontrols/wearable/images/background-dark.png b/examples/quickcontrols/wearable/images/background-dark.png Binary files differnew file mode 100644 index 0000000000..6a8c0761aa --- /dev/null +++ b/examples/quickcontrols/wearable/images/background-dark.png diff --git a/examples/quickcontrols/wearable/images/background-light.png b/examples/quickcontrols/wearable/images/background-light.png Binary files differnew file mode 100644 index 0000000000..913befab82 --- /dev/null +++ b/examples/quickcontrols/wearable/images/background-light.png diff --git a/examples/quickcontrols/wearable/images/home.png b/examples/quickcontrols/wearable/images/home.png Binary files differnew file mode 100644 index 0000000000..b6ee1459f7 --- /dev/null +++ b/examples/quickcontrols/wearable/images/home.png diff --git a/examples/quickcontrols/wearable/images/home@2x.png b/examples/quickcontrols/wearable/images/home@2x.png Binary files differnew file mode 100644 index 0000000000..d5595b2378 --- /dev/null +++ b/examples/quickcontrols/wearable/images/home@2x.png diff --git a/examples/quickcontrols/wearable/images/home@3x.png b/examples/quickcontrols/wearable/images/home@3x.png Binary files differnew file mode 100644 index 0000000000..9a5188d22b --- /dev/null +++ b/examples/quickcontrols/wearable/images/home@3x.png diff --git a/examples/quickcontrols/wearable/images/home@4x.png b/examples/quickcontrols/wearable/images/home@4x.png Binary files differnew file mode 100644 index 0000000000..c4d2eb515a --- /dev/null +++ b/examples/quickcontrols/wearable/images/home@4x.png diff --git a/examples/quickcontrols/wearable/qml/Alarms/AlarmsPage.qml b/examples/quickcontrols/wearable/qml/Alarms/AlarmsPage.qml new file mode 100644 index 0000000000..65b34b83cb --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Alarms/AlarmsPage.qml @@ -0,0 +1,67 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import ".." +import "../Style" + +Item { + QQC2.SwipeView { + id: svAlarmsContainer + + anchors.fill: parent + + Repeater { + model: ListModel { + ListElement { name: qsTr("Week Days"); state: true; time: "06:00 AM" } + ListElement { name: qsTr("Week Ends"); state: false; time: "07:30 AM" } + } + + SwipeViewPage { + property alias stateSwitch: stateSwitch + + Column { + spacing: 30 + anchors.centerIn: parent + + QQC2.Switch { + id: stateSwitch + checked: model.state + anchors.left: nameLabel.right + } + + Text { + text: model.time + anchors.horizontalCenter: parent.horizontalCenter + verticalAlignment: Text.AlignVCenter + height: UIStyle.fontSizeXL + font.bold: stateSwitch.checked + font.pixelSize: stateSwitch.checked ? UIStyle.fontSizeXL : UIStyle.fontSizeL + font.letterSpacing: 4 + color: UIStyle.themeColorQtGray1 + } + + Text { + id: nameLabel + text: model.name + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: UIStyle.fontSizeS + font.italic: true + font.bold: true + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray2 + } + } + } + } + } + + QQC2.PageIndicator { + count: svAlarmsContainer.count + currentIndex: svAlarmsContainer.currentIndex + + anchors.bottom: svAlarmsContainer.bottom + anchors.horizontalCenter: parent.horizontalCenter + } +} diff --git a/examples/quickcontrols/wearable/qml/DemoMode.qml b/examples/quickcontrols/wearable/qml/DemoMode.qml new file mode 100644 index 0000000000..d7d4b6e61f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/DemoMode.qml @@ -0,0 +1,211 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls + +import "Style" + +Item { + property StackView stackView + + SequentialAnimation { + id: demoModeAnimation + running: settings.demoMode + + // Set brightness back to normal. + ScriptAction { script: settings.brightness = 0 } + + // Go back to the launcher page. + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.pop(null) } + PauseAnimation { duration: 2000 } + + // Open the world clock page. + ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("WorldClock/WorldClockPage.qml")) } + PauseAnimation { duration: 2000 } + + // Swipe across a few times. + SequentialAnimation { + loops: 6 + + ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() } + PauseAnimation { duration: 2500 } + } + + + // Go back to the launcher page. + ScriptAction { script: stackView.pop(null) } + PauseAnimation { duration: 2000 } + + // Open the navigation page. + ScriptAction { script: stackView.currentItem.incrementCurrentIndex() } + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Navigation/NavigationPage.qml")) } + PauseAnimation { duration: 2000 } + + // Flick down a few times. + SequentialAnimation { + loops: 6 + + ScriptAction { script: stackView.currentItem.routeListView.incrementCurrentIndex() } + PauseAnimation { duration: 2000 } + } + + + // Go back to the launcher page. + ScriptAction { script: stackView.pop(null) } + PauseAnimation { duration: 2000 } + + // Open the weather page. + ScriptAction { script: stackView.currentItem.incrementCurrentIndex() } + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Weather/WeatherPage.qml")) } + PauseAnimation { duration: 2000 } + + // Swipe across a few times. + SequentialAnimation { + loops: 4 + + ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() } + PauseAnimation { duration: 2000 } + } + + + // Go back to the launcher page. + ScriptAction { script: stackView.pop(null) } + PauseAnimation { duration: 2000 } + + // Open the fitness page. + ScriptAction { script: stackView.currentItem.incrementCurrentIndex() } + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Fitness/FitnessPage.qml")) } + PauseAnimation { duration: 2000 } + + // Swipe across a few times. + SequentialAnimation { + loops: 2 + + ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() } + PauseAnimation { duration: 2000 } + } + + + // Go back to the launcher page. + ScriptAction { script: stackView.pop(null) } + PauseAnimation { duration: 2000 } + + // Open the notifications page. + ScriptAction { script: stackView.currentItem.incrementCurrentIndex() } + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Notifications/NotificationsPage.qml")) } + + // Flick down a few times. + SequentialAnimation { + loops: 3 + + PauseAnimation { duration: 2000 } + ScriptAction { script: stackView.currentItem.incrementCurrentIndex() } + } + + + // Go back to the launcher page. + ScriptAction { script: stackView.pop(null) } + PauseAnimation { duration: 2000 } + + // Open the alarms page. + ScriptAction { script: stackView.currentItem.incrementCurrentIndex() } + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Alarms/AlarmsPage.qml")) } + PauseAnimation { duration: 2000 } + + // Toggle the switch. + ScriptAction { script: stackView.currentItem.children[0].currentItem.stateSwitch.toggle() } + PauseAnimation { duration: 2000 } + + // Go to the next alarm. + ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() } + PauseAnimation { duration: 2000 } + + // Toggle the switch there too. + ScriptAction { script: stackView.currentItem.children[0].currentItem.stateSwitch.toggle() } + PauseAnimation { duration: 2000 } + + + // Go back to the launcher page. + ScriptAction { script: stackView.pop(null) } + PauseAnimation { duration: 2000 } + + // Open the settings page. + ScriptAction { script: stackView.currentItem.incrementCurrentIndex() } + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Settings/SettingsPage.qml")) } + PauseAnimation { duration: 3000 } + + // Toggle the switches. + ScriptAction { script: stackView.currentItem.children[0].currentItem.bluetoothSwitch.toggle() } + PauseAnimation { duration: 1000 } + ScriptAction { script: stackView.currentItem.children[0].currentItem.wirelessSwitch.toggle() } + PauseAnimation { duration: 3000 } + + // Go to the next page. + ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() } + + // Play with the brightness slider. + // First, set it to full brightness so we start in the correct state. + ScriptAction { + script: { + var brightnessSlider = stackView.currentItem.children[0].currentItem.brightnessSlider + brightnessSlider.value = 0 + // increase()/decrease() are not a result of user interaction and + // hence moved() will not be emitted, so we do it ourselves. + brightnessSlider.moved() + } + } + + // Decrease the brightness. + SequentialAnimation { + loops: 3 + + PauseAnimation { duration: 1000 } + ScriptAction { + script: { + var brightnessSlider = stackView.currentItem.children[0].currentItem.brightnessSlider + brightnessSlider.decrease() + brightnessSlider.moved() + } + } + } + + // Increase the brightness back to full. + PauseAnimation { duration: 3000 } + SequentialAnimation { + loops: 3 + + PauseAnimation { duration: 1000 } + ScriptAction { + script: { + var brightnessSlider = stackView.currentItem.children[0].currentItem.brightnessSlider + brightnessSlider.increase() + brightnessSlider.moved() + } + } + } + + // Toggle the dark theme switch. + PauseAnimation { duration: 2000 } + ScriptAction { + script: { + var darkThemeSwitch = stackView.currentItem.children[0].currentItem.darkThemeSwitch + darkThemeSwitch.toggle() + // As above, only proper user interaction results in toggled() being emitted, + // so we do it ourselves. + darkThemeSwitch.toggled() + } + } + PauseAnimation { duration: 4000 } + + // Go back to the launcher page. + ScriptAction { script: stackView.pop(null) } + } +} diff --git a/examples/quickcontrols/wearable/qml/DemoModeIndicator.qml b/examples/quickcontrols/wearable/qml/DemoModeIndicator.qml new file mode 100644 index 0000000000..977c600653 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/DemoModeIndicator.qml @@ -0,0 +1,47 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import "Style" + +Item { + id: root + width: row.implicitWidth + margins * 2 + + readonly property int topMargin: 24 + readonly property int margins: 12 + + Behavior on y { + NumberAnimation {} + } + + Rectangle { + id: demoModeIndicatorBg + anchors.fill: parent + anchors.topMargin: -topMargin + radius: 20 + color: UIStyle.colorRed + } + + Row { + id: row + spacing: 8 + anchors.fill: parent + anchors.leftMargin: margins + anchors.rightMargin: margins + + Image { + source: "Settings/images/demo-mode-white.png" + width: height + height: instructionLabel.height * 2 + anchors.verticalCenter: parent.verticalCenter + } + QQC2.Label { + id: instructionLabel + text: "Tap screen to use" + color: UIStyle.colorQtGray10 + anchors.verticalCenter: parent.verticalCenter + } + } +} diff --git a/examples/quickcontrols/wearable/qml/Fitness/FitnessPage.qml b/examples/quickcontrols/wearable/qml/Fitness/FitnessPage.qml new file mode 100644 index 0000000000..c1047de9aa --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/FitnessPage.qml @@ -0,0 +1,84 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import ".." +import "../Style" +import "fitness.js" as FitnessData + +Item { + QQC2.SwipeView { + id: svFitnessContainer + + anchors.fill: parent + + SwipeViewPage { + id: fitnessPage1 + + Column { + anchors.centerIn: parent + spacing: 15 + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Steps: ") + FitnessData.getSteps() + font.italic: true + font.pixelSize: UIStyle.fontSizeM + color: UIStyle.themeColorQtGray1 + } + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: UIStyle.themeImagePath("images/man-walking") + } + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Calories: ") + FitnessData.getCalories() + font.pixelSize: UIStyle.fontSizeS + font.italic: true + color: UIStyle.themeColorQtGray3 + } + } + } + + SwipeViewPage { + id: fitnessPage2 + + Column { + anchors.centerIn: parent + spacing: 15 + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Distance: ") + + FitnessData.getDistance() + + qsTr(" miles") + font.italic: true + font.pixelSize: UIStyle.fontSizeM + color: UIStyle.themeColorQtGray1 + } + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: UIStyle.themeImagePath("images/man-running") + } + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Time: ") + + FitnessData.getTime() + + qsTr(" mins") + font.pixelSize: UIStyle.fontSizeS + font.italic: true + color: UIStyle.themeColorQtGray3 + } + } + } + } + + QQC2.PageIndicator { + count: svFitnessContainer.count + currentIndex: svFitnessContainer.currentIndex + + anchors.bottom: svFitnessContainer.bottom + anchors.horizontalCenter: parent.horizontalCenter + } +} diff --git a/examples/quickcontrols/wearable/qml/Fitness/fitness.js b/examples/quickcontrols/wearable/qml/Fitness/fitness.js new file mode 100644 index 0000000000..95ce06cdc1 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/fitness.js @@ -0,0 +1,18 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +function getSteps() { + return 105; +} + +function getCalories() { + return 150; +} + +function getDistance() { + return 10; +} + +function getTime() { + return "00:30"; +} diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-running-dark.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-dark.png Binary files differnew file mode 100644 index 0000000000..6c791d6170 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-dark.png diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-running-dark@2x.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-dark@2x.png Binary files differnew file mode 100644 index 0000000000..e9abae9de4 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-running-light.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-light.png Binary files differnew file mode 100644 index 0000000000..e7eef12cb3 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-light.png diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-running-light@2x.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-light@2x.png Binary files differnew file mode 100644 index 0000000000..79861f5718 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-running-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-dark.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-dark.png Binary files differnew file mode 100644 index 0000000000..6d455b4925 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-dark.png diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-dark@2x.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-dark@2x.png Binary files differnew file mode 100644 index 0000000000..a3ac08baf3 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-light.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-light.png Binary files differnew file mode 100644 index 0000000000..f963f8897b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-light.png diff --git a/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-light@2x.png b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-light@2x.png Binary files differnew file mode 100644 index 0000000000..1b4d7592d6 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Fitness/images/man-walking-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/LauncherPage.qml b/examples/quickcontrols/wearable/qml/LauncherPage.qml new file mode 100644 index 0000000000..4017a81c57 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/LauncherPage.qml @@ -0,0 +1,142 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import "Style" + +PathView { + id: circularView + + signal launched(string page) + + readonly property int cX: width / 2 + readonly property int cY: height / 2 + readonly property int itemSize: size / 4 + readonly property int size: Math.min(width - 80, height) + readonly property int radius: size / 2 - itemSize / 3 + + snapMode: PathView.SnapToItem + + model: ListModel { + ListElement { + title: qsTr("World Clock") + icon: "worldclock" + page: "WorldClock/WorldClockPage.qml" + } + ListElement { + title: qsTr("Navigation") + icon: "navigation" + page: "Navigation/NavigationPage.qml" + } + ListElement { + title: qsTr("Weather") + icon: "weather" + page: "Weather/WeatherPage.qml" + } + ListElement { + title: qsTr("Fitness") + icon: "fitness" + page: "Fitness/FitnessPage.qml" + } + ListElement { + title: qsTr("Notifications") + icon: "notifications" + page: "Notifications/NotificationsPage.qml" + } + ListElement { + title: qsTr("Alarm") + icon: "alarms" + page: "Alarms/AlarmsPage.qml" + } + ListElement { + title: qsTr("Settings") + icon: "settings" + page: "Settings/SettingsPage.qml" + } + } + + delegate: QQC2.RoundButton { + width: circularView.itemSize + height: circularView.itemSize + + property string title: model.title + + icon.width: 36 + icon.height: 36 + icon.name: model.icon + opacity: PathView.itemOpacity + padding: 12 + + background: Rectangle { + radius: width / 2 + border.width: 3 + border.color: parent.PathView.isCurrentItem ? UIStyle.colorQtPrimGreen : UIStyle.themeColorQtGray4 + } + + onClicked: { + if (PathView.isCurrentItem) + circularView.launched(Qt.resolvedUrl(page)) + else + circularView.currentIndex = index + } + } + + path: Path { + startX: circularView.cX + startY: circularView.cY + PathAttribute { + name: "itemOpacity" + value: 1.0 + } + PathLine { + x: circularView.cX + circularView.radius + y: circularView.cY + } + PathAttribute { + name: "itemOpacity" + value: 0.7 + } + PathArc { + x: circularView.cX - circularView.radius + y: circularView.cY + radiusX: circularView.radius + radiusY: circularView.radius + useLargeArc: true + direction: PathArc.Clockwise + } + PathAttribute { + name: "itemOpacity" + value: 0.5 + } + PathArc { + x: circularView.cX + circularView.radius + y: circularView.cY + radiusX: circularView.radius + radiusY: circularView.radius + useLargeArc: true + direction: PathArc.Clockwise + } + PathAttribute { + name: "itemOpacity" + value: 0.3 + } + } + + Text { + id: appTitle + + property Item currentItem: circularView.currentItem + + visible: currentItem ? currentItem.PathView.itemOpacity === 1.0 : 0 + + text: currentItem ? currentItem.title : "" + anchors.centerIn: parent + anchors.verticalCenterOffset: (circularView.itemSize + height) / 2 + + font.bold: true + font.pixelSize: circularView.itemSize / 3 + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } +} diff --git a/examples/quickcontrols/wearable/qml/NaviButton.qml b/examples/quickcontrols/wearable/qml/NaviButton.qml new file mode 100644 index 0000000000..3c1c30fb7f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/NaviButton.qml @@ -0,0 +1,36 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import "Style" + +QQC2.AbstractButton { + id: button + + property int edge: Qt.TopEdge + property alias imageSource: image.source + + contentItem: Image { + id: image + fillMode: Image.Pad + sourceSize { width: 40; height: 40 } // ### TODO: resize the image + } + + background: Rectangle { + height: button.height * 4 + width: height + radius: width / 2 + + anchors.horizontalCenter: button.horizontalCenter + anchors.top: edge === Qt.BottomEdge ? button.top : undefined + anchors.bottom: edge === Qt.TopEdge ? button.bottom : undefined + + color: UIStyle.colorQtGray2 + } + + transform: Translate { + Behavior on y { NumberAnimation { } } + y: enabled ? 0 : edge === Qt.TopEdge ? -button.height : button.height + } +} diff --git a/examples/quickcontrols/wearable/qml/Navigation/NavigationPage.qml b/examples/quickcontrols/wearable/qml/Navigation/NavigationPage.qml new file mode 100644 index 0000000000..f9fdd61b47 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/NavigationPage.qml @@ -0,0 +1,73 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import "../Style" +import "navigation.js" as NavigationData + +Item { + property alias routeListView: routeView + + Column { + anchors.fill: parent + anchors.margins: 2 + spacing: 2 + + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: titleRow.height + + color: UIStyle.themeColorQtGray9 + + Row { + id: titleRow + spacing: 10 + anchors.centerIn: parent + + Image { + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/navigation") + fillMode: Image.PreserveAspectCrop + } + Text { + anchors.verticalCenter: parent.verticalCenter + text: qsTr("Walking") + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 2 + color: UIStyle.themeColorQtGray2 + } + } + } + + ListModel { + id: routeModel + } + + ListView { + id: routeView + + width: parent.width + height: parent.height - titleRow.height - parent.spacing + property var imageList: [UIStyle.themeImagePath("images/straight"), + UIStyle.themeImagePath("images/leftturn"), + UIStyle.themeImagePath("images/rightturn"), + "images/uturn.png", + "images/start.png", + "images/end.png"] + + clip: true + focus: true + boundsBehavior: Flickable.StopAtBounds + snapMode: ListView.SnapToItem + model: routeModel + delegate: RouteElement { + width: routeView.width + height: routeView.height + } + } + } + Component.onCompleted: { + NavigationData.requestNavigationRoute(routeModel) + } +} diff --git a/examples/quickcontrols/wearable/qml/Navigation/RouteElement.qml b/examples/quickcontrols/wearable/qml/Navigation/RouteElement.qml new file mode 100644 index 0000000000..dd4aebbb2f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/RouteElement.qml @@ -0,0 +1,48 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import "../Style" + +Rectangle { + color: UIStyle.themeColorQtGray8 + + Row { + spacing: 5 + width: parent.width - 80 + anchors.centerIn: parent + + Image { + id: img + anchors.verticalCenter: parent.verticalCenter + source: navImage + fillMode: Image.PreserveAspectFit + } + + Column { + spacing: 5 + width: parent.width - img.width + anchors.verticalCenter: parent.verticalCenter + + Text { + width: parent.width + wrapMode: Text.WordWrap + text: navInstruction + font.pixelSize: UIStyle.fontSizeS + verticalAlignment: Text.AlignVCenter + padding: 1 + color: UIStyle.themeColorQtGray1 + } + + Text { + width: parent.width + wrapMode: Text.WordWrap + text: navAuxInfo + font.pixelSize: UIStyle.fontSizeXS + verticalAlignment: Text.AlignVCenter + padding: 1 + color: UIStyle.themeColorQtGray2 + } + } + } +} diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/end.png b/examples/quickcontrols/wearable/qml/Navigation/images/end.png Binary files differnew file mode 100644 index 0000000000..4805ad8207 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/end.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/end@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/end@2x.png Binary files differnew file mode 100644 index 0000000000..e91d537465 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/end@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-dark.png b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-dark.png Binary files differnew file mode 100644 index 0000000000..66d258f5ac --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-dark.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-dark@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-dark@2x.png Binary files differnew file mode 100644 index 0000000000..639deb81cf --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-light.png b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-light.png Binary files differnew file mode 100644 index 0000000000..1346e8eaff --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-light.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-light@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-light@2x.png Binary files differnew file mode 100644 index 0000000000..268a6283f9 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/leftturn-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/marker.png b/examples/quickcontrols/wearable/qml/Navigation/images/marker.png Binary files differnew file mode 100644 index 0000000000..4805ad8207 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/marker.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/navigation-dark.png b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-dark.png Binary files differnew file mode 100644 index 0000000000..b80b7b610f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-dark.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/navigation-dark@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-dark@2x.png Binary files differnew file mode 100644 index 0000000000..b198aa3d9a --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/navigation-light.png b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-light.png Binary files differnew file mode 100644 index 0000000000..08e73005fd --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-light.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/navigation-light@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-light@2x.png Binary files differnew file mode 100644 index 0000000000..7d4a62b9e1 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/navigation-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-dark.png b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-dark.png Binary files differnew file mode 100644 index 0000000000..6a779dadc4 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-dark.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-dark@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-dark@2x.png Binary files differnew file mode 100644 index 0000000000..13143c2e2c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-light.png b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-light.png Binary files differnew file mode 100644 index 0000000000..a6be08c1a1 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-light.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-light@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-light@2x.png Binary files differnew file mode 100644 index 0000000000..58f04b5052 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/rightturn-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/start.png b/examples/quickcontrols/wearable/qml/Navigation/images/start.png Binary files differnew file mode 100644 index 0000000000..41de60e60c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/start.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/start@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/start@2x.png Binary files differnew file mode 100644 index 0000000000..6fe3ba9dbd --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/start@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/straight-dark.png b/examples/quickcontrols/wearable/qml/Navigation/images/straight-dark.png Binary files differnew file mode 100644 index 0000000000..3f4ab66430 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/straight-dark.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/straight-dark@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/straight-dark@2x.png Binary files differnew file mode 100644 index 0000000000..f5baa6da42 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/straight-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/straight-light.png b/examples/quickcontrols/wearable/qml/Navigation/images/straight-light.png Binary files differnew file mode 100644 index 0000000000..1321b97aa5 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/straight-light.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/straight-light@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/straight-light@2x.png Binary files differnew file mode 100644 index 0000000000..a2d3c4c2ab --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/straight-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/uturn.png b/examples/quickcontrols/wearable/qml/Navigation/images/uturn.png Binary files differnew file mode 100644 index 0000000000..596046ca9a --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/uturn.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/images/uturn@2x.png b/examples/quickcontrols/wearable/qml/Navigation/images/uturn@2x.png Binary files differnew file mode 100644 index 0000000000..659f103573 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/images/uturn@2x.png diff --git a/examples/quickcontrols/wearable/qml/Navigation/navigation.js b/examples/quickcontrols/wearable/qml/Navigation/navigation.js new file mode 100644 index 0000000000..e82cccbea5 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/navigation.js @@ -0,0 +1,84 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +function requestNavigationRoute(rModel) { + var xhr = new XMLHttpRequest; + xhr.open("GET", "walk_route.json"); + xhr.onreadystatechange = function () { + if (xhr.readyState === XMLHttpRequest.DONE) { + var a = JSON.parse(xhr.responseText); + var steps = a.routes[0].legs[0].steps; + + for (var step in steps) { + var maneuver = steps[step].maneuver; + var duration = steps[step].duration; + var distance = steps[step].distance; + + rModel.append({ + navInstruction: maneuver.instruction, + navImage: getNavigationImage( + maneuver.type, + maneuver.modifier, + routeView.imageList), + navAuxInfo: getAuxInfo(distance, + duration) + }); + } + } + } + xhr.send(); +} + +function getNavigationImage(maneuverType, maneuverModifier, imageList) { + var imageToReturn; + if (maneuverType === "depart") { + imageToReturn = imageList[4]; + } else if (maneuverType === "arrive") { + imageToReturn = imageList[5]; + } else if (maneuverType === "turn") { + if (maneuverModifier.search("left") >= 0) + imageToReturn = imageList[1]; + else if (maneuverModifier.search("right") >= 0) + imageToReturn = imageList[2]; + else + imageToReturn = imageList[0]; + } else { + if (maneuverModifier === "uturn") { + imageToReturn = imageList[3]; + } else { + imageToReturn = imageList[0]; + } + } + + return imageToReturn; +} + +function getAuxInfo(distInMeters, timeInSecs) { + var distance = convertDistance(distInMeters); + if (distance.length > 0) + return "Distance: " + distance + "\nTime: " + formatSeconds( + timeInSecs); + else + return ""; +} + +function convertDistance(meter) { + var dist = ""; + var feet = (meter * 0.3048).toPrecision(6); + var miles = (meter * 0.000621371).toPrecision(6); + + if (Math.floor(miles) > 1) { + dist += Math.floor(miles) + " mi"; + feet = ((miles - Math.floor(miles)) * 0.3048).toPrecision(6); + } + if (Math.floor(feet) > 1) + dist += Math.floor(feet) + " ft"; + + return dist +} + +function formatSeconds(seconds) { + var date = new Date(1970, 0, 1); + date.setSeconds(seconds); + return date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"); +} diff --git a/examples/quickcontrols/wearable/qml/Navigation/walk_route.json b/examples/quickcontrols/wearable/qml/Navigation/walk_route.json new file mode 100644 index 0000000000..e69b5cc187 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Navigation/walk_route.json @@ -0,0 +1 @@ +{"routes":[{"legs":[{"steps":[{"intersections":[{"out":0,"entry":[true],"bearings":[144],"location":[-122.394553,37.795984]},{"out":1,"location":[-122.393896,37.795268],"bearings":[60,150,225,330],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.393179,37.79453],"bearings":[60,135,180,225,315],"entry":[true,true,true,true,false],"in":4},{"out":1,"location":[-122.393072,37.79443],"bearings":[45,135,225,315],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.392787,37.79415],"bearings":[60,135,315],"entry":[true,true,false],"in":2},{"out":1,"location":[-122.392537,37.793915],"bearings":[45,135,225,315],"entry":[true,true,true,false],"in":3},{"out":0,"location":[-122.392448,37.793831],"bearings":[135,225,315],"entry":[true,true,false],"in":2}],"geometry":"{_ueF|d`jVRQdB}ARQh@g@XUVWVW^a@RUv@w@l@q@PQNQ","maneuver":{"bearing_after":144,"location":[-122.394553,37.795984],"bearing_before":0,"type":"depart","instruction":"Head southeast on The Embarcadero"},"duration":230.8,"distance":314.8,"name":"The Embarcadero","mode":"walking"},{"intersections":[{"out":2,"location":[-122.392361,37.793748],"bearings":[45,135,225,315],"entry":[true,true,true,false],"in":3}],"geometry":"}qteFfw_jVHJBDHJ","maneuver":{"bearing_after":225,"type":"turn","modifier":"right","bearing_before":140,"location":[-122.392361,37.793748],"instruction":"Turn right"},"duration":13.2,"distance":18.5,"name":"","mode":"walking"},{"intersections":[{"out":1,"location":[-122.39251,37.793631],"bearings":[45,135,225,315],"entry":[false,true,true,true],"in":0},{"out":1,"location":[-122.391284,37.792459],"bearings":[45,150,225,330],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.391217,37.792342],"bearings":[45,165,225,330],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.391165,37.792231],"bearings":[45,165,225,345],"entry":[true,true,true,false],"in":3},{"out":0,"location":[-122.390884,37.791536],"bearings":[150,285,345],"entry":[true,true,false],"in":2},{"out":1,"location":[-122.390254,37.790827],"bearings":[45,135,210,315],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.390144,37.790745],"bearings":[45,135,225,315],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.390038,37.790665],"bearings":[45,135,240,315],"entry":[true,true,true,false],"in":3},{"out":0,"location":[-122.389245,37.790036],"bearings":[135,225,315],"entry":[true,true,false],"in":2},{"out":1,"location":[-122.38871,37.789596],"bearings":[45,150,210,315],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.388618,37.789494],"bearings":[45,150,225,330],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.388527,37.789394],"bearings":[45,150,225,330],"entry":[true,true,true,false],"in":3},{"out":1,"location":[-122.388005,37.787907],"bearings":[0,180,270],"entry":[false,true,true],"in":0},{"out":1,"location":[-122.387985,37.787622],"bearings":[0,180,240],"entry":[false,true,true],"in":0},{"out":2,"location":[-122.388005,37.787197],"bearings":[0,90,180,270],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.388015,37.787093],"bearings":[0,90,180,270],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.388022,37.786994],"bearings":[0,90,180,285],"entry":[false,true,true,true],"in":0},{"out":1,"location":[-122.388163,37.785186],"bearings":[0,180,315],"entry":[false,true,true],"in":0},{"out":1,"location":[-122.388184,37.784944],"bearings":[0,180,315],"entry":[false,true,true],"in":0},{"out":2,"location":[-122.388191,37.784855],"bearings":[0,90,180,270],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.388198,37.784748],"bearings":[0,90,180,270],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.388207,37.784633],"bearings":[0,90,180,270],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.388309,37.783373],"bearings":[0,60,180,270],"entry":[false,true,true,true],"in":0},{"out":1,"location":[-122.388376,37.782545],"bearings":[0,180,315],"entry":[false,true,true],"in":0},{"out":1,"location":[-122.388394,37.782316],"bearings":[0,180,315],"entry":[false,true,true],"in":0}],"geometry":"eqteFdx_jVf@k@\\a@|@iAV[FGJMPOTOPKDAPITItAa@r@WXOXQXSTUTWRYNUNS|B}CdAwAPSTQRQ\\W^Q\\KZIrB]^EPCH?\\CZ?Z?\\?XBT@R?~IZF?H@f@@N@T@V@zFRbDLl@@pADV@","maneuver":{"bearing_after":139,"type":"turn","modifier":"left","bearing_before":226,"location":[-122.39251,37.793631],"instruction":"Turn left onto The Embarcadero"},"duration":1055.9,"distance":1450.3,"name":"The Embarcadero","mode":"walking"},{"intersections":[{"out":2,"location":[-122.388431,37.781791],"bearings":[0,90,180,285],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.389672,37.779922],"bearings":[45,135,225,315],"entry":[false,true,true,true],"in":0},{"out":1,"location":[-122.390803,37.77905],"bearings":[45,225,315],"entry":[false,true,true],"in":0},{"out":2,"location":[-122.391916,37.778155],"bearings":[45,135,225,315],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.393073,37.777251],"bearings":[45,75,225,315],"entry":[false,true,true,true],"in":0}],"geometry":"egreFt~~iVR@bABXDVDXHVNXNXVVZp@|@z@hAnCvDLRNTHLFJbArAzApBdB`CTZZb@\\b@@@pCvD","maneuver":{"bearing_after":183,"type":"new name","modifier":"straight","bearing_before":183,"location":[-122.388431,37.781791],"instruction":"Continue straight onto King Street"},"duration":567.4,"distance":782.5,"name":"King Street","mode":"walking"},{"intersections":[{"out":3,"location":[-122.394003,37.776513],"bearings":[45,135,225,300],"entry":[false,true,true,true],"in":0},{"out":2,"location":[-122.394218,37.776486],"bearings":[45,135,225,315],"entry":[false,true,true,true],"in":0}],"geometry":"efqeFna`jVGJ?NJNNR","maneuver":{"bearing_after":313,"type":"turn","modifier":"straight","bearing_before":225,"location":[-122.394003,37.776513],"instruction":"Go straight"},"duration":26.1,"distance":36.2,"name":"","mode":"walking"},{"intersections":[{"out":2,"location":[-122.394321,37.776405],"bearings":[45,180,315],"entry":[false,true,true],"in":0},{"out":1,"location":[-122.394729,37.776487],"bearings":[45,180],"entry":[false,true],"in":0}],"geometry":"qeqeFnc`jVe@p@A@V\\DF","maneuver":{"bearing_after":315,"type":"turn","modifier":"right","bearing_before":225,"location":[-122.394321,37.776405],"instruction":"Turn right"},"duration":39.9,"distance":55.6,"name":"","mode":"walking"},{"intersections":[{"in":0,"entry":[true],"bearings":[45],"location":[-122.394768,37.776455]}],"geometry":"{eqeFhf`jV","maneuver":{"bearing_after":0,"type":"arrive","modifier":"straight","bearing_before":225,"location":[-122.394729,37.776487],"instruction":"You have arrived at your destination, straight ahead"},"duration":0,"distance":0,"name":"","mode":"walking"}],"summary":"The Embarcadero, King Street","duration":1933.3,"distance":2657.8}],"geometry":"{_ueF|d`jV|LuLV\\`EyElHaD~I_LvB_AdGk@he@|AbBd@bZl`@R~@g@r@\\d@","duration":1933.3,"distance":2657.8}],"waypoints":[{"name":"The Embarcadero","location":[-122.394553,37.795984]},{"name":"","location":[-122.394768,37.776455]}],"code":"Ok"} diff --git a/examples/quickcontrols/wearable/qml/Notifications/NotificationsPage.qml b/examples/quickcontrols/wearable/qml/Notifications/NotificationsPage.qml new file mode 100644 index 0000000000..6cbf2d92cf --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/NotificationsPage.qml @@ -0,0 +1,65 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import "../Style" +import "notifications.js" as NotificationData + +ListView { + id: missedCallsView + + clip: true + focus: true + boundsBehavior: Flickable.StopAtBounds + snapMode: ListView.SnapToItem + + model: ListModel { + id: missedCallsList + } + + Image { + id: missedCallIcon + width: parent.width / 2 + anchors.right: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/missedcall") + fillMode: Image.Pad + } + + delegate: Item { + height: missedCallsView.height + width: missedCallsView.width / 2 + anchors.left: missedCallsView.contentItem.horizontalCenter + + Column { + spacing: 15 + anchors.verticalCenter: parent.verticalCenter + + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: qsTr("images/avatar%1-%2.png").arg(model.gender).arg(UIStyle.darkTheme ? "dark" : "light") + } + + Text { + text: model.name + anchors.horizontalCenter: parent.horizontalCenter + font.bold: true + font.pixelSize: UIStyle.fontSizeS + color: UIStyle.themeColorQtGray1 + } + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: date + " " + time + font.pixelSize: UIStyle.fontSizeXS + font.italic: true + color: UIStyle.themeColorQtGray2 + } + } + } + + Component.onCompleted: { + NotificationData.populateData(missedCallsList) + } +} diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-dark.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-dark.png Binary files differnew file mode 100644 index 0000000000..37bc1f291b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-dark.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-dark@2x.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-dark@2x.png Binary files differnew file mode 100644 index 0000000000..efcd7cba74 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-light.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-light.png Binary files differnew file mode 100644 index 0000000000..e38b260724 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-light.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-light@2x.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-light@2x.png Binary files differnew file mode 100644 index 0000000000..1f28beac6c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarf-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-dark.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-dark.png Binary files differnew file mode 100644 index 0000000000..5a2a394d8c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-dark.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-dark@2x.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-dark@2x.png Binary files differnew file mode 100644 index 0000000000..1a19b0fc8e --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-light.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-light.png Binary files differnew file mode 100644 index 0000000000..f0fc7a9606 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-light.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-light@2x.png b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-light@2x.png Binary files differnew file mode 100644 index 0000000000..64a0f1f9ac --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/avatarm-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-dark.png b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-dark.png Binary files differnew file mode 100644 index 0000000000..26bcf98ad3 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-dark.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-dark@2x.png b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-dark@2x.png Binary files differnew file mode 100644 index 0000000000..5eb54ce809 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-light.png b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-light.png Binary files differnew file mode 100644 index 0000000000..641e1f0c43 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-light.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-light@2x.png b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-light@2x.png Binary files differnew file mode 100644 index 0000000000..e8d2d81c9a --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/images/missedcall-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Notifications/notifications.js b/examples/quickcontrols/wearable/qml/Notifications/notifications.js new file mode 100644 index 0000000000..62f46e0a0b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Notifications/notifications.js @@ -0,0 +1,25 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +function populateData(listData) { + listData.append({ + name: "John Doe", + gender: "m", + date: "02/15/2017", + time: "09:20 am" + }); + + listData.append({ + name: "Jane Worldege", + gender: "f", + date: "02/06/2017", + time: "10:15 am" + }); + + listData.append({ + name: "Jennifer Wang", + gender: "f", + date: "02/03/2017", + time: "05:16 pm" + }); +} diff --git a/examples/quickcontrols/wearable/qml/Settings/SettingsPage.qml b/examples/quickcontrols/wearable/qml/Settings/SettingsPage.qml new file mode 100644 index 0000000000..68fb17990d --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/SettingsPage.qml @@ -0,0 +1,129 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import ".." +import "../Style" + +Item { + + QQC2.SwipeView { + id: svSettingsContainer + + anchors.fill: parent + + SwipeViewPage { + id: settingsPage1 + + property alias bluetoothSwitch: bluetoothSwitch + property alias wirelessSwitch: wirelessSwitch + + Column { + anchors.centerIn: parent + spacing: 25 + + Row { + spacing: 50 + Image { + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/bluetooth") + } + QQC2.Switch { + id: bluetoothSwitch + anchors.verticalCenter: parent.verticalCenter + checked: settings.bluetooth + onToggled: settings.bluetooth = checked + } + } + Row { + spacing: 50 + Image { + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/wifi") + } + QQC2.Switch { + id: wirelessSwitch + anchors.verticalCenter: parent.verticalCenter + checked: settings.wireless + onToggled: settings.wireless = checked + } + } + } + } + + SwipeViewPage { + id: settingsPage2 + + property alias brightnessSlider: brightnessSlider + property alias darkThemeSwitch: darkThemeSwitch + + Column { + anchors.centerIn: parent + spacing: 2 + + Column { + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: UIStyle.themeImagePath("images/brightness") + } + QQC2.Slider { + id: brightnessSlider + anchors.horizontalCenter: parent.horizontalCenter + from: 0 + to: 5 + stepSize: 1 + value: settings.brightness + onMoved: settings.brightness = value + } + } + Column { + anchors.horizontalCenter: parent.horizontalCenter + + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: UIStyle.themeImagePath("images/theme") + } + QQC2.Switch { + id: darkThemeSwitch + anchors.horizontalCenter: parent.horizontalCenter + checked: settings.darkTheme + onToggled: settings.darkTheme = checked + } + } + } + } + + SwipeViewPage { + id: settingsPage3 + + Column { + anchors.centerIn: parent + + Column { + anchors.horizontalCenter: parent.horizontalCenter + spacing: 6 + + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: UIStyle.themeImagePath("images/demo-mode") + } + QQC2.Switch { + id: demoModeSwitch + anchors.horizontalCenter: parent.horizontalCenter + checked: settings.demoMode + onToggled: settings.demoMode = checked + } + } + } + } + } + + QQC2.PageIndicator { + count: svSettingsContainer.count + currentIndex: svSettingsContainer.currentIndex + + anchors.bottom: svSettingsContainer.bottom + anchors.horizontalCenter: parent.horizontalCenter + } +} diff --git a/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-dark.png b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-dark.png Binary files differnew file mode 100644 index 0000000000..0f1f4d0a54 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-dark.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-dark@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-dark@2x.png Binary files differnew file mode 100644 index 0000000000..7496fc5685 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-light.png b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-light.png Binary files differnew file mode 100644 index 0000000000..6e297cfab3 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-light.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-light@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-light@2x.png Binary files differnew file mode 100644 index 0000000000..62d084032f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/bluetooth-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/brightness-dark.png b/examples/quickcontrols/wearable/qml/Settings/images/brightness-dark.png Binary files differnew file mode 100644 index 0000000000..f9eb07b583 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/brightness-dark.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/brightness-dark@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/brightness-dark@2x.png Binary files differnew file mode 100644 index 0000000000..3efc5a6c4b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/brightness-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/brightness-light.png b/examples/quickcontrols/wearable/qml/Settings/images/brightness-light.png Binary files differnew file mode 100644 index 0000000000..ce3023b565 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/brightness-light.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/brightness-light@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/brightness-light@2x.png Binary files differnew file mode 100644 index 0000000000..dc01aae1fd --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/brightness-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-dark.png b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-dark.png Binary files differnew file mode 100644 index 0000000000..e93c417d79 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-dark.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-dark@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-dark@2x.png Binary files differnew file mode 100644 index 0000000000..faa1bf6d11 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-light.png b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-light.png Binary files differnew file mode 100644 index 0000000000..c38d146d37 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-light.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-light@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-light@2x.png Binary files differnew file mode 100644 index 0000000000..b9d6409cbc --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-white.png b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-white.png Binary files differnew file mode 100644 index 0000000000..aac8ef3f6c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-white.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-white@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-white@2x.png Binary files differnew file mode 100644 index 0000000000..b4d8954f5d --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode-white@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/demo-mode.svg b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode.svg new file mode 100644 index 0000000000..ad1ce44873 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/demo-mode.svg @@ -0,0 +1,93 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="64" + height="64" + viewBox="0 0 16.933333 16.933333" + version="1.1" + id="svg8" + inkscape:version="0.92.3 (d244b95, 2018-08-02)" + sodipodi:docname="demo-mode.svg" + inkscape:export-filename="/home/mitch/dev/qt5.12/qtquickcontrols2/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light@2x.png" + inkscape:export-xdpi="192" + inkscape:export-ydpi="192"> + <defs + id="defs2" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="15.839192" + inkscape:cx="26.498574" + inkscape:cy="25.685519" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="true" + units="px" + fit-margin-top="1" + fit-margin-left="1" + fit-margin-right="1" + fit-margin-bottom="1" + inkscape:window-width="3706" + inkscape:window-height="2031" + inkscape:window-x="134" + inkscape:window-y="55" + inkscape:window-maximized="1" + inkscape:snap-global="false"> + <inkscape:grid + type="xygrid" + id="grid3713" + originx="-0.0070880335" + originy="-280.58354" /> + </sodipodi:namedview> + <metadata + id="metadata5"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-0.00708803,0.51688025)"> + <path + style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 1.6489221,4.3034973 h 0.7205171 v 7.0102767 c 0.01422,0.27678 0.1921164,0.348966 0.392741,0.392741 H 14.169383 c 0.276028,-0.04241 0.382882,-0.208883 0.423747,-0.423747 V 4.3094031 h 0.692464 v 7.0279949 c -0.111554,0.831949 -0.589986,1.000696 -1.104399,1.104399 H 9.3324693 l 2.2589977,2.258998 c -0.0189,0.375139 -0.204956,0.516261 -0.501999,0.502 L 8.8304698,12.943797 v 1.972563 c -0.051861,0.342631 -0.6681357,0.36382 -0.7323291,0 V 12.949702 L 5.8391425,15.208701 C 5.5142667,15.206145 5.3522558,15.056484 5.3725781,14.742136 L 7.7172116,12.397503 H 2.7415096 C 2.1429244,12.357576 1.6879444,12.049089 1.6444927,11.300486 Z" + id="path826" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccccccccccccccccccccc" /> + <rect + style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.2619375;stroke-miterlimit:4;stroke-dasharray:0.523875, 0.2619375;stroke-dashoffset:0" + id="rect828" + width="16.044523" + height="1.9126476" + x="0.441401" + y="2.0340116" + rx="1.0583333" + ry="1.0583333" /> + <path + style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="M 7.8323763,1.681278 V 1.1615701 c 0.1987987,-0.67546179 1.0821701,-0.66495897 1.2992931,0 V 1.681278 Z" + id="path830" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccc" /> + </g> +</svg> diff --git a/examples/quickcontrols/wearable/qml/Settings/images/theme-dark.png b/examples/quickcontrols/wearable/qml/Settings/images/theme-dark.png Binary files differnew file mode 100644 index 0000000000..d4c4a8c094 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/theme-dark.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/theme-dark@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/theme-dark@2x.png Binary files differnew file mode 100644 index 0000000000..30d8c6de28 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/theme-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/theme-light.png b/examples/quickcontrols/wearable/qml/Settings/images/theme-light.png Binary files differnew file mode 100644 index 0000000000..e7a0771b94 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/theme-light.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/theme-light@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/theme-light@2x.png Binary files differnew file mode 100644 index 0000000000..83bc878b03 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/theme-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/theme.svg b/examples/quickcontrols/wearable/qml/Settings/images/theme.svg new file mode 100644 index 0000000000..bf3f1e57d7 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/theme.svg @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="64" + height="64" + viewBox="0 0 16.933333 16.933333" + version="1.1" + id="svg8" + inkscape:version="0.92.3 (2405546, 2018-03-11)" + sodipodi:docname="theme.svg" + inkscape:export-filename="C:\dev\qt5.11\qtquickcontrols2\examples\quickcontrols2\wearable\qml\Settings\images\theme@2x.png" + inkscape:export-xdpi="192" + inkscape:export-ydpi="192"> + <defs + id="defs2" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="7.9195959" + inkscape:cx="-11.371874" + inkscape:cy="28.405259" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="true" + units="px" + fit-margin-top="1" + fit-margin-left="1" + fit-margin-right="1" + fit-margin-bottom="1" + inkscape:window-width="3840" + inkscape:window-height="2066" + inkscape:window-x="-11" + inkscape:window-y="-11" + inkscape:window-maximized="1" + inkscape:snap-global="false"> + <inkscape:grid + type="xygrid" + id="grid3713" + originx="-0.0070880335" + originy="-280.58354" /> + </sodipodi:namedview> + <metadata + id="metadata5"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-0.00708803,0.51688025)"> + <path + style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.25668776px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="M 2.7296861,14.56437 H 12.831038 C 13.464556,14.411157 15.01089,14.101758 15.231756,11.825604 15.232242,10.48538 13.96701,8.4813248 11.69084,9.0467292 10.687852,7.3630573 9.1232541,7.2558172 8.2817051,7.654427 6.9050791,4.9744381 2.9222535,5.8560797 2.9703307,8.9435956 1.7108806,9.1004362 0.37826375,9.7182846 0.27167137,11.745388 0.31660717,13.546059 1.5831259,14.350467 2.7296861,14.56437 Z" + id="path4535" + inkscape:connector-curvature="0" + sodipodi:nodetypes="cccccccc" /> + <path + style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.25668776px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="M 11.392726,0.92763044 C 8.8246143,2.2754379 7.9809615,4.3443829 8.9780532,7.1830936 10.167295,7.1426991 11.108291,7.6664967 11.822182,8.7064442 12.799984,8.6194307 13.765772,8.6795708 14.658208,9.6382815 15.605885,9.3257847 16.200803,8.852941 16.675838,8.325607 13.735088,9.4033595 8.6151974,5.957728 11.392726,0.92763044 Z" + id="path4537" + inkscape:connector-curvature="0" + sodipodi:nodetypes="cccccc" /> + </g> +</svg> diff --git a/examples/quickcontrols/wearable/qml/Settings/images/wifi-dark.png b/examples/quickcontrols/wearable/qml/Settings/images/wifi-dark.png Binary files differnew file mode 100644 index 0000000000..14bfe8f5c8 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/wifi-dark.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/wifi-dark@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/wifi-dark@2x.png Binary files differnew file mode 100644 index 0000000000..b70d04290b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/wifi-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/wifi-light.png b/examples/quickcontrols/wearable/qml/Settings/images/wifi-light.png Binary files differnew file mode 100644 index 0000000000..2de34118a7 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/wifi-light.png diff --git a/examples/quickcontrols/wearable/qml/Settings/images/wifi-light@2x.png b/examples/quickcontrols/wearable/qml/Settings/images/wifi-light@2x.png Binary files differnew file mode 100644 index 0000000000..64b5f1725c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Settings/images/wifi-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Style/PageIndicator.qml b/examples/quickcontrols/wearable/qml/Style/PageIndicator.qml new file mode 100644 index 0000000000..593b50afb5 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Style/PageIndicator.qml @@ -0,0 +1,42 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Templates as T +import "." + +T.PageIndicator { + id: control + + implicitWidth: contentItem.implicitWidth + leftPadding + rightPadding + implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding + + spacing: 6 + padding: 6 + bottomPadding: 7 + + delegate: Rectangle { + implicitWidth: 8 + implicitHeight: 8 + + radius: width / 2 + color: UIStyle.themeColorQtGray3 + + opacity: index === control.currentIndex ? 1.0 : 0.35 + + Behavior on opacity { + OpacityAnimator { + duration: 100 + } + } + } + + contentItem: Row { + spacing: control.spacing + + Repeater { + model: control.count + delegate: control.delegate + } + } +} diff --git a/examples/quickcontrols/wearable/qml/Style/Slider.qml b/examples/quickcontrols/wearable/qml/Style/Slider.qml new file mode 100644 index 0000000000..79c664280f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Style/Slider.qml @@ -0,0 +1,39 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Templates as T +import "." + +T.Slider { + id: control + + implicitWidth: 200 + implicitHeight: 26 + + handle: Rectangle { + x: control.visualPosition * (control.width - width) + y: (control.height - height) / 2 + width: 20 + height: 15 + + radius: 5 + color: control.pressed ? "#f0f0f0" : "#f6f6f6" + border.color: UIStyle.themeColorQtGray7 + } + + background: Rectangle { + y: (control.height - height) / 2 + height: 4 + radius: 2 + color: UIStyle.themeColorQtGray3 + + Rectangle { + width: control.visualPosition * parent.width + height: parent.height + color: UIStyle.colorQtAuxGreen2 + radius: 2 + } + } +} + diff --git a/examples/quickcontrols/wearable/qml/Style/Switch.qml b/examples/quickcontrols/wearable/qml/Style/Switch.qml new file mode 100644 index 0000000000..6219bf231e --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Style/Switch.qml @@ -0,0 +1,39 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Templates as T +import "." + +T.Switch { + id: control + + implicitWidth: 48 + implicitHeight: 26 + + indicator: Rectangle { + x: control.visualPosition * (control.width - width) + y: (control.height - height) / 2 + width: 26 + height: 26 + + radius: 13 + color: control.down ? UIStyle.themeColorQtGray6 : UIStyle.themeColorQtGray10 + border.color: !control.checked ? "#999999" + : (control.down ? UIStyle.colorQtAuxGreen2 + : UIStyle.colorQtAuxGreen1) + + Behavior on x { + enabled: !control.pressed + SmoothedAnimation { velocity: 200 } + } + } + + background: Rectangle { + radius: 13 + color: control.checked ? UIStyle.colorQtAuxGreen2 : UIStyle.colorRed + border.color: control.checked ? UIStyle.colorQtAuxGreen2 + : UIStyle.themeColorQtGray6 + } +} + diff --git a/examples/quickcontrols/wearable/qml/Style/UIStyle.qml b/examples/quickcontrols/wearable/qml/Style/UIStyle.qml new file mode 100644 index 0000000000..524b8394f5 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Style/UIStyle.qml @@ -0,0 +1,60 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +pragma Singleton + +QtObject { + id: uiStyle + + // Font Sizes + readonly property int fontSizeXXS: 10 + readonly property int fontSizeXS: 15 + readonly property int fontSizeS: 20 + readonly property int fontSizeM: 25 + readonly property int fontSizeL: 30 + readonly property int fontSizeXL: 35 + readonly property int fontSizeXXL: 40 + + // Color Scheme + // Green + readonly property color colorQtPrimGreen: "#41cd52" + readonly property color colorQtAuxGreen1: "#21be2b" + readonly property color colorQtAuxGreen2: "#17a81a" + + // Red + readonly property color colorRed: "#e6173d" + + // Gray + readonly property color colorQtGray1: "#09102b" + readonly property color colorQtGray2: "#222840" + readonly property color colorQtGray3: "#3a4055" + readonly property color colorQtGray4: "#53586b" + readonly property color colorQtGray5: "#53586b" + readonly property color colorQtGray6: "#848895" + readonly property color colorQtGray7: "#9d9faa" + readonly property color colorQtGray8: "#b5b7bf" + readonly property color colorQtGray9: "#cecfd5" + readonly property color colorQtGray10: "#f3f3f4" + + // Light/dark versions of the colors above. + // Some UI elements always use a specific color regardless of theme, + // which is why we have both sets: so that those elements don't need to hard-code the hex string. + readonly property color themeColorQtGray1: darkTheme ? colorQtGray10 : colorQtGray1 + readonly property color themeColorQtGray2: darkTheme ? colorQtGray9 : colorQtGray2 + readonly property color themeColorQtGray3: darkTheme ? colorQtGray8 : colorQtGray3 + readonly property color themeColorQtGray4: darkTheme ? colorQtGray7 : colorQtGray4 + readonly property color themeColorQtGray5: darkTheme ? colorQtGray6 : colorQtGray5 + readonly property color themeColorQtGray6: darkTheme ? colorQtGray5 : colorQtGray6 + readonly property color themeColorQtGray7: darkTheme ? colorQtGray4 : colorQtGray7 + readonly property color themeColorQtGray8: darkTheme ? colorQtGray3 : colorQtGray8 + readonly property color themeColorQtGray9: darkTheme ? colorQtGray2 : colorQtGray9 + readonly property color themeColorQtGray10: darkTheme ? colorQtGray1 : colorQtGray10 + + property bool darkTheme: false + + function themeImagePath(baseImagePath) { + return baseImagePath + (darkTheme ? "-dark" : "-light") + ".png" + } +} diff --git a/examples/quickcontrols/wearable/qml/Style/qmldir b/examples/quickcontrols/wearable/qml/Style/qmldir new file mode 100644 index 0000000000..a04072bed6 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Style/qmldir @@ -0,0 +1 @@ +singleton UIStyle 1.0 UIStyle.qml diff --git a/examples/quickcontrols/wearable/qml/SwipeViewPage.qml b/examples/quickcontrols/wearable/qml/SwipeViewPage.qml new file mode 100644 index 0000000000..1f005363dc --- /dev/null +++ b/examples/quickcontrols/wearable/qml/SwipeViewPage.qml @@ -0,0 +1,13 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls + +Item { + // Don't show the item when the StackView that contains us + // is being popped off the stack, as we use an x animation + // and hence would show pages that we shouldn't since we + // also don't have our own background. + visible: SwipeView.isCurrentItem || (SwipeView.view.contentItem.moving && (SwipeView.isPreviousItem || SwipeView.isNextItem)) +} diff --git a/examples/quickcontrols/wearable/qml/Weather/WeatherPage.qml b/examples/quickcontrols/wearable/qml/Weather/WeatherPage.qml new file mode 100644 index 0000000000..d110fabdf9 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/WeatherPage.qml @@ -0,0 +1,250 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import ".." +import "../Style" +import "weather.js" as WeatherData + +Item { + QQC2.SwipeView { + id: svWeatherContainer + + anchors.fill: parent + + SwipeViewPage { + id: weatherPage1 + + Row { + anchors.centerIn: parent + spacing: 2 + + Image { + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/temperature") + } + + Column { + anchors.verticalCenter: parent.verticalCenter + spacing: 40 + + Text { + text: (wDataCntr.weatherData + && wDataCntr.weatherData.main + && wDataCntr.weatherData.main.temp) ? + qsTr("Avg: ") + + String(wDataCntr.weatherData.main.temp) + + " °F" : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + + Text { + text: (wDataCntr.weatherData + && wDataCntr.weatherData.main + && wDataCntr.weatherData.main.temp_min) ? + qsTr("Min: ") + + String(wDataCntr.weatherData.main.temp_min) + + " °F" : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + + Text { + text: (wDataCntr.weatherData + && wDataCntr.weatherData.main + && wDataCntr.weatherData.main.temp_max) ? + qsTr("Max: ") + + String(wDataCntr.weatherData.main.temp_max) + + " °F " : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + } + } + } + + SwipeViewPage { + id: weatherPage2 + + Column { + spacing: 40 + anchors.centerIn: parent + + Row { + spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter + + Image { + id: wImg + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/wind") + } + + Text { + anchors.verticalCenter: parent.verticalCenter + text: (wDataCntr.weatherData + && wDataCntr.weatherData.wind + && wDataCntr.weatherData.wind.speed) ? + String(wDataCntr.weatherData.wind.speed) + + " mph" : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + } + + Row { + spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter + + Image { + id: hImg + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/humidity") + } + + Text { + anchors.verticalCenter: parent.verticalCenter + text: (wDataCntr.weatherData + && wDataCntr.weatherData.main + && wDataCntr.weatherData.main.humidity) ? + String(wDataCntr.weatherData.main.humidity) + + " %" : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + } + } + } + + SwipeViewPage { + id: weatherPage3 + + Row { + anchors.centerIn: parent + spacing: 10 + + Image { + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/pressure") + } + + Column { + anchors.verticalCenter: parent.verticalCenter + spacing: 40 + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: (wDataCntr.weatherData + && wDataCntr.weatherData.main + && wDataCntr.weatherData.main.pressure) ? + String(wDataCntr.weatherData.main.pressure) + + " hPa" : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: (wDataCntr.weatherData + && wDataCntr.weatherData.main + && wDataCntr.weatherData.main.sea_level) ? + String(wDataCntr.weatherData.main.sea_level) + + " hPa" : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: (wDataCntr.weatherData + && wDataCntr.weatherData.main + && wDataCntr.weatherData.main.grnd_level) ? + String(wDataCntr.weatherData.main.grnd_level) + + " hPa" : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + } + } + } + + SwipeViewPage { + id: weatherPage4 + + Column { + spacing: 40 + anchors.centerIn: parent + + Row { + spacing: 30 + anchors.horizontalCenter: parent.horizontalCenter + + Image { + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/sunrise") + } + + Text { + anchors.verticalCenter: parent.verticalCenter + text: (wDataCntr.weatherData + && wDataCntr.weatherData.sys + && wDataCntr.weatherData.sys.sunrise) ? + WeatherData.getTimeHMS(wDataCntr.weatherData.sys.sunrise) + : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + } + + Row { + spacing: 30 + anchors.horizontalCenter: parent.horizontalCenter + + Image { + anchors.verticalCenter: parent.verticalCenter + source: UIStyle.themeImagePath("images/sunset") + } + + Text { + anchors.verticalCenter: parent.verticalCenter + text: (wDataCntr.weatherData + && wDataCntr.weatherData.sys + && wDataCntr.weatherData.sys.sunset) ? + WeatherData.getTimeHMS(wDataCntr.weatherData.sys.sunset) + : "N/A" + font.pixelSize: UIStyle.fontSizeM + font.letterSpacing: 1 + color: UIStyle.themeColorQtGray1 + } + } + } + } + } + + QtObject { + id: wDataCntr + property var weatherData + } + + QQC2.PageIndicator { + count: svWeatherContainer.count + currentIndex: svWeatherContainer.currentIndex + + anchors.bottom: svWeatherContainer.bottom + anchors.horizontalCenter: parent.horizontalCenter + } + Component.onCompleted: { + WeatherData.requestWeatherData(wDataCntr) + } +} diff --git a/examples/quickcontrols/wearable/qml/Weather/images/humidity-dark.png b/examples/quickcontrols/wearable/qml/Weather/images/humidity-dark.png Binary files differnew file mode 100644 index 0000000000..5d82238cdb --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/humidity-dark.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/humidity-dark@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/humidity-dark@2x.png Binary files differnew file mode 100644 index 0000000000..d83bb4f00c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/humidity-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/humidity-light.png b/examples/quickcontrols/wearable/qml/Weather/images/humidity-light.png Binary files differnew file mode 100644 index 0000000000..5f3bf714e6 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/humidity-light.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/humidity-light@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/humidity-light@2x.png Binary files differnew file mode 100644 index 0000000000..a23364c52c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/humidity-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/pressure-dark.png b/examples/quickcontrols/wearable/qml/Weather/images/pressure-dark.png Binary files differnew file mode 100644 index 0000000000..b2870a55a6 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/pressure-dark.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/pressure-dark@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/pressure-dark@2x.png Binary files differnew file mode 100644 index 0000000000..061f9b8266 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/pressure-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/pressure-light.png b/examples/quickcontrols/wearable/qml/Weather/images/pressure-light.png Binary files differnew file mode 100644 index 0000000000..7b1b158734 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/pressure-light.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/pressure-light@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/pressure-light@2x.png Binary files differnew file mode 100644 index 0000000000..1a40c6422a --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/pressure-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunrise-dark.png b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-dark.png Binary files differnew file mode 100644 index 0000000000..9cac22e1e1 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-dark.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunrise-dark@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-dark@2x.png Binary files differnew file mode 100644 index 0000000000..fe32682386b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunrise-light.png b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-light.png Binary files differnew file mode 100644 index 0000000000..f67a5dff34 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-light.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunrise-light@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-light@2x.png Binary files differnew file mode 100644 index 0000000000..86f5483761 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunrise-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunset-dark.png b/examples/quickcontrols/wearable/qml/Weather/images/sunset-dark.png Binary files differnew file mode 100644 index 0000000000..0068d30539 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunset-dark.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunset-dark@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/sunset-dark@2x.png Binary files differnew file mode 100644 index 0000000000..e515bcc37c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunset-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunset-light.png b/examples/quickcontrols/wearable/qml/Weather/images/sunset-light.png Binary files differnew file mode 100644 index 0000000000..495f78a786 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunset-light.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/sunset-light@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/sunset-light@2x.png Binary files differnew file mode 100644 index 0000000000..d220e829d1 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/sunset-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/temperature-dark.png b/examples/quickcontrols/wearable/qml/Weather/images/temperature-dark.png Binary files differnew file mode 100644 index 0000000000..a207d9440d --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/temperature-dark.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/temperature-dark@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/temperature-dark@2x.png Binary files differnew file mode 100644 index 0000000000..c0e4ef39bf --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/temperature-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/temperature-light.png b/examples/quickcontrols/wearable/qml/Weather/images/temperature-light.png Binary files differnew file mode 100644 index 0000000000..c4f7b61c2e --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/temperature-light.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/temperature-light@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/temperature-light@2x.png Binary files differnew file mode 100644 index 0000000000..50d4f4c43c --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/temperature-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/wind-dark.png b/examples/quickcontrols/wearable/qml/Weather/images/wind-dark.png Binary files differnew file mode 100644 index 0000000000..6a530491af --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/wind-dark.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/wind-dark@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/wind-dark@2x.png Binary files differnew file mode 100644 index 0000000000..487e3e78a3 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/wind-dark@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/wind-light.png b/examples/quickcontrols/wearable/qml/Weather/images/wind-light.png Binary files differnew file mode 100644 index 0000000000..97824bee8f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/wind-light.png diff --git a/examples/quickcontrols/wearable/qml/Weather/images/wind-light@2x.png b/examples/quickcontrols/wearable/qml/Weather/images/wind-light@2x.png Binary files differnew file mode 100644 index 0000000000..7f94bd8542 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/images/wind-light@2x.png diff --git a/examples/quickcontrols/wearable/qml/Weather/weather.js b/examples/quickcontrols/wearable/qml/Weather/weather.js new file mode 100644 index 0000000000..c08fd96e9e --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/weather.js @@ -0,0 +1,30 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +function requestWeatherData(cntr) { + var xhr = new XMLHttpRequest; + xhr.open("GET", "weather.json"); + xhr.onreadystatechange = function () { + if (xhr.readyState === XMLHttpRequest.DONE) { + cntr.weatherData = JSON.parse(xhr.responseText) + } + } + xhr.send(); +} + +function getTimeHMS(utcTime) { + var date = new Date(utcTime * 1000); + // Hours part from the timestamp + var hours = date.getHours(); + var ampm = Math.floor((hours / 12)) ? " PM" : " AM"; + hours = (hours % 12); + + // Minutes part from the timestamp + var minutes = "0" + date.getMinutes(); + // Seconds part from the timestamp + var seconds = "0" + date.getSeconds(); + + // Will display time in 10:30:23 format + return hours % 12 + ':' + minutes.substr(-2) + ':' + seconds.substr(-2) + + ampm; +} diff --git a/examples/quickcontrols/wearable/qml/Weather/weather.json b/examples/quickcontrols/wearable/qml/Weather/weather.json new file mode 100644 index 0000000000..2cce95c60b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/Weather/weather.json @@ -0,0 +1 @@ +{"coord":{"lon":-122.42,"lat":37.77},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":45.22,"pressure":1020.17,"humidity":88,"temp_min":36.92,"temp_max":58.92,"sea_level":1028.19,"grnd_level":1020.17},"wind":{"speed":6.73,"deg":201.002},"clouds":{"all":68},"dt":1476412232,"sys":{"message":0.012,"country":"US","sunrise":1476454666,"sunset":1476495156},"id":5391959,"name":"San Francisco","cod":200} diff --git a/examples/quickcontrols/wearable/qml/WorldClock/Clock.qml b/examples/quickcontrols/wearable/qml/WorldClock/Clock.qml new file mode 100644 index 0000000000..e89489b045 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/Clock.qml @@ -0,0 +1,141 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import ".." +import "../Style" + +SwipeViewPage { + id: clock + + property int hours + property int minutes + property int seconds + property real shift: timeShift + property bool night: false + property bool internationalTime: true //Unset for local time + + function getWatchFaceImage(imageName) { + return "images/" + imageName + } + + function timeChanged() { + var date = new Date + hours = internationalTime ? date.getUTCHours() + Math.floor( + clock.shift) : date.getHours() + night = (hours < 7 || hours > 19) + minutes = internationalTime ? + date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes() + seconds = date.getUTCSeconds() + } + + Timer { + interval: 100 + running: true + repeat: true + onTriggered: clock.timeChanged() + } + + Item { + anchors.centerIn: parent + + width: 200 + height: 220 + + Rectangle { + color: clock.night ? UIStyle.colorQtGray1 : UIStyle.colorQtGray10 + radius: width / 2 + width: parent.width + height: parent.width + } + + Image { + id: background + source: getWatchFaceImage("swissdaydial.png") + visible: clock.night == false + } + Image { + source: getWatchFaceImage("swissnightdial.png") + visible: clock.night == true + } + + Image { + x: 92.5 + y: 27 + source: getWatchFaceImage(clock.night ? + "swissnighthour.png" + : "swissdayhour.png") + transform: Rotation { + id: hourRotation + origin.x: 7.5 + origin.y: 73 + angle: (clock.hours * 30) + (clock.minutes * 0.5) + Behavior on angle { + SpringAnimation { + spring: 2 + damping: 0.2 + modulus: 360 + } + } + } + } + + Image { + x: 93.5 + y: 17 + source: getWatchFaceImage(clock.night ? + "swissnightminute.png" + : "swissdayminute.png") + transform: Rotation { + id: minuteRotation + origin.x: 6.5 + origin.y: 83 + angle: clock.minutes * 6 + Behavior on angle { + SpringAnimation { + spring: 2 + damping: 0.2 + modulus: 360 + } + } + } + } + + Image { + x: 97.5 + y: 20 + source: getWatchFaceImage("second.png") + transform: Rotation { + id: secondRotation + origin.x: 2.5 + origin.y: 80 + angle: clock.seconds * 6 + Behavior on angle { + SpringAnimation { + spring: 2 + damping: 0.2 + modulus: 360 + } + } + } + } + + Image { + anchors.centerIn: background + source: getWatchFaceImage("center.png") + } + + Text { + id: cityLabel + anchors.bottom: parent.bottom + anchors.bottomMargin: 2 + anchors.horizontalCenter: parent.horizontalCenter + + text: cityName + color: UIStyle.themeColorQtGray1 + font.pixelSize: UIStyle.fontSizeXS + font.letterSpacing: 2 + } + } +} diff --git a/examples/quickcontrols/wearable/qml/WorldClock/WorldClockPage.qml b/examples/quickcontrols/wearable/qml/WorldClock/WorldClockPage.qml new file mode 100644 index 0000000000..34a51da5cf --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/WorldClockPage.qml @@ -0,0 +1,60 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls as QQC2 +import "../Style" + +Item { + QQC2.SwipeView { + id: svWatchContainer + + anchors.fill: parent + + ListModel { + id: placesList + ListElement { + cityName: "New York" + timeShift: -4 + } + ListElement { + cityName: "London" + timeShift: 0 + } + ListElement { + cityName: "Oslo" + timeShift: 1 + } + ListElement { + cityName: "Mumbai" + timeShift: 5.5 + } + ListElement { + cityName: "Tokyo" + timeShift: 9 + } + ListElement { + cityName: "Brisbane" + timeShift: 10 + } + ListElement { + cityName: "Los Angeles" + timeShift: -8 + } + } + + Repeater { + model: placesList + delegate: Clock { + } + } + } + + QQC2.PageIndicator { + count: svWatchContainer.count + currentIndex: svWatchContainer.currentIndex + + anchors.bottom: svWatchContainer.bottom + anchors.horizontalCenter: parent.horizontalCenter + } +} diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/center.png b/examples/quickcontrols/wearable/qml/WorldClock/images/center.png Binary files differnew file mode 100644 index 0000000000..0dec43a0aa --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/center.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/center@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/center@2x.png Binary files differnew file mode 100644 index 0000000000..dffc5d60e4 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/center@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/clock-night.png b/examples/quickcontrols/wearable/qml/WorldClock/images/clock-night.png Binary files differnew file mode 100644 index 0000000000..2de330243a --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/clock-night.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/clock-night@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/clock-night@2x.png Binary files differnew file mode 100644 index 0000000000..f675acea69 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/clock-night@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/clock.png b/examples/quickcontrols/wearable/qml/WorldClock/images/clock.png Binary files differnew file mode 100644 index 0000000000..686fb8c2f7 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/clock.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/second.png b/examples/quickcontrols/wearable/qml/WorldClock/images/second.png Binary files differnew file mode 100644 index 0000000000..1e64f357df --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/second.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/second@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/second@2x.png Binary files differnew file mode 100644 index 0000000000..cebc1deb06 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/second@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissdaydial.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdaydial.png Binary files differnew file mode 100644 index 0000000000..0e6321537a --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdaydial.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissdaydial@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdaydial@2x.png Binary files differnew file mode 100644 index 0000000000..ed5de8c646 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdaydial@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayhour.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayhour.png Binary files differnew file mode 100644 index 0000000000..4a835ac3f0 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayhour.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayhour@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayhour@2x.png Binary files differnew file mode 100644 index 0000000000..70f3fa0eee --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayhour@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayminute.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayminute.png Binary files differnew file mode 100644 index 0000000000..048acc7b3f --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayminute.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayminute@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayminute@2x.png Binary files differnew file mode 100644 index 0000000000..4cc6ce64b4 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissdayminute@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightdial.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightdial.png Binary files differnew file mode 100644 index 0000000000..ee5a15bb9b --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightdial.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightdial@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightdial@2x.png Binary files differnew file mode 100644 index 0000000000..ec7e5c77dc --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightdial@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissnighthour.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnighthour.png Binary files differnew file mode 100644 index 0000000000..c5b41cb043 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnighthour.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissnighthour@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnighthour@2x.png Binary files differnew file mode 100644 index 0000000000..bbbc36f1d7 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnighthour@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightminute.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightminute.png Binary files differnew file mode 100644 index 0000000000..026c742446 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightminute.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightminute@2x.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightminute@2x.png Binary files differnew file mode 100644 index 0000000000..8ad69047a4 --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissnightminute@2x.png diff --git a/examples/quickcontrols/wearable/qml/WorldClock/images/swissseconds.png b/examples/quickcontrols/wearable/qml/WorldClock/images/swissseconds.png Binary files differnew file mode 100644 index 0000000000..06446ac0fe --- /dev/null +++ b/examples/quickcontrols/wearable/qml/WorldClock/images/swissseconds.png diff --git a/examples/quickcontrols/wearable/wearable.cpp b/examples/quickcontrols/wearable/wearable.cpp new file mode 100644 index 0000000000..861d4b7610 --- /dev/null +++ b/examples/quickcontrols/wearable/wearable.cpp @@ -0,0 +1,28 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include <QGuiApplication> +#include <QQmlApplicationEngine> +#include <QQuickStyle> +#include <QIcon> + +int main(int argc, char *argv[]) +{ + QCoreApplication::setApplicationName("Wearable"); + QCoreApplication::setOrganizationName("QtProject"); + + QGuiApplication app(argc, argv); + + //! [style] + QQuickStyle::setStyle(QStringLiteral("qrc:/qml/Style")); + //! [style] + + //! [icons] + QIcon::setThemeName(QStringLiteral("wearable")); + //! [icons] + + QQmlApplicationEngine engine; + engine.load(QUrl(QStringLiteral("qrc:/wearable.qml"))); + + return app.exec(); +} diff --git a/examples/quickcontrols/wearable/wearable.pro b/examples/quickcontrols/wearable/wearable.pro new file mode 100644 index 0000000000..8d55e44eaa --- /dev/null +++ b/examples/quickcontrols/wearable/wearable.pro @@ -0,0 +1,12 @@ +TEMPLATE = app +TARGET = wearable +QT += quick quickcontrols2 + +SOURCES += \ + wearable.cpp + +RESOURCES += \ + wearable.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/quickcontrols2/wearable +INSTALLS += target diff --git a/examples/quickcontrols/wearable/wearable.qml b/examples/quickcontrols/wearable/wearable.qml new file mode 100644 index 0000000000..27887354dc --- /dev/null +++ b/examples/quickcontrols/wearable/wearable.qml @@ -0,0 +1,93 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtCore +import QtQuick +import QtQuick.Controls as QQC2 +import "qml" +import "qml/Style" + +QQC2.ApplicationWindow { + id: window + visible: true + width: 320 + height: 320 + title: qsTr("Wearable") + + Settings { + id: settings + property bool wireless + property bool bluetooth + property int brightness + property bool darkTheme + property bool demoMode + } + + Binding { + target: UIStyle + property: "darkTheme" + value: settings.darkTheme + } + + // We need the settings object both here and in SettingsPage, + // so for convenience, we declare it as a property of the root object so that + // it will be available to all of the QML files that we load. + property alias settings: settings + + background: Image { + source: "images/background-" + (settings.darkTheme ? "dark" : "light") + ".png" + } + + header: NaviButton { + id: homeButton + + edge: Qt.TopEdge + enabled: stackView.depth > 1 + imageSource: "images/home.png" + + onClicked: stackView.pop(null) + } + + footer: NaviButton { + id: backButton + + edge: Qt.BottomEdge + enabled: stackView.depth > 1 + imageSource: "images/back.png" + + onClicked: stackView.pop() + } + + QQC2.StackView { + id: stackView + + focus: true + anchors.fill: parent + + initialItem: LauncherPage { + onLaunched: stackView.push(page) + } + } + + DemoMode { + stackView: stackView + } + + DemoModeIndicator { + id: demoModeIndicator + y: settings.demoMode ? -height : -height * 2 + anchors.horizontalCenter: parent.horizontalCenter + height: header.height + z: window.header.z + 1 + } + + MouseArea { + enabled: settings.demoMode + anchors.fill: parent + onClicked: { + // Stop demo mode and return to the launcher page. + settings.demoMode = false + stackView.pop(null) + } + } +} diff --git a/examples/quickcontrols/wearable/wearable.qrc b/examples/quickcontrols/wearable/wearable.qrc new file mode 100644 index 0000000000..db59d038f6 --- /dev/null +++ b/examples/quickcontrols/wearable/wearable.qrc @@ -0,0 +1,155 @@ +<RCC> + <qresource prefix="/"> + <file>wearable.qml</file> + <file>qml/LauncherPage.qml</file> + <file>qml/NaviButton.qml</file> + <file>icons/wearable/index.theme</file> + <file>icons/wearable/36x36/alarms.png</file> + <file>icons/wearable/36x36/fitness.png</file> + <file>icons/wearable/36x36/navigation.png</file> + <file>icons/wearable/36x36/notifications.png</file> + <file>icons/wearable/36x36/settings.png</file> + <file>icons/wearable/36x36/weather.png</file> + <file>icons/wearable/36x36/worldclock.png</file> + <file>icons/wearable/36x36@2/alarms.png</file> + <file>icons/wearable/36x36@2/fitness.png</file> + <file>icons/wearable/36x36@2/navigation.png</file> + <file>icons/wearable/36x36@2/notifications.png</file> + <file>icons/wearable/36x36@2/settings.png</file> + <file>icons/wearable/36x36@2/weather.png</file> + <file>icons/wearable/36x36@2/worldclock.png</file> + <file>images/background-light.png</file> + <file>images/background-dark.png</file> + <file>images/back.png</file> + <file>images/back@2x.png</file> + <file>images/home.png</file> + <file>images/home@2x.png</file> + <file>qml/Alarms/AlarmsPage.qml</file> + <file>qml/Fitness/fitness.js</file> + <file>qml/Fitness/FitnessPage.qml</file> + <file>qml/Fitness/images/man-running-light.png</file> + <file>qml/Fitness/images/man-running-light@2x.png</file> + <file>qml/Fitness/images/man-walking-light.png</file> + <file>qml/Fitness/images/man-walking-light@2x.png</file> + <file>qml/Fitness/images/man-running-dark.png</file> + <file>qml/Fitness/images/man-running-dark@2x.png</file> + <file>qml/Fitness/images/man-walking-dark.png</file> + <file>qml/Fitness/images/man-walking-dark@2x.png</file> + <file>qml/Navigation/navigation.js</file> + <file>qml/Navigation/NavigationPage.qml</file> + <file>qml/Navigation/RouteElement.qml</file> + <file>qml/Navigation/walk_route.json</file> + <file>qml/Navigation/images/end.png</file> + <file>qml/Navigation/images/end@2x.png</file> + <file>qml/Navigation/images/leftturn-light.png</file> + <file>qml/Navigation/images/leftturn-light@2x.png</file> + <file>qml/Navigation/images/leftturn-dark.png</file> + <file>qml/Navigation/images/leftturn-dark@2x.png</file> + <file>qml/Navigation/images/navigation-light.png</file> + <file>qml/Navigation/images/navigation-light@2x.png</file> + <file>qml/Navigation/images/navigation-dark.png</file> + <file>qml/Navigation/images/navigation-dark@2x.png</file> + <file>qml/Navigation/images/rightturn-light.png</file> + <file>qml/Navigation/images/rightturn-light@2x.png</file> + <file>qml/Navigation/images/rightturn-dark.png</file> + <file>qml/Navigation/images/rightturn-dark@2x.png</file> + <file>qml/Navigation/images/start.png</file> + <file>qml/Navigation/images/start@2x.png</file> + <file>qml/Navigation/images/straight-light.png</file> + <file>qml/Navigation/images/straight-light@2x.png</file> + <file>qml/Navigation/images/straight-dark.png</file> + <file>qml/Navigation/images/straight-dark@2x.png</file> + <file>qml/Navigation/images/uturn.png</file> + <file>qml/Navigation/images/uturn@2x.png</file> + <file>qml/Notifications/notifications.js</file> + <file>qml/Notifications/NotificationsPage.qml</file> + <file>qml/Notifications/images/avatarf-light.png</file> + <file>qml/Notifications/images/avatarf-light@2x.png</file> + <file>qml/Notifications/images/avatarm-light.png</file> + <file>qml/Notifications/images/avatarm-light@2x.png</file> + <file>qml/Notifications/images/missedcall-light.png</file> + <file>qml/Notifications/images/missedcall-light@2x.png</file> + <file>qml/Notifications/images/avatarf-dark.png</file> + <file>qml/Notifications/images/avatarf-dark@2x.png</file> + <file>qml/Notifications/images/avatarm-dark.png</file> + <file>qml/Notifications/images/avatarm-dark@2x.png</file> + <file>qml/Notifications/images/missedcall-dark.png</file> + <file>qml/Notifications/images/missedcall-dark@2x.png</file> + <file>qml/Settings/SettingsPage.qml</file> + <file>qml/Settings/images/bluetooth-light.png</file> + <file>qml/Settings/images/bluetooth-light@2x.png</file> + <file>qml/Settings/images/brightness-light.png</file> + <file>qml/Settings/images/brightness-light@2x.png</file> + <file>qml/Settings/images/demo-mode-light.png</file> + <file>qml/Settings/images/demo-mode-light@2x.png</file> + <file>qml/Settings/images/demo-mode-dark.png</file> + <file>qml/Settings/images/demo-mode-dark@2x.png</file> + <file>qml/Settings/images/demo-mode-white.png</file> + <file>qml/Settings/images/demo-mode-white@2x.png</file> + <file>qml/Settings/images/theme-light.png</file> + <file>qml/Settings/images/theme-light@2x.png</file> + <file>qml/Settings/images/wifi-light.png</file> + <file>qml/Settings/images/wifi-light@2x.png</file> + <file>qml/Settings/images/bluetooth-dark.png</file> + <file>qml/Settings/images/bluetooth-dark@2x.png</file> + <file>qml/Settings/images/brightness-dark.png</file> + <file>qml/Settings/images/brightness-dark@2x.png</file> + <file>qml/Settings/images/theme-dark.png</file> + <file>qml/Settings/images/theme-dark@2x.png</file> + <file>qml/Settings/images/wifi-dark.png</file> + <file>qml/Settings/images/wifi-dark@2x.png</file> + <file>qml/Style/qmldir</file> + <file>qml/Style/PageIndicator.qml</file> + <file>qml/Style/Slider.qml</file> + <file>qml/Style/Switch.qml</file> + <file>qml/Style/UIStyle.qml</file> + <file>qml/Weather/weather.js</file> + <file>qml/Weather/weather.json</file> + <file>qml/Weather/WeatherPage.qml</file> + <file>qml/Weather/images/humidity-light.png</file> + <file>qml/Weather/images/humidity-light@2x.png</file> + <file>qml/Weather/images/pressure-light.png</file> + <file>qml/Weather/images/pressure-light@2x.png</file> + <file>qml/Weather/images/sunrise-light.png</file> + <file>qml/Weather/images/sunrise-light@2x.png</file> + <file>qml/Weather/images/sunset-light.png</file> + <file>qml/Weather/images/sunset-light@2x.png</file> + <file>qml/Weather/images/temperature-light.png</file> + <file>qml/Weather/images/temperature-light@2x.png</file> + <file>qml/Weather/images/wind-light.png</file> + <file>qml/Weather/images/wind-light@2x.png</file> + <file>qml/Weather/images/humidity-dark.png</file> + <file>qml/Weather/images/humidity-dark@2x.png</file> + <file>qml/Weather/images/pressure-dark.png</file> + <file>qml/Weather/images/pressure-dark@2x.png</file> + <file>qml/Weather/images/sunrise-dark.png</file> + <file>qml/Weather/images/sunrise-dark@2x.png</file> + <file>qml/Weather/images/sunset-dark.png</file> + <file>qml/Weather/images/sunset-dark@2x.png</file> + <file>qml/Weather/images/temperature-dark.png</file> + <file>qml/Weather/images/temperature-dark@2x.png</file> + <file>qml/Weather/images/wind-dark.png</file> + <file>qml/Weather/images/wind-dark@2x.png</file> + <file>qml/WorldClock/Clock.qml</file> + <file>qml/WorldClock/WorldClockPage.qml</file> + <file>qml/WorldClock/images/center.png</file> + <file>qml/WorldClock/images/center@2x.png</file> + <file>qml/WorldClock/images/second.png</file> + <file>qml/WorldClock/images/second@2x.png</file> + <file>qml/WorldClock/images/swissdaydial.png</file> + <file>qml/WorldClock/images/swissdaydial@2x.png</file> + <file>qml/WorldClock/images/swissdayhour.png</file> + <file>qml/WorldClock/images/swissdayhour@2x.png</file> + <file>qml/WorldClock/images/swissdayminute.png</file> + <file>qml/WorldClock/images/swissdayminute@2x.png</file> + <file>qml/WorldClock/images/swissnightdial.png</file> + <file>qml/WorldClock/images/swissnightdial@2x.png</file> + <file>qml/WorldClock/images/swissnighthour.png</file> + <file>qml/WorldClock/images/swissnighthour@2x.png</file> + <file>qml/WorldClock/images/swissnightminute.png</file> + <file>qml/WorldClock/images/swissnightminute@2x.png</file> + <file>qml/SwipeViewPage.qml</file> + <file>qml/DemoMode.qml</file> + <file>qml/DemoModeIndicator.qml</file> + </qresource> +</RCC> |