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

Active Topics

Maemo repository (8)
to Community by Maemish - 1 day, 1 hr ago
Porting apps to Leste (44)
to Maemo 7 / Leste by norayr - 1 day, 5 hrs ago
List of well performing apps on Leste (35)
to Maemo 7 / Leste by smatkovi - 4 days, 3 hrs ago
Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (13)
to SailfishOS by edp17 - 5 days, 1 hr ago
Sailfish OS for the Samsung Galaxy Note 4 (SM-N910C) - (treltexx) (79)
to SailfishOS by edp17 - 5 days, 1 hr ago
U-Boot for Nokia RX-51 with BootMenu (updated version 2012.10-rc3-1) (843)
to Alternatives by Arno_11 - 5 days, 6 hrs ago
more...

Page 2 of 2

< Prev

Thread Tools

	coderus	2017-04-20 , 07:43
	Posts: 6,436 \| Thanked: 12,701 times \| Joined on Nov 2011 @ Ängelholm, Sweden	#11

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

__________________
Telegram | Openrepos | GitHub | Revolut donations

Quote & Reply |

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

	Markkyboy	2017-04-20 , 10:05
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#12

Originally Posted by coderus

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.

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Quote & Reply |

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

	coderus	2017-04-20 , 13:13
	Posts: 6,436 \| Thanked: 12,701 times \| Joined on Nov 2011 @ Ängelholm, Sweden	#13

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

__________________
Telegram | Openrepos | GitHub | Revolut donations

Quote & Reply |

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

	velox	2017-04-20 , 13:48
	Posts: 394 \| Thanked: 1,341 times \| Joined on Dec 2009	#14

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.

__________________
slumber: sensors enabled sleep timer for SFOS (translations/input/… appreciated if you've got some spare time)
talefish: directory based audiobook player for SFOS
nofono: ofono restart for SFOS
___
list of i486/noarch packages on openrepos (jolla tablet)

Quote & Reply |

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

	Markkyboy	2017-04-20 , 13:50
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#15

Originally Posted by coderus

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

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

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

Quote & Reply |

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

	Markkyboy	2017-04-20 , 13:52
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#16

Originally Posted by velox

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

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Quote & Reply |

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

	Markkyboy	2017-04-21 , 14:39
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#17

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!

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

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