diff options
Diffstat (limited to 'basicsuite/qt5-everywhere/HelpScreen.qml')
-rw-r--r-- | basicsuite/qt5-everywhere/HelpScreen.qml | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/basicsuite/qt5-everywhere/HelpScreen.qml b/basicsuite/qt5-everywhere/HelpScreen.qml new file mode 100644 index 0000000..3f5980f --- /dev/null +++ b/basicsuite/qt5-everywhere/HelpScreen.qml @@ -0,0 +1,329 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 Digia Plc and its Subsidiary(-ies) 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.0 +import "style.js" as Style + +Item { + id: root + anchors.fill:parent + property int delay: 500 + property int rotationAngle:0 + + SequentialAnimation { + id: closeAnimation + + ScriptAction{ + script: { + pointer.visible = false + instructionText.text = "" + instructionText2.text = "" + 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: .8 + smooth: true + } + + Rectangle{ + id: top + anchors {left:parent.left; top: parent.top; right: parent.right; bottom: highlightImage.top} + color: "black" + opacity: .8 + } + + Rectangle{ + id: bottom + anchors {left:parent.left; top: highlightImage.bottom; right: parent.right; bottom: parent.bottom} + color: "black" + opacity: .8 + } + + Rectangle{ + id: left + anchors {left:parent.left; top: highlightImage.top; right: highlightImage.left; bottom: highlightImage.bottom} + color: "black" + opacity: .8 + } + + Rectangle{ + id: right + anchors {left:highlightImage.right; top: highlightImage.top; right: parent.right; bottom: highlightImage.bottom} + color: "black" + opacity: .8 + } + + Text{ + id: instructionText + anchors {horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: parent.height*.05} + text: "" + font.pixelSize: parent.width*.075 + font.family: Style.FONT_FAMILY + smooth: true + color: "white" + + Text{ + id: instructionText2 + anchors {horizontalCenter: parent.horizontalCenter; top: parent.bottom; topMargin: -parent.height/2} + text: "" + font.pixelSize: parent.font.pixelSize + font.family: Style.FONT_FAMILY + smooth: true + color: "white" + } + } + + Item{ + id: pointer + width: parent.width*.3 + height: parent.width*.3 + + Image{ + id: handImage + 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 + PauseAnimation { duration: root.delay} + NumberAnimation{ + target: handImage + property: "deltaX" + from: -handImage.width*.2 + to: handImage.width*.2 + duration: 500 + easing.type: Easing.InOutCubic + } + PauseAnimation { duration: 200 } + NumberAnimation{ + target: handImage + property: "deltaX" + from: handImage.width*.2 + to: -handImage.width*.2 + duration: 500 + easing.type: Easing.InOutCubic + + } + } + + } + } + + SequentialAnimation { + id: helpAnimation + loops: Animation.Infinite + + PauseAnimation { duration: 1000 } + PropertyAction { target: handImage; property: "mirror"; value: true} + PropertyAction { target: instructionText; property: "text"; value: "Tap on the devices to"} + PropertyAction { target: instructionText2; property: "text"; value: "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: [8,12] + loops: 2 + + 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 } + } + PauseAnimation { duration: 1000 } + + SequentialAnimation{ + id: navigationAnimation + PropertyAction { target: handImage; property: "mirror"; value: false} + PropertyAction { target: instructionText; property: "text"; value: "Use the Arrow to navigate"} + PropertyAction { target: instructionText2; property: "text"; value: "between applications"} + 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: instructionText; property: "text"; value: "Use the Home button to"} + PropertyAction { target: instructionText2; property: "text"; value: "return to the beginning"} + ScriptAction{ + script: { + highlight.size= Math.min(root.width, root.height)*.3 + + var _x=0; + var _y=0; + + if (root.width > root.height){ + _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 + highlight.x=_x + highlight.y=_y + + }else{ + _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 + 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 } + } + + } + + onWidthChanged: if (visible) show() + onHeightChanged: if (visible) show() + + function show(){ + 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() + } + } +} + |