maemo.org - Talk

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.....

coderus 2017-04-20 07:43
Re: Draggable rectangle in both screen orientations
 
Solution:

Code:
import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    MouseArea {
        id: dragArea
        width: 270
        height: 270

        Connections {
            target: dragArea.parent
            onHeightChanged: {
                var xx = dragArea.x
                var yy = dragArea.y
                if (dragArea.parent.width > dragArea.parent.height) {
                    dragArea.x = yy
                    dragArea.y = dragArea.parent.height - dragArea.height - xx
                } else {
                    dragArea.x = dragArea.parent.width - dragArea.width - yy
                    dragArea.y = xx
                }
            }
        }

        Rectangle {
            anchors.fill: parent
            color: "red"
        }

        drag.target: dragArea
        drag.minimumX: 0
        drag.minimumY: 0
        drag.maximumY: parent.height - height
        drag.maximumX: parent.width - width
    }
}

Markkyboy 2017-04-20 10:05
Re: Draggable rectangle in both screen orientations
 
Quote:
Originally Posted by coderus (Post 1527054)
Solution:

Code:
import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    MouseArea {
        id: dragArea
        width: 270
        height: 270

        Connections {
            target: dragArea.parent
            onHeightChanged: {
                var xx = dragArea.x
                var yy = dragArea.y
                if (dragArea.parent.width > dragArea.parent.height) {
                    dragArea.x = yy
                    dragArea.y = dragArea.parent.height - dragArea.height - xx
                } else {
                    dragArea.x = dragArea.parent.width - dragArea.width - yy
                    dragArea.y = xx
                }
            }
        }

        Rectangle {
            anchors.fill: parent
            color: "red"
        }

        drag.target: dragArea
        drag.minimumX: 0
        drag.minimumY: 0
        drag.maximumY: parent.height - height
        drag.maximumX: parent.width - width
    }
}
Doesn't work. The screen comes up blank after restarting lipstick.

coderus 2017-04-20 13:13
Re: Draggable rectangle in both screen orientations
 
obviously you should integrate it with lipstick yourself. i have no idea what are you doing.

velox 2017-04-20 13:48
Re: Draggable rectangle in both screen orientations
 
Indeed, your very first sentence in the first post was "I have a draggable rectangle on a page" – which, I think, led most people to assume you meant the Page Component from Silica. If that's not the case, you're going to have to adapt it yourself. :)

Markkyboy 2017-04-20 13:50
Re: Draggable rectangle in both screen orientations
 
Quote:
Originally Posted by coderus (Post 1527066)
obviously you should integrate it with lipstick yourself. i have no idea what are you doing.
Fair comment coderus;

What am I trying to achieve: I want to create a floating/draggable clock on the lockscreen. I would like the clock to stay within the screen area in both portrait and landscape at all times.

I am using Clock.qml in lipstick-jolla-home-qt5/lockscreen to create it.

So far, what I have is working to a degree, all except being able to keep it in the screen area when rotated either to landscape; so here it is, replace your Clock.qml file with mine;

Code:
import QtQuick 2.0
import Sailfish.Silica 1.0
import org.nemomobile.time 1.0
import org.nemomobile.lipstick 0.1
import "../main"

Item {
    id: clock
    anchors.fill: parent

    property alias time: timeText.time
    property bool color: Theme.primaryColor
    property bool followPeekPosition
    property alias updatesEnabled: timeText.updatesEnabled

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

        ClockItem {
            id: timeText
            color: Theme.primaryColor
            anchors {
                top: rect.top
                horizontalCenter: rect.horizontalCenter
            }
            text: { updatesEnabled: timeText.time
                minimumPixelSize: 10
                fontPixelSize: 76
                fontSizeMode: Text.Fit
                Qt.formatTime(new Date(), "<b>hh</b>")
            }
        }
        Text {
            id: date
            color: Theme.primaryColor
            anchors {
                top: timeText.baseline
                topMargin: Theme.paddingSmall
                horizontalCenter: rect.horizontalCenter
            }
            text: { updatesEnabled: timeText.time
                minimumPixelSize: 10
                fontPixelSize: 76
                fontSizeMode: Text.Fit
                Qt.formatDate(new Date(), "ddd dd MMM")
            }
        }
        ClockItem {
            id: minutes
            color: Theme.primaryColor
            anchors {
                top: date.baseline
                topMargin: -Theme.paddingMedium
                horizontalCenter: rect.horizontalCenter
            }
            text: { updatesEnabled: timeText.time
                minimumPixelSize: 10
                fontPixelSize: 76
                fontSizeMode: Text.Fit
                Qt.formatTime(new Date(), "<b>mm</b>")
            }
        }

        MouseArea {
            id: dragArea
            anchors.fill: parent
            drag.target: rect
            drag.axis: Drag.XandYAxis
            drag.minimumX: 0
            drag.maximumX: 270
            drag.minimumY: -10
            drag.maximumY: 600

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

Markkyboy 2017-04-20 13:52
Re: Draggable rectangle in both screen orientations
 
Quote:
Originally Posted by velox (Post 1527070)
Indeed, your very first sentence in the first post was "I have a draggable rectangle on a page" – which, I think, led most people to assume you meant the Page Component from Silica. If that's not the case, you're going to have to adapt it yourself. :)
Yes, poor choice of words on my behalf. I'm still learning the terminology :)

Markkyboy 2017-04-21 14:39
Re: Draggable rectangle in both screen orientations
 
Right, I have it working, just need to do some fine tuning to some figures and the look.

The solution was really quite simple, by replacing 'parent' with 'lockScreen';
Code:
        MouseArea {
            id: dragArea
            anchors.fill: parent
            drag.target: rect
            drag.filterChildren: true
            drag.axis: Drag.XandYAxis
            drag.minimumX: 10
            drag.maximumX: lockScreen.width -10 - rect.width
            drag.minimumY: -10
            drag.maximumY: lockScreen.height -25 - rect.height -50

            onPressed: {
                rect.anchors.top = undefined
                rect.anchors.topMargin = undefined
                rect.anchors.horizontalCenter = undefined
            }
onPressed is added to MouseArea for ignoring anchors applied to the draggable rectangle; hence adding 'Drag.active: dragArea.drag.active' as a property of rectangle.

Thanks for your input guys, here's my Clock.qml page for anyone interested; (WIP)

Code:
import QtQuick 2.0
import Sailfish.Silica 1.0
import org.nemomobile.time 1.0
import org.nemomobile.lipstick 0.1
import "../main"

Item {
    id: clock
    anchors.fill: parent

    property alias time: timeText.time
    property bool color: Theme.primaryColor
    property bool followPeekPosition
    property alias updatesEnabled: timeText.updatesEnabled

    width: Math.max(timeText.width, date.width)
    height: timeText.font.pixelSize + date.font.pixelSize + Theme.paddingMedium * 2
    baselineOffset: timeText.y + timeText.baselineOffset

    Rectangle {
        id: rect
        width: 350; height: 220
        radius: 90
        color: Theme.highlightDimmerColor
        border.color: Theme.secondaryHighlightColor
        border.width: +3
        anchors {
            top: lockScreen.top
            topMargin: Theme.paddingSmall
            horizontalCenter: parent.horizontalCenter
        }
        Drag.active: dragArea.drag.active

        ClockItem {
            id: timeText
            color: Theme.primaryColor
            font { pixelSize: Theme.fontSizeHuge * 2.0; family: Theme.fontFamilyHeading }
            anchors {
                top: rect.top
                topMargin: Theme.paddingSmall
                bottomMargin: -timeText.font.pixelSize
                horizontalCenter: rect.horizontalCenter
            }
        }
        Text {
            id: date
            color: Theme.primaryColor
            anchors {
                top: timeText.baseline
                topMargin: Theme.paddingSmall
                horizontalCenter: rect.horizontalCenter
            }
            font { pixelSize: Theme.fontSizeLarge * 1.1; family: Theme.fontFamily }
            text: { updatesEnabled: timeText.time
                Qt.formatDate(new Date(), "ddd dd MMM")
            }
        }

        MouseArea {
            id: dragArea
            anchors.fill: parent
            drag.target: rect
            drag.filterChildren: true
            drag.axis: Drag.XandYAxis
            drag.minimumX: 10
            drag.maximumX: lockScreen.width -10 - rect.width
            drag.minimumY: -10
            drag.maximumY: lockScreen.height -25 - rect.height -50

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

p.s. I have a QtCreator running, I installed it to a second HDD on my laptop, it still takes a good few minutes to open, but is working!


All times are GMT. The time now is 19:23.

vBulletin® Version 3.8.8