aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMatthias Rauter <matthias.rauter@qt.io>2023-11-30 19:28:55 +0100
committerMatthias Rauter <matthias.rauter@qt.io>2024-02-01 15:51:37 +0000
commit3e51afcb85c7e7bcd956a8fb53a3c96f52a774cb (patch)
tree93102f8f41f2898f808a116642cca2f8946f6482
parentf3bcbfd6a50fb7e74f4ff6714d3b3066fa74e253 (diff)
Refactor quickcontrols wearable example
Design: Karolina Bang. Pick-to: 6.7 Change-Id: I0201bb579d297c6bc02c16ef6a5e4b233ffff5de Reviewed-by: Mitch Curtis <mitch.curtis@qt.io> Reviewed-by: Matthias Rauter <matthias.rauter@qt.io> Reviewed-by: Venugopal Shivashankar <Venugopal.Shivashankar@qt.io>
-rw-r--r--examples/quickcontrols/wearable/CMakeLists.txt14
-rw-r--r--examples/quickcontrols/wearable/Wearable/AlarmsPage.qml191
-rw-r--r--examples/quickcontrols/wearable/Wearable/CMakeLists.txt221
-rw-r--r--examples/quickcontrols/wearable/Wearable/Clock.qml223
-rw-r--r--examples/quickcontrols/wearable/Wearable/DemoMode.qml193
-rw-r--r--examples/quickcontrols/wearable/Wearable/DemoModeIndicator.qml32
-rw-r--r--examples/quickcontrols/wearable/Wearable/FitnessPage.qml281
-rw-r--r--examples/quickcontrols/wearable/Wearable/LauncherPage.qml93
-rw-r--r--examples/quickcontrols/wearable/Wearable/ListHeaderItem.qml83
-rw-r--r--examples/quickcontrols/wearable/Wearable/ListItem.qml26
-rw-r--r--examples/quickcontrols/wearable/Wearable/Main.qml107
-rw-r--r--examples/quickcontrols/wearable/Wearable/MenuHeader.qml92
-rw-r--r--examples/quickcontrols/wearable/Wearable/NaviButton.qml36
-rw-r--r--examples/quickcontrols/wearable/Wearable/NavigationFallbackPage.qml100
-rw-r--r--examples/quickcontrols/wearable/Wearable/NavigationPage.qml253
-rw-r--r--examples/quickcontrols/wearable/Wearable/NotificationsPage.qml100
-rw-r--r--examples/quickcontrols/wearable/Wearable/RouteElement.qml84
-rw-r--r--examples/quickcontrols/wearable/Wearable/SettingsPage.qml225
-rw-r--r--examples/quickcontrols/wearable/Wearable/WeatherPage.qml460
-rw-r--r--examples/quickcontrols/wearable/Wearable/WorldClockPage.qml17
-rw-r--r--examples/quickcontrols/wearable/Wearable/fallbackroute.json78
-rw-r--r--examples/quickcontrols/wearable/Wearable/fitness.js34
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/back-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/back-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bearleft-dark.svg7
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bearleft-light.svg7
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bearright-dark.svg7
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bearright-light.svg7
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bell-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bell-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bluetooth-dark.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/bluetooth-light.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/clock-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/clock-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/darkmode-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/darkmode-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/demomode-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/demomode-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/drop-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/drop-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/forward-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/forward-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/hearth-dark.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/hearth-light.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/left-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/left-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/lightleft-dark.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/lightleft-light.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/lightright-dark.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/lightright-light.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/maps-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/maps-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/notification-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/notification-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/plus-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/plus-light.svg5
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/pressure-dark.svg9
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/pressure-light.svg9
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/right-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/right-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/settings-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/settings-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/sun-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/sun-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/sunrise-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/sunrise-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/sunset-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/sunset-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/thermometer-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/thermometer-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/uturnleft-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/uturnleft-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/uturnright-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/uturnright-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/alarms.pngbin510 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/fitness.pngbin443 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/navigation.pngbin474 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/notifications.pngbin559 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/settings.pngbin544 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/weather.pngbin427 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/worldclock.pngbin470 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/alarms.pngbin871 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/fitness.pngbin743 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/navigation.pngbin803 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/notifications.pngbin1016 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/settings.pngbin802 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/weather.pngbin747 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/worldclock.pngbin817 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wearable/index.theme14
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-dark.svg10
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-fog-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-fog-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-haze-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-haze-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-icy-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-icy-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-light.svg10
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-overcast-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-overcast-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-showers-dark.svg6
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-showers-light.svg6
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-sleet-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-sleet-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-snow-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-snow-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-storm-dark.svg6
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-storm-light.svg6
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-sunny-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-sunny-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-dark.svg10
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-light.svg10
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wifi-dark.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wifi-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wind-dark.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/wind-light.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/icons/yellowsun.svg4
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/back.pngbin834 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/back@2x.pngbin528 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/back@3x.pngbin788 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/back@4x.pngbin1002 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/background-dark.pngbin28157 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/background-light.pngbin343879 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fallbackmap.pngbin0 -> 143664 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.pngbin1400 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark@2x.pngbin2260 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.pngbin1216 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light@2x.pngbin2473 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.pngbin1408 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark@2x.pngbin2215 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.pngbin1231 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.svg3
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light@2x.pngbin2308 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/home.pngbin856 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/home@2x.pngbin653 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/home@3x.pngbin909 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/home@4x.pngbin1167 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-dark.pngbin474 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-dark@2x.pngbin802 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-end.pngbin1515 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-end@2x.pngbin1383 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark.pngbin1670 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark@2x.pngbin1191 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light.pngbin1280 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light@2x.pngbin1191 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-light.pngbin474 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-light@2x.pngbin803 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-marker.pngbin1515 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark.pngbin1670 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark@2x.pngbin1176 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light.pngbin1246 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light@2x.pngbin1176 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-start.pngbin1515 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-start@2x.pngbin1364 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark.pngbin1112 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark@2x.pngbin654 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-straight-light.pngbin896 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-straight-light@2x.pngbin654 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-uturn.pngbin1833 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/navigation-uturn@2x.pngbin4780 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark.pngbin1848 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark@2x.pngbin1540 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light.pngbin1565 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light@2x.pngbin1540 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark.pngbin1622 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark@2x.pngbin1367 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light.pngbin1367 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light@2x.pngbin1367 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark.pngbin1994 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark@2x.pngbin1374 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light.pngbin1976 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light@2x.pngbin1374 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark.pngbin793 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark@2x.pngbin2668 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light.pngbin1678 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light@2x.pngbin2718 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark.pngbin1276 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark@2x.pngbin1127 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-brightness-light.pngbin1277 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-brightness-light@2x.pngbin1127 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark.pngbin797 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark@2x.pngbin1154 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light.pngbin797 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light@2x.pngbin1150 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white.pngbin576 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white@2x.pngbin1069 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-demo-mode.svg93
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-theme-dark.pngbin1129 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-theme-dark@2x.pngbin2002 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-theme-light.pngbin1138 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-theme-light@2x.pngbin2004 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-theme.svg84
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-wifi-dark.pngbin1476 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-wifi-dark@2x.pngbin1072 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-wifi-light.pngbin1477 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/settings-wifi-light@2x.pngbin1072 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark.pngbin1673 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark@2x.pngbin1440 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-humidity-light.pngbin1619 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-humidity-light@2x.pngbin1440 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark.pngbin1506 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark@2x.pngbin1542 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-pressure-light.pngbin1508 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-pressure-light@2x.pngbin1543 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark.pngbin1813 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark@2x.pngbin1235 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light.pngbin1703 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light@2x.pngbin1235 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark.pngbin1809 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark@2x.pngbin1267 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunset-light.pngbin1755 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-sunset-light@2x.pngbin1267 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark.pngbin1232 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark@2x.pngbin939 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-temperature-light.pngbin1147 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-temperature-light@2x.pngbin939 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-wind-dark.pngbin1715 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-wind-dark@2x.pngbin1106 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-wind-light.pngbin1609 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/weather-wind-light@2x.pngbin1106 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-center.pngbin691 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-center@2x.pngbin1796 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night.pngbin24236 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night@2x.pngbin64764 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-clock.pngbin11173 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-second.pngbin158 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-second@2x.pngbin115 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial.pngbin5078 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial@2x.pngbin10146 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour.pngbin181 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour@2x.pngbin269 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute.pngbin187 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute@2x.pngbin371 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial.pngbin4970 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial@2x.pngbin13594 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour.pngbin260 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour@2x.pngbin492 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute.pngbin187 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute@2x.pngbin365 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/images/world-clock-swissseconds.pngbin1120 -> 0 bytes
-rw-r--r--examples/quickcontrols/wearable/Wearable/navigation.js149
-rw-r--r--examples/quickcontrols/wearable/Wearable/notifications.js11
-rw-r--r--examples/quickcontrols/wearable/Wearable/qmldir2
-rw-r--r--examples/quickcontrols/wearable/Wearable/walk_route.json1
-rw-r--r--examples/quickcontrols/wearable/Wearable/weather.js39
-rw-r--r--examples/quickcontrols/wearable/WearableSettings/CMakeLists.txt3
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/CMakeLists.txt4
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/PageIndicator.qml13
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/Slider.qml45
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/Switch.qml48
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/UIStyle.qml143
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/fonts/OFL.txt93
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Bold.ttfbin0 -> 53896 bytes
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Regular.ttfbin0 -> 57392 bytes
-rw-r--r--examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-SemiBold.ttfbin0 -> 56752 bytes
-rw-r--r--examples/quickcontrols/wearable/doc/images/qtquickcontrols-wearable.pngbin108926 -> 28479 bytes
-rw-r--r--examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc126
-rw-r--r--examples/quickcontrols/wearable/wearable.cpp7
-rw-r--r--examples/quickcontrols/wearable/wearable.pro7
-rw-r--r--examples/quickcontrols/wearable/wearable.qrc236
268 files changed, 2972 insertions, 1487 deletions
diff --git a/examples/quickcontrols/wearable/CMakeLists.txt b/examples/quickcontrols/wearable/CMakeLists.txt
index eccbea20aa..31e7c44da2 100644
--- a/examples/quickcontrols/wearable/CMakeLists.txt
+++ b/examples/quickcontrols/wearable/CMakeLists.txt
@@ -12,7 +12,7 @@ endif()
set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quickcontrols/wearable")
-find_package(Qt6 REQUIRED COMPONENTS Core Gui Quick QuickControls2)
+find_package(Qt6 REQUIRED COMPONENTS Core Gui Quick QuickControls2 OPTIONAL_COMPONENTS Positioning Location)
qt_standard_project_setup()
@@ -31,6 +31,18 @@ target_link_libraries(wearableexample PUBLIC
Qt6::QuickControls2
)
+if(TARGET Qt6::Positioning)
+ target_link_libraries(wearableexample PUBLIC
+ Qt6::Positioning
+ )
+endif()
+
+if(TARGET Qt6::Location)
+target_link_libraries(wearableexample PUBLIC
+ Qt6::Location
+)
+endif()
+
if(UNIX AND NOT APPLE AND CMAKE_CROSSCOMPILING)
find_package(Qt6 REQUIRED COMPONENTS QuickTemplates2)
diff --git a/examples/quickcontrols/wearable/Wearable/AlarmsPage.qml b/examples/quickcontrols/wearable/Wearable/AlarmsPage.qml
index 3fb4208564..79377a6c25 100644
--- a/examples/quickcontrols/wearable/Wearable/AlarmsPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/AlarmsPage.qml
@@ -1,67 +1,172 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls as QQC2
-import Wearable
import WearableStyle
Item {
- QQC2.SwipeView {
- id: svAlarmsContainer
+ function addAlarm() {
+ alarms.append(
+ {
+ "title": qsTr("New alarm"),
+ "hour": 0,
+ "minute": 0,
+ "nextRing": qsTr("Thursday 20. Nov."),
+ "armed": false
+ })
+ }
+
+ QQC2.AbstractButton {
+ id: plusButton
+ anchors.top: parent.top
+ anchors.right: parent.right
+ anchors.topMargin: 5
+ anchors.leftMargin: 5
+
+ width: height
+ height: 40
+ onClicked: parent.addAlarm()
+
+ Image {
+ anchors.centerIn: parent
+ width: 32
+ height: 32
+ source: UIStyle.iconPath("plus")
+ }
+ }
+
+ ListModel {
+ id: alarms
+ ListElement {
+ title: qsTr("Workday morning")
+ hour: 6
+ minute: 30
+ nextRing: qsTr("Thursday 20. Nov.")
+ armed: false
+ }
+ ListElement {
+ title: qsTr("Weekend morning")
+ hour: 8
+ minute: 40
+ nextRing: qsTr("Saturday 22. Nov.")
+ armed: false
+ }
+ }
+
+ property alias alarmList: listview
+
+ ListView {
+ id: listview
anchors.fill: parent
+ anchors.margins: 15
+ anchors.topMargin: 40 + 15
+ spacing: 10
+
+ model: alarms
+
+ delegate: ListHeaderItem {
+ id: alarmItem
+
+ property alias onSwitch: onSwitch
+ property alias minuteTumbler: minuteTumbler
+ property alias hourTumbler: hourTumbler
- 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" }
+ required property string title
+ required property string nextRing
+ required property bool armed
+
+ width: parent.width
+ height: 94
+
+ Item {
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 28
+
+ Text {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.margins: 10
+ text: alarmItem.title
+ color: UIStyle.titletextColor
+ font: UIStyle.h3
+ }
+ Text {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.margins: 10
+ text: alarmItem.nextRing
+ color: UIStyle.titletextColor
+ font: UIStyle.p1
+ }
}
- SwipeViewPage {
- property alias stateSwitch: stateSwitch
+ Item {
+ anchors.bottom: parent.bottom
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 66
- Column {
- spacing: 30
- anchors.centerIn: parent
+ Switch {
+ id: onSwitch
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.margins: 15
+ checked: alarmItem.armed
+ }
- QQC2.Switch {
- id: stateSwitch
- checked: model.state
- anchors.left: nameLabel.right
- }
+ QQC2.Tumbler {
+ id: minuteTumbler
+ height: parent.height
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.rightMargin: 0
+ visibleItemCount: 1
+ model: 60
- Text {
- text: model.time
- anchors.horizontalCenter: parent.horizontalCenter
+ delegate: Text {
+ required property int modelData
+ text: (modelData < 10 ? "0" : "") + modelData
+ horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
- height: UIStyle.fontSizeXL
- font.bold: stateSwitch.checked
- font.pixelSize: stateSwitch.checked ? UIStyle.fontSizeXL : UIStyle.fontSizeL
- font.letterSpacing: 4
- color: UIStyle.themeColorQtGray1
+ leftPadding: 5
+ font: UIStyle.tumblerFont
+ color: UIStyle.textColor
}
+ }
- 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
+ Text {
+ id: timespacer
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: minuteTumbler.left
+ verticalAlignment: Text.AlignVCenter
+ font: UIStyle.tumblerFont
+ color: UIStyle.textColor
+ text: ":"
+ }
+
+ QQC2.Tumbler {
+ id: hourTumbler
+ height: parent.height
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: timespacer.left
+ visibleItemCount: 1
+ model: 12
+
+ delegate: Text {
+ required property int modelData
+ text: (modelData < 10 ? "0" : "") + modelData
+ horizontalAlignment: Text.AlignRight
+ verticalAlignment: Text.AlignVCenter
+ rightPadding: 5
+ font: UIStyle.tumblerFont
+ color: UIStyle.textColor
}
}
}
}
}
-
- QQC2.PageIndicator {
- count: svAlarmsContainer.count
- currentIndex: svAlarmsContainer.currentIndex
-
- anchors.bottom: svAlarmsContainer.bottom
- anchors.horizontalCenter: parent.horizontalCenter
- }
}
diff --git a/examples/quickcontrols/wearable/Wearable/CMakeLists.txt b/examples/quickcontrols/wearable/Wearable/CMakeLists.txt
index 26b1a6c774..2ff1159506 100644
--- a/examples/quickcontrols/wearable/Wearable/CMakeLists.txt
+++ b/examples/quickcontrols/wearable/Wearable/CMakeLists.txt
@@ -25,9 +25,12 @@ qt_add_qml_module(wearable
DemoModeIndicator.qml
FitnessPage.qml
LauncherPage.qml
+ ListHeaderItem.qml
+ ListItem.qml
Main.qml
- NaviButton.qml
+ MenuHeader.qml
NavigationPage.qml
+ NavigationFallbackPage.qml
NotificationsPage.qml
RouteElement.qml
SettingsPage.qml
@@ -39,132 +42,96 @@ qt_add_qml_module(wearable
notifications.js
weather.js
RESOURCES
- 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/fitness-man-running-dark.png
- images/fitness-man-running-dark@2x.png
- images/fitness-man-running-light.png
- images/fitness-man-running-light@2x.png
- images/fitness-man-walking-dark.png
- images/fitness-man-walking-dark@2x.png
- images/fitness-man-walking-light.png
- images/fitness-man-walking-light@2x.png
- images/home.png
- images/home@2x.png
- images/navigation-dark.png
- images/navigation-dark@2x.png
- images/navigation-end.png
- images/navigation-end@2x.png
- images/navigation-leftturn-dark.png
- images/navigation-leftturn-dark@2x.png
- images/navigation-leftturn-light.png
- images/navigation-leftturn-light@2x.png
- images/navigation-light.png
- images/navigation-light@2x.png
- images/navigation-rightturn-dark.png
- images/navigation-rightturn-dark@2x.png
- images/navigation-rightturn-light.png
- images/navigation-rightturn-light@2x.png
- images/navigation-start.png
- images/navigation-start@2x.png
- images/navigation-straight-dark.png
- images/navigation-straight-dark@2x.png
- images/navigation-straight-light.png
- images/navigation-straight-light@2x.png
- images/navigation-uturn.png
- images/navigation-uturn@2x.png
- images/notifications-avatarf-dark.png
- images/notifications-avatarf-dark@2x.png
- images/notifications-avatarf-light.png
- images/notifications-avatarf-light@2x.png
- images/notifications-avatarm-dark.png
- images/notifications-avatarm-dark@2x.png
- images/notifications-avatarm-light.png
- images/notifications-avatarm-light@2x.png
- images/notifications-missedcall-dark.png
- images/notifications-missedcall-dark@2x.png
- images/notifications-missedcall-light.png
- images/notifications-missedcall-light@2x.png
- images/settings-bluetooth-dark.png
- images/settings-bluetooth-dark@2x.png
- images/settings-bluetooth-light.png
- images/settings-bluetooth-light@2x.png
- images/settings-brightness-dark.png
- images/settings-brightness-dark@2x.png
- images/settings-brightness-light.png
- images/settings-brightness-light@2x.png
- images/settings-demo-mode-dark.png
- images/settings-demo-mode-dark@2x.png
- images/settings-demo-mode-light.png
- images/settings-demo-mode-light@2x.png
- images/settings-demo-mode-white.png
- images/settings-demo-mode-white@2x.png
- images/settings-theme-dark.png
- images/settings-theme-dark@2x.png
- images/settings-theme-light.png
- images/settings-theme-light@2x.png
- images/settings-wifi-dark.png
- images/settings-wifi-dark@2x.png
- images/settings-wifi-light.png
- images/settings-wifi-light@2x.png
- images/weather-humidity-dark.png
- images/weather-humidity-dark@2x.png
- images/weather-humidity-light.png
- images/weather-humidity-light@2x.png
- images/weather-pressure-dark.png
- images/weather-pressure-dark@2x.png
- images/weather-pressure-light.png
- images/weather-pressure-light@2x.png
- images/weather-sunrise-dark.png
- images/weather-sunrise-dark@2x.png
- images/weather-sunrise-light.png
- images/weather-sunrise-light@2x.png
- images/weather-sunset-dark.png
- images/weather-sunset-dark@2x.png
- images/weather-sunset-light.png
- images/weather-sunset-light@2x.png
- images/weather-temperature-dark.png
- images/weather-temperature-dark@2x.png
- images/weather-temperature-light.png
- images/weather-temperature-light@2x.png
- images/weather-wind-dark.png
- images/weather-wind-dark@2x.png
- images/weather-wind-light.png
- images/weather-wind-light@2x.png
- images/world-clock-center.png
- images/world-clock-center@2x.png
- images/world-clock-second.png
- images/world-clock-second@2x.png
- images/world-clock-swissdaydial.png
- images/world-clock-swissdaydial@2x.png
- images/world-clock-swissdayhour.png
- images/world-clock-swissdayhour@2x.png
- images/world-clock-swissdayminute.png
- images/world-clock-swissdayminute@2x.png
- images/world-clock-swissnightdial.png
- images/world-clock-swissnightdial@2x.png
- images/world-clock-swissnighthour.png
- images/world-clock-swissnighthour@2x.png
- images/world-clock-swissnightminute.png
- images/world-clock-swissnightminute@2x.png
- walk_route.json
+ icons/wind-light.svg
+ icons/wind-dark.svg
+ icons/wifi-light.svg
+ icons/wifi-dark.svg
+ icons/weather-light.svg
+ icons/weather-dark.svg
+ icons/uturnright-light.svg
+ icons/uturnright-dark.svg
+ icons/uturnleft-light.svg
+ icons/uturnleft-dark.svg
+ icons/thermometer-light.svg
+ icons/thermometer-dark.svg
+ icons/sunset-light.svg
+ icons/sunset-dark.svg
+ icons/sunrise-light.svg
+ icons/sunrise-dark.svg
+ icons/sun-light.svg
+ icons/sun-dark.svg
+ icons/settings-light.svg
+ icons/settings-dark.svg
+ icons/right-light.svg
+ icons/right-dark.svg
+ icons/pressure-light.svg
+ icons/pressure-dark.svg
+ icons/plus-light.svg
+ icons/plus-dark.svg
+ icons/notification-light.svg
+ icons/notification-dark.svg
+ icons/maps-light.svg
+ icons/maps-dark.svg
+ icons/lightright-light.svg
+ icons/lightright-dark.svg
+ icons/lightleft-light.svg
+ icons/lightleft-dark.svg
+ icons/left-light.svg
+ icons/left-dark.svg
+ icons/hearth-light.svg
+ icons/hearth-dark.svg
+ icons/forward-light.svg
+ icons/forward-dark.svg
+ icons/drop-light.svg
+ icons/drop-dark.svg
+ icons/demomode-light.svg
+ icons/demomode-dark.svg
+ icons/darkmode-light.svg
+ icons/darkmode-dark.svg
+ icons/clock-light.svg
+ icons/clock-dark.svg
+ icons/bluetooth-light.svg
+ icons/bluetooth-dark.svg
+ icons/bell-light.svg
+ icons/bell-dark.svg
+ icons/bearright-light.svg
+ icons/bearright-dark.svg
+ icons/bearleft-light.svg
+ icons/bearleft-dark.svg
+ icons/back-light.svg
+ icons/back-dark.svg
+ icons/weather-thundershower-light.svg
+ icons/weather-thundershower-dark.svg
+ icons/weather-sunny-very-few-clouds-light.svg
+ icons/weather-sunny-very-few-clouds-dark.svg
+ icons/weather-sunny-light.svg
+ icons/weather-sunny-dark.svg
+ icons/weather-storm-light.svg
+ icons/weather-storm-dark.svg
+ icons/weather-snow-light.svg
+ icons/weather-snow-dark.svg
+ icons/weather-sleet-light.svg
+ icons/weather-sleet-dark.svg
+ icons/weather-showers-scattered-light.svg
+ icons/weather-showers-scattered-dark.svg
+ icons/weather-showers-light.svg
+ icons/weather-showers-dark.svg
+ icons/weather-overcast-light.svg
+ icons/weather-overcast-dark.svg
+ icons/weather-icy-light.svg
+ icons/weather-icy-dark.svg
+ icons/weather-haze-light.svg
+ icons/weather-haze-dark.svg
+ icons/weather-fog-light.svg
+ icons/weather-fog-dark.svg
+ icons/weather-few-clouds-light.svg
+ icons/weather-few-clouds-dark.svg
+ images/fitness-man-walking-light.svg
+ images/fitness-man-running-light.svg
+ images/fitness-man-walking-dark.svg
+ images/fitness-man-running-dark.svg
+ images/fallbackmap.png
+ fallbackroute.json
weather.json
)
diff --git a/examples/quickcontrols/wearable/Wearable/Clock.qml b/examples/quickcontrols/wearable/Wearable/Clock.qml
index 88960507f1..638a336a9e 100644
--- a/examples/quickcontrols/wearable/Wearable/Clock.qml
+++ b/examples/quickcontrols/wearable/Wearable/Clock.qml
@@ -1,18 +1,21 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+pragma ComponentBehavior: Bound
import QtQuick
-import QtQuick.Controls as QQC2
+import QtQuick.Shapes
import Wearable
import WearableStyle
SwipeViewPage {
id: clock
+ required property real shift
+ required property string cityName
+
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
@@ -31,38 +34,81 @@ SwipeViewPage {
onTriggered: clock.timeChanged()
}
- Item {
+ Rectangle {
+
anchors.centerIn: parent
+ id: background
+ color: clock.night ? "#000000" : "#FFFFFF"
+ radius: width / 2
width: 200
- height: 220
+ height: 200
- Rectangle {
- color: clock.night ? UIStyle.colorQtGray1 : UIStyle.colorQtGray10
- radius: width / 2
- width: parent.width
- height: parent.width
+ Repeater {
+ model: 12
+ Rectangle {
+ id: minuteMarker
+ x: parent.width / 2 + 73 ; y: parent.height / 2 - 3
+ width: 14
+ height: 6
+ color: clock.night ? "#FFFFFF" : "#000000"
+ antialiasing: true
+ required property int index
+ transform: Rotation {
+ angle: minuteMarker.index / 12 * 360
+ origin.x: -73
+ origin.y: 3
+ }
+ }
}
- Image {
- id: background
- source: UIStyle.imagePath("world-clock-swissdaydial")
- visible: clock.night == false
- }
- Image {
- source: UIStyle.imagePath("world-clock-swissnightdial")
- visible: clock.night == true
+ Repeater {
+ model: 60
+ Rectangle {
+ id: secondMarker
+ x: parent.width / 2 + 90 ; y: parent.height / 2 - 1
+ width: 8
+ height: 2
+ color: clock.night ? "#FFFFFF" : "#000000"
+ antialiasing: true
+ required property int index
+ transform: Rotation {
+ angle: secondMarker.index / 60 * 360
+ origin.x: -90
+ origin.y: 1
+ }
+ }
}
- Image {
- x: 92.5
- y: 27
- source: UIStyle.imagePath(`world-clock-swiss${clock.night ? "night" : "day"}hour`)
+ Shape {
+ id: hourHand
+ x: parent.width / 2
+ y: parent.width / 2
+ preferredRendererType: Shape.CurveRenderer
+
+ ShapePath {
+ fillColor: clock.night ? "#FFFFFF" : "#000000"
+ strokeWidth:0
+
+ startX: 5
+ startY: 14
+ PathLine {
+ x: -5
+ y: 14
+ }
+ PathLine {
+ x: -4
+ y: -71
+ }
+ PathLine {
+ x: 4
+ y: -71
+ }
+ }
+
transform: Rotation {
id: hourRotation
- origin.x: 7.5
- origin.y: 73
- angle: (clock.hours * 30) + (clock.minutes * 0.5)
+ angle: clock.hours * 6 + clock.minutes * 6 / 12
Behavior on angle {
SpringAnimation {
spring: 2
@@ -73,14 +119,34 @@ SwipeViewPage {
}
}
- Image {
- x: 93.5
- y: 17
- source: UIStyle.imagePath(`world-clock-swiss${clock.night ? "night" : "day"}minute`)
+ Shape {
+ id: minuteHand
+ x: parent.width / 2
+ y: parent.width / 2
+ preferredRendererType: Shape.CurveRenderer
+
+ ShapePath {
+ fillColor: clock.night ? "#FFFFFF" : "#000000"
+ strokeWidth:0
+
+ startX: 5
+ startY: 14
+ PathLine {
+ x: -5
+ y: 14
+ }
+ PathLine {
+ x: -4
+ y: -89
+ }
+ PathLine {
+ x: 4
+ y: -89
+ }
+ }
+
transform: Rotation {
id: minuteRotation
- origin.x: 6.5
- origin.y: 83
angle: clock.minutes * 6
Behavior on angle {
SpringAnimation {
@@ -92,14 +158,70 @@ SwipeViewPage {
}
}
- Image {
- x: 97.5
- y: 20
- source: UIStyle.imagePath("world-clock-second")
+ Shape {
+ id: secondHand
+ x: parent.width / 2
+ y: parent.width / 2
+ preferredRendererType: Shape.CurveRenderer
+
+ ShapePath {
+ fillColor: UIStyle.highlightColor
+ strokeWidth: 0
+
+ startX: 1
+ startY: 14
+ PathLine {
+ x: -1
+ y: 14
+ }
+ PathLine {
+ x: -1
+ y: -89
+ }
+ PathLine {
+ x: 1
+ y: -89
+ }
+ }
+
+ ShapePath {
+ fillColor: UIStyle.highlightColor
+ strokeWidth: 0
+
+ startX: 0
+ startY: 3
+ PathArc {
+ x: 0
+ y: -3
+ radiusX: 3
+ radiusY: 3
+ }
+ PathArc {
+ x: 0
+ y: 3
+ radiusX: 3
+ radiusY: 3
+ }
+ PathMove {
+ x: 0
+ y: -75
+ }
+ PathArc {
+ x: 0
+ y: -65
+ radiusX: 5
+ radiusY: 5
+ }
+ PathArc {
+ x: 0
+ y: -75
+ radiusX: 5
+ radiusY: 5
+ }
+ }
+
transform: Rotation {
- id: secondRotation
- origin.x: 2.5
- origin.y: 80
+ id: secondsRotation
angle: clock.seconds * 6
Behavior on angle {
SpringAnimation {
@@ -110,22 +232,17 @@ SwipeViewPage {
}
}
}
+ }
- Image {
- anchors.centerIn: background
- source: UIStyle.imagePath("world-clock-center")
- }
-
- Text {
- id: cityLabel
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 2
- anchors.horizontalCenter: parent.horizontalCenter
+ Text {
+ id: cityLabel
+ anchors.top: background.bottom
+ anchors.margins: 10
+ anchors.horizontalCenter: parent.horizontalCenter
- text: cityName
- color: UIStyle.themeColorQtGray1
- font.pixelSize: UIStyle.fontSizeXS
- font.letterSpacing: 2
- }
+ text: parent.cityName
+ color: UIStyle.textColor
+ font: UIStyle.h2
}
+
}
diff --git a/examples/quickcontrols/wearable/Wearable/DemoMode.qml b/examples/quickcontrols/wearable/Wearable/DemoMode.qml
index 7a35ba682c..aab47c226d 100644
--- a/examples/quickcontrols/wearable/Wearable/DemoMode.qml
+++ b/examples/quickcontrols/wearable/Wearable/DemoMode.qml
@@ -1,212 +1,173 @@
-// Copyright (C) 2018 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import WearableSettings
-import WearableStyle
Item {
- property StackView stackView
+ id: demoItem
+ required property StackView stackView
SequentialAnimation {
id: demoModeAnimation
+ loops: 2 //darkMode and lightMode
running: WearableSettings.demoMode
- // Set brightness back to normal.
- ScriptAction { script: WearableSettings.brightness = 0 }
-
// Go back to the launcher page.
PauseAnimation { duration: 1000 }
- ScriptAction { script: stackView.pop(null) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
PauseAnimation { duration: 2000 }
+
// Open the world clock page.
- ScriptAction { script: stackView.currentItem.launched("WorldClockPage.qml") }
+ ScriptAction { script: demoItem.stackView.currentItem.currentIndex = 0 }
+ PauseAnimation { duration: 1000 }
+ ScriptAction { script: demoItem.stackView.currentItem.launched(qsTr("World Clock"), "WorldClockPage.qml", "") }
PauseAnimation { duration: 2000 }
// Swipe across a few times.
SequentialAnimation {
loops: 6
- ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.children[0].incrementCurrentIndex() }
PauseAnimation { duration: 2500 }
}
-
// Go back to the launcher page.
- ScriptAction { script: stackView.pop(null) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
PauseAnimation { duration: 2000 }
+
+
// Open the navigation page.
- ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.incrementCurrentIndex() }
PauseAnimation { duration: 1000 }
- ScriptAction { script: stackView.currentItem.launched("NavigationPage.qml") }
+ ScriptAction { script: demoItem.stackView.currentItem.launched(qsTr("Navigation"), "NavigationPage.qml", "NavigationFallbackPage.qml") }
PauseAnimation { duration: 2000 }
- // Flick down a few times.
+ // Scroll through the route.
SequentialAnimation {
- loops: 6
+ loops: 23
- ScriptAction { script: stackView.currentItem.routeListView.incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.incrementPoint() }
PauseAnimation { duration: 2000 }
}
-
// Go back to the launcher page.
- ScriptAction { script: stackView.pop(null) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
PauseAnimation { duration: 2000 }
+
+
// Open the weather page.
- ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.incrementCurrentIndex() }
PauseAnimation { duration: 1000 }
- ScriptAction { script: stackView.currentItem.launched("WeatherPage.qml") }
+ ScriptAction { script: demoItem.stackView.currentItem.launched(qsTr("Weather"), "WeatherPage.qml", "") }
PauseAnimation { duration: 2000 }
- // Swipe across a few times.
+ // Flick down..
SequentialAnimation {
- loops: 4
-
- ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+ loops: 3
+ ScriptAction { script: demoItem.stackView.currentItem.children[0].flick(0, - 800) }
PauseAnimation { duration: 2000 }
}
-
// Go back to the launcher page.
- ScriptAction { script: stackView.pop(null) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
PauseAnimation { duration: 2000 }
+
+
// Open the fitness page.
- ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.incrementCurrentIndex() }
PauseAnimation { duration: 1000 }
- ScriptAction { script: stackView.currentItem.launched("FitnessPage.qml") }
+ ScriptAction { script: demoItem.stackView.currentItem.launched(qsTr("Fitness"), "FitnessPage.qml", "") }
PauseAnimation { duration: 2000 }
- // Swipe across a few times.
+ // Swipe across once.
SequentialAnimation {
- loops: 2
+ loops: 1
- ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.children[0].incrementCurrentIndex() }
PauseAnimation { duration: 2000 }
}
-
// Go back to the launcher page.
- ScriptAction { script: stackView.pop(null) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
PauseAnimation { duration: 2000 }
// Open the notifications page.
- ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.incrementCurrentIndex() }
PauseAnimation { duration: 1000 }
- ScriptAction { script: stackView.currentItem.launched("NotificationsPage.qml") }
-
- // Flick down a few times.
- SequentialAnimation {
- loops: 3
-
- PauseAnimation { duration: 2000 }
- ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
- }
-
+ ScriptAction { script: demoItem.stackView.currentItem.launched(qsTr("Notifications"), "NotificationsPage.qml", "") }
// Go back to the launcher page.
- ScriptAction { script: stackView.pop(null) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
PauseAnimation { duration: 2000 }
+
+
// Open the alarms page.
- ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.incrementCurrentIndex() }
PauseAnimation { duration: 1000 }
- ScriptAction { script: stackView.currentItem.launched("AlarmsPage.qml") }
+ ScriptAction { script: demoItem.stackView.currentItem.launched(qsTr("Alarm"), "AlarmsPage.qml", "") }
PauseAnimation { duration: 2000 }
// Toggle the switch.
- ScriptAction { script: stackView.currentItem.children[0].currentItem.stateSwitch.toggle() }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(0).onSwitch.toggle() }
+ PauseAnimation { duration: 500 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(1).onSwitch.toggle() }
PauseAnimation { duration: 2000 }
-
- // Go to the next alarm.
- ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(0).hourTumbler.currentIndex = 8 }
+ PauseAnimation { duration: 200 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(0).minuteTumbler.currentIndex = 15 }
+ PauseAnimation { duration: 300 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(1).hourTumbler.currentIndex = 9 }
+ PauseAnimation { duration: 200 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(1).minuteTumbler.currentIndex = 45 }
PauseAnimation { duration: 2000 }
-
- // Toggle the switch there too.
- ScriptAction { script: stackView.currentItem.children[0].currentItem.stateSwitch.toggle() }
+ ScriptAction { script: demoItem.stackView.currentItem.addAlarm() }
+ PauseAnimation { duration: 2000 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(2).onSwitch.toggle() }
+ PauseAnimation { duration: 100 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(0).onSwitch.toggle() }
+ PauseAnimation { duration: 100 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(1).onSwitch.toggle() }
+ PauseAnimation { duration: 2000 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(2).hourTumbler.currentIndex = 10 }
+ PauseAnimation { duration: 200 }
+ ScriptAction { script: demoItem.stackView.currentItem.alarmList.itemAtIndex(2).minuteTumbler.currentIndex = 30 }
PauseAnimation { duration: 2000 }
-
// Go back to the launcher page.
- ScriptAction { script: stackView.pop(null) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
PauseAnimation { duration: 2000 }
+
// Open the settings page.
- ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+ ScriptAction { script: demoItem.stackView.currentItem.incrementCurrentIndex() }
PauseAnimation { duration: 1000 }
- ScriptAction { script: stackView.currentItem.launched("SettingsPage.qml") }
+ ScriptAction { script: demoItem.stackView.currentItem.launched(qsTr("Settings"), "SettingsPage.qml", "") }
PauseAnimation { duration: 3000 }
// Toggle the switches.
- ScriptAction { script: stackView.currentItem.children[0].currentItem.bluetoothSwitch.toggle() }
+ ScriptAction { script: demoItem.stackView.currentItem.listView.brightnessItem.value = 80 }
+ PauseAnimation { duration: 1000 }
+ ScriptAction { script: demoItem.stackView.currentItem.listView.bluetoothItem.toggle() }
+ PauseAnimation { duration: 1000 }
+ ScriptAction { script: demoItem.stackView.currentItem.listView.wifiItem.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()
- }
- }
+ loops: 2
+ ScriptAction { script: demoItem.stackView.currentItem.children[0].flick(0, - 800) }
+ PauseAnimation { duration: 500 }
}
-
- // Increase the brightness back to full.
+ ScriptAction { script: demoItem.stackView.currentItem.listView.darkmodeItem.toggle() }
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) }
+ ScriptAction { script: demoItem.stackView.pop(null) }
}
}
diff --git a/examples/quickcontrols/wearable/Wearable/DemoModeIndicator.qml b/examples/quickcontrols/wearable/Wearable/DemoModeIndicator.qml
index 921ae32e57..3e3f090803 100644
--- a/examples/quickcontrols/wearable/Wearable/DemoModeIndicator.qml
+++ b/examples/quickcontrols/wearable/Wearable/DemoModeIndicator.qml
@@ -1,15 +1,18 @@
-// Copyright (C) 2018 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls as QQC2
import WearableStyle
+import QtQuick.Effects
Item {
- id: root
+ id: indicator
width: row.implicitWidth + margins * 2
+ height: row.implicitHeight + margins * 2
+
+ opacity: 0.8
- readonly property int topMargin: 24
readonly property int margins: 12
Behavior on y {
@@ -19,28 +22,35 @@ Item {
Rectangle {
id: demoModeIndicatorBg
anchors.fill: parent
- anchors.topMargin: -topMargin
radius: 20
color: UIStyle.colorRed
}
+ MultiEffect {
+ source: demoModeIndicatorBg
+ anchors.fill: parent
+ shadowEnabled: true
+ shadowBlur: 0.3
+ shadowHorizontalOffset: 2
+ shadowVerticalOffset: 2
+ opacity: 0.5
+ }
Row {
id: row
spacing: 8
anchors.fill: parent
- anchors.leftMargin: margins
- anchors.rightMargin: margins
+ anchors.leftMargin: parent.margins
+ anchors.rightMargin: parent.margins
Image {
- source: UIStyle.imagePath("settings-demo-mode-white")
- width: height
- height: instructionLabel.height * 2
+ source: UIStyle.iconPath("demomode")
anchors.verticalCenter: parent.verticalCenter
}
QQC2.Label {
id: instructionLabel
- text: "Tap screen to use"
- color: UIStyle.colorQtGray10
+ text: qsTr("Tap screen to use")
+ font: UIStyle.h3
+ color: UIStyle.textColor
anchors.verticalCenter: parent.verticalCenter
}
}
diff --git a/examples/quickcontrols/wearable/Wearable/FitnessPage.qml b/examples/quickcontrols/wearable/Wearable/FitnessPage.qml
index 4fd18d0ddb..245d501842 100644
--- a/examples/quickcontrols/wearable/Wearable/FitnessPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/FitnessPage.qml
@@ -1,13 +1,74 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls as QQC2
+import QtQuick.Shapes
import Wearable
import WearableStyle
+
import "fitness.js" as FitnessData
Item {
+
+ component AngularProgressBar : Shape {
+ id: apb
+ preferredRendererType: Shape.CurveRenderer
+
+ property real value: 0.5
+ property int rad: 75
+
+ ShapePath {
+ id: bgR
+ strokeColor: UIStyle.buttonBackground
+ strokeWidth: 8
+ capStyle: ShapePath.RoundCap
+ fillColor: "#00000000"
+ property real sA: (90 + 45) / 180 * Math.PI
+ property real eA: (360 + 45) / 180 * Math.PI
+ property real mA: (sA + eA) / 2
+ startX: apb.rad * Math.cos(bgR.sA)
+ startY: apb.rad * Math.sin(bgR.sA)
+ PathArc {
+ x: apb.rad * Math.cos(bgR.mA)
+ y: apb.rad * Math.sin(bgR.mA)
+ radiusX: apb.rad
+ radiusY: apb.rad
+ }
+ PathArc {
+ x: apb.rad * Math.cos(bgR.eA)
+ y: apb.rad * Math.sin(bgR.eA)
+ radiusX: apb.rad
+ radiusY: apb.rad
+ }
+ }
+
+ ShapePath {
+ id: fgR
+ strokeColor: UIStyle.buttonProgress
+ strokeWidth: 8
+ capStyle: ShapePath.RoundCap
+ fillColor: "#00000000"
+ property real sA: bgR.sA
+ property real eA: sA + (bgR.eA - sA) * apb.value
+ property real mA: (sA + eA) / 2
+ startX: apb.rad * Math.cos(fgR.sA)
+ startY: apb.rad * Math.sin(fgR.sA)
+ PathArc {
+ x: apb.rad * Math.cos(fgR.mA)
+ y: apb.rad * Math.sin(fgR.mA)
+ radiusX: apb.rad
+ radiusY: apb.rad
+ }
+ PathArc {
+ x: apb.rad * Math.cos(fgR.eA)
+ y: apb.rad * Math.sin(fgR.eA)
+ radiusX: apb.rad
+ radiusY: apb.rad
+ }
+ }
+ }
+
QQC2.SwipeView {
id: svFitnessContainer
@@ -16,27 +77,86 @@ Item {
SwipeViewPage {
id: fitnessPage1
- Column {
+ Image {
+ id: walkingDude
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
+ source: UIStyle.themeImagePath("fitness-man-walking")
+ }
+
+ AngularProgressBar {
+ anchors.horizontalCenter: walkingDude.horizontalCenter
+ anchors.bottom: walkingDude.bottom
+ anchors.horizontalCenterOffset: 40
+ value: FitnessData.getWalkingSteps() / FitnessData.getWalkingGoal()
+ }
+
+ Column {
+ anchors.top: walkingDude.bottom
+ anchors.topMargin: 15
+ anchors.horizontalCenter: parent.horizontalCenter
+
+ spacing: -7
+ Item {
+ width: childrenRect.width
+ height: childrenRect.height
+
+ Text {
+ id: steps
+ text: FitnessData.getWalkingSteps()
+ font: UIStyle.h2
+ color: UIStyle.textColor
+ }
+
+ Text {
+ anchors.bottom: steps.bottom
+ anchors.left: steps.right
+ anchors.leftMargin: 5
+ text: qsTr("steps")
+ font: UIStyle.p2
+ color: UIStyle.textColor
+ }
}
- Image {
- anchors.horizontalCenter: parent.horizontalCenter
- source: UIStyle.themeImagePath("fitness-man-walking")
+
+ Item {
+ width: childrenRect.width
+ height: childrenRect.height
+
+ Text {
+ id: time
+ text: FitnessData.getWalkingTime()
+ font: UIStyle.h2
+ color: UIStyle.textColor
+ }
+
+ Text {
+ anchors.bottom: time.bottom
+ anchors.left: time.right
+ anchors.leftMargin: 5
+ text: qsTr("min")
+ font: UIStyle.p2
+ color: UIStyle.textColor
+ }
}
- Text {
- anchors.horizontalCenter: parent.horizontalCenter
- text: qsTr("Calories: ") + FitnessData.getCalories()
- font.pixelSize: UIStyle.fontSizeS
- font.italic: true
- color: UIStyle.themeColorQtGray3
+
+ Item {
+ width: childrenRect.width
+ height: childrenRect.height
+
+ Text {
+ id: cal
+ text: FitnessData.getWalkingCalories()
+ font: UIStyle.h2
+ color: UIStyle.textColor
+ }
+
+ Text {
+ anchors.bottom: cal.bottom
+ anchors.left: cal.right
+ anchors.leftMargin: 5
+ text: qsTr("cal")
+ font: UIStyle.p2
+ color: UIStyle.textColor
+ }
}
}
}
@@ -44,31 +164,110 @@ Item {
SwipeViewPage {
id: fitnessPage2
- Column {
+ Image {
+ id: runningDude
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
+ source: UIStyle.themeImagePath("fitness-man-running")
+ }
+
+ AngularProgressBar {
+ anchors.horizontalCenter: runningDude.horizontalCenter
+ anchors.bottom: runningDude.bottom
+ anchors.horizontalCenterOffset: 40
+ value: FitnessData.getRunningDistance() / FitnessData.getRunningGoal()
+ }
+
+ Row {
+ anchors.top: runningDude.bottom
+ anchors.horizontalCenter: runningDude.horizontalCenter
+ anchors.topMargin: 15
+
+ spacing: 10
+
+ Item {
+ width: childrenRect.width
+ height: childrenRect.height
+
+ Text {
+ id: goal
+ text: qsTr("Goal")
+ font: UIStyle.p2
+ color: UIStyle.textColor
+ }
+ Text {
+ anchors.bottom: goal.bottom
+ anchors.left: goal.right
+ anchors.leftMargin: 5
+ text: FitnessData.getRunningGoal() + " km"
+ font: UIStyle.h2
+ color: UIStyle.textColor
+ }
}
- Image {
- anchors.horizontalCenter: parent.horizontalCenter
- source: UIStyle.themeImagePath("fitness-man-running")
+
+ Rectangle {
+ width: 1
+ height: 75
+ color: UIStyle.textColor
}
- Text {
- anchors.horizontalCenter: parent.horizontalCenter
- text: qsTr("Time: ")
- + FitnessData.getTime()
- + qsTr(" mins")
- font.pixelSize: UIStyle.fontSizeS
- font.italic: true
- color: UIStyle.themeColorQtGray3
+
+ Column {
+ spacing: -7
+ Item {
+ width: childrenRect.width
+ height: childrenRect.height
+ Text {
+ id: distance
+ text: qsTr("Distance")
+ font: UIStyle.p2
+ color: UIStyle.textColor
+ }
+ Text {
+ anchors.bottom: distance.bottom
+ anchors.left: distance.right
+ anchors.leftMargin: 5
+ text: FitnessData.getRunningDistance() + " km"
+ font: UIStyle.h2
+ color: UIStyle.textColor
+ }
+ }
+
+ Item {
+ width: childrenRect.width
+ height: childrenRect.height
+ Text {
+ id: runningtime
+ text: FitnessData.getRunningTime()
+ font: UIStyle.h2
+ color: UIStyle.textColor
+ }
+ Text {
+ anchors.bottom: runningtime.bottom
+ anchors.left: runningtime.right
+ anchors.leftMargin: 5
+ text: "min"
+ font: UIStyle.p2
+ color: UIStyle.textColor
+ }
+ }
+
+ Item {
+ width: childrenRect.width
+ height: childrenRect.height
+ Text {
+ id: runningcal
+ text: FitnessData.getRunningCalories()
+ font: UIStyle.h2
+ color: UIStyle.textColor
+ }
+ Text {
+ anchors.bottom: runningcal.bottom
+ anchors.left: runningcal.right
+ anchors.leftMargin: 5
+ text: qsTr("calories")
+ font: UIStyle.p2
+ color: UIStyle.textColor
+ }
+ }
}
}
}
diff --git a/examples/quickcontrols/wearable/Wearable/LauncherPage.qml b/examples/quickcontrols/wearable/Wearable/LauncherPage.qml
index 424c711447..4c3e423e90 100644
--- a/examples/quickcontrols/wearable/Wearable/LauncherPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/LauncherPage.qml
@@ -1,88 +1,129 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+pragma ComponentBehavior: Bound
+
import QtQuick
import QtQuick.Controls as QQC2
import WearableStyle
+//! [LauncherPage start]
PathView {
id: circularView
- signal launched(string page)
+ signal launched(string title, string page, string fallbackpage)
+//! [LauncherPage start]
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
+ readonly property int itemSize: size / 5
+ readonly property int radius: size / 2 - itemSize / 4
snapMode: PathView.SnapToItem
+//! [Model start]
model: ListModel {
+//! [Model start]
ListElement {
title: qsTr("World Clock")
- icon: "worldclock"
+ pageIcon: "clock"
page: "WorldClockPage.qml"
+ fallback: ""
}
+//! [Model mid]
ListElement {
title: qsTr("Navigation")
- icon: "navigation"
+ pageIcon: "maps"
page: "NavigationPage.qml"
+ fallback: "NavigationFallbackPage.qml"
}
+//! [Model mid]
ListElement {
title: qsTr("Weather")
- icon: "weather"
+ pageIcon: "weather"
page: "WeatherPage.qml"
+ fallback: "WeatherPage.qml"
}
ListElement {
title: qsTr("Fitness")
- icon: "fitness"
+ pageIcon: "hearth"
page: "FitnessPage.qml"
+ fallback: ""
}
ListElement {
title: qsTr("Notifications")
- icon: "notifications"
+ pageIcon: "notification"
page: "NotificationsPage.qml"
+ fallback: ""
}
ListElement {
title: qsTr("Alarm")
- icon: "alarms"
+ pageIcon: "bell"
page: "AlarmsPage.qml"
+ fallback: ""
}
+//! [Model end]
ListElement {
title: qsTr("Settings")
- icon: "settings"
+ pageIcon: "settings"
page: "SettingsPage.qml"
+ fallback: ""
}
}
+//! [Model end]
+//! [Delegate start]
delegate: QQC2.RoundButton {
+//! [Delegate start]
width: circularView.itemSize
height: circularView.itemSize
- property string title: model.title
+ required property string title
+ required property string pageIcon
+ required property string page
+ required property string fallback
+ required property int index
+//! [Delegate mid]
icon.width: 36
icon.height: 36
- icon.name: model.icon
- icon.color: UIStyle.colorQtGray1
- opacity: PathView.itemOpacity
+ icon.source: UIStyle.iconPath(pageIcon)
+ icon.color: UIStyle.textColor
+//! [Delegate mid]
padding: 12
background: Rectangle {
radius: width / 2
- color: UIStyle.colorQtGray10
- border.width: 3
- border.color: parent.PathView.isCurrentItem ? UIStyle.colorQtPrimGreen : UIStyle.themeColorQtGray4
- }
-
+ color: parent.PathView.isCurrentItem ? UIStyle.highlightColor : UIStyle.buttonBackground
+ border.width: 1
+ border.color: UIStyle.buttonGrayOutLine
+
+ Rectangle {
+ radius: parent.radius
+ anchors.fill: parent
+ gradient: Gradient {
+ GradientStop {
+ position: 0.0
+ color: UIStyle.gradientOverlay1
+ }
+ GradientStop {
+ position: 1.0
+ color: UIStyle.gradientOverlay2
+ }
+ }
+ }
+ }
+
+//! [Delegate end]
onClicked: {
if (PathView.isCurrentItem)
- circularView.launched(Qt.resolvedUrl(page))
+ circularView.launched(title, Qt.resolvedUrl(page), Qt.resolvedUrl(fallback))
else
circularView.currentIndex = index
}
}
+//! [Delegate end]
path: Path {
startX: circularView.cX
@@ -134,11 +175,11 @@ PathView {
text: currentItem ? currentItem.title : ""
anchors.centerIn: parent
- anchors.verticalCenterOffset: (circularView.itemSize + height) / 2
+ anchors.verticalCenterOffset: circularView.itemSize / 2 + height / 2
- font.bold: true
- font.pixelSize: circularView.itemSize / 3
- font.letterSpacing: 1
- color: UIStyle.themeColorQtGray1
+ font: UIStyle.h1
+ color: UIStyle.textColor
}
+//! [LauncherPage end]
}
+//! [LauncherPage end]
diff --git a/examples/quickcontrols/wearable/Wearable/ListHeaderItem.qml b/examples/quickcontrols/wearable/Wearable/ListHeaderItem.qml
new file mode 100644
index 0000000000..3cf82ff211
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/ListHeaderItem.qml
@@ -0,0 +1,83 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Shapes
+import QtQuick.Effects
+import WearableStyle
+
+Item {
+ Rectangle {
+ id: listitem
+ width: parent.width
+ height: parent.height
+
+ radius: 8
+ color: UIStyle.listItemBackground
+
+ Shape {
+ id: header
+ property int ra: parent.radius
+ property int h: 28
+ property int w: parent.width
+
+ preferredRendererType: Shape.CurveRenderer
+
+ ShapePath { //Shape because Rectangle does not support diagonal gradient
+ strokeWidth: 0
+
+ startX: 0
+ startY: header.ra
+
+ PathArc {
+ x: header.ra
+ y: 0
+ radiusX: header.ra
+ radiusY: header.ra
+ }
+ PathLine {
+ x: header.w - header.ra
+ y: 0
+ }
+ PathArc {
+ x: header.w
+ y: header.ra
+ radiusX: header.ra
+ radiusY: header.ra
+ }
+ PathLine {
+ x: header.w
+ y: header.h
+ }
+ PathLine {
+ x: 0
+ y: header.h
+ }
+ fillGradient: LinearGradient {
+ x1: 0
+ y1: 0
+ x2: 2
+ y2: 1.3 * header.h
+ GradientStop {
+ position: 0.0
+ color: UIStyle.listHeader1
+ }
+ GradientStop {
+ position: 1.0
+ color: UIStyle.listHeader2
+ }
+ }
+ }
+ }
+ }
+
+ MultiEffect {
+ source: listitem
+ anchors.fill: parent
+ shadowEnabled: true
+ shadowBlur: 0.3
+ shadowHorizontalOffset: 2
+ shadowVerticalOffset: 2
+ opacity: 0.5
+ }
+}
diff --git a/examples/quickcontrols/wearable/Wearable/ListItem.qml b/examples/quickcontrols/wearable/Wearable/ListItem.qml
new file mode 100644
index 0000000000..b935a4c728
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/ListItem.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Effects
+import WearableStyle
+
+Item {
+ Rectangle {
+ id: listitem
+ width: parent.width
+ height: parent.height
+ radius: 8
+ color: UIStyle.listItemBackground
+ }
+
+ MultiEffect {
+ source: listitem
+ anchors.fill: parent
+ shadowEnabled: true
+ shadowBlur: 0.3
+ shadowHorizontalOffset: 2
+ shadowVerticalOffset: 2
+ opacity: 0.5
+ }
+}
diff --git a/examples/quickcontrols/wearable/Wearable/Main.qml b/examples/quickcontrols/wearable/Wearable/Main.qml
index ae9d800dc0..4bd2d268ac 100644
--- a/examples/quickcontrols/wearable/Wearable/Main.qml
+++ b/examples/quickcontrols/wearable/Wearable/Main.qml
@@ -1,67 +1,115 @@
// 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 QtQuick.Shapes
import WearableSettings
import WearableStyle
+//! [window start]
QQC2.ApplicationWindow {
id: window
+//! [window start]
visible: true
- width: 320
- height: 320
+ width: 380
+ height: 380
title: qsTr("Wearable")
- background: Image {
- source: UIStyle.themeImagePath("background")
- width : parent.width
- height : parent.height
- }
+ background: Shape {//Shape because Rectangle does not support diagonal gradient
+ preferredRendererType: Shape.CurveRenderer
- header: NaviButton {
- id: homeButton
- edge: Qt.TopEdge
- enabled: stackView.depth > 1
- imageSource: UIStyle.imagePath("home")
+ ShapePath {
+ strokeWidth: 0
+ startX: 0; startY: 0
- onClicked: stackView.pop(null)
- }
-
- footer: NaviButton {
- id: backButton
- edge: Qt.BottomEdge
- enabled: stackView.depth > 1
- imageSource: UIStyle.imagePath("back")
-
- onClicked: stackView.pop()
+ PathLine {
+ x: window.width
+ y: 0
+ }
+ PathLine {
+ x: window.width
+ y: window.height
+ }
+ PathLine {
+ x: 0
+ y: window.height
+ }
+ fillGradient: LinearGradient {
+ x1: window.width / 3
+ y1: 0
+ x2: window.width
+ y2: 1.3 * window.height
+ GradientStop {
+ position: 0.0
+ color: UIStyle.background1
+ }
+ GradientStop {
+ position: 0.5
+ color: UIStyle.background2
+ }
+ GradientStop {
+ position: 1.0
+ color: UIStyle.background3
+ }
+ }
+ }
}
+//! [stackview start]
QQC2.StackView {
id: stackView
+//! [stackview start]
- focus: true
anchors.fill: parent
+ focus: true
+
+//! [onLaunched connection]
initialItem: LauncherPage {
- onLaunched: (page) => stackView.push(page)
+ onLaunched: (title, page, fallback) => {
+ var createdPage = Qt.createComponent(page)
+ if (createdPage.status !== Component.Ready)
+ createdPage = Qt.createComponent(fallback)
+ stackView.push(createdPage)
+ header.title = title
+ }
}
+//! [onLaunched connection]
+//! [stackview end]
+ }
+
+//! [stackview end]
+ MenuHeader {
+ id: header
+
+ anchors.top: parent.top
+ width: parent.width
+
+ title: ""
+
+ enabled: stackView.depth > 1
+
+ onBackClicked: stackView.pop()
}
+//! [DemoMode]
DemoMode {
stackView: stackView
}
+//! [DemoMode]
+//! [DemoModeIndicator]
DemoModeIndicator {
id: demoModeIndicator
- y: WearableSettings.demoMode ? -height : -height * 2
+ y: WearableSettings.demoMode ? header.height + 3 : -height - 5
anchors.horizontalCenter: parent.horizontalCenter
- height: header.height
- z: window.header.z + 1
+ z: header.z + 1
}
+//! [DemoModeIndicator]
+//! [MouseArea]
MouseArea {
enabled: WearableSettings.demoMode
anchors.fill: parent
@@ -71,4 +119,7 @@ QQC2.ApplicationWindow {
stackView.pop(null)
}
}
+//! [MouseArea]
+//! [window end]
}
+//! [window end]
diff --git a/examples/quickcontrols/wearable/Wearable/MenuHeader.qml b/examples/quickcontrols/wearable/Wearable/MenuHeader.qml
new file mode 100644
index 0000000000..ade7cabe12
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/MenuHeader.qml
@@ -0,0 +1,92 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import WearableStyle
+import QtQuick.Shapes
+
+Item {
+ id: header
+ property alias title: labelText.text
+ signal backClicked()
+
+ height: 50
+
+ Shape {//Shape because Rectangle does not support diagonal gradient
+ id: background
+ preferredRendererType: Shape.CurveRenderer
+
+ ShapePath {
+ strokeWidth: 0
+
+ startX: 0
+ startY: 0
+ PathLine {
+ x: header.width
+ y: 0
+ }
+ PathLine {
+ x: header.width
+ y: header.height
+ }
+ PathLine {
+ x: 0
+ y: header.height
+ }
+ fillGradient: LinearGradient {
+ x1: header.width / 3
+ y1: 0
+ x2: header.width
+ y2: 1.3 * header.parent.height
+ GradientStop {
+ position: 0.0
+ color: UIStyle.background1
+ }
+ GradientStop {
+ position: 0.5
+ color: UIStyle.background2
+ }
+ GradientStop {
+ position: 1.0
+ color: UIStyle.background3
+ }
+ }
+ }
+ }
+
+ QQC2.AbstractButton {
+ id: backButton
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.topMargin: 0
+ anchors.leftMargin: 0
+
+ width: height
+ height: 40
+
+ onClicked: header.backClicked()
+
+ Image {
+ width: 40
+ height: 40
+ anchors.centerIn: parent
+ source: UIStyle.iconPath("back")
+ }
+ }
+
+ QQC2.Label {
+ id: labelText
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.horizontalCenter: parent.horizontalCenter
+ color: UIStyle.textColor
+ font: UIStyle.h2
+ }
+
+ transform: Translate {
+ Behavior on y { NumberAnimation { } }
+ y: header.enabled ? 0 : -52
+ }
+
+
+}
diff --git a/examples/quickcontrols/wearable/Wearable/NaviButton.qml b/examples/quickcontrols/wearable/Wearable/NaviButton.qml
deleted file mode 100644
index 112a1332b4..0000000000
--- a/examples/quickcontrols/wearable/Wearable/NaviButton.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-// 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 WearableStyle
-
-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/Wearable/NavigationFallbackPage.qml b/examples/quickcontrols/wearable/Wearable/NavigationFallbackPage.qml
new file mode 100644
index 0000000000..d72f22655f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/NavigationFallbackPage.qml
@@ -0,0 +1,100 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import WearableStyle
+import QtQuick.Effects
+
+import "navigation.js" as NavigationData
+
+Item {
+ id: navigationPage
+
+ Image {
+ id: view
+ anchors.fill: parent
+ source: "qrc:/qt/qml/Wearable/images/fallbackmap.png"
+
+ Item {
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.margins: 10
+ anchors.topMargin: 60
+
+ height: dummyWarning.implicitHeight + 20
+
+ opacity: 0.8
+
+ Rectangle {
+ id: dummyWarningBg
+ anchors.fill: parent
+ radius: 20
+ color: UIStyle.colorRed
+ }
+
+ MultiEffect {
+ source: dummyWarningBg
+ anchors.fill: parent
+ shadowEnabled: true
+ shadowBlur: 0.3
+ shadowHorizontalOffset: 2
+ shadowVerticalOffset: 2
+ opacity: 0.5
+ }
+
+ Text {
+ id: dummyWarning
+ text: qsTr("Fallback mode. Install QtLocation for the real mapping experience.")
+ font: UIStyle.h3
+ color: UIStyle.textColor
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.top: parent.top
+ anchors.margins: 10
+ wrapMode: Text.WordWrap
+ horizontalAlignment: Text.AlignHCenter
+ }
+ }
+
+ }
+
+ ListModel {
+ id: routeInfoModel
+ }
+
+ ListView {
+ id: routeView
+
+ height: 90
+ anchors.bottom: navigationPage.bottom
+ anchors.left: navigationPage.left
+ anchors.right: navigationPage.right
+ anchors.rightMargin: 10
+ anchors.leftMargin: 15
+ anchors.bottomMargin: 20
+
+ spacing: 12
+
+ clip: true
+ focus: true
+
+ boundsBehavior: Flickable.StopAtBounds
+ snapMode: ListView.SnapToItem
+
+ property int centeredIndex: 0
+
+ model: routeInfoModel
+
+ delegate: RouteElement {
+ width: routeView.width - 10
+ height: routeView.height - 10
+ }
+ }
+
+ Component.onCompleted: {
+ NavigationData.requestNavigationRoute(routeInfoModel)
+ }
+}
diff --git a/examples/quickcontrols/wearable/Wearable/NavigationPage.qml b/examples/quickcontrols/wearable/Wearable/NavigationPage.qml
index d707a8ecdc..a83d7c137b 100644
--- a/examples/quickcontrols/wearable/Wearable/NavigationPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/NavigationPage.qml
@@ -1,73 +1,228 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+pragma ComponentBehavior: Bound
+
import QtQuick
+import QtLocation
+import QtPositioning
import WearableStyle
-import "navigation.js" as NavigationData
Item {
- property alias routeListView: routeView
+ id: navigationPage
- Column {
+ MapView {
+ id: view
anchors.fill: parent
- anchors.margins: 2
- spacing: 2
- Rectangle {
- anchors.horizontalCenter: parent.horizontalCenter
- width: parent.width
- height: titleRow.height
+ map.plugin: Plugin {
+ name: "osm"
+ }
+ map.zoomLevel: 16
+
+ RouteModel {
+ id: routeModel
+ plugin : view.map.plugin
+ query: RouteQuery {
+ id: routeQuery
+ }
+ onStatusChanged: {
+ if (status == RouteModel.Ready) {
+ routeInfoModel.populate()
+ }
+ }
+ }
+
+ property real lat: 59.9485
+ property real lon: 10.7686
+
+ map.center: QtPositioning.coordinate(lat, lon)
+
+ Behavior on lon { PropertyAnimation { duration: 500; easing.type: Easing.InOutQuad } }
+ Behavior on lat { PropertyAnimation { duration: 500; easing.type: Easing.InOutQuad } }
+
+
+ MapItemView {
+ parent: view.map
+ model: routeModel
+ delegate: MapRoute {
+ id: route
+
+ required property var routeData
+ route: routeData
+ line.color: UIStyle.highlightColor
+ line.width: 5
+ smooth: true
+ opacity: 1
+ }
+ autoFitViewport: true
+ }
+
+ Component.onCompleted: {
+ var startCoordinate = QtPositioning.coordinate(59.9485, 10.7686);
+ var endCoordinate = QtPositioning.coordinate(59.9645, 10.671);
+
+ routeQuery.clearWaypoints();
+ routeQuery.addWaypoint(startCoordinate)
+ routeQuery.addWaypoint(endCoordinate)
+ routeQuery.travelModes = RouteQuery.CarTravel
+ routeQuery.routeOptimizations = RouteQuery.FastestRoute
+
+ routeModel.update();
+ }
+ }
+
+ ListModel {
+ id: routeInfoModel
- color: UIStyle.themeColorQtGray9
+ function formatIconInstruction(direction)
+ {
+ switch (direction){
+ case RouteManeuver.NoDirection:
+ return "";
+ case RouteManeuver.DirectionForward:
+ return "forward";
+ case RouteManeuver.DirectionBearRight:
+ return "bearright";
+ case RouteManeuver.DirectionRight:
+ case RouteManeuver.DirectionHardRight:
+ return "right";
+ case RouteManeuver.DirectionLightRight:
+ return "lightright";
+ case RouteManeuver.DirectionUTurnRight:
+ return "uturnright";
+ case RouteManeuver.DirectionUTurnLeft:
+ return "uturleft";
+ case RouteManeuver.DirectionHardLeft:
+ case RouteManeuver.DirectionLeft:
+ return "left";
+ case RouteManeuver.DirectionLightLeft:
+ return "lightleft";
+ case RouteManeuver.DirectionBearLeft:
+ return "bearleft";
+ }
+ }
- Row {
- id: titleRow
- spacing: 10
- anchors.centerIn: parent
+ function formatShortInstruction(direction)
+ {
+ switch (direction){
+ case RouteManeuver.NoDirection:
+ return "";
+ case RouteManeuver.DirectionForward:
+ return "Move forward";
+ case RouteManeuver.DirectionBearRight:
+ return "Bear right";
+ case RouteManeuver.DirectionRight:
+ return "Turn right";
+ case RouteManeuver.DirectionHardRight:
+ return "Turn hard right";
+ case RouteManeuver.DirectionLightRight:
+ return "Turn slightly right";
+ case RouteManeuver.DirectionUTurnRight:
+ return "Uturn right";
+ case RouteManeuver.DirectionUTurnLeft:
+ return "Uturn left";
+ case RouteManeuver.DirectionHardLeft:
+ return "Turn hard left";
+ case RouteManeuver.DirectionLeft:
+ return "Turn left";
+ case RouteManeuver.DirectionLightLeft:
+ return "Turn slightly left";
+ case RouteManeuver.DirectionBearLeft:
+ return "Bear left";
+ }
+ }
- Image {
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("navigation")
- fillMode: Image.PreserveAspectCrop
+ function formatTime(sec)
+ {
+ var value = sec
+ var seconds = value % 60
+ value /= 60
+ value = (value > 1) ? Math.round(value) : 0
+ var minutes = value % 60
+ value /= 60
+ value = (value > 1) ? Math.round(value) : 0
+ var hours = value
+ if (hours > 0) value = hours + "h:"+ minutes + "m"
+ else value = minutes + "min"
+ return value
+ }
+
+ function formatDistance(meters)
+ {
+ var dist = Math.round(meters)
+ if (dist > 1000 ){
+ if (dist > 100000){
+ dist = Math.round(dist / 1000)
}
- Text {
- anchors.verticalCenter: parent.verticalCenter
- text: qsTr("Walking")
- font.pixelSize: UIStyle.fontSizeM
- font.letterSpacing: 2
- color: UIStyle.themeColorQtGray2
+ else{
+ dist = Math.round(dist / 100)
+ dist = dist / 10
}
+ dist = dist + " km"
+ }
+ else{
+ dist = dist + " m"
}
+ return dist
}
- ListModel {
- id: routeModel
+ function populate()
+ {
+ routeInfoModel.clear()
+ if (routeModel.count > 0) {
+ for (var i = 0; i < routeModel.get(0).segments.length; i++) {
+ routeInfoModel.append({
+ "icon": formatIconInstruction(routeModel.get(0).segments[i].maneuver.direction),
+ "shortInfo": formatShortInstruction(routeModel.get(0).segments[i].maneuver.direction),
+ "instruction": routeModel.get(0).segments[i].maneuver.instructionText,
+ "distance": qsTr("in") + " " + formatDistance(routeModel.get(0).segments[i].maneuver.distanceToNextInstruction)
+ });
+ }
+ }
}
+ }
- ListView {
- id: routeView
-
- width: parent.width
- height: parent.height - titleRow.height - parent.spacing
- property var imageList: [UIStyle.themeImagePath("navigation-straight"),
- UIStyle.themeImagePath("navigation-leftturn"),
- UIStyle.themeImagePath("navigation-rightturn"),
- UIStyle.imagePath("navigation-uturn"),
- UIStyle.imagePath("navigation-start"),
- UIStyle.imagePath("navigation-end")]
-
- clip: true
- focus: true
- boundsBehavior: Flickable.StopAtBounds
- snapMode: ListView.SnapToItem
- model: routeModel
- delegate: RouteElement {
- width: routeView.width
- height: routeView.height
+ ListView {
+ id: routeView
+
+ height: 90
+ anchors.bottom: navigationPage.bottom
+ anchors.left: navigationPage.left
+ anchors.right: navigationPage.right
+ anchors.rightMargin: 10
+ anchors.leftMargin: 15
+ anchors.bottomMargin: 20
+
+ spacing: 12
+
+ clip: true
+ focus: true
+
+ boundsBehavior: Flickable.StopAtBounds
+ snapMode: ListView.SnapToItem
+
+ property int centeredIndex: 0
+
+ model: routeInfoModel
+ delegate: RouteElement {
+ width: routeView.width - 10
+ height: routeView.height - 10
+ }
+
+ onContentYChanged: {
+ centeredIndex = indexAt(10, contentY)
+ if (centeredIndex > -1) {
+ view.lat = routeModel.get(0).segments[centeredIndex].maneuver.position.latitude
+ view.lon = routeModel.get(0).segments[centeredIndex].maneuver.position.longitude
}
}
}
- Component.onCompleted: {
- NavigationData.requestNavigationRoute(routeModel)
+
+ function incrementPoint() {
+ routeView.centeredIndex++
+ if (routeView.centeredIndex >= routeInfoModel.count)
+ routeView.centeredIndex = 0
+ routeView.positionViewAtIndex(routeView.centeredIndex, ListView.Center)
}
}
diff --git a/examples/quickcontrols/wearable/Wearable/NotificationsPage.qml b/examples/quickcontrols/wearable/Wearable/NotificationsPage.qml
index fcc1ceb916..30c70f4a99 100644
--- a/examples/quickcontrols/wearable/Wearable/NotificationsPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/NotificationsPage.qml
@@ -1,65 +1,77 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
-import QtQuick.Controls as QQC2
import WearableStyle
import "notifications.js" as NotificationData
-ListView {
- id: missedCallsView
- clip: true
- focus: true
- boundsBehavior: Flickable.StopAtBounds
- snapMode: ListView.SnapToItem
+Item {
+ id: notificationpage
- model: ListModel {
- id: missedCallsList
- }
+ ListView {
+ id: listview
- Image {
- id: missedCallIcon
- width: parent.width / 2
- anchors.right: parent.horizontalCenter
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("notifications-missedcall")
- fillMode: Image.Pad
- }
+ anchors.fill: parent
+ anchors.margins: 15
+ anchors.topMargin: 40 + 15
+ spacing: 10
+ clip: false
- delegate: Item {
- height: missedCallsView.height
- width: missedCallsView.width / 2
- anchors.left: missedCallsView.contentItem.horizontalCenter
+ model: ListModel {
+ id: missedCallsList
+ }
- Column {
- spacing: 15
- anchors.verticalCenter: parent.verticalCenter
+ delegate: ListHeaderItem {
+ id: notificationItem
- Image {
- anchors.horizontalCenter: parent.horizontalCenter
- source: UIStyle.themeImagePath(`notifications-avatar${model.gender}`)
- }
+ required property string name
+ required property string date
+ required property string time
+ required property string text
- Text {
- text: model.name
- anchors.horizontalCenter: parent.horizontalCenter
- font.bold: true
- font.pixelSize: UIStyle.fontSizeS
- color: UIStyle.themeColorQtGray1
+ width: parent.width
+ height: 80
+
+ Item {
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 25
+ Text {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.margins: 10
+ text: notificationItem.name
+ color: UIStyle.titletextColor
+ font: UIStyle.h3
+ }
+ Text {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.margins: 10
+ text: notificationItem.date + " " + notificationItem.time
+ color: UIStyle.titletextColor
+ font: UIStyle.p1
+ }
}
+
Text {
- anchors.horizontalCenter: parent.horizontalCenter
- text: date + " " + time
- font.pixelSize: UIStyle.fontSizeXS
- font.italic: true
- color: UIStyle.themeColorQtGray2
+ anchors.fill: parent
+ anchors.margins: 10
+ anchors.topMargin: 30
+ text: notificationItem.text
+ wrapMode: Text.WordWrap
+ color: UIStyle.textColor
+ font: UIStyle.p1
+ lineHeight: UIStyle.p1lineHeight
+ lineHeightMode: Text.FixedHeight
}
}
- }
- Component.onCompleted: {
- NotificationData.populateData(missedCallsList)
+ Component.onCompleted: {
+ NotificationData.populateData(missedCallsList)
+ }
}
}
diff --git a/examples/quickcontrols/wearable/Wearable/RouteElement.qml b/examples/quickcontrols/wearable/Wearable/RouteElement.qml
index b4fdea2010..fe21b6af27 100644
--- a/examples/quickcontrols/wearable/Wearable/RouteElement.qml
+++ b/examples/quickcontrols/wearable/Wearable/RouteElement.qml
@@ -1,48 +1,70 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import WearableStyle
-Rectangle {
- color: UIStyle.themeColorQtGray8
+ListHeaderItem {
+ id: routeListItem
+ required property string icon
+ required property string shortInfo
+ required property string instruction
+ required property string distance
- Row {
- spacing: 5
- width: parent.width - 80
- anchors.centerIn: parent
+ Item {
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 28
Image {
- id: img
+ id: naviIcon
anchors.verticalCenter: parent.verticalCenter
- source: navImage
+ anchors.left: parent.left
+ anchors.margins: 5
+ height: 20
+ width: height
+ source: UIStyle.iconPath(routeListItem.icon)
fillMode: Image.PreserveAspectFit
}
- Column {
- spacing: 5
- width: parent.width - img.width
+ Text {
anchors.verticalCenter: parent.verticalCenter
+ anchors.left: naviIcon.right
+ anchors.margins: 5
+ wrapMode: Text.WordWrap
+ text: routeListItem.shortInfo
+ font: UIStyle.h3
+ verticalAlignment: Text.AlignVCenter
+ padding: 1
+ color: UIStyle.textColor
+ }
- 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
- }
+ Text {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.margins: 10
+ wrapMode: Text.WordWrap
+ text: routeListItem.distance
+ font: UIStyle.h3
+ verticalAlignment: Text.AlignVCenter
+ padding: 1
+ color: UIStyle.textColor
}
}
+
+ Text {
+ id: instructionText
+ anchors.fill: parent
+ anchors.margins: 5
+ anchors.topMargin: 25
+ wrapMode: Text.WordWrap
+ text: routeListItem.instruction
+ font: UIStyle.p1
+ lineHeight: UIStyle.p1lineHeight
+ lineHeightMode: Text.FixedHeight
+ verticalAlignment: Text.AlignVCenter
+ padding: 1
+ color: UIStyle.textColor
+ }
}
diff --git a/examples/quickcontrols/wearable/Wearable/SettingsPage.qml b/examples/quickcontrols/wearable/Wearable/SettingsPage.qml
index 968f5edb36..082893cef3 100644
--- a/examples/quickcontrols/wearable/Wearable/SettingsPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/SettingsPage.qml
@@ -1,129 +1,136 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
-import QtQuick.Controls as QQC2
import WearableStyle
import WearableSettings
Item {
+ id: settingspage
- QQC2.SwipeView {
- id: svSettingsContainer
+ property alias listView: listViewItem
- anchors.fill: parent
+ component SettingsItem: ListItem {
+ id: settingsItem
- 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("settings-bluetooth")
- }
- QQC2.Switch {
- id: bluetoothSwitch
- anchors.verticalCenter: parent.verticalCenter
- checked: WearableSettings.bluetooth
- onToggled: WearableSettings.bluetooth = checked
- }
- }
- Row {
- spacing: 50
- Image {
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("settings-wifi")
- }
- QQC2.Switch {
- id: wirelessSwitch
- anchors.verticalCenter: parent.verticalCenter
- checked: WearableSettings.wireless
- onToggled: WearableSettings.wireless = checked
- }
- }
- }
+ property string title
+ property string icon
+
+ Image {
+ id: itemIcon
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.margins: 15
+ source: UIStyle.iconPath(settingsItem.icon)
+ height: 40
+ width: 40
}
+ Text {
+ anchors.left: itemIcon.right
+ anchors.verticalCenter: itemIcon.verticalCenter
+ anchors.margins: 15
+ text: settingsItem.title
+ color: UIStyle.textColor
+ font: UIStyle.h3
+ }
+ }
- 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("settings-brightness")
- }
- QQC2.Slider {
- id: brightnessSlider
- anchors.horizontalCenter: parent.horizontalCenter
- from: 0
- to: 5
- stepSize: 1
- value: WearableSettings.brightness
- onMoved: WearableSettings.brightness = value
- }
- }
- Column {
- anchors.horizontalCenter: parent.horizontalCenter
-
- Image {
- anchors.horizontalCenter: parent.horizontalCenter
- source: UIStyle.themeImagePath("settings-theme")
- }
- QQC2.Switch {
- id: darkThemeSwitch
- anchors.horizontalCenter: parent.horizontalCenter
- checked: WearableSettings.darkTheme
- onToggled: WearableSettings.darkTheme = checked
- }
- }
- }
+ component SettingsBoolItem: SettingsItem {
+ height: 70
+
+ property alias checked: onSwitchItem.checked
+
+ Switch {
+ id: onSwitchItem
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: 15
+ onCheckedChanged: parent.onCheckedChanged()
}
+ function toggle() { onSwitchItem.toggle() }
+ signal onCheckedChanged()
- SwipeViewPage {
- id: settingsPage3
-
- Column {
- anchors.centerIn: parent
-
- Column {
- anchors.horizontalCenter: parent.horizontalCenter
- spacing: 6
-
- Image {
- anchors.horizontalCenter: parent.horizontalCenter
- source: UIStyle.themeImagePath("settings-demo-mode")
- }
- QQC2.Switch {
- id: demoModeSwitch
- anchors.horizontalCenter: parent.horizontalCenter
- checked: WearableSettings.demoMode
- onToggled: WearableSettings.demoMode = checked
- }
- }
- }
+ }
+
+ component SettingsIntItem: SettingsItem {
+ height: 110
+
+ property alias value: valueSliderItem.value
+
+ Slider {
+ id: valueSliderItem
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
+ anchors.margins: 15
+ from: 0
+ to: 100
+ onValueChanged: parent.onValueChanged()
}
+
+ signal onValueChanged()
}
- QQC2.PageIndicator {
- count: svSettingsContainer.count
- currentIndex: svSettingsContainer.currentIndex
+ Flickable {
+ id: listViewItem
- anchors.bottom: svSettingsContainer.bottom
- anchors.horizontalCenter: parent.horizontalCenter
+ anchors.fill: parent
+ anchors.margins: 15
+ anchors.topMargin: 40 + 15
+ contentHeight: content.height
+
+ // aliases for the demo mode
+ property alias brightnessItem: brightnessItem
+ property alias bluetoothItem: bluetoothItem
+ property alias wifiItem: wifiItem
+ property alias darkmodeItem: darkmodeItem
+ property alias demomodeItem: demomodeItem
+
+ Column {
+ id: content
+ spacing: 10
+ width: parent.width
+
+ SettingsIntItem {
+ id: brightnessItem
+ width: parent.width
+ title: qsTr("Brightness")
+ icon: "sun"
+ value: WearableSettings.brightness
+ onValueChanged: WearableSettings.brightness = value
+ }
+ SettingsBoolItem {
+ id: bluetoothItem
+ width: parent.width
+ title: qsTr("Bluetooth")
+ icon: "bluetooth"
+ checked: WearableSettings.bluetooth
+ onCheckedChanged: WearableSettings.bluetooth = checked
+ }
+ SettingsBoolItem {
+ id: wifiItem
+ width: parent.width
+ title: qsTr("Wi-Fi")
+ icon: "wifi"
+ checked: WearableSettings.wireless
+ onCheckedChanged: WearableSettings.wireless = checked
+ }
+ SettingsBoolItem {
+ id: darkmodeItem
+ width: parent.width
+ title: qsTr("Change theme")
+ icon: "darkmode"
+ checked: WearableSettings.darkTheme
+ onCheckedChanged: WearableSettings.darkTheme = checked
+ }
+ SettingsBoolItem {
+ id: demomodeItem
+ width: parent.width
+ title: qsTr("Demo mode")
+ icon: "demomode"
+ checked: WearableSettings.demoMode
+ onCheckedChanged: WearableSettings.demoMode = checked
+ }
+ }
}
}
diff --git a/examples/quickcontrols/wearable/Wearable/WeatherPage.qml b/examples/quickcontrols/wearable/Wearable/WeatherPage.qml
index dff09a8cc1..df0b6753e6 100644
--- a/examples/quickcontrols/wearable/Wearable/WeatherPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/WeatherPage.qml
@@ -1,232 +1,320 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
-import QtQuick.Controls as QQC2
-import Wearable
import WearableStyle
import "weather.js" as WeatherData
Item {
- QQC2.SwipeView {
- id: svWeatherContainer
+ Flickable {
+ id: flick
+ anchors.fill:parent
+ anchors.margins: 15
+ anchors.topMargin: 40 + 15
+ contentWidth: width
+ contentHeight: column.height
+
+ Column {
+ id: column
+ spacing: 10
+
+ Item {
+ width: flick.contentWidth
+ height: 100
- anchors.fill: parent
+ Row {
+ id: townName
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.top: parent.top
+ width: childrenRect.width
+ height: childrenRect.height
- SwipeViewPage {
- id: weatherPage1
+ spacing: 10
+ Image {
+ id: sunIcon
+ source: (wDataCntr.weatherData
+ && wDataCntr.weatherData.weather
+ && wDataCntr.weatherData.weather[0]
+ && wDataCntr.weatherData.weather[0].icon) ?
+ UIStyle.iconPath("weather-" + WeatherData.iconSelect(wDataCntr.weatherData.weather[0].icon)) : ""
+ width: 64
+ height: width
+ sourceSize.width: width
+ sourceSize.height: height
+ }
+ Text {
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.name) ?
+ wDataCntr.weatherData.name : ""
+ anchors.verticalCenter: sunIcon.verticalCenter
+ color: UIStyle.textColor
+ font: UIStyle.h1
+ }
+ }
+ Text {
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.top: townName.bottom
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.weather
+ && wDataCntr.weatherData.weather[0]
+ && wDataCntr.weatherData.weather[0].main) ?
+ wDataCntr.weatherData.weather[0].main : ""
+ color: UIStyle.textColor
+ font: UIStyle.h3
+ }
+ }
- Row {
- anchors.centerIn: parent
- spacing: 2
+ ListItem {
+ width: flick.contentWidth
+ height: 92
Image {
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("weather-temperature")
+ id: thermoimage
+ anchors.left: parent.left
+ anchors.top: parent.top
+ anchors.leftMargin: 20
+ anchors.topMargin: 17
+ source: UIStyle.iconPath("thermometer")
}
- Column {
- anchors.verticalCenter: parent.verticalCenter
- spacing: 40
+ Text {
+ anchors.left: thermoimage.right
+ anchors.verticalCenter: thermoimage.verticalCenter
+ anchors.leftMargin: 5
+ text: qsTr("Temperature")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
- 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 {
+ anchors.right: parent.right
+ anchors.verticalCenter: thermoimage.verticalCenter
+ anchors.rightMargin: 20
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.main
+ && wDataCntr.weatherData.main.temp) ?
+ WeatherData.formatTemp(wDataCntr.weatherData.main.temp) : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
+ }
- 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 {
+ id: maxtxt
+ anchors.left: parent.left
+ anchors.bottom: parent.bottom
+ anchors.leftMargin: 20
+ anchors.bottomMargin: 17
+ text: qsTr("Max")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
- 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
- }
+ Text {
+ anchors.left: maxtxt.right
+ anchors.verticalCenter: maxtxt.verticalCenter
+ anchors.leftMargin: 10
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.main
+ && wDataCntr.weatherData.main.temp_max) ?
+ WeatherData.formatTemp(wDataCntr.weatherData.main.temp_max) : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
}
- }
- }
- SwipeViewPage {
- id: weatherPage2
+ Text {
+ id: mintxt
+ anchors.horizontalCenter: maxtxt.horizontalCenter
+ anchors.verticalCenter: maxtxt.verticalCenter
+ anchors.horizontalCenterOffset: parent.width / 2
+ text: qsTr("Min")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
- Column {
- spacing: 40
- anchors.centerIn: parent
+ Text {
+ anchors.left: mintxt.right
+ anchors.verticalCenter: mintxt.verticalCenter
+ anchors.leftMargin: 10
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.main
+ && wDataCntr.weatherData.main.temp_min) ?
+ WeatherData.formatTemp(wDataCntr.weatherData.main.temp_min) : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
+ }
+ }
- Row {
- spacing: 20
- anchors.horizontalCenter: parent.horizontalCenter
+ ListItem {
+ width: flick.contentWidth
+ height: 50
- Image {
- id: wImg
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("weather-wind")
- }
+ Image {
+ id: sunriseIcon
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 20
+ anchors.topMargin: 17
+ source: UIStyle.iconPath("sunrise")
+ }
- 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
- }
+ Text {
+ id: sunriseText
+ anchors.left: sunriseIcon.right
+ anchors.verticalCenter: sunriseIcon.verticalCenter
+ anchors.leftMargin: 5
+ text: qsTr("Sunrise")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
+ Text {
+ anchors.left: sunriseText.right
+ anchors.verticalCenter: sunriseText.verticalCenter
+ anchors.leftMargin: 15
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.sys
+ && wDataCntr.weatherData.sys.sunrise) ?
+ WeatherData.getTimeHMS(wDataCntr.weatherData.sys.sunrise) : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
}
- Row {
- spacing: 20
- anchors.horizontalCenter: parent.horizontalCenter
+ Image {
+ id: sunsetIcon
+ anchors.right: sunsetText.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.rightMargin: 5
+ source: UIStyle.iconPath("sunset")
+ }
- Image {
- id: hImg
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("weather-humidity")
- }
+ Text {
+ id: sunsetText
+ anchors.right: sunsetValue.left
+ anchors.verticalCenter: sunsetIcon.verticalCenter
+ anchors.rightMargin: 15
+ text: qsTr("Sunset")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
- 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
- }
+ Text {
+ id: sunsetValue
+ anchors.right: parent.right
+ anchors.verticalCenter: sunsetText.verticalCenter
+ anchors.rightMargin: 20
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.sys
+ && wDataCntr.weatherData.sys.sunset) ?
+ WeatherData.getTimeHMS(wDataCntr.weatherData.sys.sunset) : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
}
}
- }
-
- SwipeViewPage {
- id: weatherPage3
- Row {
- anchors.centerIn: parent
- spacing: 10
+ ListItem {
+ width: flick.contentWidth
+ height: 50
Image {
+ id: windIcon
+ anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("weather-pressure")
+ anchors.leftMargin: 20
+ anchors.topMargin: 17
+ source: UIStyle.iconPath("wind")
}
- Column {
+ Text {
+ id: windText
+ anchors.left: windIcon.right
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
- }
+ anchors.leftMargin: 5
+ text: qsTr("Wind")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
- 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
- }
+ Text {
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.rightMargin: 20
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.wind
+ && wDataCntr.weatherData.wind.speed) ?
+ Math.round(wDataCntr.weatherData.wind.speed * 1.61) + " km/h" : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
}
}
- }
-
- SwipeViewPage {
- id: weatherPage4
- Column {
- spacing: 40
- anchors.centerIn: parent
+ ListItem {
+ width: flick.contentWidth
+ height: 50
- Row {
- spacing: 30
- anchors.horizontalCenter: parent.horizontalCenter
+ Image {
+ id: humidityIcon
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 20
+ anchors.topMargin: 17
+ source: UIStyle.iconPath("drop")
+ }
- Image {
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("weather-sunrise")
- }
+ Text {
+ id: humidityText
+ anchors.left: humidityIcon.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 5
+ text: qsTr("Humidity")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
- 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
- }
+ Text {
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.rightMargin: 20
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.main
+ && wDataCntr.weatherData.main.humidity) ?
+ wDataCntr.weatherData.main.humidity + " %" : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
}
+ }
- Row {
- spacing: 30
- anchors.horizontalCenter: parent.horizontalCenter
+ ListItem {
+ width: flick.contentWidth
+ height: 50
- Image {
- anchors.verticalCenter: parent.verticalCenter
- source: UIStyle.themeImagePath("weather-sunset")
- }
+ Image {
+ id: pressureIcon
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 20
+ anchors.topMargin: 17
+ source: UIStyle.iconPath("pressure")
+ }
- 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
- }
+ Text {
+ id: pressureText
+ anchors.left: pressureIcon.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 5
+ text: qsTr("HPA")
+ font: UIStyle.h4
+ color: UIStyle.textColor
+ }
+
+ Text {
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.rightMargin: 20
+ text: (wDataCntr.weatherData
+ && wDataCntr.weatherData.main
+ && wDataCntr.weatherData.main.pressure) ?
+ Math.round(wDataCntr.weatherData.main.pressure) + " hpa" : ""
+ font: UIStyle.h3
+ color: UIStyle.textColor
}
}
}
@@ -236,14 +324,6 @@ Item {
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/Wearable/WorldClockPage.qml b/examples/quickcontrols/wearable/Wearable/WorldClockPage.qml
index 2d22da83b0..c90442eeac 100644
--- a/examples/quickcontrols/wearable/Wearable/WorldClockPage.qml
+++ b/examples/quickcontrols/wearable/Wearable/WorldClockPage.qml
@@ -1,9 +1,8 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls as QQC2
-import WearableStyle
Item {
QQC2.SwipeView {
@@ -15,31 +14,31 @@ Item {
id: placesList
ListElement {
cityName: "New York"
- timeShift: -4
+ shift: -4
}
ListElement {
cityName: "London"
- timeShift: 0
+ shift: 0
}
ListElement {
cityName: "Oslo"
- timeShift: 1
+ shift: 1
}
ListElement {
cityName: "Mumbai"
- timeShift: 5.5
+ shift: 5.5
}
ListElement {
cityName: "Tokyo"
- timeShift: 9
+ shift: 9
}
ListElement {
cityName: "Brisbane"
- timeShift: 10
+ shift: 10
}
ListElement {
cityName: "Los Angeles"
- timeShift: -8
+ shift: -8
}
}
diff --git a/examples/quickcontrols/wearable/Wearable/fallbackroute.json b/examples/quickcontrols/wearable/Wearable/fallbackroute.json
new file mode 100644
index 0000000000..b7aa5f4a9e
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/fallbackroute.json
@@ -0,0 +1,78 @@
+{
+ "route": {
+ "steps": [
+ {"direction": 4,
+ "instructionText": "Head South onto Sandakerveien",
+ "distanceToNextInstruction": 176.5 },
+ {"direction": 3,
+ "instructionText": "Enter the roundabout and take the first exit onto Kristoffer Aamots gate",
+ "distanceToNextInstruction": 3.5 },
+ {"direction": 4,
+ "instructionText": "exit roundabout to/onto Kristoffer Aamots gate",
+ "distanceToNextInstruction": 434.2 },
+ {"direction": 3,
+ "instructionText": "Enter the roundabout and take the second exit onto Kristoffer Aamots gate",
+ "distanceToNextInstruction": 26.5 },
+ {"direction": 3,
+ "instructionText": "exit roundabout to/onto Kristoffer Aamots gate",
+ "distanceToNextInstruction": 183.4 },
+ {"direction": 3,
+ "instructionText": "Enter the roundabout and take the first exit onto Maridalsveien",
+ "distanceToNextInstruction": 3.4 },
+ {"direction": 4,
+ "instructionText": "exit roundabout to/onto Maridalsveien",
+ "distanceToNextInstruction": 796.2 },
+ {"direction": 3,
+ "instructionText": "Enter the roundabout and take the second exit",
+ "distanceToNextInstruction": 38 },
+ {"direction": 1,
+ "instructionText": "exit roundabout to/onto ",
+ "distanceToNextInstruction": 220.9 },
+ {"direction": 10,
+ "instructionText": "Merge slightly left on TÃ¥sentunnelen",
+ "distanceToNextInstruction": 1041.4 },
+ {"direction": 1,
+ "instructionText": "Continue straight onto Torgny Segerstedts vei",
+ "distanceToNextInstruction": 1435.2 },
+ {"direction": 3,
+ "instructionText": "Take the ramp on the right",
+ "distanceToNextInstruction": 340.8 },
+ {"direction": 3,
+ "instructionText": "Turn slightly right onto Slemdalsveien",
+ "distanceToNextInstruction": 1073.2 },
+ {"direction": 4,
+ "instructionText": "Continue right onto Risalléen",
+ "distanceToNextInstruction": 303.7 },
+ {"direction": 1,
+ "instructionText": "Continue straight onto Frognerseterveien",
+ "distanceToNextInstruction": 943.6 },
+ {"direction": 1,
+ "instructionText": "Continue straight onto Ankerveien",
+ "distanceToNextInstruction": 731.3 },
+ {"direction": 4,
+ "instructionText": "Turn right onto Holmenkollveien",
+ "distanceToNextInstruction": 125 },
+ {"direction": 4,
+ "instructionText": "Continue right onto Holmenkollveien",
+ "distanceToNextInstruction": 116.7 },
+ {"direction": 9,
+ "instructionText": "Continue left onto Holmenkollveien",
+ "distanceToNextInstruction": 593.6 },
+ {"direction": 4,
+ "instructionText": "At the end of the road, turn right onto Holmenkollveien",
+ "distanceToNextInstruction": 455.1 },
+ {"direction": 9,
+ "instructionText": "Turn left",
+ "distanceToNextInstruction": 299.1 },
+ {"direction": 4,
+ "instructionText": "Turn right",
+ "distanceToNextInstruction": 110.5 },
+ {"direction": 4,
+ "instructionText": "Turn right",
+ "distanceToNextInstruction": 142.9 },
+ {"direction": 9,
+ "instructionText": "You have arrived at your destination, on the left",
+ "distanceToNextInstruction": 0 }
+ ]
+ }
+}
diff --git a/examples/quickcontrols/wearable/Wearable/fitness.js b/examples/quickcontrols/wearable/Wearable/fitness.js
index 95ce06cdc1..220d1d24b9 100644
--- a/examples/quickcontrols/wearable/Wearable/fitness.js
+++ b/examples/quickcontrols/wearable/Wearable/fitness.js
@@ -1,18 +1,34 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-function getSteps() {
- return 105;
+function getWalkingSteps() {
+ return 4000.;
}
-function getCalories() {
- return 150;
+function getWalkingGoal() {
+ return 8000.;
}
-function getDistance() {
- return 10;
+function getWalkingTime() {
+ return 40.;
}
-function getTime() {
- return "00:30";
+function getWalkingCalories() {
+ return 100.;
+}
+
+function getRunningGoal() {
+ return 8.;
+}
+
+function getRunningDistance() {
+ return 4.;
+}
+
+function getRunningTime() {
+ return 16.;
+}
+
+function getRunningCalories() {
+ return 200.;
}
diff --git a/examples/quickcontrols/wearable/Wearable/icons/back-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/back-dark.svg
new file mode 100644
index 0000000000..a2bf8c30ff
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/back-dark.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20C11 19.4477 11.4477 19 12 19H27C27.5523 19 28 19.4477 28 20C28 20.5523 27.5523 21 27 21H12C11.4477 21 11 20.5523 11 20Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7058 12.2929C20.0981 12.6834 20.0981 13.3166 19.7058 13.7071L13.3838 20L19.7058 26.2929C20.0981 26.6834 20.0981 27.3166 19.7058 27.7071C19.3134 28.0976 18.6773 28.0976 18.285 27.7071L11.3237 20.7778C10.8921 20.3482 10.8921 19.6518 11.3237 19.2222L18.285 12.2929C18.6773 11.9024 19.3134 11.9024 19.7058 12.2929Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/back-light.svg b/examples/quickcontrols/wearable/Wearable/icons/back-light.svg
new file mode 100644
index 0000000000..53c97ddc73
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/back-light.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20C11 19.4477 11.4477 19 12 19H27C27.5523 19 28 19.4477 28 20C28 20.5523 27.5523 21 27 21H12C11.4477 21 11 20.5523 11 20Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7058 12.2929C20.0981 12.6834 20.0981 13.3166 19.7058 13.7071L13.3838 20L19.7058 26.2929C20.0981 26.6834 20.0981 27.3166 19.7058 27.7071C19.3134 28.0976 18.6773 28.0976 18.285 27.7071L11.3237 20.7778C10.8921 20.3482 10.8921 19.6518 11.3237 19.2222L18.285 12.2929C18.6773 11.9024 19.3134 11.9024 19.7058 12.2929Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bearleft-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/bearleft-dark.svg
new file mode 100644
index 0000000000..cce617b716
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bearleft-dark.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16L17 11V5" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+<path d="M12 16L7 11V5" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16V20" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 7L7 4L4 7" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 7L17 4L14 7" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bearleft-light.svg b/examples/quickcontrols/wearable/Wearable/icons/bearleft-light.svg
new file mode 100644
index 0000000000..e03ae2cdc6
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bearleft-light.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16L17 11V5" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+<path d="M12 16L7 11V5" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16V20" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 7L7 4L4 7" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 7L17 4L14 7" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bearright-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/bearright-dark.svg
new file mode 100644
index 0000000000..c7c3e71006
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bearright-dark.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16L7 11V5" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+<path d="M12 16L17 11V5" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16V20" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 7L17 4L20 7" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 7L7 4L10 7" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bearright-light.svg b/examples/quickcontrols/wearable/Wearable/icons/bearright-light.svg
new file mode 100644
index 0000000000..5e6b77ec1b
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bearright-light.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16L7 11V5" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+<path d="M12 16L17 11V5" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16V20" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 7L17 4L20 7" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 7L7 4L10 7" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 1"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bell-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/bell-dark.svg
new file mode 100644
index 0000000000..9b010af6b5
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bell-dark.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3334 2.66671C17.3334 1.93033 16.7365 1.33337 16.0001 1.33337C15.2637 1.33337 14.6667 1.93033 14.6667 2.66671V4.11031C12.9044 4.40383 11.2703 5.27349 10.0063 6.60077C8.43031 8.25552 7.55565 10.4866 7.55565 12.8C7.55565 16.9696 6.70611 19.5542 5.928 21.0521C5.53753 21.8037 5.15882 22.2939 4.89904 22.5819C4.7688 22.7262 4.66748 22.8208 4.6082 22.8726C4.57854 22.8986 4.55933 22.9139 4.55223 22.9195L4.5513 22.9202C4.08705 23.2564 3.88898 23.8527 4.06178 24.4009C4.23674 24.9559 4.75147 25.3334 5.33343 25.3334H26.6668C27.2487 25.3334 27.7635 24.9559 27.9384 24.4009C28.1112 23.8527 27.9131 23.2564 27.4489 22.9202L27.448 22.9195C27.4409 22.9139 27.4217 22.8986 27.392 22.8726C27.3327 22.8208 27.2314 22.7262 27.1012 22.5819C26.8414 22.2939 26.4627 21.8037 26.0722 21.0521C25.2941 19.5542 24.4445 16.9696 24.4445 12.8C24.4445 10.4866 23.5699 8.25552 21.9939 6.60077C20.7298 5.27348 19.0958 4.40382 17.3334 4.11031V2.66671ZM23.9148 22.6667C23.8451 22.5437 23.7753 22.4153 23.7058 22.2814C22.7061 20.357 21.7779 17.3416 21.7779 12.8C21.7779 11.153 21.1541 9.58564 20.0629 8.43985C18.9738 7.29627 17.5109 6.66671 16.0001 6.66671C14.4893 6.66671 13.0264 7.29627 11.9373 8.43985C10.8461 9.58564 10.2223 11.153 10.2223 12.8C10.2223 17.3416 9.29408 20.357 8.29442 22.2814C8.22485 22.4153 8.15506 22.5437 8.08535 22.6667H23.9148ZM12.5926 26.9581C13.2049 26.549 14.0329 26.7136 14.442 27.3259C14.575 27.525 14.7812 27.7121 15.0577 27.8503C15.3345 27.9887 15.6601 28.0667 16.0001 28.0667C16.3401 28.0667 16.6657 27.9887 16.9425 27.8503C17.219 27.7121 17.4252 27.525 17.5582 27.3259C17.9673 26.7136 18.7953 26.549 19.4076 26.9581C20.0198 27.3673 20.1845 28.1953 19.7754 28.8075C19.3664 29.4195 18.7946 29.9057 18.1351 30.2354C17.4759 30.565 16.7403 30.7334 16.0001 30.7334C15.2599 30.7334 14.5243 30.565 13.8651 30.2354C13.2056 29.9057 12.6338 29.4195 12.2248 28.8075C11.8157 28.1953 11.9804 27.3673 12.5926 26.9581Z" fill="#E6E6E6"/>
+<path d="M3.99984 13.4C3.26346 13.4 2.65914 12.8016 2.72771 12.0684C2.88779 10.357 3.36183 8.76192 4.14984 7.28329C4.92622 5.82649 5.91149 4.56487 7.10564 3.49845C7.65054 3.01184 8.48356 3.14375 8.91597 3.73257V3.73257C9.3488 4.32196 9.21456 5.1448 8.68174 5.64562C7.81466 6.46063 7.09292 7.41208 6.5165 8.49996C5.92856 9.6096 5.55971 10.7995 5.40995 12.0696C5.32372 12.8009 4.73622 13.4 3.99984 13.4V13.4ZM27.9998 13.4C27.2635 13.4 26.676 12.8009 26.5897 12.0696C26.44 10.7995 26.0711 9.6096 25.4832 8.49996C24.9068 7.41208 24.185 6.46063 23.3179 5.64562C22.7851 5.1448 22.6509 4.32196 23.0837 3.73257V3.73257C23.5161 3.14375 24.3491 3.01184 24.894 3.49845C26.0882 4.56487 27.0735 5.82649 27.8498 7.28329C28.6378 8.76192 29.1119 10.357 29.272 12.0684C29.3405 12.8016 28.7362 13.4 27.9998 13.4V13.4Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bell-light.svg b/examples/quickcontrols/wearable/Wearable/icons/bell-light.svg
new file mode 100644
index 0000000000..b090fd6649
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bell-light.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3333 2.66732C17.3333 1.93094 16.7364 1.33398 16 1.33398C15.2636 1.33398 14.6667 1.93094 14.6667 2.66732V4.11092C12.9043 4.40444 11.2703 5.2741 10.0062 6.60138C8.43022 8.25613 7.55556 10.4872 7.55556 12.8007C7.55556 16.9702 6.70602 19.5548 5.92791 21.0527C5.53744 21.8043 5.15873 22.2945 4.89895 22.5825C4.76871 22.7268 4.66739 22.8214 4.60811 22.8733C4.57845 22.8992 4.55924 22.9145 4.55214 22.9201L4.55121 22.9208C4.08696 23.257 3.88888 23.8533 4.06169 24.4015C4.23665 24.9565 4.75138 25.334 5.33334 25.334H26.6667C27.2486 25.334 27.7634 24.9565 27.9383 24.4015C28.1111 23.8533 27.9131 23.257 27.4488 22.9208L27.4479 22.9201C27.4408 22.9145 27.4216 22.8992 27.3919 22.8733C27.3326 22.8214 27.2313 22.7268 27.1011 22.5825C26.8413 22.2945 26.4626 21.8043 26.0721 21.0527C25.294 19.5548 24.4445 16.9702 24.4445 12.8007C24.4445 10.4872 23.5698 8.25613 21.9938 6.60138C20.7298 5.27409 19.0957 4.40443 17.3333 4.11092V2.66732ZM23.9148 22.6673C23.845 22.5443 23.7753 22.4159 23.7057 22.282C22.706 20.3576 21.7778 17.3422 21.7778 12.8007C21.7778 11.1536 21.154 9.58625 20.0628 8.44046C18.9737 7.29688 17.5108 6.66732 16 6.66732C14.4892 6.66732 13.0263 7.29688 11.9372 8.44046C10.846 9.58625 10.2222 11.1536 10.2222 12.8007C10.2222 17.3422 9.29399 20.3576 8.29432 22.282C8.22476 22.4159 8.15497 22.5443 8.08526 22.6673H23.9148ZM12.5925 26.9587C13.2048 26.5496 14.0328 26.7143 14.4419 27.3265C14.575 27.5256 14.7811 27.7127 15.0576 27.8509C15.3344 27.9893 15.66 28.0673 16 28.0673C16.34 28.0673 16.6656 27.9893 16.9424 27.8509C17.2189 27.7127 17.4251 27.5256 17.5581 27.3265C17.9672 26.7143 18.7952 26.5496 19.4075 26.9587C20.0197 27.3679 20.1844 28.1959 19.7753 28.8081C19.3663 29.4202 18.7945 29.9063 18.135 30.2361C17.4758 30.5657 16.7402 30.734 16 30.734C15.2598 30.734 14.5242 30.5657 13.865 30.2361C13.2055 29.9063 12.6337 29.4202 12.2247 28.8081C11.8156 28.1959 11.9803 27.3679 12.5925 26.9587Z" fill="#191919"/>
+<path d="M3.99999 13.3994C3.26361 13.3994 2.65929 12.801 2.72787 12.0678C2.88794 10.3563 3.36198 8.7613 4.14999 7.28268C4.92637 5.82588 5.91164 4.56426 7.1058 3.49784C7.65069 3.01123 8.48371 3.14314 8.91613 3.73196C9.34896 4.32135 9.21471 5.14419 8.68189 5.64501C7.81482 6.46002 7.09307 7.41147 6.51666 8.49935C5.92872 9.60899 5.55986 10.7989 5.4101 12.0689C5.32387 12.8003 4.73637 13.3994 3.99999 13.3994ZM28 13.3994C27.2636 13.3994 26.6761 12.8003 26.5899 12.0689C26.4401 10.7989 26.0713 9.60899 25.4833 8.49935C24.9069 7.41147 24.1852 6.46002 23.3181 5.64501C22.7853 5.14419 22.651 4.32135 23.0839 3.73196C23.5163 3.14314 24.3493 3.01123 24.8942 3.49784C26.0883 4.56426 27.0736 5.82588 27.85 7.28268C28.638 8.7613 29.112 10.3563 29.2721 12.0678C29.3407 12.801 28.7364 13.3994 28 13.3994Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bluetooth-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/bluetooth-dark.svg
new file mode 100644
index 0000000000..b6227d7072
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bluetooth-dark.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6445 3.74032C19.1541 3.52925 19.7406 3.64592 20.1306 4.03591L27.6306 11.5359C28.1631 12.0684 28.1631 12.9319 27.6306 13.4644L21.0948 20.0002L27.6306 26.5359C28.1631 27.0685 28.1631 27.9319 27.6306 28.4644L20.1306 35.9644C19.7406 36.3544 19.1541 36.4711 18.6445 36.26C18.135 36.0489 17.8027 35.5517 17.8027 35.0002V23.2923L12.6306 28.4644C12.0981 28.9969 11.2347 28.9969 10.7021 28.4644C10.1696 27.9319 10.1696 27.0685 10.7021 26.5359L17.2379 20.0002L10.7021 13.4644C10.1696 12.9319 10.1696 12.0684 10.7021 11.5359C11.2347 11.0034 12.0981 11.0034 12.6306 11.5359L17.8027 16.708V5.00015C17.8027 4.44861 18.135 3.95138 18.6445 3.74032ZM20.53 23.2923L24.7379 27.5002L20.53 31.708V23.2923ZM20.53 16.708V8.29226L24.7379 12.5002L20.53 16.708Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/bluetooth-light.svg b/examples/quickcontrols/wearable/Wearable/icons/bluetooth-light.svg
new file mode 100644
index 0000000000..3e07b06b50
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/bluetooth-light.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6449 3.74056C19.1545 3.52949 19.741 3.64616 20.131 4.03616L27.631 11.5362C28.1635 12.0687 28.1635 12.9321 27.631 13.4646L21.0952 20.0004L27.631 26.5362C28.1635 27.0687 28.1635 27.9321 27.631 28.4646L20.131 35.9646C19.741 36.3546 19.1545 36.4713 18.6449 36.2602C18.1353 36.0492 17.8031 35.5519 17.8031 35.0004V23.2925L12.631 28.4646C12.0984 28.9972 11.235 28.9972 10.7025 28.4646C10.17 27.9321 10.17 27.0687 10.7025 26.5362L17.2383 20.0004L10.7025 13.4646C10.17 12.9321 10.17 12.0687 10.7025 11.5362C11.235 11.0036 12.0984 11.0036 12.631 11.5362L17.8031 16.7083V5.0004C17.8031 4.44886 18.1353 3.95162 18.6449 3.74056ZM20.5304 23.2925L24.7383 27.5004L20.5304 31.7083V23.2925ZM20.5304 16.7083V8.29251L24.7383 12.5004L20.5304 16.7083Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/clock-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/clock-dark.svg
new file mode 100644
index 0000000000..6b9e71fe0f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/clock-dark.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66667 17.3334C6.66667 12.1787 10.8453 8.00004 16 8.00004C21.1547 8.00004 25.3333 12.1787 25.3333 17.3334C25.3333 22.488 21.1547 26.6667 16 26.6667C10.8453 26.6667 6.66667 22.488 6.66667 17.3334ZM16 5.33337C9.37258 5.33337 4 10.706 4 17.3334C4 23.9608 9.37258 29.3334 16 29.3334C22.6274 29.3334 28 23.9608 28 17.3334C28 10.706 22.6274 5.33337 16 5.33337ZM17.3333 12C17.3333 11.2637 16.7364 10.6667 16 10.6667C15.2636 10.6667 14.6667 11.2637 14.6667 12V18C14.6667 18.5051 14.952 18.9668 15.4037 19.1926L19.4037 21.1926C20.0624 21.5219 20.8633 21.255 21.1926 20.5963C21.5219 19.9377 21.2549 19.1368 20.5963 18.8075L17.3333 17.176V12Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.72353 8.39048C1.20283 8.91118 1.20283 9.7554 1.72353 10.2761C2.24423 10.7968 3.08845 10.7968 3.60915 10.2761L8.94248 4.94277C9.46318 4.42207 9.46318 3.57785 8.94248 3.05715C8.42178 2.53645 7.57756 2.53645 7.05686 3.05715L1.72353 8.39048ZM24.9425 3.05715C24.4218 2.53645 23.5776 2.53645 23.0569 3.05715C22.5362 3.57785 22.5362 4.42207 23.0569 4.94277L28.3902 10.2761C28.9109 10.7968 29.7551 10.7968 30.2758 10.2761C30.7965 9.7554 30.7965 8.91118 30.2758 8.39048L24.9425 3.05715Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/clock-light.svg b/examples/quickcontrols/wearable/Wearable/icons/clock-light.svg
new file mode 100644
index 0000000000..b0f195142c
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/clock-light.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66667 17.334C6.66667 12.1793 10.8453 8.00065 16 8.00065C21.1547 8.00065 25.3333 12.1793 25.3333 17.334C25.3333 22.4886 21.1547 26.6673 16 26.6673C10.8453 26.6673 6.66667 22.4886 6.66667 17.334ZM16 5.33398C9.37258 5.33398 4 10.7066 4 17.334C4 23.9614 9.37258 29.334 16 29.334C22.6274 29.334 28 23.9614 28 17.334C28 10.7066 22.6274 5.33398 16 5.33398ZM17.3333 12.0007C17.3333 11.2643 16.7364 10.6673 16 10.6673C15.2636 10.6673 14.6667 11.2643 14.6667 12.0007V18.0007C14.6667 18.5057 14.952 18.9674 15.4037 19.1932L19.4037 21.1932C20.0624 21.5225 20.8633 21.2556 21.1926 20.5969C21.5219 19.9383 21.2549 19.1374 20.5963 18.8081L17.3333 17.1766V12.0007Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.72384 8.38987C1.20314 8.91057 1.20314 9.75479 1.72384 10.2755C2.24454 10.7962 3.08876 10.7962 3.60946 10.2755L8.94279 4.94216C9.46349 4.42146 9.46349 3.57724 8.94279 3.05654C8.42209 2.53584 7.57787 2.53584 7.05717 3.05654L1.72384 8.38987ZM24.9428 3.05654C24.4221 2.53584 23.5779 2.53584 23.0572 3.05654C22.5365 3.57724 22.5365 4.42146 23.0572 4.94216L28.3905 10.2755C28.9112 10.7962 29.7554 10.7962 30.2761 10.2755C30.7968 9.75479 30.7968 8.91057 30.2761 8.38987L24.9428 3.05654Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/darkmode-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/darkmode-dark.svg
new file mode 100644
index 0000000000..b3e8da56ba
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/darkmode-dark.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9997 33.3334C27.3635 33.3334 33.333 27.3638 33.333 20C33.333 12.6362 27.3635 6.66671 19.9997 6.66671C12.6359 6.66671 6.66634 12.6362 6.66634 20C6.66634 27.3638 12.6359 33.3334 19.9997 33.3334ZM19.9997 36.6667C29.2044 36.6667 36.6663 29.2048 36.6663 20C36.6663 10.7953 29.2044 3.33337 19.9997 3.33337C10.7949 3.33337 3.33301 10.7953 3.33301 20C3.33301 29.2048 10.7949 36.6667 19.9997 36.6667Z" fill="#E6E6E6"/>
+<path d="M19.9997 3.33337C10.7949 3.33337 3.33301 10.7953 3.33301 20C3.33301 29.2048 10.7949 36.6667 19.9997 36.6667V3.33337Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/darkmode-light.svg b/examples/quickcontrols/wearable/Wearable/icons/darkmode-light.svg
new file mode 100644
index 0000000000..ca3ef4f4e6
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/darkmode-light.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9997 33.3333C27.3635 33.3333 33.333 27.3638 33.333 20C33.333 12.6362 27.3635 6.66665 19.9997 6.66665C12.6359 6.66665 6.66634 12.6362 6.66634 20C6.66634 27.3638 12.6359 33.3333 19.9997 33.3333ZM19.9997 36.6666C29.2044 36.6666 36.6663 29.2047 36.6663 20C36.6663 10.7952 29.2044 3.33331 19.9997 3.33331C10.7949 3.33331 3.33301 10.7952 3.33301 20C3.33301 29.2047 10.7949 36.6666 19.9997 36.6666Z" fill="#191919"/>
+<path d="M19.9997 3.33331C10.7949 3.33331 3.33301 10.7952 3.33301 20C3.33301 29.2047 10.7949 36.6666 19.9997 36.6666V3.33331Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/demomode-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/demomode-dark.svg
new file mode 100644
index 0000000000..9c95aa1f16
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/demomode-dark.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2804 23.9331C20.9637 23.5531 20.4947 23.3334 20 23.3334C19.5054 23.3334 19.0363 23.5531 18.7197 23.9331L10.3863 33.9331C9.97231 34.4299 9.88307 35.1213 10.1574 35.707C10.4317 36.2926 11.02 36.6667 11.6667 36.6667H28.3334C28.9801 36.6667 29.5684 36.2926 29.8427 35.707C30.117 35.1213 30.0277 34.4299 29.6137 33.9331L21.2804 23.9331Z" fill="#E6E6E6"/>
+<path d="M6.66634 8.33333H33.333V25H28.333V28.3333H33.333C35.174 28.3333 36.6663 26.841 36.6663 25V8.33333C36.6663 6.49238 35.174 5 33.333 5H6.66634C4.82539 5 3.33301 6.49238 3.33301 8.33333V25C3.33301 26.841 4.82539 28.3333 6.66634 28.3333H11.6663V25H6.66634V8.33333Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/demomode-light.svg b/examples/quickcontrols/wearable/Wearable/icons/demomode-light.svg
new file mode 100644
index 0000000000..eae661be65
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/demomode-light.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2804 23.933C20.9637 23.553 20.4947 23.3333 20 23.3333C19.5054 23.3333 19.0363 23.553 18.7197 23.933L10.3863 33.933C9.97231 34.4298 9.88307 35.1213 10.1574 35.7069C10.4317 36.2925 11.02 36.6666 11.6667 36.6666H28.3334C28.9801 36.6666 29.5684 36.2925 29.8427 35.7069C30.117 35.1213 30.0277 34.4298 29.6137 33.933L21.2804 23.933Z" fill="#191919"/>
+<path d="M6.66634 8.33333H33.333V25H28.333V28.3333H33.333C35.174 28.3333 36.6663 26.841 36.6663 25V8.33333C36.6663 6.49238 35.174 5 33.333 5H6.66634C4.82539 5 3.33301 6.49238 3.33301 8.33333V25C3.33301 26.841 4.82539 28.3333 6.66634 28.3333H11.6663V25H6.66634V8.33333Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/drop-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/drop-dark.svg
new file mode 100644
index 0000000000..0672ea10d4
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/drop-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C9.78333 22 7.89583 21.2125 6.3375 19.6375C4.77917 18.0626 4 16.1598 4 13.9293C4 12.8056 4.20833 11.767 4.625 10.8135C5.04167 9.85997 5.61667 9.00863 6.35 8.25946L11.2992 3.2928C11.6883 2.9024 12.3117 2.9024 12.7008 3.2928L17.65 8.25946C18.3833 9.00863 18.9583 9.85997 19.375 10.8135C19.7917 11.767 20 12.8056 20 13.9293C20 16.1598 19.2208 18.0626 17.6625 19.6375C16.1042 21.2125 14.2167 22 12 22ZM12 20C13.6667 20 15.2086 19.5829 16.5 18.1818C17.7097 16.8692 17.9963 15.63 18 13.8272C18.0018 12.9638 17.9569 12.4528 17.6625 11.6435C17.3638 10.8225 16.5 9.74078 16.5 9.74078L12 5.45005L7.75 9.74078C7.16667 10.3027 6.72917 10.9369 6.4375 11.6435C6.14583 12.3501 6 13.1121 6 13.9293C6 15.5809 6.58333 16.9984 7.75 18.1818C8.91667 19.3651 10.3333 20 12 20Z" fill="#E6E6E6"/>
+<path d="M12.7846 18.7537C12.641 18.8951 12.4678 18.9741 12.265 18.9907C11.1837 19.0573 10.1109 18.7661 9.04646 18.1173C7.98205 17.4685 7.30623 16.3872 7.01901 14.8734C6.96832 14.6405 7.01901 14.4367 7.17107 14.262C7.32313 14.0873 7.51742 14 7.75396 14C7.93981 14 8.10454 14.0582 8.24815 14.1747C8.39176 14.2911 8.48046 14.4408 8.51426 14.6238C8.717 15.7384 9.20697 16.5078 9.98416 16.932C10.7614 17.3563 11.4963 17.5434 12.189 17.4935C12.4256 17.4769 12.6199 17.5392 12.7719 17.6807C12.924 17.8221 13 18.0092 13 18.2421C13 18.4417 12.9282 18.6123 12.7846 18.7537Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/drop-light.svg b/examples/quickcontrols/wearable/Wearable/icons/drop-light.svg
new file mode 100644
index 0000000000..c045ddfed8
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/drop-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C9.78333 22 7.89583 21.2125 6.3375 19.6375C4.77917 18.0626 4 16.1598 4 13.9293C4 12.8056 4.20833 11.767 4.625 10.8135C5.04167 9.85997 5.61667 9.00863 6.35 8.25946L11.2992 3.2928C11.6883 2.9024 12.3117 2.9024 12.7008 3.2928L17.65 8.25946C18.3833 9.00863 18.9583 9.85997 19.375 10.8135C19.7917 11.767 20 12.8056 20 13.9293C20 16.1598 19.2208 18.0626 17.6625 19.6375C16.1042 21.2125 14.2167 22 12 22ZM12 20C13.6667 20 15.2086 19.5829 16.5 18.1818C17.7097 16.8692 17.9963 15.63 18 13.8272C18.0018 12.9638 17.9569 12.4528 17.6625 11.6435C17.3638 10.8225 16.5 9.74078 16.5 9.74078L12 5.45005L7.75 9.74078C7.16667 10.3027 6.72917 10.9369 6.4375 11.6435C6.14583 12.3501 6 13.1121 6 13.9293C6 15.5809 6.58333 16.9984 7.75 18.1818C8.91667 19.3651 10.3333 20 12 20Z" fill="#191919"/>
+<path d="M12.7846 18.7537C12.641 18.8951 12.4678 18.9741 12.265 18.9907C11.1837 19.0573 10.1109 18.7661 9.04646 18.1173C7.98205 17.4685 7.30623 16.3872 7.01901 14.8734C6.96832 14.6405 7.01901 14.4367 7.17107 14.262C7.32313 14.0873 7.51742 14 7.75396 14C7.93981 14 8.10454 14.0582 8.24815 14.1747C8.39176 14.2911 8.48046 14.4408 8.51426 14.6238C8.717 15.7384 9.20697 16.5078 9.98416 16.932C10.7614 17.3563 11.4963 17.5434 12.189 17.4935C12.4256 17.4769 12.6199 17.5392 12.7719 17.6807C12.924 17.8221 13 18.0092 13 18.2421C13 18.4417 12.9282 18.6123 12.7846 18.7537Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/forward-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/forward-dark.svg
new file mode 100644
index 0000000000..f53165f667
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/forward-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C11.4477 5 11 5.55964 11 6.25V18.75C11 19.4404 11.4477 20 12 20C12.5523 20 13 19.4404 13 18.75L12.9999 6.25C13 5.625 12.5527 5 12 5Z" fill="#2CDE85"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.82428 10.7372C6.2314 11.1103 6.86397 11.0828 7.23716 10.6757L12 5.47989L16.7629 10.6757C17.136 11.0828 17.7686 11.1103 18.1757 10.7372C18.5828 10.364 18.6104 9.7314 18.2372 9.32428L12.7372 3.32428C12.5477 3.11765 12.2803 3 12 3C11.7197 3 11.4523 3.11765 11.2629 3.32428L5.76285 9.32428C5.38966 9.73139 5.41716 10.364 5.82428 10.7372Z" fill="#2CDE85"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/forward-light.svg b/examples/quickcontrols/wearable/Wearable/icons/forward-light.svg
new file mode 100644
index 0000000000..3c872b6320
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/forward-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C11.4477 5 11 5.55964 11 6.25V18.75C11 19.4404 11.4477 20 12 20C12.5523 20 13 19.4404 13 18.75L12.9999 6.25C13 5.625 12.5527 5 12 5Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.82428 10.7372C6.2314 11.1103 6.86397 11.0828 7.23716 10.6757L12 5.47989L16.7629 10.6757C17.136 11.0828 17.7686 11.1103 18.1757 10.7372C18.5828 10.364 18.6104 9.7314 18.2372 9.32428L12.7372 3.32428C12.5477 3.11765 12.2803 3 12 3C11.7197 3 11.4523 3.11765 11.2629 3.32428L5.76285 9.32428C5.38966 9.73139 5.41716 10.364 5.82428 10.7372Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/hearth-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/hearth-dark.svg
new file mode 100644
index 0000000000..1a2ff53afc
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/hearth-dark.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6602 27.4192C16.2826 27.7513 15.7171 27.7513 15.3394 27.4192L14.0665 26.2997C11.8221 24.3161 9.9665 22.6049 8.49984 21.1662C7.03317 19.7275 5.8665 18.436 4.99984 17.2916C4.13317 16.1471 3.52762 15.0954 3.18317 14.1362C2.83873 13.1771 2.6665 12.1962 2.6665 11.1935C2.6665 9.14441 3.3665 7.43324 4.7665 6.05995C6.1665 4.68665 7.91095 4 9.99984 4C11.1554 4 12.2554 4.23978 13.2998 4.71935C14.3443 5.19891 15.2443 5.87466 15.9998 6.74659C16.7554 5.87466 17.6554 5.19891 18.6998 4.71935C19.7443 4.23978 20.8443 4 21.9998 4C24.0887 4 25.8332 4.68665 27.2332 6.05995C28.6332 7.43324 29.3332 9.14441 29.3332 11.1935C29.3332 12.1962 29.161 13.1771 28.8165 14.1362C28.4721 15.0954 27.8665 16.1471 26.9998 17.2916C26.1332 18.436 24.9665 19.7275 23.4998 21.1662C22.0332 22.6049 20.1776 24.3161 17.9332 26.2997L16.6602 27.4192ZM15.9998 24.4687C18.1332 22.594 19.8887 20.9864 21.2665 19.6458C22.6443 18.3052 23.7332 17.139 24.5332 16.1471C25.3332 15.1553 25.8887 14.2725 26.1998 13.4986C26.5109 12.7248 26.6665 11.9564 26.6665 11.1935C26.6665 9.88556 26.2221 8.79564 25.3332 7.92371C24.4443 7.05177 23.3332 6.6158 21.9998 6.6158C20.9554 6.6158 19.9887 6.90463 19.0998 7.48229C18.608 7.80193 18.2012 8.16996 17.8794 8.58638C17.4137 9.18908 16.7615 9.68937 15.9998 9.68937V9.68937C15.2382 9.68937 14.5859 9.18908 14.1203 8.58638C13.7985 8.16996 13.3917 7.80193 12.8998 7.48229C12.0109 6.90463 11.0443 6.6158 9.99984 6.6158C8.6665 6.6158 7.55539 7.05177 6.6665 7.92371C5.77762 8.79564 5.33317 9.88556 5.33317 11.1935C5.33317 11.9564 5.48873 12.7248 5.79984 13.4986C6.11095 14.2725 6.6665 15.1553 7.4665 16.1471C8.2665 17.139 9.35539 18.3052 10.7332 19.6458C12.1109 20.9864 13.8665 22.594 15.9998 24.4687Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/hearth-light.svg b/examples/quickcontrols/wearable/Wearable/icons/hearth-light.svg
new file mode 100644
index 0000000000..155329518f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/hearth-light.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6604 27.4192C16.2828 27.7513 15.7172 27.7513 15.3396 27.4192L14.0667 26.2997C11.8222 24.3161 9.96666 22.6049 8.49999 21.1662C7.03332 19.7275 5.86666 18.436 4.99999 17.2916C4.13332 16.1471 3.52777 15.0954 3.18332 14.1362C2.83888 13.1771 2.66666 12.1962 2.66666 11.1935C2.66666 9.14441 3.36666 7.43324 4.76666 6.05995C6.16666 4.68665 7.9111 4 9.99999 4C11.1555 4 12.2555 4.23978 13.3 4.71935C14.3444 5.19891 15.2444 5.87466 16 6.74659C16.7555 5.87466 17.6555 5.19891 18.7 4.71935C19.7444 4.23978 20.8444 4 22 4C24.0889 4 25.8333 4.68665 27.2333 6.05995C28.6333 7.43324 29.3333 9.14441 29.3333 11.1935C29.3333 12.1962 29.1611 13.1771 28.8167 14.1362C28.4722 15.0954 27.8667 16.1471 27 17.2916C26.1333 18.436 24.9667 19.7275 23.5 21.1662C22.0333 22.6049 20.1778 24.3161 17.9333 26.2997L16.6604 27.4192ZM16 24.4687C18.1333 22.594 19.8889 20.9864 21.2667 19.6458C22.6444 18.3052 23.7333 17.139 24.5333 16.1471C25.3333 15.1553 25.8889 14.2725 26.2 13.4986C26.5111 12.7248 26.6667 11.9564 26.6667 11.1935C26.6667 9.88556 26.2222 8.79564 25.3333 7.92371C24.4444 7.05177 23.3333 6.6158 22 6.6158C20.9555 6.6158 19.9889 6.90463 19.1 7.48229C18.6081 7.80193 18.2013 8.16996 17.8796 8.58638C17.4139 9.18908 16.7616 9.68937 16 9.68937C15.2383 9.68937 14.5861 9.18908 14.1204 8.58638C13.7987 8.16996 13.3918 7.80193 12.9 7.48229C12.0111 6.90463 11.0444 6.6158 9.99999 6.6158C8.66666 6.6158 7.55555 7.05177 6.66666 7.92371C5.77777 8.79564 5.33332 9.88556 5.33332 11.1935C5.33332 11.9564 5.48888 12.7248 5.79999 13.4986C6.1111 14.2725 6.66666 15.1553 7.46666 16.1471C8.26666 17.139 9.35555 18.3052 10.7333 19.6458C12.1111 20.9864 13.8667 22.594 16 24.4687Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/left-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/left-dark.svg
new file mode 100644
index 0000000000..78abe43ad0
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/left-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.5C6 8.94772 6.44772 8.5 7 8.5H19C19.5523 8.5 20 8.94772 20 9.5V19.5C20 20.0523 19.5523 20.5 19 20.5C18.4477 20.5 18 20.0523 18 19.5V10.5003L7 10.5C6.44772 10.5 6 10.0523 6 9.5Z" fill="#2CDE85"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7372 3.32428C13.1103 3.7314 13.0828 4.36397 12.6757 4.73716L7.47989 9.50001L12.6757 14.2629C13.0828 14.636 13.1103 15.2686 12.7372 15.6757C12.364 16.0828 11.7314 16.1104 11.3243 15.7372L5.32428 10.2372C5.11765 10.0477 5 9.78031 5 9.50001C5 9.2197 5.11765 8.95226 5.32428 8.76285L11.3243 3.26285C11.7314 2.88966 12.364 2.91716 12.7372 3.32428Z" fill="#2CDE85"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/left-light.svg b/examples/quickcontrols/wearable/Wearable/icons/left-light.svg
new file mode 100644
index 0000000000..636a1ee0a5
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/left-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.5C6 8.94772 6.44772 8.5 7 8.5H19C19.5523 8.5 20 8.94772 20 9.5V19.5C20 20.0523 19.5523 20.5 19 20.5C18.4477 20.5 18 20.0523 18 19.5V10.5003L7 10.5C6.44772 10.5 6 10.0523 6 9.5Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7372 3.32428C13.1103 3.7314 13.0828 4.36397 12.6757 4.73716L7.47989 9.50001L12.6757 14.2629C13.0828 14.636 13.1103 15.2686 12.7372 15.6757C12.364 16.0828 11.7314 16.1104 11.3243 15.7372L5.32428 10.2372C5.11765 10.0477 5 9.78031 5 9.50001C5 9.2197 5.11765 8.95226 5.32428 8.76285L11.3243 3.26285C11.7314 2.88966 12.364 2.91716 12.7372 3.32428Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/lightleft-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/lightleft-dark.svg
new file mode 100644
index 0000000000..2fe8216d9f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/lightleft-dark.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0005 19.9999C12.0005 20.5522 12.4482 20.9999 13.0005 20.9999C13.5528 20.9999 14.0005 20.5522 14.0005 19.9999H12.0005ZM7.17889 3.01613C6.63551 2.91733 6.11493 3.27774 6.01613 3.82111L4.40616 12.6759C4.30737 13.2193 4.66777 13.7399 5.21115 13.8387C5.75452 13.9375 6.27511 13.5771 6.3739 13.0337L7.80498 5.16276L15.6759 6.59384C16.2193 6.69263 16.7399 6.33223 16.8387 5.78885C16.9375 5.24548 16.5771 4.72489 16.0337 4.6261L7.17889 3.01613ZM14.0005 19.9999C14.0005 15.9397 13.6211 13.4098 12.6069 11.0435C11.6181 8.73658 10.0317 6.62227 7.82219 3.43079L6.17781 4.56921C8.46832 7.87773 9.88218 9.76337 10.7686 11.8314C11.6296 13.8401 12.0005 16.0601 12.0005 19.9999H14.0005Z" fill="#2CDE85"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/lightleft-light.svg b/examples/quickcontrols/wearable/Wearable/icons/lightleft-light.svg
new file mode 100644
index 0000000000..aea6ac6cad
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/lightleft-light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0005 19.9999C12.0005 20.5522 12.4482 20.9999 13.0005 20.9999C13.5528 20.9999 14.0005 20.5522 14.0005 19.9999H12.0005ZM7.17889 3.01613C6.63551 2.91733 6.11493 3.27774 6.01613 3.82111L4.40616 12.6759C4.30737 13.2193 4.66777 13.7399 5.21115 13.8387C5.75452 13.9375 6.27511 13.5771 6.3739 13.0337L7.80498 5.16276L15.6759 6.59384C16.2193 6.69263 16.7399 6.33223 16.8387 5.78885C16.9375 5.24548 16.5771 4.72489 16.0337 4.6261L7.17889 3.01613ZM14.0005 19.9999C14.0005 15.9397 13.6211 13.4098 12.6069 11.0435C11.6181 8.73658 10.0317 6.62227 7.82219 3.43079L6.17781 4.56921C8.46832 7.87773 9.88218 9.76337 10.7686 11.8314C11.6296 13.8401 12.0005 16.0601 12.0005 19.9999H14.0005Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/lightright-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/lightright-dark.svg
new file mode 100644
index 0000000000..89b5db0394
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/lightright-dark.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9995 19.9999C11.9995 20.5522 11.5518 20.9999 10.9995 20.9999C10.4472 20.9999 9.99953 20.5522 9.99953 19.9999H11.9995ZM16.8211 3.01613C17.3645 2.91733 17.8851 3.27774 17.9839 3.82111L19.5938 12.6759C19.6926 13.2193 19.3322 13.7399 18.7889 13.8387C18.2455 13.9375 17.7249 13.5771 17.6261 13.0337L16.195 5.16276L8.32406 6.59384C7.78068 6.69263 7.2601 6.33223 7.1613 5.78885C7.0625 5.24548 7.42291 4.72489 7.96629 4.6261L16.8211 3.01613ZM9.99953 19.9999C9.99953 15.9397 10.3789 13.4098 11.3931 11.0435C12.3819 8.73658 13.9683 6.62227 16.1778 3.43079L17.8222 4.56921C15.5317 7.87773 14.1178 9.76337 13.2314 11.8314C12.3704 13.8401 11.9995 16.0601 11.9995 19.9999H9.99953Z" fill="#2CDE85"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/lightright-light.svg b/examples/quickcontrols/wearable/Wearable/icons/lightright-light.svg
new file mode 100644
index 0000000000..58f24020da
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/lightright-light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9995 19.9999C11.9995 20.5522 11.5518 20.9999 10.9995 20.9999C10.4472 20.9999 9.99953 20.5522 9.99953 19.9999H11.9995ZM16.8211 3.01613C17.3645 2.91733 17.8851 3.27774 17.9839 3.82111L19.5938 12.6759C19.6926 13.2193 19.3322 13.7399 18.7889 13.8387C18.2455 13.9375 17.7249 13.5771 17.6261 13.0337L16.195 5.16276L8.32406 6.59384C7.78068 6.69263 7.2601 6.33223 7.1613 5.78885C7.0625 5.24548 7.42291 4.72489 7.96629 4.6261L16.8211 3.01613ZM9.99953 19.9999C9.99953 15.9397 10.3789 13.4098 11.3931 11.0435C12.3819 8.73658 13.9683 6.62227 16.1778 3.43079L17.8222 4.56921C15.5317 7.87773 14.1178 9.76337 13.2314 11.8314C12.3704 13.8401 11.9995 16.0601 11.9995 19.9999H9.99953Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/maps-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/maps-dark.svg
new file mode 100644
index 0000000000..7c8339606c
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/maps-dark.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3772 22.8242C21.9333 20.0647 24.0002 16.7686 24.0002 13.5757C24.0002 11.3706 23.1431 9.26753 21.6359 7.72614C20.1308 6.18679 18.1023 5.33329 16.0002 5.33329C13.898 5.33329 11.8695 6.18679 10.3644 7.72614C8.85724 9.26753 8.00016 11.3706 8.00016 13.5757C8.00016 16.7686 10.067 20.0647 12.6231 22.8242C13.8427 24.1407 15.0707 25.2246 16.0002 25.9826C16.9296 25.2246 18.1577 24.1407 19.3772 22.8242ZM16.0002 29.3333C16.0002 29.3333 26.6668 22.0606 26.6668 13.5757C26.6668 10.6824 25.543 7.90768 23.5426 5.86182C21.5422 3.81597 18.8291 2.66663 16.0002 2.66663C13.1712 2.66663 10.4581 3.81597 8.45769 5.86182C6.4573 7.90768 5.3335 10.6824 5.3335 13.5757C5.3335 22.0606 16.0002 29.3333 16.0002 29.3333Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C15.2636 12 14.6667 12.597 14.6667 13.3334C14.6667 14.0698 15.2636 14.6667 16 14.6667C16.7364 14.6667 17.3333 14.0698 17.3333 13.3334C17.3333 12.597 16.7364 12 16 12ZM12 13.3334C12 11.1242 13.7909 9.33337 16 9.33337C18.2091 9.33337 20 11.1242 20 13.3334C20 15.5425 18.2091 17.3334 16 17.3334C13.7909 17.3334 12 15.5425 12 13.3334Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/maps-light.svg b/examples/quickcontrols/wearable/Wearable/icons/maps-light.svg
new file mode 100644
index 0000000000..07fb6e7b87
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/maps-light.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.377 22.8235C21.9332 20.0641 24 16.768 24 13.5751C24 11.37 23.1429 9.26692 21.6358 7.72553C20.1307 6.18618 18.1022 5.33268 16 5.33268C13.8979 5.33268 11.8694 6.18618 10.3642 7.72553C8.85709 9.26692 8.00001 11.37 8.00001 13.5751C8.00001 16.768 10.0669 20.0641 12.623 22.8235C13.8425 24.1401 15.0705 25.224 16 25.9819C16.9295 25.224 18.1575 24.1401 19.377 22.8235ZM16 29.3327C16 29.3327 26.6667 22.06 26.6667 13.5751C26.6667 10.6818 25.5429 7.90707 23.5425 5.86121C21.5421 3.81536 18.829 2.66602 16 2.66602C13.171 2.66602 10.4579 3.81536 8.45754 5.86121C6.45715 7.90707 5.33334 10.6818 5.33334 13.5751C5.33334 22.06 16 29.3327 16 29.3327Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12.0007C15.2636 12.0007 14.6667 12.5976 14.6667 13.334C14.6667 14.0704 15.2636 14.6673 16 14.6673C16.7364 14.6673 17.3333 14.0704 17.3333 13.334C17.3333 12.5976 16.7364 12.0007 16 12.0007ZM12 13.334C12 11.1248 13.7909 9.33398 16 9.33398C18.2091 9.33398 20 11.1248 20 13.334C20 15.5431 18.2091 17.334 16 17.334C13.7909 17.334 12 15.5431 12 13.334Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/notification-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/notification-dark.svg
new file mode 100644
index 0000000000..07aa882140
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/notification-dark.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0003 5.33337C21.8914 5.33337 26.667 10.109 26.667 16C26.667 21.8911 21.8914 26.6667 16.0003 26.6667C10.1093 26.6667 5.33366 21.8911 5.33366 16C5.33366 10.109 10.1093 5.33337 16.0003 5.33337ZM16.0003 2.66671C23.3641 2.66671 29.3337 8.63624 29.3337 16C29.3337 23.3638 23.3641 29.3334 16.0003 29.3334C8.63653 29.3334 2.66699 23.3638 2.66699 16C2.66699 8.63624 8.63653 2.66671 16.0003 2.66671Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0003 17.3334C15.2639 17.3334 14.667 16.7364 14.667 16V10.6667C14.667 9.93033 15.2639 9.33337 16.0003 9.33337C16.7367 9.33337 17.3337 9.93033 17.3337 10.6667V16C17.3337 16.7364 16.7367 17.3334 16.0003 17.3334ZM16.0003 20C16.7367 20 17.3337 20.597 17.3337 21.3334C17.3337 22.0698 16.7367 22.6667 16.0003 22.6667C15.2639 22.6667 14.667 22.0698 14.667 21.3334C14.667 20.597 15.2639 20 16.0003 20Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/notification-light.svg b/examples/quickcontrols/wearable/Wearable/icons/notification-light.svg
new file mode 100644
index 0000000000..b4ac2bdb4e
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/notification-light.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0003 5.33331C21.8914 5.33331 26.667 10.1089 26.667 16C26.667 21.891 21.8914 26.6666 16.0003 26.6666C10.1093 26.6666 5.33366 21.891 5.33366 16C5.33366 10.1089 10.1093 5.33331 16.0003 5.33331ZM16.0003 2.66665C23.3641 2.66665 29.3337 8.63618 29.3337 16C29.3337 23.3638 23.3641 29.3333 16.0003 29.3333C8.63653 29.3333 2.66699 23.3638 2.66699 16C2.66699 8.63618 8.63653 2.66665 16.0003 2.66665Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0003 17.3333C15.2639 17.3333 14.667 16.7364 14.667 16V10.6666C14.667 9.93027 15.2639 9.33331 16.0003 9.33331C16.7367 9.33331 17.3337 9.93027 17.3337 10.6666V16C17.3337 16.7364 16.7367 17.3333 16.0003 17.3333ZM16.0003 20C16.7367 20 17.3337 20.5969 17.3337 21.3333C17.3337 22.0697 16.7367 22.6666 16.0003 22.6666C15.2639 22.6666 14.667 22.0697 14.667 21.3333C14.667 20.5969 15.2639 20 16.0003 20Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/plus-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/plus-dark.svg
new file mode 100644
index 0000000000..e4ef49ca4f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/plus-dark.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.667 16C10.667 15.2636 11.2639 14.6666 12.0003 14.6666H20.0003C20.7367 14.6666 21.3337 15.2636 21.3337 16C21.3337 16.7363 20.7367 17.3333 20.0003 17.3333H12.0003C11.2639 17.3333 10.667 16.7363 10.667 16Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0003 21.3334C15.2639 21.3334 14.667 20.7364 14.667 20L14.667 12C14.667 11.2637 15.2639 10.6667 16.0003 10.6667C16.7367 10.6667 17.3337 11.2637 17.3337 12L17.3337 20C17.3337 20.7364 16.7367 21.3334 16.0003 21.3334Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/plus-light.svg b/examples/quickcontrols/wearable/Wearable/icons/plus-light.svg
new file mode 100644
index 0000000000..f1adca5444
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/plus-light.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.667 16C10.667 15.2636 11.2639 14.6667 12.0003 14.6667H20.0003C20.7367 14.6667 21.3337 15.2636 21.3337 16C21.3337 16.7364 20.7367 17.3333 20.0003 17.3333H12.0003C11.2639 17.3333 10.667 16.7364 10.667 16Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0003 21.3333C15.2639 21.3333 14.667 20.7364 14.667 20L14.667 12C14.667 11.2636 15.2639 10.6667 16.0003 10.6667C16.7367 10.6667 17.3337 11.2636 17.3337 12L17.3337 20C17.3337 20.7364 16.7367 21.3333 16.0003 21.3333Z" fill="#191919"/>
+</svg>
+
diff --git a/examples/quickcontrols/wearable/Wearable/icons/pressure-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/pressure-dark.svg
new file mode 100644
index 0000000000..270a8411a8
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/pressure-dark.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z" fill="#E6E6E6"/>
+<path d="M12 3V4.5" stroke="#E6E6E6" stroke-width="2" stroke-linecap="round"/>
+<path d="M4.5 13C5.05228 13 5.5 12.5523 5.5 12C5.5 11.4477 5.05228 11 4.5 11V13ZM3 13H4.5V11H3V13Z" fill="#E6E6E6"/>
+<path d="M13 19.5C13 18.9477 12.5523 18.5 12 18.5C11.4477 18.5 11 18.9477 11 19.5H13ZM13 21V19.5H11V21H13Z" fill="#E6E6E6"/>
+<path d="M19.5 11C18.9477 11 18.5 11.4477 18.5 12C18.5 12.5523 18.9477 13 19.5 13V11ZM21 11H19.5V13H21V11Z" fill="#E6E6E6"/>
+<circle cx="12" cy="12" r="2" fill="#E6E6E6"/>
+<path d="M16 12.75C16.4142 12.75 16.75 12.4142 16.75 12C16.75 11.5858 16.4142 11.25 16 11.25V12.75ZM12 12.75L16 12.75V11.25L12 11.25V12.75Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/pressure-light.svg b/examples/quickcontrols/wearable/Wearable/icons/pressure-light.svg
new file mode 100644
index 0000000000..b9a5773724
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/pressure-light.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z" fill="#0D0D0D"/>
+<path d="M12 3V4.5" stroke="#191919" stroke-width="2" stroke-linecap="round"/>
+<path d="M4.5 13C5.05228 13 5.5 12.5523 5.5 12C5.5 11.4477 5.05228 11 4.5 11V13ZM3 13H4.5V11H3V13Z" fill="#191919"/>
+<path d="M13 19.5C13 18.9477 12.5523 18.5 12 18.5C11.4477 18.5 11 18.9477 11 19.5H13ZM13 21V19.5H11V21H13Z" fill="#191919"/>
+<path d="M19.5 11C18.9477 11 18.5 11.4477 18.5 12C18.5 12.5523 18.9477 13 19.5 13V11ZM21 11H19.5V13H21V11Z" fill="#191919"/>
+<circle cx="12" cy="12" r="2" fill="#191919"/>
+<path d="M16 12.75C16.4142 12.75 16.75 12.4142 16.75 12C16.75 11.5858 16.4142 11.25 16 11.25V12.75ZM12 12.75L16 12.75V11.25L12 11.25V12.75Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/right-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/right-dark.svg
new file mode 100644
index 0000000000..842b3ea034
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/right-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.5C18 8.94772 17.5523 8.5 17 8.5H5C4.44771 8.5 4 8.94772 4 9.5V19.5C4 20.0523 4.44771 20.5 5 20.5C5.55229 20.5 6 20.0523 6 19.5V10.5003L17 10.5C17.5523 10.5 18 10.0523 18 9.5Z" fill="#2CDE85"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2628 3.32428C10.8897 3.7314 10.9172 4.36397 11.3243 4.73716L16.5201 9.50001L11.3243 14.2629C10.9172 14.636 10.8897 15.2686 11.2628 15.6757C11.636 16.0828 12.2686 16.1104 12.6757 15.7372L18.6757 10.2372C18.8824 10.0477 19 9.78031 19 9.50001C19 9.2197 18.8824 8.95226 18.6757 8.76285L12.6757 3.26285C12.2686 2.88966 11.636 2.91716 11.2628 3.32428Z" fill="#2CDE85"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/right-light.svg b/examples/quickcontrols/wearable/Wearable/icons/right-light.svg
new file mode 100644
index 0000000000..bbde2d6031
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/right-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.5C18 8.94772 17.5523 8.5 17 8.5H5C4.44771 8.5 4 8.94772 4 9.5V19.5C4 20.0523 4.44771 20.5 5 20.5C5.55229 20.5 6 20.0523 6 19.5V10.5003L17 10.5C17.5523 10.5 18 10.0523 18 9.5Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2628 3.32428C10.8897 3.7314 10.9172 4.36397 11.3243 4.73716L16.5201 9.50001L11.3243 14.2629C10.9172 14.636 10.8897 15.2686 11.2628 15.6757C11.636 16.0828 12.2686 16.1104 12.6757 15.7372L18.6757 10.2372C18.8824 10.0477 19 9.78031 19 9.50001C19 9.2197 18.8824 8.95226 18.6757 8.76285L12.6757 3.26285C12.2686 2.88966 11.636 2.91716 11.2628 3.32428Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/settings-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/settings-dark.svg
new file mode 100644
index 0000000000..ee707b771e
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/settings-dark.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7996 5.33329C11.7996 3.86053 12.9936 2.66663 14.4663 2.66663H17.496C18.9687 2.66663 20.1626 3.86053 20.1626 5.33329V6.12674C20.1635 6.12972 20.1663 6.13636 20.1739 6.14704C20.1909 6.17113 20.2251 6.20318 20.2767 6.22576C21.1357 6.60213 21.9351 7.08808 22.6572 7.66557C22.7011 7.70069 22.7455 7.71596 22.775 7.71972C22.788 7.72138 22.7951 7.72069 22.7982 7.72007L23.9147 7.11651C25.1584 6.44423 26.7106 6.85936 27.4526 8.06271L28.8989 10.408C29.7032 11.7124 29.2452 13.4248 27.8971 14.1535L26.6497 14.8278C26.6475 14.8301 26.6429 14.8358 26.6371 14.8477C26.624 14.8746 26.6124 14.9206 26.6178 14.9769C26.6499 15.3139 26.6663 15.6552 26.6663 16C26.6663 16.3447 26.6499 16.686 26.6178 17.0231C26.6124 17.0794 26.624 17.1253 26.6371 17.1522C26.6429 17.1642 26.6475 17.1699 26.6497 17.1721L27.897 17.8464C29.2452 18.5751 29.7031 20.2875 28.8988 21.5919L27.4526 23.9372C26.7105 25.1406 25.1583 25.5557 23.9147 24.8834L22.7982 24.2799C22.7951 24.2793 22.7879 24.2786 22.7749 24.2802C22.7455 24.284 22.7011 24.2993 22.6571 24.3344C21.935 24.9119 21.1357 25.3978 20.2767 25.7742C20.2251 25.7967 20.1909 25.8288 20.1739 25.8529C20.1663 25.8636 20.1635 25.8702 20.1626 25.8732V26.6666C20.1626 28.1394 18.9687 29.3333 17.496 29.3333H14.4663C12.9935 29.3333 11.7996 28.1394 11.7996 26.6666V25.8571C11.7988 25.8541 11.796 25.8475 11.7885 25.8369C11.7716 25.8129 11.7377 25.7809 11.6864 25.7583C10.8353 25.3816 10.0433 24.8972 9.32749 24.3227C9.28356 24.2874 9.23902 24.2721 9.2095 24.2683C9.19646 24.2666 9.18928 24.2673 9.18621 24.2679L8.04757 24.8834C6.80391 25.5557 5.25172 25.1405 4.50968 23.9372L3.06347 21.5919C2.2591 20.2875 2.71708 18.5751 4.0652 17.8464L5.34766 17.1531C5.34987 17.1509 5.35443 17.1452 5.36024 17.1333C5.37331 17.1065 5.38497 17.0607 5.37971 17.0045C5.34875 16.6735 5.33294 16.3384 5.33294 16C5.33294 15.6616 5.34874 15.3265 5.37971 14.9955C5.38497 14.9392 5.37331 14.8935 5.36023 14.8666C5.35443 14.8547 5.34987 14.8491 5.34765 14.8468L4.06513 14.1536C2.71701 13.4248 2.25903 11.7124 3.06339 10.408L4.50961 8.06272C5.25165 6.85937 6.80383 6.44425 8.0475 7.11652L9.18618 7.73205C9.18925 7.73267 9.19644 7.73336 9.20947 7.73168C9.23899 7.72788 9.28354 7.71251 9.32746 7.67726C10.0433 7.10275 10.8353 6.61834 11.6864 6.24167C11.7377 6.21899 11.7716 6.18701 11.7885 6.16304C11.796 6.15241 11.7988 6.1458 11.7996 6.14284V5.33329ZM11.8 6.14101C11.8001 6.141 11.8 6.14154 11.7997 6.14267ZM9.18436 7.73148C9.18439 7.73142 9.18499 7.73154 9.18603 7.73202ZM5.34619 14.8456C5.34622 14.8456 5.34669 14.8459 5.34755 14.8467ZM5.34619 17.1543C5.34618 17.1542 5.34661 17.1538 5.34755 17.1532ZM9.18439 24.2685C9.18436 24.2684 9.18487 24.2682 9.18606 24.2679ZM26.6511 17.1733C26.651 17.1733 26.6505 17.1729 26.6498 17.1722ZM26.6512 14.8266C26.6512 14.8267 26.6508 14.8271 26.6498 14.8277ZM22.8 7.71949C22.8001 7.71954 22.7996 7.71978 22.7984 7.72003ZM20.1623 6.1249C20.1623 6.12491 20.1625 6.12547 20.1626 6.12658ZM17.496 5.33329L14.4663 5.33329V6.14406C14.4663 7.32746 13.7029 8.2654 12.7657 8.68019C12.1284 8.96223 11.5343 9.3254 10.9966 9.75695C10.1842 10.409 8.97649 10.65 7.91912 10.0785L6.77942 9.46239L5.33321 11.8077L6.61674 12.5015C7.67141 13.0716 8.13151 14.2099 8.03478 15.2438C8.01153 15.4924 7.99961 15.7446 7.99961 16C7.99961 16.2553 8.01153 16.5075 8.03479 16.7561C8.13152 17.7901 7.67142 18.9283 6.61675 19.4984L5.33328 20.1922L6.77949 22.5375L7.91915 21.9215C8.97651 21.3499 10.1842 21.591 10.9966 22.243C11.5343 22.6745 12.1284 23.0377 12.7657 23.3197C13.7029 23.7345 14.4663 24.6725 14.4663 25.8559V26.6666H17.496V25.872C17.496 24.6843 18.2646 23.7443 19.2065 23.3316C19.8497 23.0498 20.4492 22.6855 20.9917 22.2518C21.8039 21.6022 23.0096 21.3628 24.0652 21.9335L25.1828 22.5375L26.629 20.1922L25.3806 19.5174C24.3242 18.9464 23.8644 17.8055 23.9631 16.7701C23.9872 16.517 23.9996 16.2601 23.9996 16C23.9996 15.7398 23.9872 15.483 23.9631 15.2299C23.8644 14.1945 24.3242 13.0536 25.3806 12.4825L26.629 11.8077L25.1828 9.46237L24.0653 10.0665C23.0097 10.6371 21.804 10.3978 20.9917 9.74817C20.4493 9.31439 19.8497 8.95008 19.2065 8.66828C18.2646 8.2556 17.496 7.31563 17.496 6.12796L17.496 5.33329Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0003 18.6666C17.4731 18.6666 18.667 17.4727 18.667 16C18.667 14.5272 17.4731 13.3333 16.0003 13.3333C14.5276 13.3333 13.3337 14.5272 13.3337 16C13.3337 17.4727 14.5276 18.6666 16.0003 18.6666ZM16.0003 21.3333C18.9458 21.3333 21.3337 18.9455 21.3337 16C21.3337 13.0544 18.9458 10.6666 16.0003 10.6666C13.0548 10.6666 10.667 13.0544 10.667 16C10.667 18.9455 13.0548 21.3333 16.0003 21.3333Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/settings-light.svg b/examples/quickcontrols/wearable/Wearable/icons/settings-light.svg
new file mode 100644
index 0000000000..bf17c3661a
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/settings-light.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8 5.33268C11.8 3.85992 12.9939 2.66602 14.4667 2.66602H17.4963C18.9691 2.66602 20.163 3.85992 20.163 5.33268V6.12613C20.1639 6.12911 20.1667 6.13575 20.1742 6.14643C20.1913 6.17052 20.2255 6.20257 20.277 6.22515C21.1361 6.60152 21.9354 7.08747 22.6575 7.66496C22.7014 7.70007 22.7459 7.71535 22.7753 7.71911C22.7883 7.72077 22.7955 7.72008 22.7986 7.71945L23.9151 7.1159C25.1588 6.44362 26.711 6.85875 27.453 8.0621L28.8992 10.4074C29.7036 11.7118 29.2456 13.4242 27.8975 14.1529L26.6501 14.8272C26.6478 14.8295 26.6433 14.8351 26.6375 14.8471C26.6244 14.874 26.6128 14.9199 26.6181 14.9763C26.6502 15.3133 26.6666 15.6546 26.6666 15.9993C26.6666 16.3441 26.6502 16.6854 26.6181 17.0225C26.6127 17.0788 26.6244 17.1247 26.6375 17.1516C26.6433 17.1636 26.6478 17.1693 26.6501 17.1715L27.8974 17.8458C29.2455 18.5745 29.7035 20.2869 28.8991 21.5913L27.4529 23.9366C26.7109 25.1399 25.1587 25.5551 23.915 24.8828L22.7985 24.2793C22.7955 24.2786 22.7883 24.278 22.7753 24.2796C22.7459 24.2834 22.7014 24.2986 22.6575 24.3338C21.9354 24.9112 21.1361 25.3972 20.277 25.7735C20.2255 25.7961 20.1913 25.8282 20.1742 25.8523C20.1667 25.8629 20.1639 25.8696 20.163 25.8726V26.666C20.163 28.1388 18.9691 29.3327 17.4963 29.3327H14.4667C12.9939 29.3327 11.8 28.1388 11.8 26.666V25.8565C11.7991 25.8535 11.7964 25.8469 11.7889 25.8363C11.772 25.8123 11.738 25.7803 11.6868 25.7576C10.8357 25.381 10.0437 24.8966 9.32786 24.3221C9.28393 24.2868 9.23939 24.2715 9.20987 24.2677C9.19683 24.266 9.18964 24.2667 9.18658 24.2673L8.04794 24.8828C6.80427 25.5551 5.25209 25.1399 4.51005 23.9366L3.06383 21.5913C2.25947 20.2869 2.71744 18.5745 4.06556 17.8458L5.34802 17.1525C5.35024 17.1503 5.3548 17.1446 5.3606 17.1327C5.37368 17.1059 5.38534 17.0601 5.38008 17.0039C5.34911 16.6729 5.33331 16.3378 5.33331 15.9993C5.33331 15.6609 5.34911 15.3259 5.38008 14.9948C5.38534 14.9386 5.37367 14.8929 5.3606 14.866C5.35479 14.8541 5.35024 14.8485 5.34802 14.8462L4.06549 14.1529C2.71737 13.4242 2.2594 11.7118 3.06376 10.4074L4.50998 8.06211C5.25202 6.85876 6.8042 6.44364 8.04787 7.11591L9.18655 7.73144C9.18962 7.73206 9.1968 7.73275 9.20984 7.73107C9.23936 7.72727 9.2839 7.7119 9.32783 7.67665C10.0436 7.10214 10.8357 6.61773 11.6868 6.24106C11.738 6.21838 11.772 6.1864 11.7889 6.16243C11.7964 6.1518 11.7991 6.14519 11.8 6.14222V5.33268ZM11.8004 6.14039C11.8004 6.14039 11.8004 6.14093 11.8001 6.14206L11.8004 6.14039ZM9.18473 7.73087C9.18475 7.73081 9.18535 7.73093 9.1864 7.73141L9.18473 7.73087ZM5.34655 14.845C5.34658 14.845 5.34706 14.8453 5.34791 14.8461L5.34655 14.845ZM5.34655 17.1537C5.34655 17.1536 5.34698 17.1532 5.34791 17.1526L5.34655 17.1537ZM9.18476 24.2679C9.18472 24.2678 9.18524 24.2676 9.18643 24.2673L9.18476 24.2679ZM26.6515 17.1727C26.6514 17.1727 26.6509 17.1723 26.6501 17.1716L26.6515 17.1727ZM26.6515 14.826C26.6516 14.8261 26.6512 14.8265 26.6502 14.8271L26.6515 14.826ZM22.8004 7.71888C22.8005 7.71893 22.7999 7.71917 22.7987 7.71942L22.8004 7.71888ZM20.1626 6.12429C20.1627 6.12429 20.1629 6.12486 20.163 6.12597L20.1626 6.12429ZM17.4963 5.33268L14.4667 5.33268V6.14345C14.4667 7.32685 13.7033 8.26479 12.766 8.67958C12.1288 8.96162 11.5347 9.32479 10.997 9.75634C10.1846 10.4084 8.97685 10.6494 7.91949 10.0779L6.77979 9.46178L5.33357 11.8071L6.61711 12.5009C7.67178 13.071 8.13188 14.2092 8.03515 15.2432C8.0119 15.4918 7.99998 15.744 7.99998 15.9993C7.99998 16.2547 8.0119 16.5069 8.03515 16.7555C8.13189 17.7895 7.67179 18.9277 6.61711 19.4978L5.33364 20.1916L6.77986 22.5369L7.91951 21.9209C8.97688 21.3493 10.1846 21.5904 10.997 22.2424C11.5347 22.6739 12.1288 23.0371 12.766 23.3191C13.7033 23.7339 14.4667 24.6719 14.4667 25.8552V26.666H17.4963V25.8714C17.4963 24.6837 18.265 23.7437 19.2069 23.331C19.8501 23.0492 20.4496 22.6849 20.992 22.2512C21.8043 21.6016 23.01 21.3622 24.0656 21.9328L25.1831 22.5369L26.6293 20.1916L25.381 19.5168C24.3245 18.9457 23.8648 17.8049 23.9635 16.7695C23.9876 16.5164 24 16.2595 24 15.9993C24 15.7392 23.9876 15.4824 23.9635 15.2293C23.8648 14.1939 24.3245 13.053 25.381 12.4819L26.6294 11.8071L25.1832 9.46176L24.0656 10.0659C23.01 10.6365 21.8043 10.3972 20.992 9.74756C20.4496 9.31378 19.8501 8.94947 19.2069 8.66767C18.265 8.25499 17.4963 7.31501 17.4963 6.12735L17.4963 5.33268Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 18.666C17.4727 18.666 18.6666 17.4721 18.6666 15.9993C18.6666 14.5266 17.4727 13.3327 16 13.3327C14.5272 13.3327 13.3333 14.5266 13.3333 15.9993C13.3333 17.4721 14.5272 18.666 16 18.666ZM16 21.3327C18.9455 21.3327 21.3333 18.9449 21.3333 15.9993C21.3333 13.0538 18.9455 10.666 16 10.666C13.0544 10.666 10.6666 13.0538 10.6666 15.9993C10.6666 18.9449 13.0544 21.3327 16 21.3327Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/sun-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/sun-dark.svg
new file mode 100644
index 0000000000..adbfaa5067
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/sun-dark.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 26.6667C23.6819 26.6667 26.6667 23.6819 26.6667 20C26.6667 16.3181 23.6819 13.3333 20 13.3333C16.3181 13.3333 13.3333 16.3181 13.3333 20C13.3333 23.6819 16.3181 26.6667 20 26.6667ZM20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20C10 25.5228 14.4772 30 20 30Z" fill="#E6E6E6"/>
+<path d="M20.0003 8.33329C19.0798 8.33329 18.3337 7.5871 18.3337 6.66663V3.33329C18.3337 2.41282 19.0798 1.66663 20.0003 1.66663C20.9208 1.66663 21.667 2.41282 21.667 3.33329V6.66663C21.667 7.5871 20.9208 8.33329 20.0003 8.33329ZM30.5704 11.7632C29.9334 12.4002 28.9006 12.4002 28.2636 11.7632C27.6325 11.1322 27.6258 10.1111 28.2484 9.47175L30.6126 7.04431C31.2597 6.37985 32.3267 6.37752 32.9767 7.03915C33.6127 7.68651 33.6081 8.72551 32.9664 9.36723L30.5704 11.7632ZM33.3337 21.6666C32.4132 21.6666 31.667 20.9204 31.667 20C31.667 19.0795 32.4132 18.3333 33.3337 18.3333H36.667C37.5875 18.3333 38.3337 19.0795 38.3337 20C38.3337 20.9204 37.5875 21.6666 36.667 21.6666H33.3337ZM20.0003 38.3333C19.0798 38.3333 18.3337 37.5871 18.3337 36.6666V33.3333C18.3337 32.4128 19.0798 31.6666 20.0003 31.6666C20.9208 31.6666 21.667 32.4128 21.667 33.3333V36.6666C21.667 37.5871 20.9208 38.3333 20.0003 38.3333ZM11.7213 11.7362C11.0873 12.3476 10.0824 12.3452 9.45131 11.7307L7.04488 9.38764C6.38033 8.74058 6.37794 7.67356 7.03958 7.02352C7.68691 6.38755 8.72585 6.39215 9.36752 7.03382L11.7425 9.4088C12.3877 10.054 12.3781 11.1029 11.7213 11.7362ZM32.9582 32.9164C32.298 33.5997 31.2029 33.5994 30.543 32.9158L28.2303 30.5198C27.6169 29.8843 27.6258 28.8744 28.2504 28.2499C28.8749 27.6254 29.8846 27.6164 30.5201 28.2296L32.9165 30.5419C33.584 31.186 33.6027 32.2493 32.9582 32.9164ZM3.33366 21.6666C2.41318 21.6666 1.66699 20.9204 1.66699 20C1.66699 19.0795 2.41318 18.3333 3.33366 18.3333H6.66699C7.58747 18.3333 8.33366 19.0795 8.33366 20C8.33366 20.9204 7.58747 21.6666 6.66699 21.6666H3.33366ZM9.3962 32.9791C8.74205 33.6332 7.68001 33.6285 7.03167 32.9686C6.39139 32.3169 6.39602 31.2709 7.04204 30.6249L9.37458 28.2924C10.026 27.641 11.0761 27.6222 11.7503 28.25C12.4142 28.891 12.4235 29.9518 11.771 30.6043L9.3962 32.9791Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/sun-light.svg b/examples/quickcontrols/wearable/Wearable/icons/sun-light.svg
new file mode 100644
index 0000000000..2b1cc0636f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/sun-light.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 26.6667C23.6819 26.6667 26.6667 23.6819 26.6667 20C26.6667 16.3181 23.6819 13.3333 20 13.3333C16.3181 13.3333 13.3333 16.3181 13.3333 20C13.3333 23.6819 16.3181 26.6667 20 26.6667ZM20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20C10 25.5228 14.4772 30 20 30Z" fill="#191919"/>
+<path d="M20 8.33268C19.0795 8.33268 18.3334 7.58649 18.3334 6.66601V3.33268C18.3334 2.41221 19.0795 1.66602 20 1.66602C20.9205 1.66602 21.6667 2.41221 21.6667 3.33268V6.66602C21.6667 7.58649 20.9205 8.33268 20 8.33268ZM30.5701 11.7626C29.9331 12.3996 28.9003 12.3996 28.2633 11.7626C27.6322 11.1315 27.6255 10.1105 28.2481 9.47114L30.6123 7.0437C31.2594 6.37924 32.3264 6.37691 32.9764 7.03854C33.6124 7.6859 33.6078 8.7249 32.9661 9.36662L30.5701 11.7626ZM33.3333 21.666C32.4129 21.666 31.6667 20.9198 31.6667 19.9993C31.6667 19.0789 32.4129 18.3327 33.3334 18.3327H36.6667C37.5872 18.3327 38.3334 19.0789 38.3334 19.9993C38.3334 20.9198 37.5872 21.666 36.6667 21.666H33.3333ZM20 38.3327C19.0795 38.3327 18.3334 37.5865 18.3334 36.666V33.3327C18.3334 32.4122 19.0795 31.666 20 31.666C20.9205 31.666 21.6667 32.4122 21.6667 33.3327V36.666C21.6667 37.5865 20.9205 38.3327 20 38.3327ZM11.721 11.7356C11.087 12.347 10.0821 12.3446 9.451 11.7301L7.04458 9.38703C6.38003 8.73997 6.37764 7.67295 7.03928 7.02291C7.68661 6.38694 8.72554 6.39154 9.36722 7.03321L11.7422 9.40819C12.3874 10.0534 12.3778 11.1023 11.721 11.7356ZM32.9579 32.9158C32.2977 33.5991 31.2026 33.5988 30.5427 32.9152L28.23 30.5192C27.6166 29.8836 27.6255 28.8738 28.2501 28.2493C28.8746 27.6248 29.8843 27.6157 30.5198 28.229L32.9162 30.5413C33.5837 31.1854 33.6024 32.2487 32.9579 32.9158ZM3.33335 21.666C2.41288 21.666 1.66669 20.9198 1.66669 19.9993C1.66669 19.0789 2.41288 18.3327 3.33335 18.3327H6.66669C7.58716 18.3327 8.33335 19.0789 8.33335 19.9993C8.33335 20.9198 7.58716 21.666 6.66669 21.666H3.33335ZM9.3959 32.9785C8.74174 33.6326 7.6797 33.6279 7.03136 32.968C6.39108 32.3163 6.39571 31.2703 7.04173 30.6243L9.37428 28.2918C10.0257 27.6404 11.0758 27.6216 11.75 28.2493C12.4139 28.8903 12.4232 29.9512 11.7707 30.6037L9.3959 32.9785Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/sunrise-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/sunrise-dark.svg
new file mode 100644
index 0000000000..2e3c4530d1
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/sunrise-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 19H3C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.707 2.29289C12.3165 1.90237 11.6833 1.90237 11.2928 2.29289L8.29277 5.29289C7.90225 5.68342 7.90225 6.31658 8.29277 6.70711C8.6833 7.09763 9.31646 7.09763 9.70698 6.70711L11.0039 5.41024C11.0012 5.43981 10.9999 5.46975 10.9999 5.5V8C10.9999 8.55228 11.4476 9 11.9999 9C12.5522 9 12.9999 8.55228 12.9999 8V5.5C12.9999 5.46975 12.9985 5.43981 12.9959 5.41024L14.2928 6.70711C14.6833 7.09763 15.3165 7.09763 15.707 6.70711C16.0975 6.31658 16.0975 5.68342 15.707 5.29289L12.707 2.29289ZM12.0896 4.50397L11.9999 4.41421L11.9101 4.50397C11.9397 4.50134 11.9696 4.5 11.9999 4.5C12.0301 4.5 12.0601 4.50134 12.0896 4.50397ZM4.95391 10.3375L4.23752 9.60402C3.85644 9.21387 3.86011 8.58976 4.24576 8.20412C4.63463 7.81524 5.26512 7.81524 5.65399 8.20412L6.37895 8.92908C6.77504 9.32517 6.7694 9.96908 6.36642 10.3582C5.97001 10.7409 5.33893 10.7317 4.95391 10.3375ZM17.6624 8.95403L18.3959 8.23765C18.786 7.85657 19.4101 7.86024 19.7958 8.24588C20.1846 8.63476 20.1846 9.26524 19.7958 9.65412L19.0708 10.3791C18.6747 10.7752 18.0308 10.7695 17.6417 10.3665C17.259 9.97014 17.2682 9.33905 17.6624 8.95403ZM14.7749 12.825C15.5915 13.375 16.1915 14.1 16.5749 15H7.42487C7.8082 14.1 8.4082 13.375 9.22487 12.825C10.0415 12.275 10.9665 12 11.9999 12C13.0332 12 13.9582 12.275 14.7749 12.825ZM5.25998 15.0231C4.96299 16.087 5.8953 17 6.99987 17H16.9999C18.1044 17 19.0367 16.087 18.7398 15.0231C18.4278 13.9057 17.8354 12.9105 16.9624 12.0375C15.604 10.6792 13.9499 10 11.9999 10C10.0499 10 8.3957 10.6792 7.03737 12.0375C6.16436 12.9105 5.5719 13.9057 5.25998 15.0231Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/sunrise-light.svg b/examples/quickcontrols/wearable/Wearable/icons/sunrise-light.svg
new file mode 100644
index 0000000000..1c1967a6bc
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/sunrise-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 19H3C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.707 2.29289C12.3165 1.90237 11.6833 1.90237 11.2928 2.29289L8.29277 5.29289C7.90225 5.68342 7.90225 6.31658 8.29277 6.70711C8.6833 7.09763 9.31646 7.09763 9.70698 6.70711L11.0039 5.41024C11.0012 5.43981 10.9999 5.46975 10.9999 5.5V8C10.9999 8.55228 11.4476 9 11.9999 9C12.5522 9 12.9999 8.55228 12.9999 8V5.5C12.9999 5.46975 12.9985 5.43981 12.9959 5.41024L14.2928 6.70711C14.6833 7.09763 15.3165 7.09763 15.707 6.70711C16.0975 6.31658 16.0975 5.68342 15.707 5.29289L12.707 2.29289ZM12.0896 4.50397L11.9999 4.41421L11.9101 4.50397C11.9397 4.50134 11.9696 4.5 11.9999 4.5C12.0301 4.5 12.0601 4.50134 12.0896 4.50397ZM4.95391 10.3375L4.23752 9.60402C3.85644 9.21387 3.86011 8.58976 4.24576 8.20412C4.63463 7.81524 5.26512 7.81524 5.65399 8.20412L6.37895 8.92908C6.77504 9.32517 6.7694 9.96908 6.36642 10.3582C5.97001 10.7409 5.33893 10.7317 4.95391 10.3375ZM17.6624 8.95403L18.3959 8.23765C18.786 7.85657 19.4101 7.86024 19.7958 8.24588C20.1846 8.63476 20.1846 9.26524 19.7958 9.65412L19.0708 10.3791C18.6747 10.7752 18.0308 10.7695 17.6417 10.3665C17.259 9.97014 17.2682 9.33905 17.6624 8.95403ZM14.7749 12.825C15.5915 13.375 16.1915 14.1 16.5749 15H7.42487C7.8082 14.1 8.4082 13.375 9.22487 12.825C10.0415 12.275 10.9665 12 11.9999 12C13.0332 12 13.9582 12.275 14.7749 12.825ZM5.25998 15.0231C4.96299 16.087 5.8953 17 6.99987 17H16.9999C18.1044 17 19.0367 16.087 18.7398 15.0231C18.4278 13.9057 17.8354 12.9105 16.9624 12.0375C15.604 10.6792 13.9499 10 11.9999 10C10.0499 10 8.3957 10.6792 7.03737 12.0375C6.16436 12.9105 5.5719 13.9057 5.25998 15.0231Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/sunset-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/sunset-dark.svg
new file mode 100644
index 0000000000..89524e397a
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/sunset-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 19H3C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0039 5.58976C11.0012 5.56019 10.9999 5.53025 10.9999 5.5V3C10.9999 2.44772 11.4476 2 11.9999 2C12.5522 2 12.9999 2.44772 12.9999 3V5.5C12.9999 5.53025 12.9985 5.56019 12.9959 5.58976L14.2928 4.29289C14.6833 3.90237 15.3165 3.90237 15.707 4.29289C16.0975 4.68342 16.0975 5.31658 15.707 5.70711L12.707 8.70711C12.3165 9.09763 11.6833 9.09763 11.2928 8.70711L8.29277 5.70711C7.90225 5.31658 7.90225 4.68342 8.29277 4.29289C8.68329 3.90237 9.31646 3.90237 9.70698 4.29289L11.0039 5.58976ZM11.9101 6.49603L11.9999 6.58579L12.0896 6.49603C12.0601 6.49866 12.0301 6.5 11.9999 6.5C11.9696 6.5 11.9397 6.49866 11.9101 6.49603ZM4.95391 10.3375L4.23752 9.60403C3.85644 9.21388 3.86011 8.58977 4.24576 8.20413C4.63463 7.81525 5.26512 7.81525 5.65399 8.20413L6.37895 8.92909C6.77504 9.32518 6.7694 9.96909 6.36642 10.3582C5.97001 10.7409 5.33893 10.7317 4.95391 10.3375ZM17.6624 8.95404L18.3959 8.23766C18.786 7.85658 19.4101 7.86025 19.7958 8.24589C20.1846 8.63477 20.1846 9.26525 19.7958 9.65413L19.0708 10.3791C18.6747 10.7752 18.0308 10.7695 17.6417 10.3666C17.259 9.97015 17.2682 9.33906 17.6624 8.95404ZM14.7749 12.825C15.5915 13.375 16.1915 14.1 16.5749 15H7.42487C7.8082 14.1 8.4082 13.375 9.22487 12.825C10.0415 12.275 10.9665 12 11.9999 12C13.0332 12 13.9582 12.275 14.7749 12.825ZM5.25998 15.0231C4.96299 16.087 5.8953 17 6.99987 17H16.9999C18.1044 17 19.0367 16.087 18.7398 15.0231C18.4278 13.9057 17.8354 12.9105 16.9624 12.0375C15.604 10.6792 13.9499 10 11.9999 10C10.0499 10 8.3957 10.6792 7.03737 12.0375C6.16436 12.9105 5.5719 13.9057 5.25998 15.0231Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/sunset-light.svg b/examples/quickcontrols/wearable/Wearable/icons/sunset-light.svg
new file mode 100644
index 0000000000..e260fd1d5f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/sunset-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 19H3C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0039 5.58976C11.0012 5.56019 10.9999 5.53025 10.9999 5.5V3C10.9999 2.44772 11.4476 2 11.9999 2C12.5522 2 12.9999 2.44772 12.9999 3V5.5C12.9999 5.53025 12.9985 5.56019 12.9959 5.58976L14.2928 4.29289C14.6833 3.90237 15.3165 3.90237 15.707 4.29289C16.0975 4.68342 16.0975 5.31658 15.707 5.70711L12.707 8.70711C12.3165 9.09763 11.6833 9.09763 11.2928 8.70711L8.29277 5.70711C7.90225 5.31658 7.90225 4.68342 8.29277 4.29289C8.68329 3.90237 9.31646 3.90237 9.70698 4.29289L11.0039 5.58976ZM11.9101 6.49603L11.9999 6.58579L12.0896 6.49603C12.0601 6.49866 12.0301 6.5 11.9999 6.5C11.9696 6.5 11.9397 6.49866 11.9101 6.49603ZM4.95391 10.3375L4.23752 9.60403C3.85644 9.21388 3.86011 8.58977 4.24576 8.20413C4.63463 7.81525 5.26512 7.81525 5.65399 8.20413L6.37895 8.92909C6.77504 9.32518 6.7694 9.96909 6.36642 10.3582C5.97001 10.7409 5.33893 10.7317 4.95391 10.3375ZM17.6624 8.95404L18.3959 8.23766C18.786 7.85658 19.4101 7.86025 19.7958 8.24589C20.1846 8.63477 20.1846 9.26525 19.7958 9.65413L19.0708 10.3791C18.6747 10.7752 18.0308 10.7695 17.6417 10.3666C17.259 9.97015 17.2682 9.33906 17.6624 8.95404ZM14.7749 12.825C15.5915 13.375 16.1915 14.1 16.5749 15H7.42487C7.8082 14.1 8.4082 13.375 9.22487 12.825C10.0415 12.275 10.9665 12 11.9999 12C13.0332 12 13.9582 12.275 14.7749 12.825ZM5.25998 15.0231C4.96299 16.087 5.8953 17 6.99987 17H16.9999C18.1044 17 19.0367 16.087 18.7398 15.0231C18.4278 13.9057 17.8354 12.9105 16.9624 12.0375C15.604 10.6792 13.9499 10 11.9999 10C10.0499 10 8.3957 10.6792 7.03737 12.0375C6.16436 12.9105 5.5719 13.9057 5.25998 15.0231Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/thermometer-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/thermometer-dark.svg
new file mode 100644
index 0000000000..4a4888318d
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/thermometer-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13V11H14V13C14.6667 13.6667 16 15.6 16 18C16 20.4 13.3333 21 12 21C10.6667 21 8 20.4 8 18C8 15.6 9.33333 13.6667 10 13Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C10.3431 2 9 3.34315 9 5V12.9997C7.78742 13.9103 7 15.3632 7 17C7 19.7614 9.23858 22 12 22C14.7614 22 17 19.7614 17 17C17 15.3632 16.2126 13.9103 15 12.9997V9V6V5C15 3.34315 13.6569 2 12 2ZM13 5C12.4477 5 12 5.44772 12 6C12 6.55228 12.4477 7 13 7V8C12.4477 8 12 8.44772 12 9C12 9.55228 12.4477 10 13 10V13C13 13.6288 13.2902 14.1899 13.744 14.5565L13.743 14.5579L13.7761 14.5819C13.7918 14.5941 13.8076 14.606 13.8237 14.6177C14.5407 15.1675 15 16.0301 15 17C15 18.6568 13.6569 20 12 20C10.3431 20 9 18.6568 9 17C9 16.0301 9.45933 15.1675 10.1763 14.6177C10.1924 14.606 10.2082 14.594 10.2239 14.5819L10.257 14.5579L10.256 14.5565C10.7098 14.1899 11 13.6288 11 13V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/thermometer-light.svg b/examples/quickcontrols/wearable/Wearable/icons/thermometer-light.svg
new file mode 100644
index 0000000000..6019435c79
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/thermometer-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13V11H14V13C14.6667 13.6667 16 15.6 16 18C16 20.4 13.3333 21 12 21C10.6667 21 8 20.4 8 18C8 15.6 9.33333 13.6667 10 13Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C10.3431 2 9 3.34315 9 5V12.9997C7.78742 13.9103 7 15.3632 7 17C7 19.7614 9.23858 22 12 22C14.7614 22 17 19.7614 17 17C17 15.3632 16.2126 13.9103 15 12.9997V9V6V5C15 3.34315 13.6569 2 12 2ZM13 5C12.4477 5 12 5.44772 12 6C12 6.55228 12.4477 7 13 7V8C12.4477 8 12 8.44772 12 9C12 9.55228 12.4477 10 13 10V13C13 13.6288 13.2902 14.1899 13.744 14.5565L13.743 14.5579L13.7761 14.5819C13.7918 14.5941 13.8076 14.606 13.8237 14.6177C14.5407 15.1675 15 16.0301 15 17C15 18.6568 13.6569 20 12 20C10.3431 20 9 18.6568 9 17C9 16.0301 9.45933 15.1675 10.1763 14.6177C10.1924 14.606 10.2082 14.594 10.2239 14.5819L10.257 14.5579L10.256 14.5565C10.7098 14.1899 11 13.6288 11 13V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/uturnleft-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/uturnleft-dark.svg
new file mode 100644
index 0000000000..299dd053d1
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/uturnleft-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 20C19 15.5943 19 12.4999 19 9.99996C19 2.00003 6.99889 2.00001 7 9.99997C7.00035 12.5 7 15.5826 7 20" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 17L7 20L4 17" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/uturnleft-light.svg b/examples/quickcontrols/wearable/Wearable/icons/uturnleft-light.svg
new file mode 100644
index 0000000000..f7d3786a3c
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/uturnleft-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 20C19 15.5943 19 12.4999 19 9.99996C19 2.00003 6.99889 2.00001 7 9.99997C7.00035 12.5 7 15.5826 7 20" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 17L7 20L4 17" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/uturnright-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/uturnright-dark.svg
new file mode 100644
index 0000000000..35b44d1e7a
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/uturnright-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 20C5 15.5943 5 12.4999 5 9.99996C5 2.00003 17.0011 2.00001 17 9.99997C16.9997 12.5 17 15.5826 17 20" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 17L17 20L14 17" stroke="#2CDE85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/uturnright-light.svg b/examples/quickcontrols/wearable/Wearable/icons/uturnright-light.svg
new file mode 100644
index 0000000000..5eda60955f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/uturnright-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 20C5 15.5943 5 12.4999 5 9.99996C5 2.00003 17.0011 2.00001 17 9.99997C16.9997 12.5 17 15.5826 17 20" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 17L17 20L14 17" stroke="#191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/alarms.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/alarms.png
deleted file mode 100644
index 252dcf938f..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/alarms.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/fitness.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/fitness.png
deleted file mode 100644
index 4b0679e271..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/fitness.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/navigation.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/navigation.png
deleted file mode 100644
index 08e73005fd..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/navigation.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/notifications.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/notifications.png
deleted file mode 100644
index 6309312122..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/notifications.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/settings.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/settings.png
deleted file mode 100644
index c1552fb360..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/settings.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/weather.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/weather.png
deleted file mode 100644
index 61be79a24f..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/weather.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/worldclock.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/worldclock.png
deleted file mode 100644
index d23e32e512..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36/worldclock.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/alarms.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/alarms.png
deleted file mode 100644
index 6047e231fc..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/alarms.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/fitness.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/fitness.png
deleted file mode 100644
index 1d2caa3385..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/fitness.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/navigation.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/navigation.png
deleted file mode 100644
index 7d4a62b9e1..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/navigation.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/notifications.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/notifications.png
deleted file mode 100644
index 8d3b333350..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/notifications.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/settings.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/settings.png
deleted file mode 100644
index e89188743d..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/settings.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/weather.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/weather.png
deleted file mode 100644
index 0a2ae7d54e..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/weather.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/worldclock.png b/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/worldclock.png
deleted file mode 100644
index ca6eb879e1..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/36x36@2/worldclock.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wearable/index.theme b/examples/quickcontrols/wearable/Wearable/icons/wearable/index.theme
deleted file mode 100644
index da702d4a92..0000000000
--- a/examples/quickcontrols/wearable/Wearable/icons/wearable/index.theme
+++ /dev/null
@@ -1,14 +0,0 @@
-[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/Wearable/icons/weather-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-dark.svg
new file mode 100644
index 0000000000..a3ee0f2b08
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-dark.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.771 19.0705C21.207 15.8248 18.231 13.3334 14.667 13.3334C12.051 13.3334 9.66299 14.6819 8.40299 16.8305C5.17499 17.2305 2.66699 19.8934 2.66699 23.0477C2.66699 26.5105 5.63099 29.3334 9.26699 29.3334H21.267C24.243 29.3334 26.667 27.0248 26.667 24.1905C26.667 21.5162 24.519 19.3105 21.771 19.0705ZM21.267 27.0477H9.26699C6.95099 27.0477 5.06699 25.2534 5.06699 23.0477C5.06699 21.0591 6.63899 19.3562 8.71499 19.0934L9.90299 18.9448L10.491 17.9505C11.343 16.5105 12.939 15.6191 14.667 15.6191C16.995 15.6191 19.023 17.2648 19.407 19.4477L19.707 21.1848L21.555 21.3448C23.079 21.4819 24.267 22.7277 24.267 24.1905C24.267 25.7677 22.923 27.0477 21.267 27.0477Z" fill="#E6E6E6"/>
+<path d="M20 5.81111C19.3975 5.81111 18.9091 5.30992 18.9091 4.69168V2.45281C18.9091 1.83456 19.3975 1.33337 20 1.33337C20.6025 1.33337 21.0909 1.83456 21.0909 2.45281V4.69168C21.0909 5.30992 20.6025 5.81111 20 5.81111Z" fill="#E6E6E6"/>
+<path d="M26.9186 8.11486C26.5016 8.54271 25.8256 8.54271 25.4087 8.11486C24.9956 7.691 24.9912 7.0052 25.3988 6.57577L26.9462 4.94535C27.3698 4.49906 28.0682 4.4975 28.4936 4.94189C28.9099 5.3767 28.9069 6.07455 28.4869 6.50557L26.9186 8.11486Z" fill="#E6E6E6"/>
+<path d="M28.7273 14.7666C28.1248 14.7666 27.6364 14.2654 27.6364 13.6472C27.6364 13.0289 28.1248 12.5277 28.7273 12.5277H30.9091C31.5116 12.5277 32 13.0289 32 13.6472C32 14.2654 31.5116 14.7666 30.9091 14.7666H28.7273Z" fill="#E6E6E6"/>
+<path d="M14.581 8.09674C14.166 8.50739 13.5083 8.50575 13.0952 8.09304L11.5201 6.51928C11.0851 6.08467 11.0835 5.368 11.5166 4.93139C11.9403 4.50423 12.6203 4.50732 13.0403 4.93831L14.5949 6.53349C15.0172 6.96682 15.0109 7.67135 14.581 8.09674Z" fill="#E6E6E6"/>
+<path d="M28.4815 22.3226C28.0494 22.7816 27.3326 22.7814 26.9007 22.3222L25.3869 20.7129C24.9854 20.2861 24.9913 19.6078 25.4001 19.1883C25.8088 18.7688 26.4697 18.7628 26.8857 19.1747L28.4542 20.7278C28.8911 21.1604 28.9034 21.8745 28.4815 22.3226Z" fill="#E6E6E6"/>
+<path d="M9.09091 14.7666C8.48842 14.7666 8 14.2654 8 13.6472C8 13.0289 8.48842 12.5277 9.09091 12.5277H11.2727C11.8752 12.5277 12.3636 13.0289 12.3636 13.6472C12.3636 13.7854 12.3392 13.9179 12.2945 14.0401C11.7584 14.2234 11.2481 14.4677 10.7739 14.7666H9.09091Z" fill="#E6E6E6"/>
+<path d="M13.4553 13.7472C13.4548 13.7139 13.4545 13.6806 13.4545 13.6472C13.4545 9.93767 16.385 6.93055 20 6.93055C23.615 6.93055 26.5455 9.93767 26.5455 13.6472C26.5455 16.3322 25.0101 18.6492 22.7911 19.7242C22.4629 19.6302 22.1217 19.5658 21.7707 19.5343C21.6757 18.9735 21.5123 18.4346 21.2893 17.9262C23.0699 17.3619 24.3636 15.6596 24.3636 13.6472C24.3636 11.1742 22.41 9.16942 20 9.16942C17.59 9.16942 15.6364 11.1742 15.6364 13.6472C15.6364 13.6685 15.6365 13.6898 15.6368 13.7111C15.3194 13.6689 14.9955 13.6472 14.6667 13.6472C14.2561 13.6472 13.8511 13.6812 13.4553 13.7472Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-dark.svg
new file mode 100644
index 0000000000..2d1f8e680e
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9086 8C12.541 8 11.3358 8.63698 10.5823 9.61164L9 8.38836C10.1243 6.93413 11.9088 6 13.9086 6C16.5884 6 18.8958 7.68436 19.7262 10.0561C21.6158 10.3753 23.0551 12.0196 23.0551 14C23.0551 15.0953 22.6135 16.0895 21.901 16.8108L20.4781 15.4054C20.8359 15.0431 21.0551 14.5481 21.0551 14C21.0551 12.8954 20.1596 12 19.0551 12H18.0551C18.0551 9.81787 16.2261 8 13.9086 8ZM11 10C13.673 10 15.905 11.8686 16.328 14.3029C18.389 14.4829 20 16.1371 20 18.1429C20 20.2686 18.182 22 15.95 22H6.95C4.223 22 2 19.8829 2 17.2857C2 14.92 3.881 12.9229 6.302 12.6229C7.247 11.0114 9.038 10 11 10ZM6.95 20.2857H15.95C17.192 20.2857 18.2 19.3257 18.2 18.1429C18.2 17.0457 17.309 16.1114 16.166 16.0086L14.78 15.8886L14.555 14.5857C14.267 12.9486 12.746 11.7143 11 11.7143C9.704 11.7143 8.507 12.3829 7.868 13.4629L7.427 14.2086L6.536 14.32C4.979 14.5171 3.8 15.7943 3.8 17.2857C3.8 18.94 5.213 20.2857 6.95 20.2857Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.3583C9.45187 3.3583 9.81818 2.98241 9.81818 2.51873V0.839576C9.81818 0.375891 9.45187 0 9 0C8.54813 0 8.18182 0.375891 8.18182 0.839576V2.51873C8.18182 2.98241 8.54813 3.3583 9 3.3583ZM3.81106 5.08612C4.12377 5.407 4.63078 5.407 4.94349 5.08611C5.25328 4.76822 5.2566 4.25387 4.95092 3.9318L3.79035 2.70898C3.47267 2.37426 2.94888 2.37309 2.62978 2.70638C2.31756 3.03249 2.31982 3.55588 2.63484 3.87914L3.81106 5.08612ZM3.27273 9.23534C3.27273 9.69902 2.90641 10.0749 2.45455 10.0749H0.818182C0.366312 10.0749 0 9.69902 0 9.23534C0 8.77165 0.366312 8.39576 0.818182 8.39576H2.45455C2.90641 8.39576 3.27273 8.77165 3.27273 9.23534ZM13.0642 5.07252C13.3755 5.38051 13.8688 5.37929 14.1786 5.06975L15.3599 3.88943C15.6862 3.56347 15.6874 3.02597 15.3625 2.69851C15.0448 2.37815 14.5347 2.38046 14.2197 2.7037L13.0538 3.90008C12.7371 4.22509 12.7418 4.75348 13.0642 5.07252ZM13.4005 7C12.5979 5.3394 10.9289 4.19788 9 4.19788C6.28878 4.19788 4.09091 6.45323 4.09091 9.23534C4.09091 11.2491 5.24243 12.9869 6.90665 13.7931C7.15281 13.7226 7.50001 13.5 7.50001 13.5C7.50001 13.5 7.86575 12.8259 8.03302 12.4446C6.69758 12.0214 5.72727 10.7447 5.72727 9.23534C5.72727 7.3806 7.19252 5.87703 9 5.87703C9.97093 5.87703 10.8431 6.3109 11.4425 7H13.4005Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-light.svg
new file mode 100644
index 0000000000..7eae3666c0
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-few-clouds-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9086 8C12.541 8 11.3358 8.63698 10.5823 9.61164L9 8.38836C10.1243 6.93413 11.9088 6 13.9086 6C16.5884 6 18.8958 7.68436 19.7262 10.0561C21.6158 10.3753 23.0551 12.0196 23.0551 14C23.0551 15.0953 22.6135 16.0895 21.901 16.8108L20.4781 15.4054C20.8359 15.0431 21.0551 14.5481 21.0551 14C21.0551 12.8954 20.1596 12 19.0551 12H18.0551C18.0551 9.81787 16.2261 8 13.9086 8ZM11 10C13.673 10 15.905 11.8686 16.328 14.3029C18.389 14.4829 20 16.1371 20 18.1429C20 20.2686 18.182 22 15.95 22H6.95C4.223 22 2 19.8829 2 17.2857C2 14.92 3.881 12.9229 6.302 12.6229C7.247 11.0114 9.038 10 11 10ZM6.95 20.2857H15.95C17.192 20.2857 18.2 19.3257 18.2 18.1429C18.2 17.0457 17.309 16.1114 16.166 16.0086L14.78 15.8886L14.555 14.5857C14.267 12.9486 12.746 11.7143 11 11.7143C9.704 11.7143 8.507 12.3829 7.868 13.4629L7.427 14.2086L6.536 14.32C4.979 14.5171 3.8 15.7943 3.8 17.2857C3.8 18.94 5.213 20.2857 6.95 20.2857Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.3583C9.45187 3.3583 9.81818 2.98241 9.81818 2.51873V0.839576C9.81818 0.375891 9.45187 0 9 0C8.54813 0 8.18182 0.375891 8.18182 0.839576V2.51873C8.18182 2.98241 8.54813 3.3583 9 3.3583ZM3.81106 5.08612C4.12377 5.407 4.63078 5.407 4.94349 5.08611C5.25328 4.76822 5.2566 4.25387 4.95092 3.9318L3.79035 2.70898C3.47267 2.37426 2.94888 2.37309 2.62978 2.70638C2.31756 3.03249 2.31982 3.55588 2.63484 3.87914L3.81106 5.08612ZM3.27273 9.23534C3.27273 9.69902 2.90641 10.0749 2.45455 10.0749H0.818182C0.366312 10.0749 0 9.69902 0 9.23534C0 8.77165 0.366312 8.39576 0.818182 8.39576H2.45455C2.90641 8.39576 3.27273 8.77165 3.27273 9.23534ZM13.0642 5.07252C13.3755 5.38051 13.8688 5.37929 14.1786 5.06975L15.3599 3.88943C15.6862 3.56347 15.6874 3.02597 15.3625 2.69851C15.0448 2.37815 14.5347 2.38046 14.2197 2.7037L13.0538 3.90008C12.7371 4.22509 12.7418 4.75348 13.0642 5.07252ZM13.4005 7C12.5979 5.3394 10.9289 4.19788 9 4.19788C6.28878 4.19788 4.09091 6.45323 4.09091 9.23534C4.09091 11.2491 5.24243 12.9869 6.90665 13.7931C7.15281 13.7226 7.50001 13.5 7.50001 13.5C7.50001 13.5 7.86575 12.8259 8.03302 12.4446C6.69758 12.0214 5.72727 10.7447 5.72727 9.23534C5.72727 7.3806 7.19252 5.87703 9 5.87703C9.97093 5.87703 10.8431 6.3109 11.4425 7H13.4005Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-fog-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-fog-dark.svg
new file mode 100644
index 0000000000..9c8648157a
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-fog-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 13C2.44772 13 2 13.4477 2 14C2 14.5523 2.44772 15 3 15H21C21.5523 15 22 14.5523 22 14C22 13.4477 21.5523 13 21 13H3ZM15 16C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18H21C21.5523 18 22 17.5523 22 17C22 16.4477 21.5523 16 21 16H15ZM9 17C9 16.4477 9.44772 16 10 16H12C12.5523 16 13 16.4477 13 17C13 17.5523 12.5523 18 12 18H10C9.44772 18 9 17.5523 9 17ZM19 19C18.4477 19 18 19.4477 18 20C18 20.5523 18.4477 21 19 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19H19ZM2 17C2 16.4477 2.44772 16 3 16H7C7.55228 16 8 16.4477 8 17C8 17.5523 7.55228 18 7 18H3C2.44772 18 2 17.5523 2 17ZM3 19C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H16C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19H3Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C14.673 3 16.905 4.86857 17.328 7.30286C19.389 7.48286 21 9.13714 21 11.1429C21 11.4373 20.9651 11.7242 20.8991 12H19.0126C19.1331 11.7375 19.2 11.4476 19.2 11.1429C19.2 10.0457 18.309 9.11143 17.166 9.00857L15.78 8.88857L15.555 7.58571C15.267 5.94857 13.746 4.71429 12 4.71429C10.704 4.71429 9.507 5.38286 8.868 6.46286L8.427 7.20857L7.536 7.32C5.979 7.51714 4.8 8.79429 4.8 10.2857C4.8 10.9226 5.00944 11.5138 5.36617 12H3.33939C3.12035 11.4683 3 10.89 3 10.2857C3 7.92 4.881 5.92286 7.302 5.62286C8.247 4.01143 10.038 3 12 3Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-fog-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-fog-light.svg
new file mode 100644
index 0000000000..cb3c3ff562
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-fog-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 13C2.44772 13 2 13.4477 2 14C2 14.5523 2.44772 15 3 15H21C21.5523 15 22 14.5523 22 14C22 13.4477 21.5523 13 21 13H3ZM15 16C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18H21C21.5523 18 22 17.5523 22 17C22 16.4477 21.5523 16 21 16H15ZM9 17C9 16.4477 9.44772 16 10 16H12C12.5523 16 13 16.4477 13 17C13 17.5523 12.5523 18 12 18H10C9.44772 18 9 17.5523 9 17ZM19 19C18.4477 19 18 19.4477 18 20C18 20.5523 18.4477 21 19 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19H19ZM2 17C2 16.4477 2.44772 16 3 16H7C7.55228 16 8 16.4477 8 17C8 17.5523 7.55228 18 7 18H3C2.44772 18 2 17.5523 2 17ZM3 19C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H16C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19H3Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C14.673 3 16.905 4.86857 17.328 7.30286C19.389 7.48286 21 9.13714 21 11.1429C21 11.4373 20.9651 11.7242 20.8991 12H19.0126C19.1331 11.7375 19.2 11.4476 19.2 11.1429C19.2 10.0457 18.309 9.11143 17.166 9.00857L15.78 8.88857L15.555 7.58571C15.267 5.94857 13.746 4.71429 12 4.71429C10.704 4.71429 9.507 5.38286 8.868 6.46286L8.427 7.20857L7.536 7.32C5.979 7.51714 4.8 8.79429 4.8 10.2857C4.8 10.9226 5.00944 11.5138 5.36617 12H3.33939C3.12035 11.4683 3 10.89 3 10.2857C3 7.92 4.881 5.92286 7.302 5.62286C8.247 4.01143 10.038 3 12 3Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-haze-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-haze-dark.svg
new file mode 100644
index 0000000000..f2b8dff07c
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-haze-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 14C17.4477 14 17 14.4477 17 15C17 15.5523 17.4477 16 18 16H20C20.5523 16 21 15.5523 21 15C21 14.4477 20.5523 14 20 14H18ZM2 19C2 18.4477 2.44772 18 3 18H13C13.5523 18 14 18.4477 14 19C14 19.5523 13.5523 20 13 20H3C2.44772 20 2 19.5523 2 19ZM16 19C16 18.4477 16.4477 18 17 18H20C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20H17C16.4477 20 16 19.5523 16 19ZM12 15C12 14.4477 12.4477 14 13 14H14C14.5523 14 15 14.4477 15 15C15 15.5523 14.5523 16 14 16H13C12.4477 16 12 15.5523 12 15ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16H9C9.55228 16 10 15.5523 10 15C10 14.4477 9.55228 14 9 14H5Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 4.44772 10.4477 4 11 4H21C21.5523 4 22 4.44772 22 5C22 5.55228 21.5523 6 21 6H11C10.4477 6 10 5.55228 10 5ZM4 9C3.44772 9 3 9.44772 3 10C3 10.5523 3.44772 11 4 11H7C7.55228 11 8 10.5523 8 10C8 9.44772 7.55228 9 7 9H4ZM9 10C9 9.44772 9.44772 9 10 9H12C12.5523 9 13 9.44772 13 10C13 10.5523 12.5523 11 12 11H10C9.44772 11 9 10.5523 9 10ZM14 10C14 9.44772 14.4477 9 15 9H19C19.5523 9 20 9.44772 20 10C20 10.5523 19.5523 11 19 11H15C14.4477 11 14 10.5523 14 10ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6H8C8.55228 6 9 5.55228 9 5C9 4.44772 8.55228 4 8 4H5Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-haze-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-haze-light.svg
new file mode 100644
index 0000000000..790d55db30
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-haze-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 14C17.4477 14 17 14.4477 17 15C17 15.5523 17.4477 16 18 16H20C20.5523 16 21 15.5523 21 15C21 14.4477 20.5523 14 20 14H18ZM2 19C2 18.4477 2.44772 18 3 18H13C13.5523 18 14 18.4477 14 19C14 19.5523 13.5523 20 13 20H3C2.44772 20 2 19.5523 2 19ZM16 19C16 18.4477 16.4477 18 17 18H20C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20H17C16.4477 20 16 19.5523 16 19ZM12 15C12 14.4477 12.4477 14 13 14H14C14.5523 14 15 14.4477 15 15C15 15.5523 14.5523 16 14 16H13C12.4477 16 12 15.5523 12 15ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16H9C9.55228 16 10 15.5523 10 15C10 14.4477 9.55228 14 9 14H5Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 4.44772 10.4477 4 11 4H21C21.5523 4 22 4.44772 22 5C22 5.55228 21.5523 6 21 6H11C10.4477 6 10 5.55228 10 5ZM4 9C3.44772 9 3 9.44772 3 10C3 10.5523 3.44772 11 4 11H7C7.55228 11 8 10.5523 8 10C8 9.44772 7.55228 9 7 9H4ZM9 10C9 9.44772 9.44772 9 10 9H12C12.5523 9 13 9.44772 13 10C13 10.5523 12.5523 11 12 11H10C9.44772 11 9 10.5523 9 10ZM14 10C14 9.44772 14.4477 9 15 9H19C19.5523 9 20 9.44772 20 10C20 10.5523 19.5523 11 19 11H15C14.4477 11 14 10.5523 14 10ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6H8C8.55228 6 9 5.55228 9 5C9 4.44772 8.55228 4 8 4H5Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-icy-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-icy-dark.svg
new file mode 100644
index 0000000000..8dcc521d0b
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-icy-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 14C5.5 13.7239 5.27614 13.5 5 13.5C4.72386 13.5 4.5 13.7239 4.5 14V14.5H4C3.72386 14.5 3.5 14.7239 3.5 15C3.5 15.2761 3.72386 15.5 4 15.5H4.5V16C4.5 16.2761 4.72386 16.5 5 16.5C5.27614 16.5 5.5 16.2761 5.5 16V15.5H6C6.27614 15.5 6.5 15.2761 6.5 15C6.5 14.7239 6.27614 14.5 6 14.5H5.5V14ZM19 17.5C19.2761 17.5 19.5 17.7239 19.5 18V18.5H20C20.2761 18.5 20.5 18.7239 20.5 19C20.5 19.2761 20.2761 19.5 20 19.5H19.5V20C19.5 20.2761 19.2761 20.5 19 20.5C18.7239 20.5 18.5 20.2761 18.5 20V19.5H18C17.7239 19.5 17.5 19.2761 17.5 19C17.5 18.7239 17.7239 18.5 18 18.5H18.5V18C18.5 17.7239 18.7239 17.5 19 17.5Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.34315 3 2 4.34315 2 6V8.13641C2 10.57 4.74498 11.9909 6.73199 10.5859L8.07869 9.63373C8.20627 10.3839 8.55665 12.4117 8.93864 14.3371C9.14782 15.3914 9.37318 16.4495 9.58162 17.2576C9.68325 17.6517 9.79594 18.0463 9.9166 18.3664C9.9722 18.5139 10.0636 18.739 10.1992 18.9595C10.2643 19.0654 10.3939 19.2608 10.6025 19.452C10.791 19.6247 11.2706 20 12 20C12.7294 20 13.209 19.6247 13.3975 19.452C13.6061 19.2608 13.7357 19.0654 13.8008 18.9595C13.9364 18.739 14.0278 18.5139 14.0834 18.3664C14.2041 18.0463 14.3168 17.6517 14.4184 17.2576C14.6268 16.4495 14.8522 15.3914 15.0614 14.3371C15.0882 14.2016 15.115 14.0656 15.1415 13.9295C15.2309 14.0726 15.3664 14.259 15.5612 14.4364C15.8149 14.6675 16.3045 15 17.0001 15C17.6961 15 18.1857 14.6672 18.4393 14.4362C18.6879 14.2097 18.84 13.9684 18.9227 13.8216C19.091 13.5233 19.1969 13.2076 19.2632 12.9845C19.4049 12.5086 19.5136 11.9392 19.5941 11.4492C19.6775 10.9417 19.7428 10.4419 19.7869 10.0739C19.8091 9.88865 19.8263 9.73377 19.8381 9.62424C19.8439 9.56941 19.8485 9.52579 19.8516 9.49523L19.8552 9.45935L19.8562 9.44916L19.8565 9.44607L19.8566 9.44504L19.8567 9.44466C19.8567 9.44451 19.8567 9.44437 18.148 9.27752L19.8567 9.44436L19.993 8.0486L20.6548 7.70544C21.4812 7.27691 22 6.42355 22 5.49261C22 4.11598 20.884 3 19.5074 3H5ZM13.882 9H13.3052H12.0284H12.0161H11.9839H11.9716H10.6948H10.118C10.0563 9 10.0089 9.053 10.0191 9.11393C10.0387 9.2298 10.0726 9.4297 10.118 9.69352C10.1765 10.0329 10.2542 10.478 10.345 10.986L10.3475 11C10.5233 11.9833 10.7482 13.1998 10.9793 14.3415C11.1065 14.97 11.2356 15.5757 11.3594 16.1074C11.6172 17.2144 11.8522 18 12 18C12.1478 18 12.3828 17.2144 12.6406 16.1074C12.7644 15.5757 12.8935 14.97 13.0207 14.3415C13.2518 13.1998 13.4767 11.9833 13.6525 11L13.655 10.986C13.7458 10.478 13.8235 10.0329 13.882 9.69352C13.9274 9.4297 13.9613 9.2298 13.9809 9.11393C13.9911 9.053 13.9437 9 13.882 9ZM13.882 7H17.4266C17.5868 7 17.7447 6.9615 17.8869 6.88775L19.7341 5.92993C19.8975 5.84524 20 5.67659 20 5.49261C20 5.22055 19.7794 5 19.5074 5H5C4.44772 5 4 5.44772 4 6V8.13641C4 8.94759 4.91499 9.42124 5.57733 8.95292L7.5608 7.55047C8.06733 7.19232 8.67243 7 9.29279 7H10.118H13.882ZM10.3283 16.986C10.3283 16.9859 10.3294 16.9831 10.3318 16.9779C10.3295 16.9835 10.3283 16.9861 10.3283 16.986ZM13.6712 16.9848C13.671 16.9845 13.6709 16.9842 13.6707 16.9838L13.6682 16.9779C13.6706 16.9831 13.6717 16.9859 13.6717 16.986C13.6717 16.986 13.6715 16.9857 13.6712 16.9848ZM16.4005 11.25C16.5529 12.144 16.7612 13 17.0001 13C17.2389 13 17.4472 12.144 17.5997 11.25C17.6079 11.2017 17.616 11.1534 17.6239 11.105C17.7759 10.1742 17.8661 9.25 17.8661 9.25H16.1341C16.1341 9.25 16.2243 10.1743 16.3763 11.1051C16.3842 11.1534 16.3923 11.2018 16.4005 11.25Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-icy-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-icy-light.svg
new file mode 100644
index 0000000000..374f02d62b
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-icy-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 14C5.5 13.7239 5.27614 13.5 5 13.5C4.72386 13.5 4.5 13.7239 4.5 14V14.5H4C3.72386 14.5 3.5 14.7239 3.5 15C3.5 15.2761 3.72386 15.5 4 15.5H4.5V16C4.5 16.2761 4.72386 16.5 5 16.5C5.27614 16.5 5.5 16.2761 5.5 16V15.5H6C6.27614 15.5 6.5 15.2761 6.5 15C6.5 14.7239 6.27614 14.5 6 14.5H5.5V14ZM19 17.5C19.2761 17.5 19.5 17.7239 19.5 18V18.5H20C20.2761 18.5 20.5 18.7239 20.5 19C20.5 19.2761 20.2761 19.5 20 19.5H19.5V20C19.5 20.2761 19.2761 20.5 19 20.5C18.7239 20.5 18.5 20.2761 18.5 20V19.5H18C17.7239 19.5 17.5 19.2761 17.5 19C17.5 18.7239 17.7239 18.5 18 18.5H18.5V18C18.5 17.7239 18.7239 17.5 19 17.5Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.34315 3 2 4.34315 2 6V8.13641C2 10.57 4.74498 11.9909 6.73199 10.5859L8.07869 9.63373C8.20627 10.3839 8.55665 12.4117 8.93864 14.3371C9.14782 15.3914 9.37318 16.4495 9.58162 17.2576C9.68325 17.6517 9.79594 18.0463 9.9166 18.3664C9.9722 18.5139 10.0636 18.739 10.1992 18.9595C10.2643 19.0654 10.3939 19.2608 10.6025 19.452C10.791 19.6247 11.2706 20 12 20C12.7294 20 13.209 19.6247 13.3975 19.452C13.6061 19.2608 13.7357 19.0654 13.8008 18.9595C13.9364 18.739 14.0278 18.5139 14.0834 18.3664C14.2041 18.0463 14.3168 17.6517 14.4184 17.2576C14.6268 16.4495 14.8522 15.3914 15.0614 14.3371C15.0882 14.2016 15.115 14.0656 15.1415 13.9295C15.2309 14.0726 15.3664 14.259 15.5612 14.4364C15.8149 14.6675 16.3045 15 17.0001 15C17.6961 15 18.1857 14.6672 18.4393 14.4362C18.6879 14.2097 18.84 13.9684 18.9227 13.8216C19.091 13.5233 19.1969 13.2076 19.2632 12.9845C19.4049 12.5086 19.5136 11.9392 19.5941 11.4492C19.6775 10.9417 19.7428 10.4419 19.7869 10.0739C19.8091 9.88865 19.8263 9.73377 19.8381 9.62424C19.8439 9.56941 19.8485 9.52579 19.8516 9.49523L19.8552 9.45935L19.8562 9.44916L19.8565 9.44607L19.8566 9.44504L19.8567 9.44466C19.8567 9.44451 19.8567 9.44437 18.148 9.27752L19.8567 9.44436L19.993 8.0486L20.6548 7.70544C21.4812 7.27691 22 6.42355 22 5.49261C22 4.11598 20.884 3 19.5074 3H5ZM13.882 9H13.3052H12.0284H12.0161H11.9839H11.9716H10.6948H10.118C10.0563 9 10.0089 9.053 10.0191 9.11393C10.0387 9.2298 10.0726 9.4297 10.118 9.69352C10.1765 10.0329 10.2542 10.478 10.345 10.986L10.3475 11C10.5233 11.9833 10.7482 13.1998 10.9793 14.3415C11.1065 14.97 11.2356 15.5757 11.3594 16.1074C11.6172 17.2144 11.8522 18 12 18C12.1478 18 12.3828 17.2144 12.6406 16.1074C12.7644 15.5757 12.8935 14.97 13.0207 14.3415C13.2518 13.1998 13.4767 11.9833 13.6525 11L13.655 10.986C13.7458 10.478 13.8235 10.0329 13.882 9.69352C13.9274 9.4297 13.9613 9.2298 13.9809 9.11393C13.9911 9.053 13.9437 9 13.882 9ZM13.882 7H17.4266C17.5868 7 17.7447 6.9615 17.8869 6.88775L19.7341 5.92993C19.8975 5.84524 20 5.67659 20 5.49261C20 5.22055 19.7794 5 19.5074 5H5C4.44772 5 4 5.44772 4 6V8.13641C4 8.94759 4.91499 9.42124 5.57733 8.95292L7.5608 7.55047C8.06733 7.19232 8.67243 7 9.29279 7H10.118H13.882ZM10.3283 16.986C10.3283 16.9859 10.3294 16.9831 10.3318 16.9779C10.3295 16.9835 10.3283 16.9861 10.3283 16.986ZM13.6712 16.9848C13.671 16.9845 13.6709 16.9842 13.6707 16.9838L13.6682 16.9779C13.6706 16.9831 13.6717 16.9859 13.6717 16.986C13.6717 16.986 13.6715 16.9857 13.6712 16.9848ZM16.4005 11.25C16.5529 12.144 16.7612 13 17.0001 13C17.2389 13 17.4472 12.144 17.5997 11.25C17.6079 11.2017 17.616 11.1534 17.6239 11.105C17.7759 10.1742 17.8661 9.25 17.8661 9.25H16.1341C16.1341 9.25 16.2243 10.1743 16.3763 11.1051C16.3842 11.1534 16.3923 11.2018 16.4005 11.25Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-light.svg
new file mode 100644
index 0000000000..98a58847d9
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-light.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7707 19.0711C21.2067 15.8254 18.2307 13.334 14.6667 13.334C12.0507 13.334 9.66269 14.6826 8.40269 16.8311C5.17469 17.2311 2.66669 19.894 2.66669 23.0483C2.66669 26.5111 5.63069 29.334 9.26669 29.334H21.2667C24.2427 29.334 26.6667 27.0254 26.6667 24.1911C26.6667 21.5168 24.5187 19.3111 21.7707 19.0711ZM21.2667 27.0483H9.26669C6.95069 27.0483 5.06669 25.254 5.06669 23.0483C5.06669 21.0597 6.63869 19.3568 8.71469 19.094L9.90269 18.9454L10.4907 17.9511C11.3427 16.5111 12.9387 15.6197 14.6667 15.6197C16.9947 15.6197 19.0227 17.2654 19.4067 19.4483L19.7067 21.1854L21.5547 21.3454C23.0787 21.4826 24.2667 22.7283 24.2667 24.1911C24.2667 25.7683 22.9227 27.0483 21.2667 27.0483Z" fill="#191919"/>
+<path d="M20 5.81172C19.3975 5.81172 18.9091 5.31053 18.9091 4.69229V2.45342C18.9091 1.83517 19.3975 1.33398 20 1.33398C20.6025 1.33398 21.0909 1.83517 21.0909 2.45342V4.69229C21.0909 5.31053 20.6025 5.81172 20 5.81172Z" fill="#191919"/>
+<path d="M26.9186 8.11547C26.5016 8.54332 25.8256 8.54332 25.4087 8.11547C24.9956 7.69161 24.9912 7.00581 25.3988 6.57638L26.9462 4.94596C27.3698 4.49967 28.0682 4.49811 28.4936 4.9425C28.9099 5.37731 28.9069 6.07516 28.4869 6.50618L26.9186 8.11547Z" fill="#191919"/>
+<path d="M28.7273 14.7672C28.1248 14.7672 27.6364 14.266 27.6364 13.6478C27.6364 13.0295 28.1248 12.5283 28.7273 12.5283H30.9091C31.5116 12.5283 32 13.0295 32 13.6478C32 14.266 31.5116 14.7672 30.9091 14.7672H28.7273Z" fill="#191919"/>
+<path d="M14.581 8.09735C14.166 8.508 13.5083 8.50637 13.0952 8.09365L11.5201 6.51989C11.0851 6.08528 11.0835 5.36861 11.5166 4.932C11.9403 4.50484 12.6203 4.50793 13.0403 4.93892L14.5949 6.5341C15.0172 6.96743 15.0109 7.67196 14.581 8.09735Z" fill="#191919"/>
+<path d="M28.4815 22.3232C28.0494 22.7822 27.3326 22.782 26.9007 22.3228L25.3869 20.7135C24.9854 20.2867 24.9913 19.6084 25.4001 19.1889C25.8088 18.7695 26.4697 18.7634 26.8857 19.1753L28.4542 20.7284C28.8911 21.161 28.9034 21.8752 28.4815 22.3232Z" fill="#191919"/>
+<path d="M9.09091 14.7672C8.48842 14.7672 8 14.266 8 13.6478C8 13.0295 8.48842 12.5283 9.09091 12.5283H11.2727C11.8752 12.5283 12.3636 13.0295 12.3636 13.6478C12.3636 13.786 12.3392 13.9185 12.2945 14.0407C11.7584 14.224 11.2481 14.4683 10.7739 14.7672H9.09091Z" fill="#191919"/>
+<path d="M13.4553 13.7479C13.4548 13.7146 13.4545 13.6812 13.4545 13.6478C13.4545 9.93828 16.385 6.93116 20 6.93116C23.615 6.93116 26.5455 9.93828 26.5455 13.6478C26.5455 16.3328 25.0101 18.6498 22.7911 19.7248C22.4629 19.6308 22.1217 19.5664 21.7707 19.5349C21.6757 18.9741 21.5123 18.4352 21.2893 17.9268C23.0699 17.3626 24.3636 15.6602 24.3636 13.6478C24.3636 11.1748 22.41 9.17003 20 9.17003C17.59 9.17003 15.6364 11.1748 15.6364 13.6478C15.6364 13.6691 15.6365 13.6904 15.6368 13.7117C15.3194 13.6695 14.9955 13.6478 14.6667 13.6478C14.2561 13.6478 13.8511 13.6819 13.4553 13.7479Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-overcast-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-overcast-dark.svg
new file mode 100644
index 0000000000..0f372b1e97
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-overcast-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.92 13.02C17.45 10.18 14.97 8 12 8C9.82 8 7.83 9.18 6.78 11.06C4.09 11.41 2 13.74 2 16.5C2 19.53 4.47 22 7.5 22H17.5C19.98 22 22 19.98 22 17.5C22 15.16 20.21 13.23 17.92 13.02ZM17.5 20H7.5C5.57 20 4 18.43 4 16.5C4 14.76 5.31 13.27 7.04 13.04L8.03 12.91L8.52 12.04C9.23 10.78 10.56 10 12 10C13.94 10 15.63 11.44 15.95 13.35L16.2 14.87L17.74 15.01C19.01 15.13 20 16.22 20 17.5C20 18.88 18.88 20 17.5 20Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5823 6.61164C11.3358 5.63698 12.541 5 13.9086 5C16.2261 5 18.0551 6.81787 18.0551 9H19.0551C20.1596 9 21.0551 9.89543 21.0551 11C21.0551 11.5481 20.8359 12.0431 20.4781 12.4054L21.901 13.8108C22.6135 13.0895 23.0551 12.0953 23.0551 11C23.0551 9.01958 21.6158 7.37531 19.7262 7.05607C18.8958 4.68436 16.5884 3 13.9086 3C11.9088 3 10.1243 3.93413 9 5.38836L10.5823 6.61164Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-overcast-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-overcast-light.svg
new file mode 100644
index 0000000000..d5d696e7cf
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-overcast-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.92 13.02C17.45 10.18 14.97 8 12 8C9.82 8 7.83 9.18 6.78 11.06C4.09 11.41 2 13.74 2 16.5C2 19.53 4.47 22 7.5 22H17.5C19.98 22 22 19.98 22 17.5C22 15.16 20.21 13.23 17.92 13.02ZM17.5 20H7.5C5.57 20 4 18.43 4 16.5C4 14.76 5.31 13.27 7.04 13.04L8.03 12.91L8.52 12.04C9.23 10.78 10.56 10 12 10C13.94 10 15.63 11.44 15.95 13.35L16.2 14.87L17.74 15.01C19.01 15.13 20 16.22 20 17.5C20 18.88 18.88 20 17.5 20Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5823 6.61164C11.3358 5.63698 12.541 5 13.9086 5C16.2261 5 18.0551 6.81787 18.0551 9H19.0551C20.1596 9 21.0551 9.89543 21.0551 11C21.0551 11.5481 20.8359 12.0431 20.4781 12.4054L21.901 13.8108C22.6135 13.0895 23.0551 12.0953 23.0551 11C23.0551 9.01958 21.6158 7.37531 19.7262 7.05607C18.8958 4.68436 16.5884 3 13.9086 3C11.9088 3 10.1243 3.93413 9 5.38836L10.5823 6.61164Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-showers-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-dark.svg
new file mode 100644
index 0000000000..3f7935f4d6
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-dark.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.95">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50004 16.134C7.97834 15.8578 8.58993 16.0217 8.86607 16.5L10.3661 19.0981C10.6422 19.5764 10.4783 20.188 10 20.4641C9.52175 20.7403 8.91016 20.5764 8.63402 20.0981L7.13402 17.5C6.85788 17.0217 7.02175 16.4101 7.50004 16.134ZM11.5 16.134C11.9783 15.8578 12.5899 16.0217 12.8661 16.5L15.3661 20.8301C15.6422 21.3084 15.4783 21.92 15 22.1962C14.5218 22.4723 13.9102 22.3084 13.634 21.8301L11.134 17.5C10.8579 17.0217 11.0218 16.4101 11.5 16.134ZM16.8661 16.5C16.5899 16.0217 15.9783 15.8578 15.5 16.134C15.0218 16.4101 14.8579 17.0217 15.134 17.5L16.634 20.0981C16.9102 20.5764 17.5218 20.7403 18 20.4641C18.4783 20.188 18.6422 19.5764 18.3661 19.0981L16.8661 16.5Z" fill="#E6E6E6"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#E6E6E6"/>
+</g>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-showers-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-light.svg
new file mode 100644
index 0000000000..5e7a5b3393
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-light.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.95">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50004 16.134C7.97834 15.8578 8.58993 16.0217 8.86607 16.5L10.3661 19.0981C10.6422 19.5764 10.4783 20.188 10 20.4641C9.52175 20.7403 8.91016 20.5764 8.63402 20.0981L7.13402 17.5C6.85788 17.0217 7.02175 16.4101 7.50004 16.134ZM11.5 16.134C11.9783 15.8578 12.5899 16.0217 12.8661 16.5L15.3661 20.8301C15.6422 21.3084 15.4783 21.92 15 22.1962C14.5218 22.4723 13.9102 22.3084 13.634 21.8301L11.134 17.5C10.8579 17.0217 11.0218 16.4101 11.5 16.134ZM16.8661 16.5C16.5899 16.0217 15.9783 15.8578 15.5 16.134C15.0218 16.4101 14.8579 17.0217 15.134 17.5L16.634 20.0981C16.9102 20.5764 17.5218 20.7403 18 20.4641C18.4783 20.188 18.6422 19.5764 18.3661 19.0981L16.8661 16.5Z" fill="#191919"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#191919"/>
+</g>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-dark.svg
new file mode 100644
index 0000000000..35e947d9d6
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 19.5C7.08333 19.5 6.72917 19.3583 6.4375 19.075C6.14583 18.7917 6 18.4417 6 18.025C6 17.825 6.0375 17.6333 6.1125 17.45C6.1875 17.2667 6.3 17.1083 6.45 16.975L7.5 16L8.55 16.975C8.7 17.1083 8.8125 17.2667 8.8875 17.45C8.9625 17.6333 9 17.825 9 18.025C9 18.4417 8.85417 18.7917 8.5625 19.075C8.27083 19.3583 7.91667 19.5 7.5 19.5ZM16.4375 19.075C16.7292 19.3583 17.0833 19.5 17.5 19.5C17.9167 19.5 18.2708 19.3583 18.5625 19.075C18.8542 18.7917 19 18.4417 19 18.025C19 17.825 18.9625 17.6333 18.8875 17.45C18.8125 17.2667 18.7 17.1083 18.55 16.975L17.5 16L16.45 16.975C16.3 17.1083 16.1875 17.2667 16.1125 17.45C16.0375 17.6333 16 17.825 16 18.025C16 18.4417 16.1458 18.7917 16.4375 19.075ZM11.4375 20.075C11.7292 20.3583 12.0833 20.5 12.5 20.5C12.9167 20.5 13.2708 20.3583 13.5625 20.075C13.8542 19.7917 14 19.4417 14 19.025C14 18.825 13.9625 18.6333 13.8875 18.45C13.8125 18.2667 13.7 18.1083 13.55 17.975L12.5 17L11.45 17.975C11.3 18.1083 11.1875 18.2667 11.1125 18.45C11.0375 18.6333 11 18.825 11 19.025C11 19.4417 11.1458 19.7917 11.4375 20.075Z" fill="#E6E6E6"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-light.svg
new file mode 100644
index 0000000000..2d7e68ce9a
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-showers-scattered-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 19.5C7.08333 19.5 6.72917 19.3583 6.4375 19.075C6.14583 18.7917 6 18.4417 6 18.025C6 17.825 6.0375 17.6333 6.1125 17.45C6.1875 17.2667 6.3 17.1083 6.45 16.975L7.5 16L8.55 16.975C8.7 17.1083 8.8125 17.2667 8.8875 17.45C8.9625 17.6333 9 17.825 9 18.025C9 18.4417 8.85417 18.7917 8.5625 19.075C8.27083 19.3583 7.91667 19.5 7.5 19.5ZM16.4375 19.075C16.7292 19.3583 17.0833 19.5 17.5 19.5C17.9167 19.5 18.2708 19.3583 18.5625 19.075C18.8542 18.7917 19 18.4417 19 18.025C19 17.825 18.9625 17.6333 18.8875 17.45C18.8125 17.2667 18.7 17.1083 18.55 16.975L17.5 16L16.45 16.975C16.3 17.1083 16.1875 17.2667 16.1125 17.45C16.0375 17.6333 16 17.825 16 18.025C16 18.4417 16.1458 18.7917 16.4375 19.075ZM11.4375 20.075C11.7292 20.3583 12.0833 20.5 12.5 20.5C12.9167 20.5 13.2708 20.3583 13.5625 20.075C13.8542 19.7917 14 19.4417 14 19.025C14 18.825 13.9625 18.6333 13.8875 18.45C13.8125 18.2667 13.7 18.1083 13.55 17.975L12.5 17L11.45 17.975C11.3 18.1083 11.1875 18.2667 11.1125 18.45C11.0375 18.6333 11 18.825 11 19.025C11 19.4417 11.1458 19.7917 11.4375 20.075Z" fill="#191919"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-sleet-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-sleet-dark.svg
new file mode 100644
index 0000000000..b5de2d1189
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-sleet-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.41421 16L5 17.4142L6.41421 18.8284L7.82843 17.4142L6.41421 16ZM11.866 16.5002C11.5899 16.0219 10.9783 15.858 10.5 16.1341C10.0217 16.4103 9.85785 17.0219 10.134 17.5002L12.634 21.8303C12.9101 22.3086 13.5217 22.4725 14 22.1963C14.4783 21.9202 14.6422 21.3086 14.366 20.8303L11.866 16.5002ZM7 20.4142L8.41421 19L9.82843 20.4142L8.41421 21.8284L7 20.4142ZM16.5 19.5C16.0833 19.5 15.7292 19.3583 15.4375 19.075C15.1458 18.7917 15 18.4417 15 18.025C15 17.825 15.0375 17.6333 15.1125 17.45C15.1875 17.2667 15.3 17.1083 15.45 16.975L16.5 16L17.55 16.975C17.7 17.1083 17.8125 17.2667 17.8875 17.45C17.9625 17.6333 18 17.825 18 18.025C18 18.4417 17.8542 18.7917 17.5625 19.075C17.2708 19.3583 16.9167 19.5 16.5 19.5Z" fill="#E6E6E6"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-sleet-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-sleet-light.svg
new file mode 100644
index 0000000000..a22fcf10af
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-sleet-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.41421 16L5 17.4142L6.41421 18.8284L7.82843 17.4142L6.41421 16ZM11.866 16.5002C11.5899 16.0219 10.9783 15.858 10.5 16.1341C10.0217 16.4103 9.85785 17.0219 10.134 17.5002L12.634 21.8303C12.9101 22.3086 13.5217 22.4725 14 22.1963C14.4783 21.9202 14.6422 21.3086 14.366 20.8303L11.866 16.5002ZM7 20.4142L8.41421 19L9.82843 20.4142L8.41421 21.8284L7 20.4142ZM16.5 19.5C16.0833 19.5 15.7292 19.3583 15.4375 19.075C15.1458 18.7917 15 18.4417 15 18.025C15 17.825 15.0375 17.6333 15.1125 17.45C15.1875 17.2667 15.3 17.1083 15.45 16.975L16.5 16L17.55 16.975C17.7 17.1083 17.8125 17.2667 17.8875 17.45C17.9625 17.6333 18 17.825 18 18.025C18 18.4417 17.8542 18.7917 17.5625 19.075C17.2708 19.3583 16.9167 19.5 16.5 19.5Z" fill="#191919"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-snow-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-snow-dark.svg
new file mode 100644
index 0000000000..10eff6522b
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-snow-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.4142L6.41421 16L7.82843 17.4142L6.41421 18.8284L5 17.4142ZM7 20.4142L8.41421 19L9.82843 20.4142L8.41421 21.8284L7 20.4142ZM15.4142 16L14 17.4142L15.4142 18.8284L16.8284 17.4142L15.4142 16ZM11 16.5C11.2761 16.5 11.5 16.7239 11.5 17V17.5H12C12.2761 17.5 12.5 17.7239 12.5 18C12.5 18.2761 12.2761 18.5 12 18.5H11.5V19C11.5 19.2761 11.2761 19.5 11 19.5C10.7239 19.5 10.5 19.2761 10.5 19V18.5H10C9.72386 18.5 9.5 18.2761 9.5 18C9.5 17.7239 9.72386 17.5 10 17.5H10.5V17C10.5 16.7239 10.7239 16.5 11 16.5ZM18 18.5C18.2761 18.5 18.5 18.7239 18.5 19V19.5H19C19.2761 19.5 19.5 19.7239 19.5 20C19.5 20.2761 19.2761 20.5 19 20.5H18.5V21C18.5 21.2761 18.2761 21.5 18 21.5C17.7239 21.5 17.5 21.2761 17.5 21V20.5H17C16.7239 20.5 16.5 20.2761 16.5 20C16.5 19.7239 16.7239 19.5 17 19.5H17.5V19C17.5 18.7239 17.7239 18.5 18 18.5Z" fill="#E6E6E6"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-snow-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-snow-light.svg
new file mode 100644
index 0000000000..2737265160
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-snow-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.4142L6.41421 16L7.82843 17.4142L6.41421 18.8284L5 17.4142ZM7 20.4142L8.41421 19L9.82843 20.4142L8.41421 21.8284L7 20.4142ZM15.4142 16L14 17.4142L15.4142 18.8284L16.8284 17.4142L15.4142 16ZM11 16.5C11.2761 16.5 11.5 16.7239 11.5 17V17.5H12C12.2761 17.5 12.5 17.7239 12.5 18C12.5 18.2761 12.2761 18.5 12 18.5H11.5V19C11.5 19.2761 11.2761 19.5 11 19.5C10.7239 19.5 10.5 19.2761 10.5 19V18.5H10C9.72386 18.5 9.5 18.2761 9.5 18C9.5 17.7239 9.72386 17.5 10 17.5H10.5V17C10.5 16.7239 10.7239 16.5 11 16.5ZM18 18.5C18.2761 18.5 18.5 18.7239 18.5 19V19.5H19C19.2761 19.5 19.5 19.7239 19.5 20C19.5 20.2761 19.2761 20.5 19 20.5H18.5V21C18.5 21.2761 18.2761 21.5 18 21.5C17.7239 21.5 17.5 21.2761 17.5 21V20.5H17C16.7239 20.5 16.5 20.2761 16.5 20C16.5 19.7239 16.7239 19.5 17 19.5H17.5V19C17.5 18.7239 17.7239 18.5 18 18.5Z" fill="#191919"/>
+<path d="M17.328 7.30286C16.905 4.86857 14.673 3 12 3C10.038 3 8.247 4.01143 7.302 5.62286C4.881 5.92286 3 7.92 3 10.2857C3 12.8829 5.223 15 7.95 15H16.95C19.182 15 21 13.2686 21 11.1429C21 9.13714 19.389 7.48286 17.328 7.30286ZM16.95 13.2857H7.95C6.213 13.2857 4.8 11.94 4.8 10.2857C4.8 8.79429 5.979 7.51714 7.536 7.32L8.427 7.20857L8.868 6.46286C9.507 5.38286 10.704 4.71429 12 4.71429C13.746 4.71429 15.267 5.94857 15.555 7.58571L15.78 8.88857L17.166 9.00857C18.309 9.11143 19.2 10.0457 19.2 11.1429C19.2 12.3257 18.192 13.2857 16.95 13.2857Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-storm-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-storm-dark.svg
new file mode 100644
index 0000000000..52a5c3fc2a
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-storm-dark.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.95">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1821 16.0299C13.2177 16.0548 13.2453 16.0934 13.2603 16.1395C13.2753 16.1855 13.2768 16.2364 13.2647 16.2837L12.6098 18.8438H13.8181C13.8536 18.8438 13.8884 18.8563 13.918 18.8797C13.9477 18.9032 13.971 18.9366 13.9851 18.9758C13.9992 19.015 14.0034 19.0584 13.9972 19.1004C13.9911 19.1425 13.9748 19.1815 13.9505 19.2126L11.0415 22.9311C11.0133 22.9671 10.9759 22.9906 10.9352 22.9977C10.8946 23.0048 10.8531 22.9952 10.8176 22.9703C10.7821 22.9455 10.7546 22.9069 10.7397 22.8608C10.7247 22.8148 10.7232 22.764 10.7353 22.7167L11.3902 20.1562H10.1819C10.1464 20.1562 10.1116 20.1437 10.082 20.1203C10.0523 20.0968 10.029 20.0634 10.0149 20.0242C10.0008 19.985 9.9966 19.9416 10.0028 19.8996C10.0089 19.8575 10.0252 19.8185 10.0495 19.7874L12.9585 16.0689C12.9866 16.0329 13.024 16.0095 13.0646 16.0023C13.1052 15.9952 13.1466 16.0047 13.1821 16.0295V16.0299ZM15.4375 19.075C15.7292 19.3583 16.0833 19.5 16.5 19.5C16.9167 19.5 17.2708 19.3583 17.5625 19.075C17.8542 18.7917 18 18.4417 18 18.025C18 17.825 17.9625 17.6333 17.8875 17.45C17.8125 17.2667 17.7 17.1083 17.55 16.975L16.5 16L15.45 16.975C15.3 17.1083 15.1875 17.2667 15.1125 17.45C15.0375 17.6333 15 17.825 15 18.025C15 18.4417 15.1458 18.7917 15.4375 19.075ZM7.5 19.5C7.08333 19.5 6.72917 19.3583 6.4375 19.075C6.14583 18.7917 6 18.4417 6 18.025C6 17.825 6.0375 17.6333 6.1125 17.45C6.1875 17.2667 6.3 17.1083 6.45 16.975L7.5 16L8.55 16.975C8.7 17.1083 8.8125 17.2667 8.8875 17.45C8.9625 17.6333 9 17.825 9 18.025C9 18.4417 8.85417 18.7917 8.5625 19.075C8.27083 19.3583 7.91667 19.5 7.5 19.5Z" fill="#E6E6E6"/>
+<path d="M17.92 6.02C17.45 3.18 14.97 1 12 1C9.82 1 7.83 2.18 6.78 4.06C4.09 4.41 2 6.74 2 9.5C2 12.53 4.47 15 7.5 15H17.5C19.98 15 22 12.98 22 10.5C22 8.16 20.21 6.23 17.92 6.02ZM17.5 13H7.5C5.57 13 4 11.43 4 9.5C4 7.76 5.31 6.27 7.04 6.04L8.03 5.91L8.52 5.04C9.23 3.78 10.56 3 12 3C13.94 3 15.63 4.44 15.95 6.35L16.2 7.87L17.74 8.01C19.01 8.13 20 9.22 20 10.5C20 11.88 18.88 13 17.5 13Z" fill="#E6E6E6"/>
+</g>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-storm-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-storm-light.svg
new file mode 100644
index 0000000000..a0d4bde293
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-storm-light.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.95">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1821 16.0299C13.2177 16.0548 13.2453 16.0934 13.2603 16.1395C13.2753 16.1855 13.2768 16.2364 13.2647 16.2837L12.6098 18.8438H13.8181C13.8536 18.8438 13.8884 18.8563 13.918 18.8797C13.9477 18.9032 13.971 18.9366 13.9851 18.9758C13.9992 19.015 14.0034 19.0584 13.9972 19.1004C13.9911 19.1425 13.9748 19.1815 13.9505 19.2126L11.0415 22.9311C11.0133 22.9671 10.9759 22.9906 10.9352 22.9977C10.8946 23.0048 10.8531 22.9952 10.8176 22.9703C10.7821 22.9455 10.7546 22.9069 10.7397 22.8608C10.7247 22.8148 10.7232 22.764 10.7353 22.7167L11.3902 20.1562H10.1819C10.1464 20.1562 10.1116 20.1437 10.082 20.1203C10.0523 20.0968 10.029 20.0634 10.0149 20.0242C10.0008 19.985 9.9966 19.9416 10.0028 19.8996C10.0089 19.8575 10.0252 19.8185 10.0495 19.7874L12.9585 16.0689C12.9866 16.0329 13.024 16.0095 13.0646 16.0023C13.1052 15.9952 13.1466 16.0047 13.1821 16.0295V16.0299ZM15.4375 19.075C15.7292 19.3583 16.0833 19.5 16.5 19.5C16.9167 19.5 17.2708 19.3583 17.5625 19.075C17.8542 18.7917 18 18.4417 18 18.025C18 17.825 17.9625 17.6333 17.8875 17.45C17.8125 17.2667 17.7 17.1083 17.55 16.975L16.5 16L15.45 16.975C15.3 17.1083 15.1875 17.2667 15.1125 17.45C15.0375 17.6333 15 17.825 15 18.025C15 18.4417 15.1458 18.7917 15.4375 19.075ZM7.5 19.5C7.08333 19.5 6.72917 19.3583 6.4375 19.075C6.14583 18.7917 6 18.4417 6 18.025C6 17.825 6.0375 17.6333 6.1125 17.45C6.1875 17.2667 6.3 17.1083 6.45 16.975L7.5 16L8.55 16.975C8.7 17.1083 8.8125 17.2667 8.8875 17.45C8.9625 17.6333 9 17.825 9 18.025C9 18.4417 8.85417 18.7917 8.5625 19.075C8.27083 19.3583 7.91667 19.5 7.5 19.5Z" fill="#191919"/>
+<path d="M17.92 6.02C17.45 3.18 14.97 1 12 1C9.82 1 7.83 2.18 6.78 4.06C4.09 4.41 2 6.74 2 9.5C2 12.53 4.47 15 7.5 15H17.5C19.98 15 22 12.98 22 10.5C22 8.16 20.21 6.23 17.92 6.02ZM17.5 13H7.5C5.57 13 4 11.43 4 9.5C4 7.76 5.31 6.27 7.04 6.04L8.03 5.91L8.52 5.04C9.23 3.78 10.56 3 12 3C13.94 3 15.63 4.44 15.95 6.35L16.2 7.87L17.74 8.01C19.01 8.13 20 9.22 20 10.5C20 11.88 18.88 13 17.5 13Z" fill="#191919"/>
+</g>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-dark.svg
new file mode 100644
index 0000000000..18b469918e
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="#E6E6E6"/>
+<path d="M12 5C11.4477 5 11 4.55228 11 4V2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2V4C13 4.55228 12.5523 5 12 5ZM18.342 7.05796C17.9598 7.44016 17.3402 7.44016 16.958 7.05796C16.5793 6.67932 16.5753 6.06669 16.9489 5.68308L18.3673 4.22661C18.7556 3.82793 19.3958 3.82654 19.7858 4.22351C20.1674 4.61193 20.1647 5.23533 19.7796 5.62036L18.342 7.05796ZM20 13C19.4477 13 19 12.5523 19 12C19 11.4477 19.4477 11 20 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H20ZM12 23C11.4477 23 11 22.5523 11 22V20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20V22C13 22.5523 12.5523 23 12 23ZM7.03261 7.04177C6.65218 7.40861 6.04923 7.40715 5.67059 7.03847L4.22673 5.63261C3.828 5.24437 3.82657 4.60416 4.22355 4.21414C4.61195 3.83256 5.23531 3.83531 5.62032 4.22032L7.0453 5.6453C7.43241 6.03241 7.42669 6.66177 7.03261 7.04177ZM19.7747 19.7498C19.3786 20.1598 18.7215 20.1597 18.3256 19.7495L16.938 18.3119C16.57 17.9306 16.5753 17.3247 16.9501 16.9499C17.3247 16.5753 17.9306 16.5698 18.3119 16.9378L19.7497 18.3252C20.1502 18.7116 20.1614 19.3496 19.7747 19.7498ZM2 13C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11H4C4.55228 11 5 11.4477 5 12C5 12.5523 4.55228 13 4 13H2ZM5.63753 19.7875C5.24503 20.18 4.60781 20.1771 4.21881 19.7812C3.83464 19.3902 3.83742 18.7626 4.22503 18.375L5.62456 16.9754C6.01538 16.5846 6.64547 16.5734 7.05 16.95C7.44833 17.3346 7.45392 17.9711 7.06239 18.3626L5.63753 19.7875Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-light.svg
new file mode 100644
index 0000000000..227c104e31
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="#191919"/>
+<path d="M12 5C11.4477 5 11 4.55228 11 4V2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2V4C13 4.55228 12.5523 5 12 5ZM18.342 7.05796C17.9598 7.44016 17.3402 7.44016 16.958 7.05796C16.5793 6.67932 16.5753 6.06669 16.9489 5.68308L18.3673 4.22661C18.7556 3.82793 19.3958 3.82654 19.7858 4.22351C20.1674 4.61193 20.1647 5.23533 19.7796 5.62036L18.342 7.05796ZM20 13C19.4477 13 19 12.5523 19 12C19 11.4477 19.4477 11 20 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H20ZM12 23C11.4477 23 11 22.5523 11 22V20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20V22C13 22.5523 12.5523 23 12 23ZM7.03261 7.04177C6.65218 7.40861 6.04923 7.40715 5.67059 7.03847L4.22673 5.63261C3.828 5.24437 3.82657 4.60416 4.22355 4.21414C4.61195 3.83256 5.23531 3.83531 5.62032 4.22032L7.0453 5.6453C7.43241 6.03241 7.42669 6.66177 7.03261 7.04177ZM19.7747 19.7498C19.3786 20.1598 18.7215 20.1597 18.3256 19.7495L16.938 18.3119C16.57 17.9306 16.5753 17.3247 16.9501 16.9499C17.3247 16.5753 17.9306 16.5698 18.3119 16.9378L19.7497 18.3252C20.1502 18.7116 20.1614 19.3496 19.7747 19.7498ZM2 13C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11H4C4.55228 11 5 11.4477 5 12C5 12.5523 4.55228 13 4 13H2ZM5.63753 19.7875C5.24503 20.18 4.60781 20.1771 4.21881 19.7812C3.83464 19.3902 3.83742 18.7626 4.22503 18.375L5.62456 16.9754C6.01538 16.5846 6.64547 16.5734 7.05 16.95C7.44833 17.3346 7.45392 17.9711 7.06239 18.3626L5.63753 19.7875Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-dark.svg
new file mode 100644
index 0000000000..94a428d68b
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-dark.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.328 14.3029C15.905 11.8686 13.673 10 11 10C9.038 10 7.247 11.0114 6.302 12.6229C3.881 12.9229 2 14.92 2 17.2857C2 19.8829 4.223 22 6.95 22H15.95C18.182 22 20 20.2686 20 18.1429C20 16.1371 18.389 14.4829 16.328 14.3029ZM15.95 20.2857H6.95C5.213 20.2857 3.8 18.94 3.8 17.2857C3.8 15.7943 4.979 14.5171 6.536 14.32L7.427 14.2086L7.868 13.4629C8.507 12.3829 9.704 11.7143 11 11.7143C12.746 11.7143 14.267 12.9486 14.555 14.5857L14.78 15.8886L16.166 16.0086C17.309 16.1114 18.2 17.0457 18.2 18.1429C18.2 19.3257 17.192 20.2857 15.95 20.2857Z" fill="#E6E6E6"/>
+<path d="M15 4.3583C14.5481 4.3583 14.1818 3.98241 14.1818 3.51873V1.83958C14.1818 1.37589 14.5481 1 15 1C15.4519 1 15.8182 1.37589 15.8182 1.83958V3.51873C15.8182 3.98241 15.4519 4.3583 15 4.3583Z" fill="#E6E6E6"/>
+<path d="M20.1889 6.08612C19.8762 6.40701 19.3692 6.40701 19.0565 6.08611C18.7467 5.76822 18.7434 5.25387 19.0491 4.9318L20.2096 3.70898C20.5273 3.37426 21.0511 3.37309 21.3702 3.70638C21.6824 4.03249 21.6802 4.55588 21.3652 4.87914L20.1889 6.08612Z" fill="#E6E6E6"/>
+<path d="M21.5455 11.0749C21.0936 11.0749 20.7273 10.699 20.7273 10.2353C20.7273 9.77165 21.0936 9.39576 21.5455 9.39576H23.1818C23.6337 9.39576 24 9.77165 24 10.2353C24 10.699 23.6337 11.0749 23.1818 11.0749H21.5455Z" fill="#E6E6E6"/>
+<path d="M10.9358 6.07252C10.6245 6.38051 10.1312 6.37929 9.82139 6.06975L8.64006 4.88943C8.31382 4.56347 8.31265 4.02597 8.63745 3.69851C8.95523 3.37815 9.46526 3.38046 9.78026 3.7037L10.9462 4.90008C11.2629 5.22509 11.2582 5.75348 10.9358 6.07252Z" fill="#E6E6E6"/>
+<path d="M21.3611 16.7419C21.0371 17.0861 20.4994 17.086 20.1755 16.7416L19.0402 15.5346C18.7391 15.2145 18.7434 14.7058 19.05 14.3912C19.3566 14.0766 19.8523 14.0721 20.1643 14.381L21.3407 15.5458C21.6684 15.8702 21.6775 16.4059 21.3611 16.7419Z" fill="#E6E6E6"/>
+<path d="M6.81818 11.0749C6.36631 11.0749 6 10.699 6 10.2353C6 9.77165 6.36631 9.39576 6.81818 9.39576H8.45455C8.90641 9.39576 9.27273 9.77165 9.27273 10.2353C9.27273 10.339 9.2544 10.4384 9.22089 10.5301C8.81878 10.6675 8.43606 10.8507 8.08042 11.0749H6.81818Z" fill="#E6E6E6"/>
+<path d="M10.0914 10.3104C10.0911 10.2854 10.0909 10.2604 10.0909 10.2353C10.0909 7.45323 12.2888 5.19788 15 5.19788C17.7112 5.19788 19.9091 7.45323 19.9091 10.2353C19.9091 12.2491 18.7576 13.9869 17.0934 14.7931C16.8472 14.7226 16.5913 14.6743 16.328 14.6507C16.2568 14.2301 16.1343 13.8259 15.967 13.4446C17.3024 13.0214 18.2727 11.7447 18.2727 10.2353C18.2727 8.3806 16.8075 6.87703 15 6.87703C13.1925 6.87703 11.7273 8.3806 11.7273 10.2353C11.7273 10.2513 11.7274 10.2673 11.7276 10.2833C11.4895 10.2517 11.2466 10.2353 11 10.2353C10.6921 10.2353 10.3883 10.2609 10.0914 10.3104Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-light.svg
new file mode 100644
index 0000000000..e91d2cf75e
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-sunny-very-few-clouds-light.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.328 14.3029C15.905 11.8686 13.673 10 11 10C9.038 10 7.247 11.0114 6.302 12.6229C3.881 12.9229 2 14.92 2 17.2857C2 19.8829 4.223 22 6.95 22H15.95C18.182 22 20 20.2686 20 18.1429C20 16.1371 18.389 14.4829 16.328 14.3029ZM15.95 20.2857H6.95C5.213 20.2857 3.8 18.94 3.8 17.2857C3.8 15.7943 4.979 14.5171 6.536 14.32L7.427 14.2086L7.868 13.4629C8.507 12.3829 9.704 11.7143 11 11.7143C12.746 11.7143 14.267 12.9486 14.555 14.5857L14.78 15.8886L16.166 16.0086C17.309 16.1114 18.2 17.0457 18.2 18.1429C18.2 19.3257 17.192 20.2857 15.95 20.2857Z" fill="#191919"/>
+<path d="M15 4.3583C14.5481 4.3583 14.1818 3.98241 14.1818 3.51873V1.83958C14.1818 1.37589 14.5481 1 15 1C15.4519 1 15.8182 1.37589 15.8182 1.83958V3.51873C15.8182 3.98241 15.4519 4.3583 15 4.3583Z" fill="#191919"/>
+<path d="M20.1889 6.08612C19.8762 6.40701 19.3692 6.40701 19.0565 6.08611C18.7467 5.76822 18.7434 5.25387 19.0491 4.9318L20.2096 3.70898C20.5273 3.37426 21.0511 3.37309 21.3702 3.70638C21.6824 4.03249 21.6802 4.55588 21.3652 4.87914L20.1889 6.08612Z" fill="#191919"/>
+<path d="M21.5455 11.0749C21.0936 11.0749 20.7273 10.699 20.7273 10.2353C20.7273 9.77165 21.0936 9.39576 21.5455 9.39576H23.1818C23.6337 9.39576 24 9.77165 24 10.2353C24 10.699 23.6337 11.0749 23.1818 11.0749H21.5455Z" fill="#191919"/>
+<path d="M10.9358 6.07252C10.6245 6.38051 10.1312 6.37929 9.82139 6.06975L8.64006 4.88943C8.31382 4.56347 8.31265 4.02597 8.63745 3.69851C8.95523 3.37815 9.46526 3.38046 9.78026 3.7037L10.9462 4.90008C11.2629 5.22509 11.2582 5.75348 10.9358 6.07252Z" fill="#191919"/>
+<path d="M21.3611 16.7419C21.0371 17.0861 20.4994 17.086 20.1755 16.7416L19.0402 15.5346C18.7391 15.2145 18.7434 14.7058 19.05 14.3912C19.3566 14.0766 19.8523 14.0721 20.1643 14.381L21.3407 15.5458C21.6684 15.8702 21.6775 16.4059 21.3611 16.7419Z" fill="#191919"/>
+<path d="M6.81818 11.0749C6.36631 11.0749 6 10.699 6 10.2353C6 9.77165 6.36631 9.39576 6.81818 9.39576H8.45455C8.90641 9.39576 9.27273 9.77165 9.27273 10.2353C9.27273 10.339 9.2544 10.4384 9.22089 10.5301C8.81878 10.6675 8.43606 10.8507 8.08042 11.0749H6.81818Z" fill="#191919"/>
+<path d="M10.0914 10.3104C10.0911 10.2854 10.0909 10.2604 10.0909 10.2353C10.0909 7.45323 12.2888 5.19788 15 5.19788C17.7112 5.19788 19.9091 7.45323 19.9091 10.2353C19.9091 12.2491 18.7576 13.9869 17.0934 14.7931C16.8472 14.7226 16.5913 14.6743 16.328 14.6507C16.2568 14.2301 16.1343 13.8259 15.967 13.4446C17.3024 13.0214 18.2727 11.7447 18.2727 10.2353C18.2727 8.3806 16.8075 6.87703 15 6.87703C13.1925 6.87703 11.7273 8.3806 11.7273 10.2353C11.7273 10.2513 11.7274 10.2673 11.7276 10.2833C11.4895 10.2517 11.2466 10.2353 11 10.2353C10.6921 10.2353 10.3883 10.2609 10.0914 10.3104Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-dark.svg
new file mode 100644
index 0000000000..1e1134d562
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.26026 16.1394C9.24527 16.0933 9.21773 16.0547 9.18214 16.0299C9.14664 16.0051 9.10522 15.9951 9.06462 16.0023C9.02402 16.0094 8.98662 16.0329 8.95851 16.0688L6.04953 19.7874C6.02517 19.8185 6.00891 19.8575 6.00275 19.8995C5.9966 19.9416 6.00082 19.9849 6.0149 20.0242C6.02897 20.0634 6.05229 20.0968 6.08196 20.1202C6.11164 20.1437 6.14637 20.1562 6.18188 20.1562H7.3902L6.73532 22.7167C6.7232 22.764 6.72474 22.8148 6.73968 22.8608C6.75462 22.9069 6.78208 22.9455 6.8176 22.9703C6.85311 22.9952 6.89457 23.0048 6.93523 22.9977C6.97589 22.9906 7.01334 22.9671 7.04149 22.9311L9.95047 19.2125C9.97483 19.1815 9.99109 19.1425 9.99725 19.1004C10.0034 19.0583 9.99918 19.015 9.9851 18.9758C9.97103 18.9366 9.94771 18.9032 9.91804 18.8797C9.88836 18.8562 9.85363 18.8437 9.81812 18.8438H8.6098L9.26468 16.2836C9.27681 16.2363 9.27525 16.1855 9.26026 16.1394ZM15.2603 16.1395C15.2453 16.0934 15.2177 16.0548 15.1821 16.0299V16.0295C15.1466 16.0047 15.1052 15.9952 15.0646 16.0023C15.024 16.0095 14.9866 16.0329 14.9585 16.0689L12.0495 19.7874C12.0252 19.8185 12.0089 19.8575 12.0028 19.8996C11.9966 19.9416 12.0008 19.985 12.0149 20.0242C12.029 20.0634 12.0523 20.0968 12.082 20.1203C12.1116 20.1437 12.1464 20.1562 12.1819 20.1562H13.3902L12.7353 22.7167C12.7232 22.764 12.7247 22.8148 12.7397 22.8608C12.7546 22.9069 12.7821 22.9455 12.8176 22.9703C12.8531 22.9952 12.8946 23.0048 12.9352 22.9977C12.9759 22.9906 13.0133 22.9671 13.0415 22.9311L15.9505 19.2126C15.9748 19.1815 15.9911 19.1425 15.9972 19.1004C16.0034 19.0584 15.9992 19.015 15.9851 18.9758C15.971 18.9366 15.9477 18.9032 15.918 18.8797C15.8884 18.8563 15.8536 18.8438 15.8181 18.8438H14.6098L15.2647 16.2837C15.2768 16.2364 15.2753 16.1855 15.2603 16.1395Z" fill="#E6E6E6"/>
+<path d="M17.92 6.02C17.45 3.18 14.97 1 12 1C9.82 1 7.83 2.18 6.78 4.06C4.09 4.41 2 6.74 2 9.5C2 12.53 4.47 15 7.5 15H17.5C19.98 15 22 12.98 22 10.5C22 8.16 20.21 6.23 17.92 6.02ZM17.5 13H7.5C5.57 13 4 11.43 4 9.5C4 7.76 5.31 6.27 7.04 6.04L8.03 5.91L8.52 5.04C9.23 3.78 10.56 3 12 3C13.94 3 15.63 4.44 15.95 6.35L16.2 7.87L17.74 8.01C19.01 8.13 20 9.22 20 10.5C20 11.88 18.88 13 17.5 13Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-light.svg b/examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-light.svg
new file mode 100644
index 0000000000..8f5af95c62
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/weather-thundershower-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.26026 16.1394C9.24527 16.0933 9.21773 16.0547 9.18214 16.0299C9.14664 16.0051 9.10522 15.9951 9.06462 16.0023C9.02402 16.0094 8.98662 16.0329 8.95851 16.0688L6.04953 19.7874C6.02517 19.8185 6.00891 19.8575 6.00275 19.8995C5.9966 19.9416 6.00082 19.9849 6.0149 20.0242C6.02897 20.0634 6.05229 20.0968 6.08196 20.1202C6.11164 20.1437 6.14637 20.1562 6.18188 20.1562H7.3902L6.73532 22.7167C6.7232 22.764 6.72474 22.8148 6.73968 22.8608C6.75462 22.9069 6.78208 22.9455 6.8176 22.9703C6.85311 22.9952 6.89457 23.0048 6.93523 22.9977C6.97589 22.9906 7.01334 22.9671 7.04149 22.9311L9.95047 19.2125C9.97483 19.1815 9.99109 19.1425 9.99725 19.1004C10.0034 19.0583 9.99918 19.015 9.9851 18.9758C9.97103 18.9366 9.94771 18.9032 9.91804 18.8797C9.88836 18.8562 9.85363 18.8437 9.81812 18.8438H8.6098L9.26468 16.2836C9.27681 16.2363 9.27525 16.1855 9.26026 16.1394ZM15.2603 16.1395C15.2453 16.0934 15.2177 16.0548 15.1821 16.0299V16.0295C15.1466 16.0047 15.1052 15.9952 15.0646 16.0023C15.024 16.0095 14.9866 16.0329 14.9585 16.0689L12.0495 19.7874C12.0252 19.8185 12.0089 19.8575 12.0028 19.8996C11.9966 19.9416 12.0008 19.985 12.0149 20.0242C12.029 20.0634 12.0523 20.0968 12.082 20.1203C12.1116 20.1437 12.1464 20.1562 12.1819 20.1562H13.3902L12.7353 22.7167C12.7232 22.764 12.7247 22.8148 12.7397 22.8608C12.7546 22.9069 12.7821 22.9455 12.8176 22.9703C12.8531 22.9952 12.8946 23.0048 12.9352 22.9977C12.9759 22.9906 13.0133 22.9671 13.0415 22.9311L15.9505 19.2126C15.9748 19.1815 15.9911 19.1425 15.9972 19.1004C16.0034 19.0584 15.9992 19.015 15.9851 18.9758C15.971 18.9366 15.9477 18.9032 15.918 18.8797C15.8884 18.8563 15.8536 18.8438 15.8181 18.8438H14.6098L15.2647 16.2837C15.2768 16.2364 15.2753 16.1855 15.2603 16.1395Z" fill="#191919"/>
+<path d="M17.92 6.02C17.45 3.18 14.97 1 12 1C9.82 1 7.83 2.18 6.78 4.06C4.09 4.41 2 6.74 2 9.5C2 12.53 4.47 15 7.5 15H17.5C19.98 15 22 12.98 22 10.5C22 8.16 20.21 6.23 17.92 6.02ZM17.5 13H7.5C5.57 13 4 11.43 4 9.5C4 7.76 5.31 6.27 7.04 6.04L8.03 5.91L8.52 5.04C9.23 3.78 10.56 3 12 3C13.94 3 15.63 4.44 15.95 6.35L16.2 7.87L17.74 8.01C19.01 8.13 20 9.22 20 10.5C20 11.88 18.88 13 17.5 13Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wifi-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/wifi-dark.svg
new file mode 100644
index 0000000000..b6227d7072
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/wifi-dark.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6445 3.74032C19.1541 3.52925 19.7406 3.64592 20.1306 4.03591L27.6306 11.5359C28.1631 12.0684 28.1631 12.9319 27.6306 13.4644L21.0948 20.0002L27.6306 26.5359C28.1631 27.0685 28.1631 27.9319 27.6306 28.4644L20.1306 35.9644C19.7406 36.3544 19.1541 36.4711 18.6445 36.26C18.135 36.0489 17.8027 35.5517 17.8027 35.0002V23.2923L12.6306 28.4644C12.0981 28.9969 11.2347 28.9969 10.7021 28.4644C10.1696 27.9319 10.1696 27.0685 10.7021 26.5359L17.2379 20.0002L10.7021 13.4644C10.1696 12.9319 10.1696 12.0684 10.7021 11.5359C11.2347 11.0034 12.0981 11.0034 12.6306 11.5359L17.8027 16.708V5.00015C17.8027 4.44861 18.135 3.95138 18.6445 3.74032ZM20.53 23.2923L24.7379 27.5002L20.53 31.708V23.2923ZM20.53 16.708V8.29226L24.7379 12.5002L20.53 16.708Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wifi-light.svg b/examples/quickcontrols/wearable/Wearable/icons/wifi-light.svg
new file mode 100644
index 0000000000..1d90443cf4
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/wifi-light.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.3328 33.3294C23.3328 35.1704 21.8404 36.6628 19.9995 36.6628C18.1585 36.6628 16.6661 35.1704 16.6661 33.3294C16.6661 31.4885 18.1585 29.9961 19.9995 29.9961C21.8404 29.9961 23.3328 31.4885 23.3328 33.3294Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.47026 16.2138C8.77419 12.2 14.2971 9.99935 20.0002 9.99935C25.7033 9.99935 31.2262 12.2 35.5302 16.2138C36.2033 16.8416 37.258 16.8048 37.8858 16.1317C38.5135 15.4585 38.4768 14.4039 37.8036 13.7761C32.9001 9.20312 26.5709 6.66602 20.0002 6.66602C13.4295 6.66602 7.10028 9.20312 2.19683 13.7761C1.52366 14.4039 1.48688 15.4585 2.11467 16.1317C2.74246 16.8048 3.7971 16.8416 4.47026 16.2138ZM20.0015 18.3314C16.2134 18.3314 12.4961 19.9013 9.50517 22.8513C8.84983 23.4977 7.79458 23.4905 7.1482 22.8351C6.50182 22.1798 6.50908 21.1245 7.16442 20.4782C10.7246 16.9666 15.2636 14.9981 20.0015 14.9981C24.7393 14.9981 29.2783 16.9666 32.8385 20.4782C33.4938 21.1245 33.5011 22.1798 32.8547 22.8351C32.2083 23.4905 31.1531 23.4977 30.4978 22.8513C27.5068 19.9013 23.7895 18.3314 20.0015 18.3314ZM20.0006 26.6635C18.5723 26.6635 17.172 27.1273 15.9939 28.0018C15.2548 28.5504 14.2108 28.3959 13.6622 27.6568C13.1136 26.9177 13.2681 25.8738 14.0072 25.3252C15.7505 24.0313 17.8451 23.3301 20.0006 23.3301C22.156 23.3301 24.2506 24.0313 25.9939 25.3252C26.733 25.8738 26.8875 26.9177 26.3389 27.6568C25.7903 28.3959 24.7464 28.5504 24.0072 28.0018C22.8291 27.1273 21.4288 26.6635 20.0006 26.6635Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wind-dark.svg b/examples/quickcontrols/wearable/Wearable/icons/wind-dark.svg
new file mode 100644
index 0000000000..95464c4ec0
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/wind-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16H12C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 17.4477 9.55228 17 9 17C8.44772 17 8 17.4477 8 18C8 20.2091 9.79086 22 12 22C14.2091 22 16 20.2091 16 18C16 15.7909 14.2091 14 12 14H3Z" fill="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C12 6.55229 12.4477 7 13 7C13.5523 7 14 6.55228 14 6C14 4.89543 14.8954 4 16 4C17.1046 4 18 4.89543 18 6C18 7.10457 17.1046 8 16 8H3C2.44772 8 2 8.44772 2 9C2 9.55228 2.44772 10 3 10H16C18.2091 10 20 8.20914 20 6C20 3.79086 18.2091 2 16 2C13.7909 2 12 3.79086 12 6ZM3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H18C19.1046 13 20 13.8954 20 15C20 16.1046 19.1046 17 18 17C17.4477 17 17 17.4477 17 18C17 18.5523 17.4477 19 18 19C20.2091 19 22 17.2091 22 15C22 12.7909 20.2091 11 18 11H3Z" fill="#E6E6E6"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/wind-light.svg b/examples/quickcontrols/wearable/Wearable/icons/wind-light.svg
new file mode 100644
index 0000000000..7146903e27
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/wind-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16H12C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 17.4477 9.55228 17 9 17C8.44772 17 8 17.4477 8 18C8 20.2091 9.79086 22 12 22C14.2091 22 16 20.2091 16 18C16 15.7909 14.2091 14 12 14H3Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C12 6.55229 12.4477 7 13 7C13.5523 7 14 6.55228 14 6C14 4.89543 14.8954 4 16 4C17.1046 4 18 4.89543 18 6C18 7.10457 17.1046 8 16 8H3C2.44772 8 2 8.44772 2 9C2 9.55228 2.44772 10 3 10H16C18.2091 10 20 8.20914 20 6C20 3.79086 18.2091 2 16 2C13.7909 2 12 3.79086 12 6ZM3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H18C19.1046 13 20 13.8954 20 15C20 16.1046 19.1046 17 18 17C17.4477 17 17 17.4477 17 18C17 18.5523 17.4477 19 18 19C20.2091 19 22 17.2091 22 15C22 12.7909 20.2091 11 18 11H3Z" fill="#191919"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/icons/yellowsun.svg b/examples/quickcontrols/wearable/Wearable/icons/yellowsun.svg
new file mode 100644
index 0000000000..bf57285374
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/icons/yellowsun.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28 38C33.5228 38 38 33.5228 38 28C38 22.4772 33.5228 18 28 18C22.4772 18 18 22.4772 18 28C18 33.5228 22.4772 38 28 38ZM28 43C36.2843 43 43 36.2843 43 28C43 19.7157 36.2843 13 28 13C19.7157 13 13 19.7157 13 28C13 36.2843 19.7157 43 28 43Z" fill="#FFD600"/>
+<path d="M27.5 10.5C26.3954 10.5 25.5 9.60457 25.5 8.5V2.5C25.5 1.39543 26.3954 0.5 27.5 0.5H28.5C29.6046 0.5 30.5 1.39543 30.5 2.5V8.5C30.5 9.60457 29.6046 10.5 28.5 10.5H27.5ZM43.5392 15.9608C42.7582 16.7418 41.4918 16.7418 40.7108 15.9608L40.0831 15.3331C39.3094 14.5594 39.3011 13.3074 40.0646 12.5235L44.261 8.21475C45.0437 7.41107 46.3342 7.40825 47.1204 8.2085L47.7982 8.8984C48.5675 9.6814 48.5619 10.9381 47.7857 11.7143L43.5392 15.9608ZM47.5 30.5C46.3954 30.5 45.5 29.6046 45.5 28.5V27.5C45.5 26.3954 46.3954 25.5 47.5 25.5H53.5C54.6046 25.5 55.5 26.3954 55.5 27.5V28.5C55.5 29.6046 54.6046 30.5 53.5 30.5H47.5ZM27.5 55.5C26.3954 55.5 25.5 54.6046 25.5 53.5V47.5C25.5 46.3954 26.3954 45.5 27.5 45.5H28.5C29.6046 45.5 30.5 46.3954 30.5 47.5V53.5C30.5 54.6046 29.6046 55.5 28.5 55.5H27.5ZM15.27 15.9048C14.4926 16.6545 13.2603 16.6515 12.4865 15.8981L8.21508 11.739C7.41125 10.9563 7.40836 9.66569 8.20868 8.87942L8.8984 8.20179C9.6814 7.43253 10.9381 7.43809 11.7143 8.21425L15.9348 12.4348C16.7259 13.2259 16.7143 14.5121 15.9089 15.2887L15.27 15.9048ZM47.064 47.7605C46.2775 48.5746 44.9728 48.5743 44.1866 47.7598L40.0521 43.4763C39.2946 42.6915 39.3056 41.4444 40.0769 40.6731L40.6733 40.0767C41.4445 39.3055 42.6914 39.2943 43.4763 40.0517L47.7474 44.1729C48.5426 44.9402 48.5648 46.207 47.797 47.0018L47.064 47.7605ZM2.5 30.5C1.39543 30.5 0.5 29.6046 0.5 28.5V27.5C0.5 26.3954 1.39543 25.5 2.5 25.5H8.5C9.60457 25.5 10.5 26.3954 10.5 27.5V28.5C10.5 29.6046 9.60457 30.5 8.5 30.5H2.5ZM11.7393 47.8232C10.9533 48.6092 9.67735 48.6035 8.8984 47.8106L8.20179 47.1016C7.43253 46.3186 7.43809 45.0619 8.21425 44.2857L12.4479 40.0521C13.2093 39.2907 14.4368 39.2688 15.2249 40.0025L15.625 40.375L15.9732 40.7112C16.7777 41.488 16.789 42.7735 15.9983 43.5642L11.7393 47.8232Z" fill="#FFD600"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/images/back.png b/examples/quickcontrols/wearable/Wearable/images/back.png
deleted file mode 100644
index cf80aa65f5..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/back.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/back@2x.png b/examples/quickcontrols/wearable/Wearable/images/back@2x.png
deleted file mode 100644
index 02f27981e0..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/back@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/back@3x.png b/examples/quickcontrols/wearable/Wearable/images/back@3x.png
deleted file mode 100644
index 6d2d6cf120..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/back@3x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/back@4x.png b/examples/quickcontrols/wearable/Wearable/images/back@4x.png
deleted file mode 100644
index 03193681b1..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/back@4x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/background-dark.png b/examples/quickcontrols/wearable/Wearable/images/background-dark.png
deleted file mode 100644
index 6a8c0761aa..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/background-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/background-light.png b/examples/quickcontrols/wearable/Wearable/images/background-light.png
deleted file mode 100644
index 913befab82..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/background-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fallbackmap.png b/examples/quickcontrols/wearable/Wearable/images/fallbackmap.png
new file mode 100644
index 0000000000..bf1ae037f7
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/images/fallbackmap.png
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.png
deleted file mode 100644
index 6c791d6170..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.svg b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.svg
new file mode 100644
index 0000000000..ea313bbc71
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark.svg
@@ -0,0 +1,3 @@
+<svg width="62" height="78" viewBox="0 0 62 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.3752 11.8396C36.7712 13.239 38.4184 13.9388 40.3169 13.9388C42.1596 13.9388 43.7649 13.225 45.1329 11.7976C46.501 10.3701 47.185 8.73273 47.185 6.88541C47.185 5.0381 46.5149 3.42872 45.1748 2.05723C43.8347 0.685736 42.2154 0 40.3169 0C38.4184 0 36.7712 0.671741 35.3752 2.01524C33.9793 3.35875 33.2813 4.98212 33.2813 6.88541C33.2813 8.78871 33.9793 10.4401 35.3752 11.8396ZM3.29629 57.7703C8.78005 58.8751 21.8066 61.4606 21.8066 61.4606C25.5181 61.6227 26.6937 60.5763 27.7178 56.9635L31.1036 47.2742L38.4743 54.1597V75.1518C38.4743 78.9494 45.5099 78.9494 45.5099 75.1518C45.5099 74.1322 45.5321 71.8127 45.5596 68.9539C45.6036 64.3631 45.661 58.3818 45.661 54.1597C45.661 49.4683 43.1689 47.2742 43.1689 47.2742L38.1392 41.9842L40.3169 31.4882C42.6063 34.1752 45.3982 36.3024 48.6926 37.8698C52.0429 39.4372 55.7202 40.2209 59.4135 40.2209C63.1069 40.2209 62.6084 33.1675 59.4135 33.1675C56.2186 33.1675 53.1318 32.3838 50.4515 30.8164C47.8271 29.305 45.7891 27.2898 44.3373 24.7707L40.9032 19.2288C39.3397 16.9336 37.3854 15.7861 35.0402 15.7861C34.7052 15.7861 34.2445 15.8421 33.6582 15.954C33.0719 16.066 32.6113 16.1219 32.2762 16.1219L17.7456 22.4856C14.6914 24.0251 14.5358 25.4411 14.2604 27.9476L14.2566 27.9821C14.2566 27.9821 14.101 35.9703 14.101 40.2209C14.101 44.4715 20.969 44.4715 20.969 40.2209V28.2134L27.3346 25.7783L20.7399 53.4658C20.7399 53.4658 9.46632 51.6708 4.6364 50.717C-0.193514 49.7631 -2.18747 56.6655 3.29629 57.7703Z" fill="#2CDE85"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark@2x.png
deleted file mode 100644
index e9abae9de4..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.png
deleted file mode 100644
index e7eef12cb3..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.svg b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.svg
new file mode 100644
index 0000000000..296d0b4309
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light.svg
@@ -0,0 +1,3 @@
+<svg width="62" height="78" viewBox="0 0 62 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.3752 11.8396C36.7712 13.239 38.4184 13.9388 40.3169 13.9388C42.1596 13.9388 43.7649 13.225 45.1329 11.7976C46.501 10.3701 47.185 8.73273 47.185 6.88541C47.185 5.0381 46.5149 3.42872 45.1748 2.05723C43.8347 0.685736 42.2154 0 40.3169 0C38.4184 0 36.7712 0.671741 35.3752 2.01524C33.9793 3.35875 33.2813 4.98212 33.2813 6.88541C33.2813 8.78871 33.9793 10.4401 35.3752 11.8396ZM3.29629 57.7703C8.78005 58.8751 21.8066 61.4606 21.8066 61.4606C25.5181 61.6227 26.6937 60.5763 27.7178 56.9635L31.1036 47.2742L38.4743 54.1597V75.1518C38.4743 78.9494 45.5099 78.9494 45.5099 75.1518C45.5099 74.1322 45.5321 71.8127 45.5596 68.9539C45.6036 64.3631 45.661 58.3818 45.661 54.1597C45.661 49.4683 43.1689 47.2742 43.1689 47.2742L38.1392 41.9842L40.3169 31.4882C42.6063 34.1752 45.3982 36.3024 48.6926 37.8698C52.0429 39.4372 55.7202 40.2209 59.4135 40.2209C63.1069 40.2209 62.6084 33.1675 59.4135 33.1675C56.2186 33.1675 53.1318 32.3838 50.4515 30.8164C47.8271 29.305 45.7891 27.2898 44.3373 24.7707L40.9032 19.2288C39.3397 16.9336 37.3854 15.7861 35.0402 15.7861C34.7052 15.7861 34.2445 15.8421 33.6582 15.954C33.0719 16.066 32.6113 16.1219 32.2762 16.1219L17.7456 22.4856C14.6914 24.0251 14.5358 25.4411 14.2604 27.9476L14.2566 27.9821C14.2566 27.9821 14.101 35.9703 14.101 40.2209C14.101 44.4715 20.969 44.4715 20.969 40.2209V28.2134L27.3346 25.7783L20.7399 53.4658C20.7399 53.4658 9.46632 51.6708 4.6364 50.717C-0.193514 49.7631 -2.18747 56.6655 3.29629 57.7703Z" fill="#19545C"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light@2x.png
deleted file mode 100644
index 79861f5718..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-running-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.png
deleted file mode 100644
index 6d455b4925..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.svg b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.svg
new file mode 100644
index 0000000000..10a1d2421f
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark.svg
@@ -0,0 +1,3 @@
+<svg width="44" height="78" viewBox="0 0 44 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4523 11.7338C16.8354 13.1207 18.4676 13.8142 20.3487 13.8142C22.1745 13.8142 23.7651 13.1069 25.1206 11.6922C26.4761 10.2774 27.1539 8.6547 27.1539 6.82389C27.1539 4.99308 26.4899 3.39808 25.1621 2.03885C23.8342 0.679608 22.2298 0 20.3487 0C18.4676 0 16.8354 0.665739 15.4523 1.99724C14.0691 3.32873 13.3775 4.9376 13.3775 6.82389C13.3775 8.71018 14.0691 10.3468 15.4523 11.7338ZM6.46298 74.2821C8.09671 71.3108 15.6242 57.4448 15.6242 57.4448L19.3587 47.5488L26.6618 54.3727V75.1772C26.6618 78.9409 33.633 78.9409 33.633 75.1772C33.633 74.1667 33.655 71.868 33.6822 69.0347C33.7258 64.485 33.7827 58.5571 33.7827 54.3727C33.7827 49.7233 31.3134 47.5488 31.3134 47.5488L26.3298 42.3061L26.6618 29.7128C26.6618 29.7128 37.8363 39.6174 41.0335 39.6174C44.2307 39.6174 45.4782 34.17 41.5273 32.6843C37.5765 31.1987 32.4711 25.2463 32.4711 25.2463L29.0685 19.7539C27.5194 17.4793 26.6618 17.3324 26.6618 17.3324C26.0683 16.2311 13.2224 16.1882 12.8837 17.3324L5.96968 22.2847C3.15235 23.7051 2.95593 25.618 2.72317 27.8848C2.70477 28.064 2.68614 28.2455 2.66596 28.429C2.66596 28.429 2.51175 36.3458 2.51175 40.5585C2.51175 44.7711 9.31693 44.7711 9.31693 40.5585V28.6583L12.8837 26.7415V42.3061L9.0899 53.685C9.0899 53.685 3.00484 65.4635 0.536321 70.3204C-1.93219 75.1772 4.82925 77.2534 6.46298 74.2821Z" fill="#2CDE85"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark@2x.png
deleted file mode 100644
index a3ac08baf3..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.png
deleted file mode 100644
index f963f8897b..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.svg b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.svg
new file mode 100644
index 0000000000..268d4ac880
--- /dev/null
+++ b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light.svg
@@ -0,0 +1,3 @@
+<svg width="44" height="78" viewBox="0 0 44 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4523 11.7338C16.8354 13.1207 18.4676 13.8142 20.3487 13.8142C22.1745 13.8142 23.7651 13.1069 25.1206 11.6922C26.4761 10.2774 27.1539 8.6547 27.1539 6.82389C27.1539 4.99308 26.4899 3.39808 25.1621 2.03885C23.8342 0.679608 22.2298 0 20.3487 0C18.4676 0 16.8354 0.665739 15.4523 1.99724C14.0691 3.32873 13.3775 4.9376 13.3775 6.82389C13.3775 8.71018 14.0691 10.3468 15.4523 11.7338ZM6.46298 74.2821C8.09671 71.3108 15.6242 57.4448 15.6242 57.4448L19.3587 47.5488L26.6618 54.3727V75.1772C26.6618 78.9409 33.633 78.9409 33.633 75.1772C33.633 74.1667 33.655 71.868 33.6822 69.0347C33.7258 64.485 33.7827 58.5571 33.7827 54.3727C33.7827 49.7233 31.3134 47.5488 31.3134 47.5488L26.3298 42.3061L26.6618 29.7128C26.6618 29.7128 37.8363 39.6174 41.0335 39.6174C44.2307 39.6174 45.4782 34.17 41.5273 32.6843C37.5765 31.1987 32.4711 25.2463 32.4711 25.2463L29.0685 19.7539C27.5194 17.4793 26.6618 17.3324 26.6618 17.3324C26.0683 16.2311 13.2224 16.1882 12.8837 17.3324L5.96968 22.2847C3.15235 23.7051 2.95593 25.618 2.72317 27.8848C2.70477 28.064 2.68614 28.2455 2.66596 28.429C2.66596 28.429 2.51175 36.3458 2.51175 40.5585C2.51175 44.7711 9.31693 44.7711 9.31693 40.5585V28.6583L12.8837 26.7415V42.3061L9.0899 53.685C9.0899 53.685 3.00484 65.4635 0.536321 70.3204C-1.93219 75.1772 4.82925 77.2534 6.46298 74.2821Z" fill="#19545C"/>
+</svg>
diff --git a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light@2x.png
deleted file mode 100644
index 1b4d7592d6..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/fitness-man-walking-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/home.png b/examples/quickcontrols/wearable/Wearable/images/home.png
deleted file mode 100644
index b6ee1459f7..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/home.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/home@2x.png b/examples/quickcontrols/wearable/Wearable/images/home@2x.png
deleted file mode 100644
index d5595b2378..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/home@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/home@3x.png b/examples/quickcontrols/wearable/Wearable/images/home@3x.png
deleted file mode 100644
index 9a5188d22b..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/home@3x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/home@4x.png b/examples/quickcontrols/wearable/Wearable/images/home@4x.png
deleted file mode 100644
index c4d2eb515a..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/home@4x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-dark.png b/examples/quickcontrols/wearable/Wearable/images/navigation-dark.png
deleted file mode 100644
index b80b7b610f..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-dark@2x.png
deleted file mode 100644
index b198aa3d9a..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-end.png b/examples/quickcontrols/wearable/Wearable/images/navigation-end.png
deleted file mode 100644
index 4805ad8207..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-end.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-end@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-end@2x.png
deleted file mode 100644
index e91d537465..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-end@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark.png b/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark.png
deleted file mode 100644
index 66d258f5ac..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark@2x.png
deleted file mode 100644
index 639deb81cf..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light.png b/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light.png
deleted file mode 100644
index 1346e8eaff..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light@2x.png
deleted file mode 100644
index 268a6283f9..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-leftturn-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-light.png b/examples/quickcontrols/wearable/Wearable/images/navigation-light.png
deleted file mode 100644
index 08e73005fd..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-light@2x.png
deleted file mode 100644
index 7d4a62b9e1..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-marker.png b/examples/quickcontrols/wearable/Wearable/images/navigation-marker.png
deleted file mode 100644
index 4805ad8207..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-marker.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark.png b/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark.png
deleted file mode 100644
index 6a779dadc4..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark@2x.png
deleted file mode 100644
index 13143c2e2c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light.png b/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light.png
deleted file mode 100644
index a6be08c1a1..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light@2x.png
deleted file mode 100644
index 58f04b5052..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-rightturn-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-start.png b/examples/quickcontrols/wearable/Wearable/images/navigation-start.png
deleted file mode 100644
index 41de60e60c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-start.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-start@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-start@2x.png
deleted file mode 100644
index 6fe3ba9dbd..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-start@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark.png b/examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark.png
deleted file mode 100644
index 3f4ab66430..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark@2x.png
deleted file mode 100644
index f5baa6da42..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-light.png b/examples/quickcontrols/wearable/Wearable/images/navigation-straight-light.png
deleted file mode 100644
index 1321b97aa5..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-straight-light@2x.png
deleted file mode 100644
index a2d3c4c2ab..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-straight-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-uturn.png b/examples/quickcontrols/wearable/Wearable/images/navigation-uturn.png
deleted file mode 100644
index 596046ca9a..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-uturn.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/navigation-uturn@2x.png b/examples/quickcontrols/wearable/Wearable/images/navigation-uturn@2x.png
deleted file mode 100644
index 659f103573..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/navigation-uturn@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark.png
deleted file mode 100644
index 37bc1f291b..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark@2x.png
deleted file mode 100644
index efcd7cba74..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light.png
deleted file mode 100644
index e38b260724..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light@2x.png
deleted file mode 100644
index 1f28beac6c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarf-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark.png
deleted file mode 100644
index 5a2a394d8c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark@2x.png
deleted file mode 100644
index 1a19b0fc8e..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light.png
deleted file mode 100644
index f0fc7a9606..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light@2x.png
deleted file mode 100644
index 64a0f1f9ac..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-avatarm-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark.png b/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark.png
deleted file mode 100644
index 26bcf98ad3..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark@2x.png
deleted file mode 100644
index 5eb54ce809..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light.png b/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light.png
deleted file mode 100644
index 641e1f0c43..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light@2x.png
deleted file mode 100644
index e8d2d81c9a..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/notifications-missedcall-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark.png b/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark.png
deleted file mode 100644
index 0f1f4d0a54..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark@2x.png
deleted file mode 100644
index 7496fc5685..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light.png b/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light.png
deleted file mode 100644
index 6e297cfab3..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light@2x.png
deleted file mode 100644
index 62d084032f..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-bluetooth-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark.png b/examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark.png
deleted file mode 100644
index f9eb07b583..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark@2x.png
deleted file mode 100644
index 3efc5a6c4b..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-light.png b/examples/quickcontrols/wearable/Wearable/images/settings-brightness-light.png
deleted file mode 100644
index ce3023b565..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-brightness-light@2x.png
deleted file mode 100644
index dc01aae1fd..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-brightness-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark.png b/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark.png
deleted file mode 100644
index e93c417d79..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark@2x.png
deleted file mode 100644
index faa1bf6d11..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light.png b/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light.png
deleted file mode 100644
index c38d146d37..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light@2x.png
deleted file mode 100644
index b9d6409cbc..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white.png b/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white.png
deleted file mode 100644
index aac8ef3f6c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white@2x.png
deleted file mode 100644
index b4d8954f5d..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode-white@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode.svg b/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode.svg
deleted file mode 100644
index ad1ce44873..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-demo-mode.svg
+++ /dev/null
@@ -1,93 +0,0 @@
-<?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/Wearable/images/settings-theme-dark.png b/examples/quickcontrols/wearable/Wearable/images/settings-theme-dark.png
deleted file mode 100644
index d4c4a8c094..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-theme-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-theme-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-theme-dark@2x.png
deleted file mode 100644
index 30d8c6de28..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-theme-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-theme-light.png b/examples/quickcontrols/wearable/Wearable/images/settings-theme-light.png
deleted file mode 100644
index e7a0771b94..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-theme-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-theme-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-theme-light@2x.png
deleted file mode 100644
index 83bc878b03..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-theme-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-theme.svg b/examples/quickcontrols/wearable/Wearable/images/settings-theme.svg
deleted file mode 100644
index bf3f1e57d7..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-theme.svg
+++ /dev/null
@@ -1,84 +0,0 @@
-<?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/Wearable/images/settings-wifi-dark.png b/examples/quickcontrols/wearable/Wearable/images/settings-wifi-dark.png
deleted file mode 100644
index 14bfe8f5c8..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-wifi-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-wifi-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-wifi-dark@2x.png
deleted file mode 100644
index b70d04290b..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-wifi-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-wifi-light.png b/examples/quickcontrols/wearable/Wearable/images/settings-wifi-light.png
deleted file mode 100644
index 2de34118a7..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-wifi-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/settings-wifi-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/settings-wifi-light@2x.png
deleted file mode 100644
index 64b5f1725c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/settings-wifi-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark.png b/examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark.png
deleted file mode 100644
index 5d82238cdb..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark@2x.png
deleted file mode 100644
index d83bb4f00c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-light.png b/examples/quickcontrols/wearable/Wearable/images/weather-humidity-light.png
deleted file mode 100644
index 5f3bf714e6..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-humidity-light@2x.png
deleted file mode 100644
index a23364c52c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-humidity-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark.png b/examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark.png
deleted file mode 100644
index b2870a55a6..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark@2x.png
deleted file mode 100644
index 061f9b8266..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-light.png b/examples/quickcontrols/wearable/Wearable/images/weather-pressure-light.png
deleted file mode 100644
index 7b1b158734..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-pressure-light@2x.png
deleted file mode 100644
index 1a40c6422a..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-pressure-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark.png
deleted file mode 100644
index 9cac22e1e1..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark@2x.png
deleted file mode 100644
index fe32682386b..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light.png
deleted file mode 100644
index f67a5dff34..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light@2x.png
deleted file mode 100644
index 86f5483761..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunrise-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark.png
deleted file mode 100644
index 0068d30539..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark@2x.png
deleted file mode 100644
index e515bcc37c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-light.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunset-light.png
deleted file mode 100644
index 495f78a786..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-sunset-light@2x.png
deleted file mode 100644
index d220e829d1..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-sunset-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark.png b/examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark.png
deleted file mode 100644
index a207d9440d..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark@2x.png
deleted file mode 100644
index c0e4ef39bf..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-light.png b/examples/quickcontrols/wearable/Wearable/images/weather-temperature-light.png
deleted file mode 100644
index c4f7b61c2e..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-temperature-light@2x.png
deleted file mode 100644
index 50d4f4c43c..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-temperature-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-wind-dark.png b/examples/quickcontrols/wearable/Wearable/images/weather-wind-dark.png
deleted file mode 100644
index 6a530491af..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-wind-dark.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-wind-dark@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-wind-dark@2x.png
deleted file mode 100644
index 487e3e78a3..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-wind-dark@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-wind-light.png b/examples/quickcontrols/wearable/Wearable/images/weather-wind-light.png
deleted file mode 100644
index 97824bee8f..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-wind-light.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/weather-wind-light@2x.png b/examples/quickcontrols/wearable/Wearable/images/weather-wind-light@2x.png
deleted file mode 100644
index 7f94bd8542..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/weather-wind-light@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-center.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-center.png
deleted file mode 100644
index 0dec43a0aa..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-center.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-center@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-center@2x.png
deleted file mode 100644
index dffc5d60e4..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-center@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night.png
deleted file mode 100644
index 2de330243a..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night@2x.png
deleted file mode 100644
index f675acea69..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-clock-night@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-clock.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-clock.png
deleted file mode 100644
index 686fb8c2f7..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-clock.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-second.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-second.png
deleted file mode 100644
index 1e64f357df..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-second.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-second@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-second@2x.png
deleted file mode 100644
index cebc1deb06..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-second@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial.png
deleted file mode 100644
index 0e6321537a..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial@2x.png
deleted file mode 100644
index ed5de8c646..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdaydial@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour.png
deleted file mode 100644
index 4a835ac3f0..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour@2x.png
deleted file mode 100644
index 70f3fa0eee..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayhour@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute.png
deleted file mode 100644
index 048acc7b3f..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute@2x.png
deleted file mode 100644
index 4cc6ce64b4..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissdayminute@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial.png
deleted file mode 100644
index ee5a15bb9b..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial@2x.png
deleted file mode 100644
index ec7e5c77dc..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightdial@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour.png
deleted file mode 100644
index c5b41cb043..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour@2x.png
deleted file mode 100644
index bbbc36f1d7..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnighthour@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute.png
deleted file mode 100644
index 026c742446..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute@2x.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute@2x.png
deleted file mode 100644
index 8ad69047a4..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissnightminute@2x.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissseconds.png b/examples/quickcontrols/wearable/Wearable/images/world-clock-swissseconds.png
deleted file mode 100644
index 06446ac0fe..0000000000
--- a/examples/quickcontrols/wearable/Wearable/images/world-clock-swissseconds.png
+++ /dev/null
Binary files differ
diff --git a/examples/quickcontrols/wearable/Wearable/navigation.js b/examples/quickcontrols/wearable/Wearable/navigation.js
index e82cccbea5..0f3e7fa9be 100644
--- a/examples/quickcontrols/wearable/Wearable/navigation.js
+++ b/examples/quickcontrols/wearable/Wearable/navigation.js
@@ -1,84 +1,119 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 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.open("GET", "fallbackroute.json");
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
var a = JSON.parse(xhr.responseText);
- var steps = a.routes[0].legs[0].steps;
+ var steps = a.route.steps;
for (var step in steps) {
- var maneuver = steps[step].maneuver;
- var duration = steps[step].duration;
- var distance = steps[step].distance;
+ var direction = steps[step].direction;
+ var instructionText = steps[step].instructionText;
+ var distanceToNextInstruction = steps[step].distanceToNextInstruction;
rModel.append({
- navInstruction: maneuver.instruction,
- navImage: getNavigationImage(
- maneuver.type,
- maneuver.modifier,
- routeView.imageList),
- navAuxInfo: getAuxInfo(distance,
- duration)
- });
+ icon: formatIconInstruction(direction),
+ shortInfo: formatShortInstruction(direction),
+ instruction: instructionText,
+ distance: qsTr("in") + " " + formatDistance(distanceToNextInstruction)
+ });
}
}
}
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];
- }
+function formatIconInstruction(direction)
+{
+ switch (direction){
+ case 0:
+ return "";
+ case 1:
+ return "forward";
+ case 2:
+ return "bearright";
+ case 3:
+ case 4:
+ return "right";
+ case 5:
+ return "lightright";
+ case 6:
+ return "uturnright";
+ case 7:
+ return "uturleft";
+ case 8:
+ case 9:
+ return "left";
+ case 10:
+ return "lightleft";
+ case 11:
+ return "bearleft";
}
-
- return imageToReturn;
}
-function getAuxInfo(distInMeters, timeInSecs) {
- var distance = convertDistance(distInMeters);
- if (distance.length > 0)
- return "Distance: " + distance + "\nTime: " + formatSeconds(
- timeInSecs);
- else
+function formatShortInstruction(direction)
+{
+ switch (direction){
+ case 0:
return "";
+ case 1:
+ return "Move forward";
+ case 2:
+ return "Bear right";
+ case 3:
+ return "Turn right";
+ case 4:
+ return "Turn hard right";
+ case 5:
+ return "Turn slightly right";
+ case 6:
+ return "Uturn right";
+ case 7:
+ return "Uturn left";
+ case 8:
+ return "Turn hard left";
+ case 9:
+ return "Turn left";
+ case 10:
+ return "Turn slightly left";
+ case 11:
+ return "Bear left";
+ }
}
-function convertDistance(meter) {
- var dist = "";
- var feet = (meter * 0.3048).toPrecision(6);
- var miles = (meter * 0.000621371).toPrecision(6);
+function formatTime(sec)
+{
+ var value = sec
+ var seconds = value % 60
+ value /= 60
+ value = (value > 1) ? Math.round(value) : 0
+ var minutes = value % 60
+ value /= 60
+ value = (value > 1) ? Math.round(value) : 0
+ var hours = value
+ if (hours > 0) value = hours + "h:"+ minutes + "m"
+ else value = minutes + "min"
+ return value
+}
- if (Math.floor(miles) > 1) {
- dist += Math.floor(miles) + " mi";
- feet = ((miles - Math.floor(miles)) * 0.3048).toPrecision(6);
+function formatDistance(meters)
+{
+ var dist = Math.round(meters)
+ if (dist > 1000 ){
+ if (dist > 100000){
+ dist = Math.round(dist / 1000)
+ }
+ else{
+ dist = Math.round(dist / 100)
+ dist = dist / 10
+ }
+ dist = dist + " km"
+ }
+ else{
+ dist = dist + " m"
}
- 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/Wearable/notifications.js b/examples/quickcontrols/wearable/Wearable/notifications.js
index 62f46e0a0b..d278cfb87b 100644
--- a/examples/quickcontrols/wearable/Wearable/notifications.js
+++ b/examples/quickcontrols/wearable/Wearable/notifications.js
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
function populateData(listData) {
@@ -6,20 +6,23 @@ function populateData(listData) {
name: "John Doe",
gender: "m",
date: "02/15/2017",
- time: "09:20 am"
+ time: "09:20 am",
+ text: "I found the bug that has been bothering us for years! It was in your code segment :P"
});
listData.append({
name: "Jane Worldege",
gender: "f",
date: "02/06/2017",
- time: "10:15 am"
+ time: "10:15 am",
+ text: "John told me about your bug. One more such thing and you're fired!"
});
listData.append({
name: "Jennifer Wang",
gender: "f",
date: "02/03/2017",
- time: "05:16 pm"
+ time: "05:16 pm",
+ text: "Hey! Have you seen the new Qt version? It can do 3D stuff now!"
});
}
diff --git a/examples/quickcontrols/wearable/Wearable/qmldir b/examples/quickcontrols/wearable/Wearable/qmldir
index 1ce636ab6b..550b8bb1c1 100644
--- a/examples/quickcontrols/wearable/Wearable/qmldir
+++ b/examples/quickcontrols/wearable/Wearable/qmldir
@@ -9,8 +9,8 @@ DemoModeIndicator 254.0 DemoModeIndicator.qml
FitnessPage 254.0 FitnessPage.qml
LauncherPage 254.0 LauncherPage.qml
Main 254.0 Main.qml
-NaviButton 254.0 NaviButton.qml
NavigationPage 254.0 NavigationPage.qml
+NavigationFallbackPage 254.0 NavigationFallbackPage.qml
NotificationsPage 254.0 NotificationsPage.qml
RouteElement 254.0 RouteElement.qml
SettingsPage 254.0 SettingsPage.qml
diff --git a/examples/quickcontrols/wearable/Wearable/walk_route.json b/examples/quickcontrols/wearable/Wearable/walk_route.json
deleted file mode 100644
index e69b5cc187..0000000000
--- a/examples/quickcontrols/wearable/Wearable/walk_route.json
+++ /dev/null
@@ -1 +0,0 @@
-{"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/Wearable/weather.js b/examples/quickcontrols/wearable/Wearable/weather.js
index c08fd96e9e..a9804b686d 100644
--- a/examples/quickcontrols/wearable/Wearable/weather.js
+++ b/examples/quickcontrols/wearable/Wearable/weather.js
@@ -1,6 +1,12 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+function formatTemp(farenheit) {
+ let celsius = Math.round((farenheit -32) * 5/9)
+ return celsius + "°C"
+}
+
function requestWeatherData(cntr) {
var xhr = new XMLHttpRequest;
xhr.open("GET", "weather.json");
@@ -15,16 +21,31 @@ function requestWeatherData(cntr) {
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);
-
+ var hours = "0" + date.getHours();
// 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;
+ return hours.substr(-2) + ':' + minutes.substr(-2);
+}
+
+function iconSelect(code) {
+ if (code === "01d" || code === "01n")
+ return "sunny";
+ else if (code === "02d" || code === "02n")
+ return "sunny-very-few-clouds";
+ else if (code === "03d" || code === "03n")
+ return "few-clouds";
+ else if (code === "04d" || code === "04n")
+ return "overcast";
+ else if (code === "09d" || code === "09n" || code === "10d" || code === "10n")
+ return "showers";
+ else if (code === "11d" || code === "11n")
+ return "thundershower";
+ else if (code === "13d" || code === "13n")
+ return "snow";
+ else if (code === "50d" || code === "50n")
+ return "fog";
+
+ return "sunny"; // default choice
}
diff --git a/examples/quickcontrols/wearable/WearableSettings/CMakeLists.txt b/examples/quickcontrols/wearable/WearableSettings/CMakeLists.txt
index 5f259cf122..d6df71904f 100644
--- a/examples/quickcontrols/wearable/WearableSettings/CMakeLists.txt
+++ b/examples/quickcontrols/wearable/WearableSettings/CMakeLists.txt
@@ -14,7 +14,8 @@ set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quickcontrols/wearable/WearableSe
find_package(Qt6 REQUIRED COMPONENTS Core Gui Quick QuickControls2)
-set_source_files_properties(WearableSettings.qml
+set_source_files_properties(
+ WearableSettings.qml
PROPERTIES
QT_QML_SINGLETON_TYPE TRUE
)
diff --git a/examples/quickcontrols/wearable/WearableStyle/CMakeLists.txt b/examples/quickcontrols/wearable/WearableStyle/CMakeLists.txt
index e7bd69bbef..630072b8a1 100644
--- a/examples/quickcontrols/wearable/WearableStyle/CMakeLists.txt
+++ b/examples/quickcontrols/wearable/WearableStyle/CMakeLists.txt
@@ -28,6 +28,10 @@ qt_add_qml_module(wearablestyle
Slider.qml
Switch.qml
UIStyle.qml
+ RESOURCES
+ fonts/TitilliumWeb-Bold.ttf
+ fonts/TitilliumWeb-SemiBold.ttf
+ fonts/TitilliumWeb-Regular.ttf
)
target_link_libraries(wearablestyle PUBLIC
diff --git a/examples/quickcontrols/wearable/WearableStyle/PageIndicator.qml b/examples/quickcontrols/wearable/WearableStyle/PageIndicator.qml
index 3a6eef8f96..bfc25c78d1 100644
--- a/examples/quickcontrols/wearable/WearableStyle/PageIndicator.qml
+++ b/examples/quickcontrols/wearable/WearableStyle/PageIndicator.qml
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
@@ -15,13 +15,14 @@ T.PageIndicator {
bottomPadding: 7
delegate: Rectangle {
- implicitWidth: 8
- implicitHeight: 8
+ required property int index
- radius: width / 2
- color: UIStyle.themeColorQtGray3
+ implicitWidth: 16
+ implicitHeight: 16
- opacity: index === control.currentIndex ? 1.0 : 0.35
+ radius: width / 2
+ color: index === control.currentIndex ? UIStyle.buttonProgress : UIStyle.pageIndicatorColor
+ border.color: UIStyle.indicatorOutlineColor
Behavior on opacity {
OpacityAnimator {
diff --git a/examples/quickcontrols/wearable/WearableStyle/Slider.qml b/examples/quickcontrols/wearable/WearableStyle/Slider.qml
index 526c4a537a..894e3a37df 100644
--- a/examples/quickcontrols/wearable/WearableStyle/Slider.qml
+++ b/examples/quickcontrols/wearable/WearableStyle/Slider.qml
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
@@ -8,30 +8,51 @@ T.Slider {
id: control
implicitWidth: 200
- implicitHeight: 26
+ implicitHeight: 32
handle: Rectangle {
x: control.visualPosition * (control.width - width)
y: (control.height - height) / 2
- width: 20
- height: 15
+ width: 32
+ height: width
+ radius: width/2
+
+ color: control.pressed ? UIStyle.buttonGrayPressed : UIStyle.buttonGray
+ border.color: UIStyle.buttonGrayOutLine
+
+ Rectangle {
+ width: parent.width
+ height: parent.height
+ radius: parent.radius
+ gradient: Gradient {
+ GradientStop { position: 0.0; color: UIStyle.gradientOverlay1 }
+ GradientStop { position: 1.0; color: UIStyle.gradientOverlay2 }
+ }
+ }
- 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
+ height: 6
+ radius: height / 2
+ color: UIStyle.buttonBackground
Rectangle {
width: control.visualPosition * parent.width
height: parent.height
- color: UIStyle.colorQtAuxGreen2
- radius: 2
+ color: UIStyle.buttonProgress
+ radius: height / 2
+ }
+
+ Rectangle {
+ width: parent.width
+ height: parent.height
+ radius: parent.radius
+ gradient: Gradient {
+ GradientStop { position: 0.0; color: UIStyle.gradientOverlay1 }
+ GradientStop { position: 1.0; color: UIStyle.gradientOverlay2 }
+ }
}
}
}
diff --git a/examples/quickcontrols/wearable/WearableStyle/Switch.qml b/examples/quickcontrols/wearable/WearableStyle/Switch.qml
index e27992436d..1ab153c528 100644
--- a/examples/quickcontrols/wearable/WearableStyle/Switch.qml
+++ b/examples/quickcontrols/wearable/WearableStyle/Switch.qml
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
@@ -7,20 +7,28 @@ import QtQuick.Templates as T
T.Switch {
id: control
- implicitWidth: 48
- implicitHeight: 26
+ implicitWidth: 64
+ implicitHeight: 34
indicator: Rectangle {
- x: control.visualPosition * (control.width - width)
+ x: 2 + control.visualPosition * (control.width - width - 4)
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)
+ width: height
+ height: parent.height - 4
+ radius: height / 2
+
+ color: control.down ? UIStyle.buttonGrayPressed : UIStyle.buttonGray
+ border.color: UIStyle.buttonGrayOutLine
+
+ Rectangle {
+ width: parent.width
+ height: parent.height
+ radius: parent.radius
+ gradient: Gradient {
+ GradientStop { position: 0.0; color: UIStyle.gradientOverlay1 }
+ GradientStop { position: 1.0; color: UIStyle.gradientOverlay2 }
+ }
+ }
Behavior on x {
enabled: !control.pressed
@@ -29,10 +37,18 @@ T.Switch {
}
background: Rectangle {
- radius: 13
- color: control.checked ? UIStyle.colorQtAuxGreen2 : UIStyle.colorRed
- border.color: control.checked ? UIStyle.colorQtAuxGreen2
- : UIStyle.themeColorQtGray6
+ radius: 17
+ color: control.checked ? UIStyle.buttonProgress : UIStyle.buttonBackground
+
+ Rectangle {
+ width: parent.width
+ height: parent.height
+ radius: parent.radius
+ gradient: Gradient {
+ GradientStop { position: 0.0; color: UIStyle.gradientOverlay1 }
+ GradientStop { position: 1.0; color: UIStyle.gradientOverlay2 }
+ }
+ }
}
}
diff --git a/examples/quickcontrols/wearable/WearableStyle/UIStyle.qml b/examples/quickcontrols/wearable/WearableStyle/UIStyle.qml
index ff06bcaff4..bd2f47f8c0 100644
--- a/examples/quickcontrols/wearable/WearableStyle/UIStyle.qml
+++ b/examples/quickcontrols/wearable/WearableStyle/UIStyle.qml
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma Singleton
@@ -6,58 +6,109 @@ pragma Singleton
import QtQuick
import WearableSettings
-QtObject {
+Item {
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: WearableSettings.darkTheme ? colorQtGray10 : colorQtGray1
- readonly property color themeColorQtGray2: WearableSettings.darkTheme ? colorQtGray9 : colorQtGray2
- readonly property color themeColorQtGray3: WearableSettings.darkTheme ? colorQtGray8 : colorQtGray3
- readonly property color themeColorQtGray4: WearableSettings.darkTheme ? colorQtGray7 : colorQtGray4
- readonly property color themeColorQtGray5: WearableSettings.darkTheme ? colorQtGray6 : colorQtGray5
- readonly property color themeColorQtGray6: WearableSettings.darkTheme ? colorQtGray5 : colorQtGray6
- readonly property color themeColorQtGray7: WearableSettings.darkTheme ? colorQtGray4 : colorQtGray7
- readonly property color themeColorQtGray8: WearableSettings.darkTheme ? colorQtGray3 : colorQtGray8
- readonly property color themeColorQtGray9: WearableSettings.darkTheme ? colorQtGray2 : colorQtGray9
- readonly property color themeColorQtGray10: WearableSettings.darkTheme ? colorQtGray1 : colorQtGray10
+ property font h1: Qt.font({
+ family: fontLoaderSemibold.font.family,
+ weight: fontLoaderSemibold.font.weight,
+ pixelSize: 24
+ })
+ property int h1lineHeight: 28
+
+ property font h2: Qt.font({
+ family: fontLoaderSemibold.font.family,
+ weight: fontLoaderSemibold.font.weight,
+ pixelSize: 20
+ })
+ property int h2lineHeight: 24
+
+ property font h3: Qt.font({
+ family: fontLoaderRegular.font.family,
+ weight: fontLoaderRegular.font.weight,
+ pixelSize: 16
+ })
+ property int h3lineHeight: 20
+
+ property font h4: Qt.font({
+ family: fontLoaderBold.font.family,
+ weight: fontLoaderBold.font.weight,
+ pixelSize: 16
+ })
+ property int h4lineHeight: 20
+
+ property font p1: Qt.font({
+ family: fontLoaderRegular.font.family,
+ weight: fontLoaderRegular.font.weight,
+ pixelSize: 14
+ })
+ property int p1lineHeight: 16
+
+ property font p2: Qt.font({
+ family: fontLoaderRegular.font.family,
+ weight: fontLoaderRegular.font.weight,
+ pixelSize: 20
+ })
+ property int p2lineHeight: 24
+
+ property font tumblerFont: Qt.font({
+ family: fontLoaderRegular.font.family,
+ weight: fontLoaderRegular.font.weight,
+ pixelSize: 32
+ })
+
+ FontLoader {
+ id: fontLoaderBold
+ source: "qrc:/qt/qml/WearableStyle/fonts/TitilliumWeb-Bold.ttf"
+ }
+
+ FontLoader {
+ id: fontLoaderSemibold
+ source: "qrc:/qt/qml/WearableStyle/fonts/TitilliumWeb-SemiBold.ttf"
+ }
+
+ FontLoader {
+ id: fontLoaderRegular
+ source: "qrc:/qt/qml/WearableStyle/fonts/TitilliumWeb-Regular.ttf"
+ }
+
+ readonly property color colorRed: "#E91E63"
+
+ readonly property color buttonGray: WearableSettings.darkTheme ? "#808080" : "#f3f3f4"
+ readonly property color buttonGrayPressed: WearableSettings.darkTheme ? "#707070" : "#cecfd5"
+ readonly property color buttonGrayOutLine: WearableSettings.darkTheme ? "#0D0D0D" : "#999999"
+
+ readonly property color buttonBackground: WearableSettings.darkTheme ? "#262626" : "#CCCCCC"
+ readonly property color buttonProgress: WearableSettings.darkTheme ? "#28C878" : "#19545C"
+
+ readonly property color gradientOverlay1: "#00000000"
+ readonly property color gradientOverlay2: "#1E000000"
+
+ readonly property color background1: WearableSettings.darkTheme ? "#00414A" : "#ABF2CE"
+ readonly property color background2: WearableSettings.darkTheme ? "#07243E" : "#E6E6E6"
+ readonly property color background3: WearableSettings.darkTheme ? "#262626" : "#E6E6E6"
+
+ readonly property color textColor: WearableSettings.darkTheme ? "#E6E6E6" : "#191919"
+ readonly property color titletextColor: WearableSettings.darkTheme ? "#2CDE85" : "#191919"
+
+ readonly property color highlightColor: WearableSettings.darkTheme ? "#33676E" : "#28C878"
+
+ readonly property color pageIndicatorColor: WearableSettings.darkTheme ? "#00000000" : "#E6E6E6"
+ readonly property color indicatorOutlineColor: WearableSettings.darkTheme ? "#707070" : "#999999"
+
+ readonly property color listHeader1: WearableSettings.darkTheme ? "#9E00414A" : "#9E2CDE85"
+ readonly property color listHeader2: WearableSettings.darkTheme ? "#9E0C1C1F" : "#9E00414A"
+
+ readonly property color listItemBackground: WearableSettings.darkTheme ? "#00414A" : "#EAFCF3"
function imagePath(baseImagePath) {
return `qrc:/qt/qml/Wearable/images/${baseImagePath}.png`
}
function themeImagePath(baseImagePath) {
- return `qrc:/qt/qml/Wearable/images/${baseImagePath}${(WearableSettings.darkTheme ? "-dark" : "-light")}.png`
+ return `qrc:/qt/qml/Wearable/images/${baseImagePath}${(WearableSettings.darkTheme ? "-dark" : "-light")}.svg`
+ }
+ function iconPath(baseImagePath) {
+ return `qrc:/qt/qml/Wearable/icons/${baseImagePath}${(WearableSettings.darkTheme ? "-dark" : "-light")}.svg`
}
}
diff --git a/examples/quickcontrols/wearable/WearableStyle/fonts/OFL.txt b/examples/quickcontrols/wearable/WearableStyle/fonts/OFL.txt
new file mode 100644
index 0000000000..330d7a2af7
--- /dev/null
+++ b/examples/quickcontrols/wearable/WearableStyle/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2009-2011 by Accademia di Belle Arti di Urbino and students of MA course of Visual design. Some rights reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Bold.ttf b/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Bold.ttf
new file mode 100644
index 0000000000..b3d8c34f79
--- /dev/null
+++ b/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Bold.ttf
Binary files differ
diff --git a/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Regular.ttf b/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Regular.ttf
new file mode 100644
index 0000000000..e0e2dc888c
--- /dev/null
+++ b/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-Regular.ttf
Binary files differ
diff --git a/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-SemiBold.ttf b/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-SemiBold.ttf
new file mode 100644
index 0000000000..2a1a0bca99
--- /dev/null
+++ b/examples/quickcontrols/wearable/WearableStyle/fonts/TitilliumWeb-SemiBold.ttf
Binary files differ
diff --git a/examples/quickcontrols/wearable/doc/images/qtquickcontrols-wearable.png b/examples/quickcontrols/wearable/doc/images/qtquickcontrols-wearable.png
index c61055340c..fced79cc52 100644
--- a/examples/quickcontrols/wearable/doc/images/qtquickcontrols-wearable.png
+++ b/examples/quickcontrols/wearable/doc/images/qtquickcontrols-wearable.png
Binary files differ
diff --git a/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc b/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc
index 8a49aadf93..4088a1f56e 100644
--- a/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc
+++ b/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc
@@ -21,22 +21,17 @@
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/Main.qml
- \skipuntil import WearableStyle
- \printuntil id: window
- \dots
- \skipto header
- \printuntil id: homeButton
+ \snippet wearable/Wearable/Main.qml window start
+ \dots 4
+ \snippet wearable/Wearable/Main.qml stackview start
\dots 8
- \skipto onClicked
- \printuntil }
- \printuntil id: backButton
+ \snippet wearable/Wearable/Main.qml onLaunched connection
\dots 8
- \skipto onClicked
- \printuntil id: stackView
- \dots 8
- \skipuntil initialItem
- \printuntil /^\}/
+ \snippet wearable/Wearable/Main.qml stackview end
+ \snippet wearable/Wearable/Main.qml DemoMode
+ \snippet wearable/Wearable/Main.qml DemoModeIndicator
+ \snippet wearable/Wearable/Main.qml MouseArea
+ \snippet wearable/Wearable/Main.qml window end
\section1 Styling
@@ -56,69 +51,31 @@
\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 Wearable/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/Wearable/NaviButton.qml
- \skipuntil import WearableStyle
- \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 :/Wearable/icons
- folder in the application's resources. The \c index.theme file lists the contents
- of the icon theme:
-
- \quotefile wearable/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.
+ The main benefit of using the built-in styling system is that the style
+ selection is fully transparent to the application code. There is no need
+ to import a specific folder that contains the styled controls. This way,
+ the application can be run with other styles too.
\section1 Launcher Page
The application launcher is implemented using a circular PathView in
\c LauncherPage.qml. Each application is in a separate .qml file,
- which is added to the ListModel on the launcher page.
-
- \quotefromfile wearable/Wearable/LauncherPage.qml
- \skipto PathView
- \printuntil signal launched
- \dots
- \skipto ListModel
- \printuntil }
+ which are added to the ListModel on the launcher page. For some applications
+ a fallback option is provided to handle optional dependencies like QtLocation.
+
+ \snippet wearable/Wearable/LauncherPage.qml LauncherPage start
+ \dots 4
+ \snippet wearable/Wearable/LauncherPage.qml Model start
+ \snippet wearable/Wearable/LauncherPage.qml Model mid
\dots 8
- \printline ListElement
- \skipto "Settings"
- \printuntil delegate:
+ \snippet wearable/Wearable/LauncherPage.qml Model end
+ \snippet wearable/Wearable/LauncherPage.qml Delegate start
\dots 8
- \skipto icon.width
- \printuntil icon.name
+ \snippet wearable/Wearable/LauncherPage.qml Delegate mid
\dots 8
- \skipto onClicked:
- \printto path:
- \dots
- \skipto /^\}/
- \printline }
+ \snippet wearable/Wearable/LauncherPage.qml Delegate end
+ \dots 4
+ \snippet wearable/Wearable/LauncherPage.qml LauncherPage end
\section1 Applications
@@ -126,24 +83,25 @@
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.
+ application backends. They demonstrate how to fetch and manipulate or
+ convert external data. For example, the \c Weather application reads data
+ from local files using \l XMLHttpRequest. These files were generated by
+ storing responses from remote servers in JSON format. This code can be
+ easily modified to acquire data from remote servers.
\section2 Navigation
- This application 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.
+ This application uses the QtLocation module to display a route within Oslo.
+ If QtLocation is not installed, it shows a static image as the map and route
+ information based on a JSON file. Currently, it is not possible to specify
+ the source and destination from within the application, but it can be added
+ based on the device's capabilities. For example, you can collect necessary
+ info. using one of the following methods:
+ \list
+ \li Implement additional screens to collect input from user
+ \li Communicate with another device (smart phone or PC)
+ over Bluetooth or WiFi channels.
+ \endlist
\section2 Weather
diff --git a/examples/quickcontrols/wearable/wearable.cpp b/examples/quickcontrols/wearable/wearable.cpp
index bec613d55f..b211ef7ab5 100644
--- a/examples/quickcontrols/wearable/wearable.cpp
+++ b/examples/quickcontrols/wearable/wearable.cpp
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
#include <QGuiApplication>
@@ -20,11 +20,6 @@ int main(int argc, char *argv[])
QQuickStyle::setStyle(QStringLiteral("WearableStyle"));
//! [style]
- //! [icons]
- QIcon::setThemeSearchPaths(QStringList() << ":/qt/qml/Wearable/icons");
- QIcon::setThemeName(QStringLiteral("wearable"));
- //! [icons]
-
QQmlApplicationEngine engine;
#ifdef Q_OS_MACOS
engine.addImportPath(app.applicationDirPath() + "/../PlugIns");
diff --git a/examples/quickcontrols/wearable/wearable.pro b/examples/quickcontrols/wearable/wearable.pro
index 9ca5e53dfe..861c5eb214 100644
--- a/examples/quickcontrols/wearable/wearable.pro
+++ b/examples/quickcontrols/wearable/wearable.pro
@@ -1,6 +1,13 @@
TEMPLATE = app
TARGET = wearable
QT += quick quickcontrols2
+qtHaveModule(positioning): QT += positioning
+qtHaveModule(location): QT += location
+
+QML_IMPORT_PATH += \
+ Wearable \
+ WearableSettings \
+ WearableStyle
SOURCES += \
wearable.cpp
diff --git a/examples/quickcontrols/wearable/wearable.qrc b/examples/quickcontrols/wearable/wearable.qrc
index 73be70e842..b8fc839be9 100644
--- a/examples/quickcontrols/wearable/wearable.qrc
+++ b/examples/quickcontrols/wearable/wearable.qrc
@@ -1,6 +1,7 @@
<!-- This file only exists for qmake. -->
<RCC>
- <qresource prefix="/qt/qml">
+ <qresource prefix="/qt/qml/">
+ <file>Wearable/qmldir</file>
<file>Wearable/AlarmsPage.qml</file>
<file>Wearable/Clock.qml</file>
<file>Wearable/DemoMode.qml</file>
@@ -8,152 +9,127 @@
<file>Wearable/FitnessPage.qml</file>
<file>Wearable/LauncherPage.qml</file>
<file>Wearable/Main.qml</file>
- <file>Wearable/NaviButton.qml</file>
+ <file>Wearable/MenuHeader.qml</file>
<file>Wearable/NavigationPage.qml</file>
+ <file>Wearable/NavigationFallbackPage.qml</file>
<file>Wearable/NotificationsPage.qml</file>
<file>Wearable/RouteElement.qml</file>
<file>Wearable/SettingsPage.qml</file>
<file>Wearable/SwipeViewPage.qml</file>
<file>Wearable/WeatherPage.qml</file>
<file>Wearable/WorldClockPage.qml</file>
+ <file>Wearable/ListHeaderItem.qml</file>
+ <file>Wearable/ListItem.qml</file>
+
<file>Wearable/fitness.js</file>
- <file>Wearable/icons/wearable/36x36/alarms.png</file>
- <file>Wearable/icons/wearable/36x36/fitness.png</file>
- <file>Wearable/icons/wearable/36x36/navigation.png</file>
- <file>Wearable/icons/wearable/36x36/notifications.png</file>
- <file>Wearable/icons/wearable/36x36/settings.png</file>
- <file>Wearable/icons/wearable/36x36/weather.png</file>
- <file>Wearable/icons/wearable/36x36/worldclock.png</file>
- <file>Wearable/icons/wearable/36x36@2/alarms.png</file>
- <file>Wearable/icons/wearable/36x36@2/fitness.png</file>
- <file>Wearable/icons/wearable/36x36@2/navigation.png</file>
- <file>Wearable/icons/wearable/36x36@2/notifications.png</file>
- <file>Wearable/icons/wearable/36x36@2/settings.png</file>
- <file>Wearable/icons/wearable/36x36@2/weather.png</file>
- <file>Wearable/icons/wearable/36x36@2/worldclock.png</file>
- <file>Wearable/icons/wearable/index.theme</file>
- <file>Wearable/images/back.png</file>
- <file>Wearable/images/back@2x.png</file>
- <file>Wearable/images/background-dark.png</file>
- <file>Wearable/images/background-light.png</file>
- <file>Wearable/images/fitness-man-running-dark.png</file>
- <file>Wearable/images/fitness-man-running-dark@2x.png</file>
- <file>Wearable/images/fitness-man-running-light.png</file>
- <file>Wearable/images/fitness-man-running-light@2x.png</file>
- <file>Wearable/images/fitness-man-walking-dark.png</file>
- <file>Wearable/images/fitness-man-walking-dark@2x.png</file>
- <file>Wearable/images/fitness-man-walking-light.png</file>
- <file>Wearable/images/fitness-man-walking-light@2x.png</file>
- <file>Wearable/images/home.png</file>
- <file>Wearable/images/home@2x.png</file>
- <file>Wearable/images/navigation-dark.png</file>
- <file>Wearable/images/navigation-dark@2x.png</file>
- <file>Wearable/images/navigation-end.png</file>
- <file>Wearable/images/navigation-end@2x.png</file>
- <file>Wearable/images/navigation-leftturn-dark.png</file>
- <file>Wearable/images/navigation-leftturn-dark@2x.png</file>
- <file>Wearable/images/navigation-leftturn-light.png</file>
- <file>Wearable/images/navigation-leftturn-light@2x.png</file>
- <file>Wearable/images/navigation-light.png</file>
- <file>Wearable/images/navigation-light@2x.png</file>
- <file>Wearable/images/navigation-rightturn-dark.png</file>
- <file>Wearable/images/navigation-rightturn-dark@2x.png</file>
- <file>Wearable/images/navigation-rightturn-light.png</file>
- <file>Wearable/images/navigation-rightturn-light@2x.png</file>
- <file>Wearable/images/navigation-start.png</file>
- <file>Wearable/images/navigation-start@2x.png</file>
- <file>Wearable/images/navigation-straight-dark.png</file>
- <file>Wearable/images/navigation-straight-dark@2x.png</file>
- <file>Wearable/images/navigation-straight-light.png</file>
- <file>Wearable/images/navigation-straight-light@2x.png</file>
- <file>Wearable/images/navigation-uturn.png</file>
- <file>Wearable/images/navigation-uturn@2x.png</file>
- <file>Wearable/images/notifications-avatarf-dark.png</file>
- <file>Wearable/images/notifications-avatarf-dark@2x.png</file>
- <file>Wearable/images/notifications-avatarf-light.png</file>
- <file>Wearable/images/notifications-avatarf-light@2x.png</file>
- <file>Wearable/images/notifications-avatarm-dark.png</file>
- <file>Wearable/images/notifications-avatarm-dark@2x.png</file>
- <file>Wearable/images/notifications-avatarm-light.png</file>
- <file>Wearable/images/notifications-avatarm-light@2x.png</file>
- <file>Wearable/images/notifications-missedcall-dark.png</file>
- <file>Wearable/images/notifications-missedcall-dark@2x.png</file>
- <file>Wearable/images/notifications-missedcall-light.png</file>
- <file>Wearable/images/notifications-missedcall-light@2x.png</file>
- <file>Wearable/images/settings-bluetooth-dark.png</file>
- <file>Wearable/images/settings-bluetooth-dark@2x.png</file>
- <file>Wearable/images/settings-bluetooth-light.png</file>
- <file>Wearable/images/settings-bluetooth-light@2x.png</file>
- <file>Wearable/images/settings-brightness-dark.png</file>
- <file>Wearable/images/settings-brightness-dark@2x.png</file>
- <file>Wearable/images/settings-brightness-light.png</file>
- <file>Wearable/images/settings-brightness-light@2x.png</file>
- <file>Wearable/images/settings-demo-mode-dark.png</file>
- <file>Wearable/images/settings-demo-mode-dark@2x.png</file>
- <file>Wearable/images/settings-demo-mode-light.png</file>
- <file>Wearable/images/settings-demo-mode-light@2x.png</file>
- <file>Wearable/images/settings-demo-mode-white.png</file>
- <file>Wearable/images/settings-demo-mode-white@2x.png</file>
- <file>Wearable/images/settings-theme-dark.png</file>
- <file>Wearable/images/settings-theme-dark@2x.png</file>
- <file>Wearable/images/settings-theme-light.png</file>
- <file>Wearable/images/settings-theme-light@2x.png</file>
- <file>Wearable/images/settings-wifi-dark.png</file>
- <file>Wearable/images/settings-wifi-dark@2x.png</file>
- <file>Wearable/images/settings-wifi-light.png</file>
- <file>Wearable/images/settings-wifi-light@2x.png</file>
- <file>Wearable/images/weather-humidity-dark.png</file>
- <file>Wearable/images/weather-humidity-dark@2x.png</file>
- <file>Wearable/images/weather-humidity-light.png</file>
- <file>Wearable/images/weather-humidity-light@2x.png</file>
- <file>Wearable/images/weather-pressure-dark.png</file>
- <file>Wearable/images/weather-pressure-dark@2x.png</file>
- <file>Wearable/images/weather-pressure-light.png</file>
- <file>Wearable/images/weather-pressure-light@2x.png</file>
- <file>Wearable/images/weather-sunrise-dark.png</file>
- <file>Wearable/images/weather-sunrise-dark@2x.png</file>
- <file>Wearable/images/weather-sunrise-light.png</file>
- <file>Wearable/images/weather-sunrise-light@2x.png</file>
- <file>Wearable/images/weather-sunset-dark.png</file>
- <file>Wearable/images/weather-sunset-dark@2x.png</file>
- <file>Wearable/images/weather-sunset-light.png</file>
- <file>Wearable/images/weather-sunset-light@2x.png</file>
- <file>Wearable/images/weather-temperature-dark.png</file>
- <file>Wearable/images/weather-temperature-dark@2x.png</file>
- <file>Wearable/images/weather-temperature-light.png</file>
- <file>Wearable/images/weather-temperature-light@2x.png</file>
- <file>Wearable/images/weather-wind-dark.png</file>
- <file>Wearable/images/weather-wind-dark@2x.png</file>
- <file>Wearable/images/weather-wind-light.png</file>
- <file>Wearable/images/weather-wind-light@2x.png</file>
- <file>Wearable/images/world-clock-center.png</file>
- <file>Wearable/images/world-clock-center@2x.png</file>
- <file>Wearable/images/world-clock-second.png</file>
- <file>Wearable/images/world-clock-second@2x.png</file>
- <file>Wearable/images/world-clock-swissdaydial.png</file>
- <file>Wearable/images/world-clock-swissdaydial@2x.png</file>
- <file>Wearable/images/world-clock-swissdayhour.png</file>
- <file>Wearable/images/world-clock-swissdayhour@2x.png</file>
- <file>Wearable/images/world-clock-swissdayminute.png</file>
- <file>Wearable/images/world-clock-swissdayminute@2x.png</file>
- <file>Wearable/images/world-clock-swissnightdial.png</file>
- <file>Wearable/images/world-clock-swissnightdial@2x.png</file>
- <file>Wearable/images/world-clock-swissnighthour.png</file>
- <file>Wearable/images/world-clock-swissnighthour@2x.png</file>
- <file>Wearable/images/world-clock-swissnightminute.png</file>
- <file>Wearable/images/world-clock-swissnightminute@2x.png</file>
<file>Wearable/navigation.js</file>
<file>Wearable/notifications.js</file>
- <file>Wearable/qmldir</file>
- <file>Wearable/walk_route.json</file>
<file>Wearable/weather.js</file>
+
+ <file>Wearable/fallbackroute.json</file>
<file>Wearable/weather.json</file>
+
+ <file>Wearable/icons/wind-light.svg</file>
+ <file>Wearable/icons/wind-dark.svg</file>
+ <file>Wearable/icons/wifi-light.svg</file>
+ <file>Wearable/icons/wifi-dark.svg</file>
+ <file>Wearable/icons/weather-light.svg</file>
+ <file>Wearable/icons/weather-dark.svg</file>
+ <file>Wearable/icons/uturnright-light.svg</file>
+ <file>Wearable/icons/uturnright-dark.svg</file>
+ <file>Wearable/icons/uturnleft-light.svg</file>
+ <file>Wearable/icons/uturnleft-dark.svg</file>
+ <file>Wearable/icons/thermometer-light.svg</file>
+ <file>Wearable/icons/thermometer-dark.svg</file>
+ <file>Wearable/icons/sunset-light.svg</file>
+ <file>Wearable/icons/sunset-dark.svg</file>
+ <file>Wearable/icons/sunrise-light.svg</file>
+ <file>Wearable/icons/sunrise-dark.svg</file>
+ <file>Wearable/icons/sun-light.svg</file>
+ <file>Wearable/icons/sun-dark.svg</file>
+ <file>Wearable/icons/settings-light.svg</file>
+ <file>Wearable/icons/settings-dark.svg</file>
+ <file>Wearable/icons/right-light.svg</file>
+ <file>Wearable/icons/right-dark.svg</file>
+ <file>Wearable/icons/pressure-light.svg</file>
+ <file>Wearable/icons/pressure-dark.svg</file>
+ <file>Wearable/icons/plus-light.svg</file>
+ <file>Wearable/icons/plus-dark.svg</file>
+ <file>Wearable/icons/notification-light.svg</file>
+ <file>Wearable/icons/notification-dark.svg</file>
+ <file>Wearable/icons/maps-light.svg</file>
+ <file>Wearable/icons/maps-dark.svg</file>
+ <file>Wearable/icons/lightright-light.svg</file>
+ <file>Wearable/icons/lightright-dark.svg</file>
+ <file>Wearable/icons/lightleft-light.svg</file>
+ <file>Wearable/icons/lightleft-dark.svg</file>
+ <file>Wearable/icons/left-light.svg</file>
+ <file>Wearable/icons/left-dark.svg</file>
+ <file>Wearable/icons/hearth-light.svg</file>
+ <file>Wearable/icons/hearth-dark.svg</file>
+ <file>Wearable/icons/forward-light.svg</file>
+ <file>Wearable/icons/forward-dark.svg</file>
+ <file>Wearable/icons/drop-light.svg</file>
+ <file>Wearable/icons/drop-dark.svg</file>
+ <file>Wearable/icons/demomode-light.svg</file>
+ <file>Wearable/icons/demomode-dark.svg</file>
+ <file>Wearable/icons/darkmode-light.svg</file>
+ <file>Wearable/icons/darkmode-dark.svg</file>
+ <file>Wearable/icons/clock-light.svg</file>
+ <file>Wearable/icons/clock-dark.svg</file>
+ <file>Wearable/icons/bluetooth-light.svg</file>
+ <file>Wearable/icons/bluetooth-dark.svg</file>
+ <file>Wearable/icons/bell-light.svg</file>
+ <file>Wearable/icons/bell-dark.svg</file>
+ <file>Wearable/icons/bearright-light.svg</file>
+ <file>Wearable/icons/bearright-dark.svg</file>
+ <file>Wearable/icons/bearleft-light.svg</file>
+ <file>Wearable/icons/bearleft-dark.svg</file>
+ <file>Wearable/icons/back-light.svg</file>
+ <file>Wearable/icons/back-dark.svg</file>
+ <file>Wearable/icons/weather-thundershower-light.svg</file>
+ <file>Wearable/icons/weather-thundershower-dark.svg</file>
+ <file>Wearable/icons/weather-sunny-very-few-clouds-light.svg</file>
+ <file>Wearable/icons/weather-sunny-very-few-clouds-dark.svg</file>
+ <file>Wearable/icons/weather-sunny-light.svg</file>
+ <file>Wearable/icons/weather-sunny-dark.svg</file>
+ <file>Wearable/icons/weather-storm-light.svg</file>
+ <file>Wearable/icons/weather-storm-dark.svg</file>
+ <file>Wearable/icons/weather-snow-light.svg</file>
+ <file>Wearable/icons/weather-snow-dark.svg</file>
+ <file>Wearable/icons/weather-sleet-light.svg</file>
+ <file>Wearable/icons/weather-sleet-dark.svg</file>
+ <file>Wearable/icons/weather-showers-scattered-light.svg</file>
+ <file>Wearable/icons/weather-showers-scattered-dark.svg</file>
+ <file>Wearable/icons/weather-showers-light.svg</file>
+ <file>Wearable/icons/weather-showers-dark.svg</file>
+ <file>Wearable/icons/weather-overcast-light.svg</file>
+ <file>Wearable/icons/weather-overcast-dark.svg</file>
+ <file>Wearable/icons/weather-icy-light.svg</file>
+ <file>Wearable/icons/weather-icy-dark.svg</file>
+ <file>Wearable/icons/weather-haze-light.svg</file>
+ <file>Wearable/icons/weather-haze-dark.svg</file>
+ <file>Wearable/icons/weather-fog-light.svg</file>
+ <file>Wearable/icons/weather-fog-dark.svg</file>
+ <file>Wearable/icons/weather-few-clouds-light.svg</file>
+ <file>Wearable/icons/weather-few-clouds-dark.svg</file>
+
+ <file>Wearable/images/fitness-man-walking-light.svg</file>
+ <file>Wearable/images/fitness-man-running-light.svg</file>
+ <file>Wearable/images/fitness-man-walking-dark.svg</file>
+ <file>Wearable/images/fitness-man-running-dark.svg</file>
+ <file>Wearable/images/fallbackmap.png</file>
+
<file>WearableSettings/qmldir</file>
<file>WearableSettings/WearableSettings.qml</file>
+
+ <file>WearableStyle/qmldir</file>
<file>WearableStyle/PageIndicator.qml</file>
<file>WearableStyle/Slider.qml</file>
<file>WearableStyle/Switch.qml</file>
<file>WearableStyle/UIStyle.qml</file>
- <file>WearableStyle/qmldir</file>
+ <file>WearableStyle/fonts/TitilliumWeb-Bold.ttf</file>
+ <file>WearableStyle/fonts/TitilliumWeb-SemiBold.ttf</file>
+ <file>WearableStyle/fonts/TitilliumWeb-Regular.ttf</file>
</qresource>
</RCC>