Is it possible to move a Pathview given a point (x, y) in qml via javascript?

nwoki

Hi all. I'm trying to figure out a way to make my PathView move as if it were dragged by a mouse (that is clicking on it and dragging it).

My problem is that I need to do this from an external device (a sort of touch pad) that sends me the touch coordinates (x,y).

What I want to achieve is a fluid movement of the PathView without working directly on the indexes which would not let me achieve the fluidity i need.

Any ideas? Can anyone point me in the right direction?

shav

Hi,

You can use MouseArea with drag properties:
@
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
id: rootApp
title: qsTr("Hello World")
width: 640
height: 480
visible: true

menuBar: MenuBar {
    Menu {
        title: qsTr("&File")
        MenuItem {
            text: qsTr("&Open")
            onTriggered: messageDialog.show(qsTr("Open action triggered"));
        }
        MenuItem {
            text: qsTr("E&xit")
            onTriggered: Qt.quit();
        }
    }
}

Rectangle {
    id: container
    width: 240; height: 200

    ListModel {
        id: contactModel

        ListElement {
            name: "Bill Jones"
            icon: "pics/qtlogo.png"
        }
        ListElement {
            name: "Jane Doe"
            icon: "pics/qtlogo.png"
        }
        ListElement {
            name: "John Smith"
            icon: "pics/qtlogo.png"
        }
    }

    Component {
        id: delegate
        Column {
            id: wrapper
            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: icon
            }
            Text {
                id: nameText
                text: name
                font.pointSize: 16
                color: wrapper.PathView.isCurrentItem ? "red" : "black"
            }
        }
    }

    PathView {
        id: pathViewItem
        anchors.fill: parent
        model: contactModel
        delegate: delegate
        path: Path {
            startX: 120; startY: 100
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }

        focus: true
        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()
    }

    MouseArea {
        anchors.fill: parent
        drag.target: container
        drag.axis: Drag.XAxis | Drag.YAxis
        drag.minimumX: 0
        drag.maximumX: rootApp.width
    }
}

}
@

or if you need to use custom coordinates you can change property x and y of container element (from my example) with JS like:
@
container.x = point.x;
container.y = point.y;
@

I hope that I have correctly understood your question.

nwoki

Hi, sorry for the late reply. I looked at your code and no, it's not the effect i needed.

What i needed was the rotation of the path view as if it were the mouse dragging it. I tried to obtain this effect by injecting the mouse movement into my application via c++ but it didn't give me the right feel so i went for a repeater item.

I set the repeater to follow the arc i needed and acted upon its angle, thus obtaining the desired effect.

Thankyou for your time