Draggable rectangle in both screen orientations - Page 2 - maemo.org

coderus | # 11 | 2017-04-20, 07:43 | Report

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

The Following 2 Users Say Thank You to coderus For This Useful Post:
juiceme, velox

Markkyboy | # 12 | 2017-04-20, 10:05 | Report

Originally Posted by coderus View Post

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.

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

coderus | # 13 | 2017-04-20, 13:13 | Report

obviously you should integrate it with lipstick yourself. i have no idea what are you doing.

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

velox | # 14 | 2017-04-20, 13:48 | Report

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.

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

Markkyboy | # 15 | 2017-04-20, 13:50 | Report

Originally Posted by coderus View Post

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

Last edited by Markkyboy; 2017-04-20 at 19:19.

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

Markkyboy | # 16 | 2017-04-20, 13:52 | Report

Originally Posted by velox View Post

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

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

Markkyboy | # 17 | 2017-04-21, 14:39 | Report

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!

Last edited by Markkyboy; 2017-04-21 at 15:13.

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