Updated help screen

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

5 files changed, 91 insertions, 36 deletions

diff --git a/QtDemo/qml/QtDemo/HelpScreen.qml b/QtDemo/qml/QtDemo/HelpScreen.qml
index d565d10..21a8b4a 100644
--- a/QtDemo/qml/QtDemo/HelpScreen.qml
+++ b/QtDemo/qml/QtDemo/HelpScreen.qml
@@ -4,18 +4,16 @@ Item {
     id: root
     anchors.fill:parent
     property int delay: 500
-
     property int rotationAngle:0
+    property int showInstruction: 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
             }
         }
@@ -30,6 +28,7 @@ Item {
                           }
     }
 
+
     Item{
         id: highlight
         property int size: 0
@@ -47,7 +46,7 @@ Item {
         width: highlight.hidden? 0: highlight.size
         height: highlight.hidden? 0: highlight.size
         source: "images/highlight_mask.png"
-        opacity: .6
+        opacity: .8
         smooth: true
     }
 
@@ -55,30 +54,52 @@ Item {
         id: top
         anchors {left:parent.left; top: parent.top; right: parent.right; bottom: highlightImage.top}
         color: "black"
-        opacity: .6
+        opacity: .8
     }
 
     Rectangle{
         id: bottom
         anchors {left:parent.left; top: highlightImage.bottom; right: parent.right; bottom: parent.bottom}
         color: "black"
-        opacity: .6
+        opacity: .8
     }
 
     Rectangle{
         id: left
         anchors {left:parent.left; top: highlightImage.top; right: highlightImage.left; bottom: highlightImage.bottom}
         color: "black"
-        opacity: .6
+        opacity: .8
     }
 
     Rectangle{
         id: right
         anchors {left:highlightImage.right; top: highlightImage.top; right: parent.right; bottom: highlightImage.bottom}
         color: "black"
-        opacity: .6
+        opacity: .8
+    }
+
+    Image {
+        anchors {horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: parent.height*.1}
+        source: "images/txt_tapDevices.png"
+        visible: root.showInstruction === 1
+        scale: parent.width/1000
+    }
+
+    Image {
+        anchors {horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: parent.height*.1}
+        source: "images/txt_useArrows.png"
+        visible: root.showInstruction === 2
+        scale: parent.width/1000
+    }
+
+    Image {
+        anchors {horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: parent.height*.1}
+        source: "images/txt_useHome.png"
+        visible: root.showInstruction === 3
+        scale: parent.width/1000
     }
 
+
     Item{
         id: pointer
         width: parent.width*.3
@@ -86,14 +107,14 @@ Item {
 
         Image{
             id: handImage
-            width: parent.width*.5
+            width: parent.width*.8
             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
+            rotation: 90
 
             SequentialAnimation{
                 id: pointingAnimation
@@ -101,8 +122,8 @@ Item {
                 NumberAnimation{
                     target: handImage
                     property: "deltaX"
-                    from: -handImage.width*.3
-                    to: handImage.width*.3
+                    from: -handImage.width*.2
+                    to: handImage.width*.2
                     duration: 500
                     easing.type: Easing.InOutCubic
                 }
@@ -110,8 +131,8 @@ Item {
                 NumberAnimation{
                     target: handImage
                     property: "deltaX"
-                    from: handImage.width*.3
-                    to: -handImage.width*.3
+                    from: handImage.width*.2
+                    to: -handImage.width*.2
                     duration: 500
                     easing.type: Easing.InOutCubic
 
@@ -119,16 +140,7 @@ Item {
             }
 
         }
-    }
 
-    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 {
@@ -136,7 +148,8 @@ Item {
         loops: Animation.Infinite
 
         PauseAnimation { duration: 1000 }
-        PropertyAction { target: instructionText; property: "text"; value: "Click on the devices to open applications " }
+        PropertyAction { target: handImage; property: "mirror"; value: true}
+        PropertyAction { target: root; property: "showInstruction"; value: 1}
         PropertyAction { target: pointer; property: "visible"; value: true}
         PropertyAction { target: highlight; property: "hidden"; value: false}
 
@@ -144,7 +157,7 @@ Item {
             id: clickAnimation
             property int index: 0
             property variant uids: [9,13]
-            loops: 3
+            loops: 2
 
             ScriptAction{
                 script: {
@@ -169,39 +182,81 @@ Item {
 
             PauseAnimation { duration: 3000 }
         }
+        PauseAnimation { duration: 1000 }
+
         SequentialAnimation{
             id: navigationAnimation
-            PropertyAction { target: instructionText; property: "text"; value: "Navigate between applications with arrows\n\nUse Home button to go to the beginning" }
+            PropertyAction { target: handImage; property: "mirror"; value: false}
+            PropertyAction { target: root; property: "showInstruction"; value: 2}
+            ScriptAction{
+                script: {
+                    highlight.size= Math.min(root.width, root.height)*.4
+
+                    var _x=0;
+                    var _y=0;
+
+                    if (root.width > root.height){
+                        _x = navigationPanel.x+navigationPanel.width /2
+                        _y = navigationPanel.y+navigationPanel.height*.33
+                        pointer.x= root.width/2 -pointer.width/2 +root.width*.2
+                        pointer.y= root.height/2 -pointer.height/2
+                        highlight.x=_x
+                        highlight.y=_y
+
+                    }else{
+                        _x=navigationPanel.x+navigationPanel.width*.33
+                        _y=navigationPanel.y + navigationPanel.height /2
+                        pointer.x= root.width/2 -pointer.width/2
+                        pointer.y= root.height/2 -pointer.height/2 +root.height*.2
+                        highlight.x=_x
+                        highlight.y=_y
+                    }
+
+                    pointer.rotation=Math.atan2(_y-(pointer.y+pointer.height/2), _x-(pointer.x+pointer.width/2))*180.0/Math.PI
+
+                    pointingAnimation.restart()
+                }
+            }
+            PauseAnimation { duration: 5000 }
+
+            PropertyAction { target: root; property: "showInstruction"; value: 3}
             ScriptAction{
                 script: {
-                    highlight.size= Math.min(root.width, root.height)/2
+                    highlight.size= Math.min(root.width, root.height)*.3
+
+                    var _x=0;
+                    var _y=0;
 
                     if (root.width > root.height){
-                        highlight.x=root.width
-                        highlight.y=root.height/2
+                        _x = navigationPanel.x+navigationPanel.width /2
+                        _y = navigationPanel.y+navigationPanel.height-navigationPanel.width /2
                         pointer.x= root.width/2 -pointer.width/2 +root.width*.2
                         pointer.y= root.height/2 -pointer.height/2
-                        pointer.rotation=0
+                        highlight.x=_x
+                        highlight.y=_y
+
                     }else{
-                        highlight.x=root.width/2
-                        highlight.y=root.height
+                        _x=navigationPanel.x+navigationPanel.width-navigationPanel.height /2
+                        _y=navigationPanel.y + navigationPanel.height /2
                         pointer.x= root.width/2 -pointer.width/2
                         pointer.y= root.height/2 -pointer.height/2 +root.height*.2
-                        pointer.rotation=90
+                        highlight.x=_x
+                        highlight.y=_y
                     }
+                    pointer.rotation=Math.atan2(_y-(pointer.y+pointer.height/2), _x-(pointer.x+pointer.width/2))*180.0/Math.PI
+
                     pointingAnimation.restart()
                 }
             }
-            PauseAnimation { duration: 6000 }
+            PauseAnimation { duration: 5000 }
         }
+
     }
 
     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
diff --git a/QtDemo/qml/QtDemo/images/hand.png b/QtDemo/qml/QtDemo/images/hand.png
index a4edc2f..97cc9da 100644
--- a/QtDemo/qml/QtDemo/images/hand.png
+++ b/QtDemo/qml/QtDemo/images/hand.png
diff --git a/QtDemo/qml/QtDemo/images/txt_tapDevices.png b/QtDemo/qml/QtDemo/images/txt_tapDevices.png
new file mode 100644
index 0000000..4c44962
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/txt_tapDevices.png
diff --git a/QtDemo/qml/QtDemo/images/txt_useArrows.png b/QtDemo/qml/QtDemo/images/txt_useArrows.png
new file mode 100644
index 0000000..ee9f600
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/txt_useArrows.png
diff --git a/QtDemo/qml/QtDemo/images/txt_useHome.png b/QtDemo/qml/QtDemo/images/txt_useHome.png
new file mode 100644
index 0000000..fd94967
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/txt_useHome.png