Active Topics

 


Page 2 of 2 1 2
Reply
Thread Tools
coderus's Avatar
coderus is offline 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
 

The Following 2 Users Say Thank You to coderus For This Useful Post:
Markkyboy's Avatar
Markkyboy is offline Markkyboy
2017-04-20 , 10:05
Posts: 433 | Thanked: 727 times | Joined on Oct 2012 @ Costa Blanca, Espaņa
#12
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.
__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..
 

The Following User Says Thank You to Markkyboy For This Useful Post:
coderus's Avatar
coderus is offline 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
 

The Following User Says Thank You to coderus For This Useful Post:
velox's Avatar
velox is offline 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)
 

The Following User Says Thank You to velox For This Useful Post:
Markkyboy's Avatar
Markkyboy is offline Markkyboy
2017-04-20 , 13:50
Posts: 433 | Thanked: 727 times | Joined on Oct 2012 @ Costa Blanca, Espaņa
#15
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
            }
        }
    }
}
__________________
..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.
 

The Following User Says Thank You to Markkyboy For This Useful Post:
Markkyboy's Avatar
Markkyboy is offline Markkyboy
2017-04-20 , 13:52
Posts: 433 | Thanked: 727 times | Joined on Oct 2012 @ Costa Blanca, Espaņa
#16
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
__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..
 

The Following User Says Thank You to Markkyboy For This Useful Post:
Markkyboy's Avatar
Markkyboy is offline 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.
 

The Following 3 Users Say Thank You to Markkyboy For This Useful Post:
Reply
Page 2 of 2 1 2

« Previous Thread | Next Thread »

 
Forum Jump


All times are GMT. The time now is 10:30.

Contact Us - Home - Archive - Top