Draggable rectangle in both screen orientations - maemo.org

Markkyboy | # 1 | 2017-04-19, 13:07 | Report

I have a draggable rectangle on a page. I would like to drag the rectangle around the screen area in both portrait and landscape and not allow it to go off screen.

Currently, I have my draggable rectangle working in portrait mode, now how do I achieve this in landscape mode?, when I turn the phone, the rectangle is often 'off screen' either totally or a just a little, so how do I keep it on screen in landscape orientation as well as portrait?

Clearly, I want to keep my rectangle as draggable in both screen orientations, so the rectangle cannot be anchored...or can it?, I have tried with different positioning methods, but all prevent my rectangle from being draggable.

It would also be nice if my rectangle could have a 'starting' position, like screen center, but again, all attempts have failed because I want to keep the rectangle, draggable. Currently, the rectangle appears at the top left of my screen in portrait.

I looked at an app from coderus, that being ScreenTapShot2, for some 'mouse trick' clues, but I am still none the wiser, any ideas/input appreciated.

The Following 2 Users Say Thank You to Markkyboy For This Useful Post:
imaginaryenemy, juiceme

velox | # 2 | 2017-04-19, 13:25 | Report

Normally, when you are within a Page (and within an ApplicationWindow), this should handle orientation aspects for you and you could handle things via width and height (or isPortrait) of the page.

I'd try making a small check onIsPortraitChanged or something:
if element.x + element.width > page.width then make element.x = page.width - element.width
then do the same with y and height.

Anchoring only makes sense if you have other elements to anchor on, which wouldn't be the case for what I'm understanding of your problem.

I hope this gives you the right impulse…

edit:
To give it a starting position, you could just set x and y in the qml which you most likely overwrite on drag… for example x: page.width - width/2

edit2:
perhaps it's easiest if you study http://doc.qt.io/qt-5/qml-qtquick-mo....maximumX-prop – so you won't need to reimplement stuff that's already available.

Last edited by velox; 2017-04-19 at 13:36.

The Following 4 Users Say Thank You to velox For This Useful Post:
imaginaryenemy, juiceme, Markkyboy, pichlo

Markkyboy | # 3 | 2017-04-19, 16:07 | Report

One problem sorted!, here's how.....

Draggable rectangle can be anchored and still be dragged when 'onPressed';

Example:

Code:

Rectangle {
    id: rect
    anchors {
        top: parent.top
        topMargin: Theme.paddingMedium
        horizontalCenter: parent.horizontalCenter
        //......other code
    }

MouseArea {
    //....other code
    onPressed: {
        rect.anchors.top = undefined
        rect.anchors.topMargin = undefined
        rect.anchors.horizontalCenter = undefined
    }
}

Now to solve the problem of the rectangle appearing correctly in landscape!

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

coderus | # 4 | 2017-04-19, 16:27 | Report

show full code please -_-

The Following User Says Thank You to coderus For This Useful Post:
juiceme

Markkyboy | # 5 | 2017-04-19, 17:03 | Report

Originally Posted by coderus View Post

show full code please -_-

So far, I have this...

Code:

Item {
    id: foo
    anchors.fill: parent

    Rectangle {
        id: rect
        width: 270; height: 270
        color: "transparent"
        anchors {
            top: parent.top
            topMargin: -Theme.paddingMedium
            horizontalCenter: parent.horizontalCenter
        }
        Drag.active: dragArea.drag.active

        Rectangle {
            width: 270; height: 270
            opacity: 0.5; radius: 90
            color: Theme.highlightDimmerColor
            anchors.centerIn: rect
        }

        MouseArea {
            id: dragArea
            anchors.fill: parent

            drag.target: rect
            drag.axis: Drag.XandYAxis
            drag.minimumX: 10
            drag.maximumX: 270
            drag.minimumY: -10
            drag.maximumY: 600

            //these numbers work in landscape
            //drag.minimumX: 10
            //drag.maximumX: 680
            //drag.minimumY: 10
            //drag.maximumY: 200

            onPressed: {
                rect.anchors.top = undefined
                rect.anchors.topMargin = undefined
                rect.anchors.horizontalCenter = undefined
            }
        }
    }
}

Last edited by Markkyboy; 2017-04-19 at 17:10. Reason: syntax errors

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

velox | # 6 | 2017-04-19, 18:45 | Report

I'd really recommend using the pages dimensions as a base instead of just trying hardcoded values – to make it useable on other screens/devices.

But then again probably I'm not getting what you're trying to do.

The Following User Says Thank You to velox For This Useful Post:
juiceme

Markkyboy | # 7 | 2017-04-19, 19:30 | Report

I think you are right@velox, I hadn't disregarded your comments about pages dimensions and my few attempts have failed. But, I will keep trying but bear with me, I don't have use of QtCreator or SFOS sdk (couldn't get either to work), so I am doing this on my phone via ssh from PC.......hit and miss programming I believe coderus called it, lol....and he's right!

Anyway, the premise is, although not the full story; I simply want a draggable rectangle to keep within screen bounds in either orientation (portrait and landscape).

Thank you for your input

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

elros34 | # 8 | 2017-04-19, 20:07 | Report

Originally Posted by Markkyboy View Post

I don't have use of QtCreator or SFOS sdk (couldn't get either to work)

It's just a matter of download and install.

If I get you right:

Code:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page
    Item {
        id: foo
        anchors.fill: parent

        Rectangle {
            id: rect
            width: 270; height: 270
            color: "transparent"
//            y: Theme.paddingMedium
//            x: (page.width - rect.width) /2

//            Drag.active: dragArea.drag.active ??
            Component.onCompleted: {
                y = Theme.paddingMedium
                x = (page.width - rect.width) /2
            }

            Rectangle {
                width: 270; height: 270
                opacity: 0.9; radius: 90
                color: Theme.highlightDimmerColor
                anchors.centerIn: rect
            }

            MouseArea {
                id: dragArea
                anchors.fill: parent

                property real dragMaxX: page.width - Theme.paddingMedium - rect.width
                property real dragMaxY: page.height - Theme.paddingMedium - Theme.itemSizeHuge - rect.height

                drag.target: rect
                drag.axis: Drag.XandYAxis
                drag.minimumX: Theme.paddingMedium
                drag.maximumX: dragMaxX
                drag.minimumY: Theme.paddingMedium
                drag.maximumY: dragMaxY

                Label {
                    anchors.centerIn: parent
                    text: "x: " + Math.round(rect.x) + "\ny: " + Math.round(rect.y)
                }

                drag.onMaximumXChanged: {
                    if (rect.x > dragMaxX)
                        rect.x = dragMaxX
                }

                drag.onMaximumYChanged: {
                    if (rect.y > dragMaxY)
                        rect.y = dragMaxY
                }

            }
        }
    }
}

The Following User Says Thank You to elros34 For This Useful Post:
juiceme

Markkyboy | # 9 | 2017-04-19, 20:35 | Report

Originally Posted by

It's just a matter of download and install

I won't bore you with the details, but suffice to say, the one time I had QtCreator running, it literally took 37 minutes to open. Mostly, I have other **** to do and little time to 'slap an idea together' when the fkin prog in question takes longer to open than my washing machine does to do a load!!......sorry, sore subject. My PC is NOT due for an OS reinstall and trust me, I've been through the fkin mill trying!, lol.

Otherwise, thank you for the code!, I will now have another crack at it!

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

Markkyboy | # 10 | 2017-04-19, 21:30 | Report

Code:

import QtQuick 2.0
import Sailfish.Silica 1.0


//            y: Theme.paddingMedium
//            x: (page.width - rect.width) /2

//            Drag.active: dragArea.drag.active ??
            Component.onCompleted: {
                y = Theme.paddingMedium
                x = (page.width - rect.width) /2
            }

So far, your code prevents my rectangle from being dragged, but I'm still tinkering!

The reason I had 'Drag.active: dragArea.drag.active' is because I'm working on the lockscreen, which of course has its own movement, enabling Drag.active, means I can move the rectangle around the screen without moving the lockscreen.....

The Following 2 Users Say Thank You to Markkyboy For This Useful Post:
imaginaryenemy, juiceme