maemo.org - Talk
Page 2 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)

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:25.
Page 2 of 2 1 2
Show 40 post(s) from this thread on one page

vBulletin® Version 3.8.8