Return pinched image to fit page(Solved) - maemo.org

Active Topics

[Announce] genwall a simple iptables firewall (90)
to Applications by paoletto - 1 day, 1 hr ago
N9 as WiFi repeater/extender? (1)
to Nokia N9 / N950 by paoletto - 1 day, 2 hrs ago
Sailfish OS flashing files (89)
to SailfishOS by monkeyisland - 2 days, 2 hrs ago
more...

Thread Tools

	Markkyboy	2017-09-18 , 11:26
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#1

EDIT: - I've answered my own question. I still cannot get onDoubleClicked to work, so for now, I have settled with onClicked instead.

Code:

        onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();

        MouseArea {
            anchors.fill: imageContainer
            onClicked: imagePreview.fitToScreen()
        }

        PageHeader { title: "Network map" }

Hi all,

I'd like to implement 'onDoubleClicked' to my page. My page shows a Map, which can be pinched to a min/max level.
Currently, the user has to pinch the image back to fit the page before he can swipe back to the previous page; it would be nice just to double click the map and then swipe back!

I've tried dozens of different ways to achieve this (too many to list) but I'm not having much luck, clearly I'm missing a trick somewhere along the line. It seems as if 'onDoubleClicked' doesn't always work, although I have played with one file where double clicked does work, but I was unable to recreate the same in my file.

Here's my page;

Code:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {

    Rectangle { anchors.fill: parent; color: 'black' }

    SilicaFlickable {
        id: imageFlickable
        anchors.fill: parent
        contentWidth: imageContainer.width; contentHeight: imageContainer.height
        onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();

        PageHeader { title: "Network map" }

        Item {
            id: imageContainer
            width: Math.max(imagePreview.width * imagePreview.scale, imageFlickable.width)
            height: Math.max(imagePreview.height * imagePreview.scale, imageFlickable.height)

            Image {
                id: imagePreview

                property real prevScale

                function fitToScreen() {
                    scale = Math.min(imageFlickable.width / width, imageFlickable.height / height, 1)
                    pinchArea.minScale = scale
                    prevScale = scale
                }
                anchors.centerIn: parent
                fillMode: Image.PreserveAspectFit
                source: "../images/networkmap.png"
                sourceSize.height: 3489;
                smooth: !imageFlickable.moving

                onStatusChanged: {
                    if (status == Image.Ready) {
                        fitToScreen()
                        loadedAnimation.start()
                    }
                }
                NumberAnimation {
                    id: loadedAnimation
                    target: imagePreview
                    property: "opacity"
                    duration: 250
                    from: 0; to: 1
                    easing.type: Easing.InOutQuad
                }
                onScaleChanged: {
                    if ((width * scale) > imageFlickable.width) {
                        var xoff = (imageFlickable.width / 2 + imageFlickable.contentX) * scale / prevScale;
                        imageFlickable.contentX = xoff - imageFlickable.width / 2
                    }
                    if ((height * scale) > imageFlickable.height) {
                        var yoff = (imageFlickable.height / 2 + imageFlickable.contentY) * scale / prevScale;
                        imageFlickable.contentY = yoff - imageFlickable.height / 2
                    }
                    prevScale = scale
                }
            }
        }
        PinchArea {
            id: pinchArea

            property real minScale: 1.0
            property real maxScale: 3.0

            anchors.fill: parent
            enabled: imagePreview.status === Image.Ready
            pinch.target: imagePreview
            pinch.minimumScale: minScale * 0.9
            pinch.maximumScale: maxScale * 2.0

            onPinchFinished: {
                imageFlickable.returnToBounds()
                if (imagePreview.scale < pinchArea.minScale) {
                    bounceBackAnimation.to = pinchArea.minScale
                    bounceBackAnimation.start()
                }
                else if (imagePreview.scale > pinchArea.maxScale) {
                    bounceBackAnimation.to = pinchArea.maxScale
                    bounceBackAnimation.start()
                }
            }
            NumberAnimation {
                id: bounceBackAnimation
                target: imagePreview
                duration: 250
                property: "scale"
                from: imagePreview.scale
            }
            MouseArea {
                id: pageDimmer
                anchors.fill: parent
                onPressAndHold: {
                    if      (imagePreview.opacity==1.00) imagePreview.opacity=0.75
                    else if (imagePreview.opacity==0.75) imagePreview.opacity=0.50
                    else if (imagePreview.opacity==0.50) imagePreview.opacity=1.00
                }
            }
        }

        VerticalScrollDecorator { color: 'black'; width: 6 }

        HorizontalScrollDecorator { color: 'black'; height: 6 }
    }
}

All input gratefully received