How to overwrite system gestures for a native app?

answered 2019-03-08 19:37:44 +0200

jsommer
3324 ●97 ●142 ●154

updated 2019-03-09 00:38:50 +0200

With the help of a Jolla engineer (paljon kiitoksia) I learned, that I can use WindowGestureOverride for my purpose. You can find examples in the Compositor.qml on your Sailfish device. First I have to import the libraries:

import Sailfish.Silica 1.0
import Sailfish.Lipstick 1.0
import Sailfish.Silica.private 1.0

Then I have to create the following QML type:

WindowGestureOverride {
    id: gestureOverride
    active: true
    on_WindowChanged: {
        console.log("on window changed called")
    }
}

For the gesture handling I can use a PeekFilter in my QML file:

PeekFilter { id: peekFilter

    onGestureCanceled: {
        ...
    }
    onGestureTriggered: {
        ...
    }
    onGestureStarted: {
        ...
    }

    enabled: true
    bottomEnabled: true
    leftEnabled: true
}

Unfortunately I haven't found a solution to overwrite system gestures seletively. I played around with a MouseArea and the active property of the WindowGestureOverride element:

MouseArea {
    id: mouseArea
    anchors.fill: parent
    onEntered: {
        if (mouseY < 5) {
            gestureOverride.active = false
        } 
    }
}

This doesn't work. I assume, that it's too late, that the system recognised the system gesture, if the active property is set to false. Has someone an idea?

Furthermore, I have the following challenges:

1. How can I access the horizontal position of the swipe, if Wouldlike to offer different bottom up swipes like the top down swipes of Sailfish 3?
2. How can I capture the swipe gesture, if the keyoard is opened?

answered 2019-01-01 13:57:27 +0200

jsommer
3324 ●97 ●142 ●154

updated 2019-01-02 10:17:06 +0200

I could make one step forward but I couldn't find a solution, yet. There is no QML API for gesture event, so I need to write my own evaluation of mouse events:

MouseArea {
    id: mouseArea
    enabled: true
    anchors.fill: parent
    propagateComposedEvents: true

    property var position : {"x":0, "y":x}

    onEntered: {
        position.x = mouseX
        position.y = mouseY
    }
    onMouseXChanged: {
        if (mouseX - position.x > 100 && Math.abs(mouseY - position.y) < 10) {
            // do something for a right swipe
        } else if (position.x - mouseX > 100 && Math.abs(mouseY - position.y) < 10) {
            // do something for a left swipe
        }
    }
}

I placed tested element under a SilicaListView and directly under a Page. Unfortunately the MouseArea blocks all events for the underlying elements like the list items, although I have set the propagateComposedEvents property to true. I played with Connections and was able to capture the onClick: signal, but I couldn't evaluate, wether the mouse loication is in the a specific sub element, because mouseX and elementId.x is 0.

It will be even more tricky to forward selected edge swipe events to system edge swype events. Any solution?

Here is my page structure:

Page {
    ...
    SilicaListView {
        PullDownMenu {
             ...
        }
        headser: Column {
            ...
        }
        ...
        MouseArea {
            ...
        }
    }
    ...
}