photosurface: Add a "welcome" slide show at startup

The PDF is transparent, so the background shows through.

Pick-to: 6.5
Task-number: QTBUG-108924
Change-Id: I2fb78ad1b9453109a2d2eb19f2aad91f31679a0d
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>

examples/demos/photosurface/CMakeLists.txt

@@ -51,8 +51,10 @@ qt_add_qml_module(photosurfaceexample
     QML_FILES
       "photosurface.qml"
       "resources/MomentumAnimation.qml"
+      "resources/SlideShow.qml"
     RESOURCES
       "resources/folder.png"
+      "resources/welcome.pdf"
 )
 
 qt6_add_shaders(photosurfaceexample "shaders"

examples/demos/photosurface/photosurface.qml

@@ -133,6 +133,8 @@ Window {
     }
 
     Image {
+        id: folderIcon
+        visible: false
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.margins: 10
@@ -154,32 +156,37 @@ Window {
     }
 
     Text {
+        visible: folderDialog.visible
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.margins: 10
+        anchors.margins: 20
-        color: "darkgrey"
+        color: "white"
         wrapMode: Text.WordWrap
-        font.pointSize: 8
+        text: qsTr("Choose your own photo folder")
-        text: qsTr(`On a touchscreen: use two fingers to zoom and rotate, one finger to drag
-                  \nWith a mouse: drag and scroll normally, shift-wheel to zoom, control-wheel to rotate`)
     }
 
     Shortcut { sequence: StandardKey.Quit; onActivated: Qt.quit() }
 
-    Component.onCompleted: {
+    SlideShow {
-        const lastArg = Application.arguments.slice(-1)[0]
+        id: welcomeSlides
-        const standardPicturesLocations = StandardPaths.standardLocations(StandardPaths.PicturesLocation)
+        multiFrameSource: "welcome.pdf"
-        const hasValidPicturesLocation = standardPicturesLocations.length > 0
+        anchors.fill: parent
-        if (hasValidPicturesLocation)
+        Component.onDestruction: {
-            folderDialog.currentFolder = standardPicturesLocations[0]
+            folderIcon.visible = true
-        if (/.*hotosurface.*|--+/.test(lastArg)) {
+            const lastArg = Application.arguments.slice(-1)[0]
+            const standardPicturesLocations = StandardPaths.standardLocations(StandardPaths.PicturesLocation)
+            const hasValidPicturesLocation = standardPicturesLocations.length > 0
             if (hasValidPicturesLocation)
-                folderModel.folder = standardPicturesLocations[0]
+                folderDialog.currentFolder = standardPicturesLocations[0]
+            if (/.*hotosurface.*|--+/.test(lastArg)) {
+                if (hasValidPicturesLocation)
+                    folderModel.folder = standardPicturesLocations[0]
+                else
+                    folderDialog.open()
+            }
             else
-                folderDialog.open()
+                folderModel.folder = Qt.resolvedUrl("file:" + lastArg)
         }
-        else
-            folderModel.folder = Qt.resolvedUrl("file:" + lastArg)
     }
 }

examples/demos/photosurface/resources/SlideShow.qml

@@ -0,0 +1,91 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+
+Item {
+    id: root
+    required property url multiFrameSource
+    property int pageDuration: 5000
+
+    Image {
+        id: imgEven
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            horizontalCenterOffset: -150
+            verticalCenter: parent.verticalCenter
+        }
+        source: root.multiFrameSource
+        sourceSize.width: width
+        width: root.width - 400
+        opacity: seq.currentFrame % 2 == 0 ? 1 : 0
+        Behavior on opacity {
+            NumberAnimation { duration: 500 }
+        }
+    }
+
+    Image {
+        id: imgOdd
+        anchors.centerIn: imgEven
+        source: root.multiFrameSource
+        sourceSize.width: width
+        width: imgEven.width
+        opacity: 1 - imgEven.opacity
+    }
+
+    Rectangle {
+        width: Math.min(330, root.width / 5.8)
+        height: width / 3.8
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        color: mouse.hovered || tap.pressed ? "white" : "#009b87"
+        border.color: mouse.hovered || tap.pressed ?  "#009b87" : "transparent"
+        border.width: 2
+        Text {
+            color: mouse.hovered || tap.pressed ?  "#009b87" : "white"
+            anchors.centerIn: parent
+            font.pixelSize: parent.width / 10
+            text: seq.currentFrame < imgEven.frameCount - 1 ? qsTr("Skip Intro") : qsTr("Ready to go")
+        }
+        HoverHandler {
+            id: mouse
+        }
+        TapHandler {
+            id: tap
+            onTapped: quit()
+        }
+    }
+
+    function quit() {
+        root.destroy()
+    }
+
+    SequentialAnimation {
+        id: seq
+        loops: Animation.Infinite
+        property int currentFrame: -1
+        onCurrentFrameChanged: if (currentFrame >= imgEven.frameCount) root.quit()
+
+        ScriptAction {
+            script: {
+                imgEven.currentFrame = ++seq.currentFrame
+            }
+        }
+
+        PauseAnimation {
+            duration: root.pageDuration
+        }
+
+        ScriptAction {
+            script: {
+                imgOdd.currentFrame = ++seq.currentFrame
+            }
+        }
+
+        PauseAnimation {
+            duration: root.pageDuration
+        }
+    }
+
+    Component.onCompleted: seq.start()
+}