Important: Please read the Qt Code of Conduct -

How to adapt the touchscreen to a rotated application?

  • I'm implementing a Qt application on an embedded platform. The application relies on the eglfs platform plugin and uses as input a touch screen.

    The application is shown on screen with a counter clockwise rotation of -90°. The rotation is performed at GPU level, using a virtual frame buffer.

    How to adapt the touchscreen to the rotated app? Is it possible to perform the rotation of the touch points at application level? If yes, how?

    I've tried to set the QT_QPA_EVDEV_TOUCHSCREEN_PARAMETERS environment variable but without success. When the variable is set, e.g. "QT_QPA_EVDEV_TOUCHSCREEN_PARAMETERS=rotate=270", the touch screen is no longer recognized.

    Thanks in advance for your time

  • Don't do it that way -- a royal pain in the arse regarding touch input.

    To solve your problem in QML, move all your content into a top-level Item, center and rotate it. This will rotate all the Item's children: MouseArea's, Text components, etc..

    Here is a component that rotates a QML UI:

    // ScreenRotator.qml -- rotates contents when isRotated set true
    import QtQuick 2.0
    Item {
        property bool isRotated: true
        anchors.centerIn: parent
        rotation: isRotated ? -90 : 0
        width: isRotated ? parent.height : parent.width
        height: isRotated ? parent.width : parent.height
        Component.onCompleted: if (isRotated) showFullScreen()

    Here is an example of usage:

    // Demonstrates ScreenRotator component, rotating display 90 degrees
    import QtQuick 2.5
    import QtQuick.Window 2.2
    Window {
        width: 320; height: 240
        visible: true
        ScreenRotator {
            id: screenRotator
            isRotated: (Screen.width == 800)  // Target has 800x600 display
            Rectangle {  // Background changes color when click misses 'Quit' box
                anchors.fill: parent
                color: mouseArea.pressed ? 'orangered' : 'white'
                MouseArea { id: mouseArea; anchors.fill: parent }
            Text {  // Show the type of current platform and window dimensions
                anchors.centerIn: parent
                horizontalAlignment: Text.AlignHCenter
                text: '%1\n(%2x%3)'
                            ? qsTr('Embedded')
                            : qsTr('Workstation')))
            Rectangle {
                anchors { right: parent.right; bottom: parent.bottom }
                width: label.width + label.height; height: 1.5*label.height
                color: 'brown'
                Text { id: label; text: qsTr('Quit'); color: 'white'; anchors.centerIn: parent }
                MouseArea { anchors.fill: parent; onClicked: Qt.quit() }

  • @stan.m thank you very much for your time. Unfortunately the solution you have proposed is not suitable for my needs. The rotation must be performed at GPU level, it's not possible to make it at application level.

    The question remains unaswered

Log in to reply