Cross Swipe Screens



  • Hello friends!

    I need to create a screen where the user will scroll right or left and top or down and on each of these I will present another screen.

    It would be like a cross where the center and each end is another screen of the system.

    For reasons of legacy environment, I am still required to use Qt 4.8, so my options are limited.

    I was thinking of creating something using something from GestureArea to capture the scroll angle made by the user and thus define which screen to display. The actual scrolling to the other screen, I would do via animation transition effect, as I don't see another way to do it.

    Any techniques that could make this idea easier?

    I've looked at element-by-element in QML and didn't think any of the available ones could be used the way I want, but I may be wrong.

    In addition could you give me a better idea or would my idea, within the Qt 4.8 environment, still be the most interesting?



  • Done!

    How I did it:

    import QtQuick 1.1
    import Qt.labs.gestures 1.0
    
    import "module"
    
    Rectangle {
        id: recMainWindow
        width: 800
        height: 480
        color: "#00000000"
    
        property string strActualScreen: "screenCenter"
    
        function funSwipeScreens(swipeArea)
        {
            if ((!panBottomCenter.running) && (!panCenterBottom.running) &&
                (!panCenterLeft.running) &&  (!panCenterRight.running) &&
                (!panCenterTop.running) &&  (!panLeftCenter.running) &&
                (!panRightCenter.running) &&  (!panTopCenter.running))
            {
                if (swipeArea == "top")
                {
                    if (strActualScreen == "screenBottom")
                    {
                        strActualScreen = "screenCenter";
    
                        marLeft.enabled = true;
                        marRight.enabled = true;
                        marBottom.enabled = true;
    
                        panBottomCenter.start();
                    }
                    else if (strActualScreen == "screenCenter")
                    {
                        strActualScreen = "screenTop";
    
                        marTop.enabled = false;
                        marLeft.enabled = false;
                        marRight.enabled = false;
    
                        panCenterTop.start();
                    }
                }
                else if (swipeArea == "bottom")
                {
                    if (strActualScreen == "screenTop")
                    {
                        strActualScreen = "screenCenter";
    
                        marTop.enabled = true;
                        marLeft.enabled = true;
                        marRight.enabled = true;
    
                        panTopCenter.start();
                    }
                    else if (strActualScreen == "screenCenter")
                    {
                        strActualScreen = "screenBottom";
    
                        marLeft.enabled = false;
                        marRight.enabled = false;
                        marBottom.enabled = false;
    
                        panCenterBottom.start();
                    }
                }
                else if (swipeArea == "left")
                {
                    if (strActualScreen == "screenRight")
                    {
                        strActualScreen = "screenCenter";
    
                        marBottom.enabled = true;
                        marRight.enabled = true;
                        marTop.enabled = true;
    
                        panRightCenter.start();
                    }
                    else if (strActualScreen == "screenCenter")
                    {
                        strActualScreen = "screenLeft";
    
                        marLeft.enabled = false;
                        marBottom.enabled = false;
                        marTop.enabled = false;
    
                        panCenterLeft.start();
                    }
                }
                else if (swipeArea == "right")
                {
                    if (strActualScreen == "screenLeft")
                    {
                        strActualScreen = "screenCenter";
    
                        marLeft.enabled = true;
                        marBottom.enabled = true;
                        marTop.enabled = true;
    
                        panLeftCenter.start();
                    }
                    else if (strActualScreen == "screenCenter")
                    {
                        strActualScreen = "screenRight";
    
                        marBottom.enabled = false;
                        marRight.enabled = false;
                        marTop.enabled = false;
    
                        panCenterRight.start();
                    }
                }
            }
        }
    
        Loader {
            id: loaCenter
            x: 0
            y: 0
            source: "qrc:/qml/centerScreen"
        }
    
        Loader {
            id: loaTop
            x: 0
            y: -480
            source: "qrc:/qml/topScreen"
        }
    
        Loader {
            id: loaBottom
            x: 0
            y: 480
            source: "qrc:/qml/bottomScreen"
        }
    
        Loader {
            id: loaLeft
            x: -800
            y: 0
            source: "qrc:/qml/leftScreen"
        }
    
        Loader {
            id: loaRight
            x: 800
            y: 0
            source: "qrc:/qml/rightScreen"
        }
    
        GestureArea {
            id: marLeft
            x: 0
            y: 100
            width: 100
            height: 280
            focus: true
            onTapAndHold: {
                funSwipeScreens("left");
            }
        }
    
        GestureArea {
            id: marRight
            x: 700
            y: 100
            width: 100
            height: 280
            focus: true
            onTapAndHold: {
                funSwipeScreens("right");
            }
        }
    
        GestureArea {
            id: marTop
            x: 100
            y: 0
            width: 600
            height: 100
            focus: true
            onTapAndHold: {
                funSwipeScreens("top");
            }
        }
    
        GestureArea {
            id: marBottom
            x: 100
            y: 380
            width: 600
            height: 100
            focus: true
            onTapAndHold: {
                funSwipeScreens("bottom");
            }
        }
    
        // TOP ANIMATIONS
        ParallelAnimation {
            id: panCenterTop
    
            NumberAnimation { target: loaCenter; property: "y"; from: 0; to: 480; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaTop; property: "y"; from: -480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    
        ParallelAnimation {
            id: panTopCenter
    
            NumberAnimation { target: loaTop; property: "y"; from: 0; to: -480; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaCenter; property: "y"; from: 480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    
        // BOTTOM ANIMATIONS
        ParallelAnimation {
            id: panCenterBottom
    
            NumberAnimation { target: loaCenter; property: "y"; from: 0; to: -480; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaBottom; property: "y"; from: 480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    
        ParallelAnimation {
            id: panBottomCenter
    
            NumberAnimation { target: loaBottom; property: "y"; from: 0; to: 480; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaCenter; property: "y"; from: -480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    
        // LEFT ANIMATIONS
        ParallelAnimation {
            id: panCenterLeft
    
            NumberAnimation { target: loaCenter; property: "x"; from: 0; to: 800; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaLeft; property: "x"; from: -800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    
        ParallelAnimation {
            id: panLeftCenter
    
            NumberAnimation { target: loaLeft; property: "x"; from: 0; to: -800; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaCenter; property: "x"; from: 800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    
        // RIGHT ANIMATIONS
        ParallelAnimation {
            id: panCenterRight
    
            NumberAnimation { target: loaCenter; property: "x"; from: 0; to: -800; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaRight; property: "x"; from: 800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    
        ParallelAnimation {
            id: panRightCenter
    
            NumberAnimation { target: loaRight; property: "x"; from: 0; to: 800; duration: 250; easing.type: Easing.InOutQuad }
            NumberAnimation { target: loaCenter; property: "x"; from: -800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
        }
    }
    
    


  • @Matheus-da-Silva-Ribeiro Please mark your answer as "Correct Answer" to change title to "Solved".



  • This post is deleted!