maemo.org - Talk
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

maemo.org - Talk (https://talk.maemo.org/index.php)
-   SailfishOS (https://talk.maemo.org/forumdisplay.php?f=52)
-   -   Draggable rectangle in both screen orientations (https://talk.maemo.org/showthread.php?t=99301)

Markkyboy 2017-04-19 13:07
Draggable rectangle in both screen orientations
 
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.

velox 2017-04-19 13:25
Re: Draggable rectangle in both screen orientations
 
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.

Markkyboy 2017-04-19 16:07
Re: Draggable rectangle in both screen orientations
 
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!

coderus 2017-04-19 16:27
Re: Draggable rectangle in both screen orientations
 
show full code please -_-

Markkyboy 2017-04-19 17:03
Re: Draggable rectangle in both screen orientations
 
Quote:
Originally Posted by coderus (Post 1527033)
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
            }
        }
    }
}

velox 2017-04-19 18:45
Re: Draggable rectangle in both screen orientations
 
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. :)

Markkyboy 2017-04-19 19:30
Re: Draggable rectangle in both screen orientations
 
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 :)

elros34 2017-04-19 20:07
Re: Draggable rectangle in both screen orientations
 
Quote:
Originally Posted by Markkyboy (Post 1527040)
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
                }

            }
        }
    }
}

Markkyboy 2017-04-19 20:35
Re: Draggable rectangle in both screen orientations
 
Quote:
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! :)

Markkyboy 2017-04-19 21:30
Re: Draggable rectangle in both screen orientations
 
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.....


All times are GMT. The time now is 08:56.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

vBulletin® Version 3.8.8