wearable: add demo modev5.12.0-beta1

This change adds a switch in the settings page that
enables demo mode. In this mode, each screen and UI control
will be visited and interacted with in a loop until the
screen is tapped, at which point it returns to the launcher page.

Change-Id: Icb306e23985d8c1f82725a95ed7f2e34b3d6c03f
Reviewed-by: Mikhail Svetkin <mikhail.svetkin@qt.io>
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>

20 files changed, 507 insertions, 24 deletions

diff --git a/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml b/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml
index dba8144a..99343d24 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml
@@ -66,6 +66,8 @@ Item {
             }
 
             SwipeViewPage {
+                property alias stateSwitch: stateSwitch
+
                 Column {
                     spacing: 30
                     anchors.centerIn: parent
diff --git a/examples/quickcontrols2/wearable/qml/DemoMode.qml b/examples/quickcontrols2/wearable/qml/DemoMode.qml
new file mode 100644
index 00000000..c67a56e6
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/DemoMode.qml
@@ -0,0 +1,258 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import "Style"
+
+Item {
+    property StackView stackView
+
+    SequentialAnimation {
+        id: demoModeAnimation
+        running: settings.demoMode
+
+        // Set brightness back to normal.
+        ScriptAction { script: settings.brightness = 0 }
+
+        // Go back to the launcher page.
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.pop(null) }
+        PauseAnimation { duration: 2000 }
+
+        // Open the world clock page.
+        ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("WorldClock/WorldClockPage.qml")) }
+        PauseAnimation { duration: 2000 }
+
+        // Swipe across a few times.
+        SequentialAnimation {
+            loops: 6
+
+            ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+            PauseAnimation { duration: 2500 }
+        }
+
+
+        // Go back to the launcher page.
+        ScriptAction { script: stackView.pop(null) }
+        PauseAnimation { duration: 2000 }
+
+        // Open the navigation page.
+        ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Navigation/NavigationPage.qml")) }
+        PauseAnimation { duration: 2000 }
+
+        // Flick down a few times.
+        SequentialAnimation {
+            loops: 6
+
+            ScriptAction { script: stackView.currentItem.routeListView.incrementCurrentIndex() }
+            PauseAnimation { duration: 2000 }
+        }
+
+
+        // Go back to the launcher page.
+        ScriptAction { script: stackView.pop(null) }
+        PauseAnimation { duration: 2000 }
+
+        // Open the weather page.
+        ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Weather/WeatherPage.qml")) }
+        PauseAnimation { duration: 2000 }
+
+        // Swipe across a few times.
+        SequentialAnimation {
+            loops: 4
+
+            ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+            PauseAnimation { duration: 2000 }
+        }
+
+
+        // Go back to the launcher page.
+        ScriptAction { script: stackView.pop(null) }
+        PauseAnimation { duration: 2000 }
+
+        // Open the fitness page.
+        ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Fitness/FitnessPage.qml")) }
+        PauseAnimation { duration: 2000 }
+
+        // Swipe across a few times.
+        SequentialAnimation {
+            loops: 2
+
+            ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+            PauseAnimation { duration: 2000 }
+        }
+
+
+        // Go back to the launcher page.
+        ScriptAction { script: stackView.pop(null) }
+        PauseAnimation { duration: 2000 }
+
+        // Open the notifications page.
+        ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Notifications/NotificationsPage.qml")) }
+
+        // Flick down a few times.
+        SequentialAnimation {
+            loops: 3
+
+            PauseAnimation { duration: 2000 }
+            ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+        }
+
+
+        // Go back to the launcher page.
+        ScriptAction { script: stackView.pop(null) }
+        PauseAnimation { duration: 2000 }
+
+        // Open the alarms page.
+        ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Alarms/AlarmsPage.qml")) }
+        PauseAnimation { duration: 2000 }
+
+        // Toggle the switch.
+        ScriptAction { script: stackView.currentItem.children[0].currentItem.stateSwitch.toggle() }
+        PauseAnimation { duration: 2000 }
+
+        // Go to the next alarm.
+        ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+        PauseAnimation { duration: 2000 }
+
+        // Toggle the switch there too.
+        ScriptAction { script: stackView.currentItem.children[0].currentItem.stateSwitch.toggle() }
+        PauseAnimation { duration: 2000 }
+
+
+        // Go back to the launcher page.
+        ScriptAction { script: stackView.pop(null) }
+        PauseAnimation { duration: 2000 }
+
+        // Open the settings page.
+        ScriptAction { script: stackView.currentItem.incrementCurrentIndex() }
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.currentItem.launched(Qt.resolvedUrl("Settings/SettingsPage.qml")) }
+        PauseAnimation { duration: 3000 }
+
+        // Toggle the switches.
+        ScriptAction { script: stackView.currentItem.children[0].currentItem.bluetoothSwitch.toggle() }
+        PauseAnimation { duration: 1000 }
+        ScriptAction { script: stackView.currentItem.children[0].currentItem.wirelessSwitch.toggle() }
+        PauseAnimation { duration: 3000 }
+
+        // Go to the next page.
+        ScriptAction { script: stackView.currentItem.children[0].incrementCurrentIndex() }
+
+        // Play with the brightness slider.
+        // First, set it to full brightness so we start in the correct state.
+        ScriptAction {
+            script: {
+                var brightnessSlider = stackView.currentItem.children[0].currentItem.brightnessSlider
+                brightnessSlider.value = 0
+                // increase()/decrease() are not a result of user interaction and
+                // hence moved() will not be emitted, so we do it ourselves.
+                brightnessSlider.moved()
+            }
+        }
+
+        // Decrease the brightness.
+        SequentialAnimation {
+            loops: 3
+
+            PauseAnimation { duration: 1000 }
+            ScriptAction {
+                script: {
+                    var brightnessSlider = stackView.currentItem.children[0].currentItem.brightnessSlider
+                    brightnessSlider.decrease()
+                    brightnessSlider.moved()
+                }
+            }
+        }
+
+        // Increase the brightness back to full.
+        PauseAnimation { duration: 3000 }
+        SequentialAnimation {
+            loops: 3
+
+            PauseAnimation { duration: 1000 }
+            ScriptAction {
+                script: {
+                    var brightnessSlider = stackView.currentItem.children[0].currentItem.brightnessSlider
+                    brightnessSlider.increase()
+                    brightnessSlider.moved()
+                }
+            }
+        }
+
+        // Toggle the dark theme switch.
+        PauseAnimation { duration: 2000 }
+        ScriptAction {
+            script: {
+                var darkThemeSwitch = stackView.currentItem.children[0].currentItem.darkThemeSwitch
+                darkThemeSwitch.toggle()
+                // As above, only proper user interaction results in toggled() being emitted,
+                // so we do it ourselves.
+                darkThemeSwitch.toggled()
+            }
+        }
+        PauseAnimation { duration: 4000 }
+
+        // Go back to the launcher page.
+        ScriptAction { script: stackView.pop(null) }
+    }
+}
diff --git a/examples/quickcontrols2/wearable/qml/DemoModeIndicator.qml b/examples/quickcontrols2/wearable/qml/DemoModeIndicator.qml
new file mode 100644
index 00000000..66ced325
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/DemoModeIndicator.qml
@@ -0,0 +1,94 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3 as QQC2
+import "Style"
+
+Item {
+    id: root
+    width: row.implicitWidth + margins * 2
+
+    readonly property int topMargin: 24
+    readonly property int margins: 12
+
+    Behavior on y {
+        NumberAnimation {}
+    }
+
+    Rectangle {
+        id: demoModeIndicatorBg
+        anchors.fill: parent
+        anchors.topMargin: -topMargin
+        radius: 20
+        color: UIStyle.colorRed
+    }
+
+    Row {
+        id: row
+        spacing: 8
+        anchors.fill: parent
+        anchors.leftMargin: margins
+        anchors.rightMargin: margins
+
+        Image {
+            source: "Settings/images/demo-mode-white.png"
+            width: height
+            height: instructionLabel.height * 2
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        QQC2.Label {
+            id: instructionLabel
+            text: "Tap screen to use"
+            color: UIStyle.colorQtGray10
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml b/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
index 973ad528..8ab82bac 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
@@ -53,6 +53,8 @@ import "../Style"
 import "navigation.js" as NavigationData
 
 Item {
+    property alias routeListView: routeView
+
     Column {
         anchors.fill: parent
         anchors.margins: 2
diff --git a/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml b/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml
index af6561f3..bb347e7d 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml
@@ -63,6 +63,9 @@ Item {
         SwipeViewPage {
             id: settingsPage1
 
+            property alias bluetoothSwitch: bluetoothSwitch
+            property alias wirelessSwitch: wirelessSwitch
+
             Column {
                 anchors.centerIn: parent
                 spacing: 25
@@ -99,6 +102,9 @@ Item {
         SwipeViewPage {
             id: settingsPage2
 
+            property alias brightnessSlider: brightnessSlider
+            property alias darkThemeSwitch: darkThemeSwitch
+
             Column {
                 anchors.centerIn: parent
                 spacing: 2
@@ -119,19 +125,17 @@ Item {
                     }
                 }
                 Column {
-                    spacing: 2
+                    anchors.horizontalCenter: parent.horizontalCenter
+
                     Image {
                         anchors.horizontalCenter: parent.horizontalCenter
-                        source: UIStyle.themeImagePath("images/contrast")
+                        source: UIStyle.themeImagePath("images/theme")
                     }
-                    QQC2.Slider {
-                        id: contrastSlider
+                    QQC2.Switch {
+                        id: darkThemeSwitch
                         anchors.horizontalCenter: parent.horizontalCenter
-                        from: 0
-                        to: 10
-                        stepSize: 1
-                        value: settings.contrast
-                        onMoved: settings.contrast = value
+                        checked: settings.darkTheme
+                        onToggled: settings.darkTheme = checked
                     }
                 }
             }
@@ -142,19 +146,20 @@ Item {
 
             Column {
                 anchors.centerIn: parent
-                spacing: 2
 
-                Row {
-                    spacing: 50
+                Column {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 6
+
                     Image {
-                        anchors.verticalCenter: parent.verticalCenter
-                        source: UIStyle.themeImagePath("images/theme")
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        source: UIStyle.themeImagePath("images/demo-mode")
                     }
                     QQC2.Switch {
-                        id: darkThemeSwitch
-                        anchors.verticalCenter: parent.verticalCenter
-                        checked: settings.darkTheme
-                        onToggled: settings.darkTheme = checked
+                        id: demoModeSwitch
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        checked: settings.demoMode
+                        onToggled: settings.demoMode = checked
                     }
                 }
             }
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark.png
deleted file mode 100644
index 92e17192..00000000
--- a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark.png
+++ /dev/null
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark@2x.png
deleted file mode 100644
index d52633ab..00000000
--- a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark@2x.png
+++ /dev/null
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light.png
deleted file mode 100644
index eb528eb8..00000000
--- a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light.png
+++ /dev/null
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light@2x.png
deleted file mode 100644
index 92e112f9..00000000
--- a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light@2x.png
+++ /dev/null
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-dark.png b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-dark.png
new file mode 100644
index 00000000..571a4645
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-dark@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-dark@2x.png
new file mode 100644
index 00000000..a8203b35
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light.png b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light.png
new file mode 100644
index 00000000..0f8fcc75
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light@2x.png
new file mode 100644
index 00000000..57282a5a
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-white.png b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-white.png
new file mode 100644
index 00000000..1f967488
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-white.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-white@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-white@2x.png
new file mode 100644
index 00000000..fd0611e6
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-white@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode.svg b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode.svg
new file mode 100644
index 00000000..ad1ce448
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   viewBox="0 0 16.933333 16.933333"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (d244b95, 2018-08-02)"
+   sodipodi:docname="demo-mode.svg"
+   inkscape:export-filename="/home/mitch/dev/qt5.12/qtquickcontrols2/examples/quickcontrols2/wearable/qml/Settings/images/demo-mode-light@2x.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="26.498574"
+     inkscape:cy="25.685519"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     fit-margin-top="1"
+     fit-margin-left="1"
+     fit-margin-right="1"
+     fit-margin-bottom="1"
+     inkscape:window-width="3706"
+     inkscape:window-height="2031"
+     inkscape:window-x="134"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3713"
+       originx="-0.0070880335"
+       originy="-280.58354" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.00708803,0.51688025)">
+    <path
+       style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 1.6489221,4.3034973 h 0.7205171 v 7.0102767 c 0.01422,0.27678 0.1921164,0.348966 0.392741,0.392741 H 14.169383 c 0.276028,-0.04241 0.382882,-0.208883 0.423747,-0.423747 V 4.3094031 h 0.692464 v 7.0279949 c -0.111554,0.831949 -0.589986,1.000696 -1.104399,1.104399 H 9.3324693 l 2.2589977,2.258998 c -0.0189,0.375139 -0.204956,0.516261 -0.501999,0.502 L 8.8304698,12.943797 v 1.972563 c -0.051861,0.342631 -0.6681357,0.36382 -0.7323291,0 V 12.949702 L 5.8391425,15.208701 C 5.5142667,15.206145 5.3522558,15.056484 5.3725781,14.742136 L 7.7172116,12.397503 H 2.7415096 C 2.1429244,12.357576 1.6879444,12.049089 1.6444927,11.300486 Z"
+       id="path826"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccccccccccccccc" />
+    <rect
+       style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.2619375;stroke-miterlimit:4;stroke-dasharray:0.523875, 0.2619375;stroke-dashoffset:0"
+       id="rect828"
+       width="16.044523"
+       height="1.9126476"
+       x="0.441401"
+       y="2.0340116"
+       rx="1.0583333"
+       ry="1.0583333" />
+    <path
+       style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 7.8323763,1.681278 V 1.1615701 c 0.1987987,-0.67546179 1.0821701,-0.66495897 1.2992931,0 V 1.681278 Z"
+       id="path830"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+  </g>
+</svg>
diff --git a/examples/quickcontrols2/wearable/qml/Style/Switch.qml b/examples/quickcontrols2/wearable/qml/Style/Switch.qml
index 6f663920..b1597737 100644
--- a/examples/quickcontrols2/wearable/qml/Style/Switch.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/Switch.qml
@@ -78,7 +78,7 @@ T.Switch {
 
     background: Rectangle {
         radius: 13
-        color: control.checked ? UIStyle.colorQtAuxGreen2 : "#E6173D"
+        color: control.checked ? UIStyle.colorQtAuxGreen2 : UIStyle.colorRed
         border.color: control.checked ? UIStyle.colorQtAuxGreen2
                                       : UIStyle.themeColorQtGray6
     }
diff --git a/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml b/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
index 98f2e5a2..f4a5df69 100644
--- a/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
@@ -70,6 +70,9 @@ QtObject {
     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"
diff --git a/examples/quickcontrols2/wearable/wearable.qml b/examples/quickcontrols2/wearable/wearable.qml
index 62f138bb..ea84adca 100644
--- a/examples/quickcontrols2/wearable/wearable.qml
+++ b/examples/quickcontrols2/wearable/wearable.qml
@@ -65,9 +65,9 @@ QQC2.ApplicationWindow {
         id: settings
         property bool wireless
         property bool bluetooth
-        property int contrast
         property int brightness
         property bool darkTheme
+        property bool demoMode
     }
 
     Binding {
@@ -115,4 +115,26 @@ QQC2.ApplicationWindow {
             onLaunched: stackView.push(page)
         }
     }
+
+    DemoMode {
+        stackView: stackView
+    }
+
+    DemoModeIndicator {
+        id: demoModeIndicator
+        y: settings.demoMode ? -height : -height * 2
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: header.height
+        z: window.header.z + 1
+    }
+
+    MouseArea {
+        enabled: settings.demoMode
+        anchors.fill: parent
+        onClicked: {
+            // Stop demo mode and return to the launcher page.
+            settings.demoMode = false
+            stackView.pop(null)
+        }
+    }
 }
diff --git a/examples/quickcontrols2/wearable/wearable.qrc b/examples/quickcontrols2/wearable/wearable.qrc
index 3559ffb8..db59d038 100644
--- a/examples/quickcontrols2/wearable/wearable.qrc
+++ b/examples/quickcontrols2/wearable/wearable.qrc
@@ -80,8 +80,12 @@
         <file>qml/Settings/images/bluetooth-light@2x.png</file>
         <file>qml/Settings/images/brightness-light.png</file>
         <file>qml/Settings/images/brightness-light@2x.png</file>
-        <file>qml/Settings/images/contrast-light.png</file>
-        <file>qml/Settings/images/contrast-light@2x.png</file>
+        <file>qml/Settings/images/demo-mode-light.png</file>
+        <file>qml/Settings/images/demo-mode-light@2x.png</file>
+        <file>qml/Settings/images/demo-mode-dark.png</file>
+        <file>qml/Settings/images/demo-mode-dark@2x.png</file>
+        <file>qml/Settings/images/demo-mode-white.png</file>
+        <file>qml/Settings/images/demo-mode-white@2x.png</file>
         <file>qml/Settings/images/theme-light.png</file>
         <file>qml/Settings/images/theme-light@2x.png</file>
         <file>qml/Settings/images/wifi-light.png</file>
@@ -90,8 +94,6 @@
         <file>qml/Settings/images/bluetooth-dark@2x.png</file>
         <file>qml/Settings/images/brightness-dark.png</file>
         <file>qml/Settings/images/brightness-dark@2x.png</file>
-        <file>qml/Settings/images/contrast-dark.png</file>
-        <file>qml/Settings/images/contrast-dark@2x.png</file>
         <file>qml/Settings/images/theme-dark.png</file>
         <file>qml/Settings/images/theme-dark@2x.png</file>
         <file>qml/Settings/images/wifi-dark.png</file>
@@ -147,5 +149,7 @@
         <file>qml/WorldClock/images/swissnightminute.png</file>
         <file>qml/WorldClock/images/swissnightminute@2x.png</file>
         <file>qml/SwipeViewPage.qml</file>
+        <file>qml/DemoMode.qml</file>
+        <file>qml/DemoModeIndicator.qml</file>
     </qresource>
 </RCC>