Added initial helpscreen

Change-Id: I3e683cda3d2fd29253d6f3bfd1a716a696d98f4e
Reviewed-by: Lasse Räihä <lasse.raiha@digia.com>

6 files changed, 252 insertions, 2 deletions

diff --git a/QtDemo/qml/QtDemo/HelpScreen.qml b/QtDemo/qml/QtDemo/HelpScreen.qml
new file mode 100644
index 0000000..d565d10
--- /dev/null
+++ b/QtDemo/qml/QtDemo/HelpScreen.qml
@@ -0,0 +1,232 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+    anchors.fill:parent
+    property int delay: 500
+
+    property int rotationAngle:0
+
+    SequentialAnimation {
+        id: closeAnimation
+
+        ScriptAction{
+            script: {
+                instructionText.visible = false
+                pointer.visible = false
+                highlightImage.smooth = false
+
+                highlight.size = Math.max(root.height, root.width)*2.5
+            }
+        }
+
+        PauseAnimation { duration: root.delay }
+
+        onRunningChanged: if (!running){
+                              stopAnimations()
+                              root.visible=false
+                              highlight.size=0
+                              highlightImage.smooth = true
+                          }
+    }
+
+    Item{
+        id: highlight
+        property int size: 0
+        property bool hidden: false
+        width:1
+        height:1
+        Behavior on x {NumberAnimation{duration: root.delay}}
+        Behavior on y {NumberAnimation{duration: root.delay}}
+        Behavior on size {id: sizeBehavior; NumberAnimation{duration: root.delay}}
+    }
+
+    Image{
+        id: highlightImage
+        anchors.centerIn: highlight
+        width: highlight.hidden? 0: highlight.size
+        height: highlight.hidden? 0: highlight.size
+        source: "images/highlight_mask.png"
+        opacity: .6
+        smooth: true
+    }
+
+    Rectangle{
+        id: top
+        anchors {left:parent.left; top: parent.top; right: parent.right; bottom: highlightImage.top}
+        color: "black"
+        opacity: .6
+    }
+
+    Rectangle{
+        id: bottom
+        anchors {left:parent.left; top: highlightImage.bottom; right: parent.right; bottom: parent.bottom}
+        color: "black"
+        opacity: .6
+    }
+
+    Rectangle{
+        id: left
+        anchors {left:parent.left; top: highlightImage.top; right: highlightImage.left; bottom: highlightImage.bottom}
+        color: "black"
+        opacity: .6
+    }
+
+    Rectangle{
+        id: right
+        anchors {left:highlightImage.right; top: highlightImage.top; right: parent.right; bottom: highlightImage.bottom}
+        color: "black"
+        opacity: .6
+    }
+
+    Item{
+        id: pointer
+        width: parent.width*.3
+        height: parent.width*.3
+
+        Image{
+            id: handImage
+            width: parent.width*.5
+            height: width
+            source: "images/hand.png"
+            y: parent.height/2-height/2
+            x: parent.width/2-width/2+deltaX
+            property int deltaX:0
+
+            anchors.verticalCenter: parent.verticalCenter
+
+            SequentialAnimation{
+                id: pointingAnimation
+                PauseAnimation { duration: root.delay}
+                NumberAnimation{
+                    target: handImage
+                    property: "deltaX"
+                    from: -handImage.width*.3
+                    to: handImage.width*.3
+                    duration: 500
+                    easing.type: Easing.InOutCubic
+                }
+                PauseAnimation { duration: 200 }
+                NumberAnimation{
+                    target: handImage
+                    property: "deltaX"
+                    from: handImage.width*.3
+                    to: -handImage.width*.3
+                    duration: 500
+                    easing.type: Easing.InOutCubic
+
+                }
+            }
+
+        }
+    }
+
+    Text{id: instructionText
+        anchors {top: parent.top; topMargin: parent.height*.1; horizontalCenter: parent.horizontalCenter}
+        width:parent.width*.8
+        font.pixelSize: Math.min(parent.height, parent.width)*.05
+        font.weight: Font.Bold
+        color: "white"
+        wrapMode: Text.WordWrap
+        text: "Click on the devices to open applications"
+    }
+
+    SequentialAnimation {
+        id: helpAnimation
+        loops: Animation.Infinite
+
+        PauseAnimation { duration: 1000 }
+        PropertyAction { target: instructionText; property: "text"; value: "Click on the devices to open applications " }
+        PropertyAction { target: pointer; property: "visible"; value: true}
+        PropertyAction { target: highlight; property: "hidden"; value: false}
+
+        SequentialAnimation {
+            id: clickAnimation
+            property int index: 0
+            property variant uids: [9,13]
+            loops: 3
+
+            ScriptAction{
+                script: {
+                    clickAnimation.index+=1
+                    if (clickAnimation.index>=clickAnimation.uids.length) clickAnimation.index=0
+                }
+            }
+
+            ScriptAction{
+                script: {
+                    highlight.size= (700+clickAnimation.index*100)*canvas.scalingFactor
+
+                    highlight.x=root.width/2 +getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor
+                    highlight.y=root.height/2 +getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor
+
+                    pointer.x= root.width/2 -pointer.width/2 +getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor*.5
+                    pointer.y= root.height/2 -pointer.height/2 +getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor*.5
+                    pointer.rotation=Math.atan2(getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor, getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor)*180.0/Math.PI
+                    pointingAnimation.restart()
+                }
+            }
+
+            PauseAnimation { duration: 3000 }
+        }
+        SequentialAnimation{
+            id: navigationAnimation
+            PropertyAction { target: instructionText; property: "text"; value: "Navigate between applications with arrows\n\nUse Home button to go to the beginning" }
+            ScriptAction{
+                script: {
+                    highlight.size= Math.min(root.width, root.height)/2
+
+                    if (root.width > root.height){
+                        highlight.x=root.width
+                        highlight.y=root.height/2
+                        pointer.x= root.width/2 -pointer.width/2 +root.width*.2
+                        pointer.y= root.height/2 -pointer.height/2
+                        pointer.rotation=0
+                    }else{
+                        highlight.x=root.width/2
+                        highlight.y=root.height
+                        pointer.x= root.width/2 -pointer.width/2
+                        pointer.y= root.height/2 -pointer.height/2 +root.height*.2
+                        pointer.rotation=90
+                    }
+                    pointingAnimation.restart()
+                }
+            }
+            PauseAnimation { duration: 6000 }
+        }
+    }
+
+    onWidthChanged: if (visible) show()
+    onHeightChanged: if (visible) show()
+
+    function show(){
+        instructionText.text = "Click on the devices to open applications"
+        instructionText.visible = true
+        highlight.hidden = true
+
+        pointer.visible = false
+        rotationAngle = 0
+
+        startAnimations()
+        visible = true
+    }
+
+    function startAnimations(){
+        pointingAnimation.restart()
+        helpAnimation.restart()
+    }
+
+    function stopAnimations(){
+        pointingAnimation.stop()
+        helpAnimation.stop()
+    }
+
+    MouseArea{
+        anchors.fill: root
+        onClicked: {
+            stopAnimations()
+            closeAnimation.restart()
+        }
+    }
+}
+
diff --git a/QtDemo/qml/QtDemo/NavigationPanel.qml b/QtDemo/qml/QtDemo/NavigationPanel.qml
index ce1e9cc..a885846 100644
--- a/QtDemo/qml/QtDemo/NavigationPanel.qml
+++ b/QtDemo/qml/QtDemo/NavigationPanel.qml
@@ -41,6 +41,12 @@ Grid {
     Button {
         id: homeButton
         imageSource: "images/btn_home.png"
-        onClicked: canvas.goBack()
+        onClicked: {
+            if (app.navigationState===0){
+                helpscreen.show()
+                return;
+            }
+            canvas.goBack()
+        }
     }
 }
diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index 67a077d..499c6db 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -170,6 +170,10 @@ function selectTarget(uid){
     return null;
 }
 
+function getPosition(idx){
+    return {"x": positions[idx].x, "y":  positions[idx].y}
+}
+
 function getCurrentGroup()
 {
     if (currentGroupIndex < 0 || currentGroupIndex >= groups.length)
diff --git a/QtDemo/qml/QtDemo/images/hand.png b/QtDemo/qml/QtDemo/images/hand.png
new file mode 100644
index 0000000..fa80356
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/hand.png
diff --git a/QtDemo/qml/QtDemo/images/highlight_mask.png b/QtDemo/qml/QtDemo/images/highlight_mask.png
new file mode 100644
index 0000000..6297142
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/highlight_mask.png
diff --git a/QtDemo/qml/QtDemo/main.qml b/QtDemo/qml/QtDemo/main.qml
index a5c380d..cb9467f 100644
--- a/QtDemo/qml/QtDemo/main.qml
+++ b/QtDemo/qml/QtDemo/main.qml
@@ -105,6 +105,14 @@ Rectangle{
     WorldCanvas { id:canvas }
     NavigationPanel{ id: navigationPanel }
 
+    HelpScreen {
+        id: helpscreen
+        visible: false
+    }
+    function getPosition(index){
+        return Engine.getPosition(index)
+    }
+
     QuitDialog {
         id: quitDialog
         visible: false
@@ -117,7 +125,7 @@ Rectangle{
         id: zoomAnimation
         target: canvas;
         property: "scalingFactor";
-        duration: Style.APP_ANIMATION_DELAY;
+        duration: Style.APP_ANIMATION_DELAY
         velocity: -1
         to:canvas.zoomInTarget