QtQuick Rotate Application to 90° or 270° portrait

[Walter-X]

I have a Qt6 QtQuick application and want to rotate the whole application to 90° or 270° - inclusive MenuBar.

Example:

ApplicationWindow {
    id: root
    visible: true
    visibility: Window.FullScreen

    menuBar: MenuBar {

        Menu {
            title: qsTr("&File")
            Action { text: qsTr("&New...") }
            Action { text: qsTr("&Open...") }
            Action { text: qsTr("&Save") }
            Action { text: qsTr("Save &As...") }
            MenuSeparator { }
            Action {
                text: qsTr("&Quit")
                onTriggered: Qt.quit()
            }
        }
        Menu {
            title: qsTr("&Edit")
            Action { text: qsTr("Cu&t") }
            Action { text: qsTr("&Copy") }
            Action { text: qsTr("&Paste") }
        }
    }

    property QtObject settingsData: QtObject {
        readonly property bool checks: true
        readonly property bool frames: true
        readonly property bool allDisabled: false
    }

    // Header
    Header {
        id: headerMain
    }

    // Navigation left
    Drawer {
        id: drawer
        width: 300
        height: root.height
        Rectangle {
            anchors.left: parent.rightMargin
        }

        background: Rectangle {
            border.width: 0
            color: "#2F8BE6"
            Rectangle {
                anchors.left: parent.right
                anchors.verticalCenter: parent.verticalCenter
                width: 10
                height: 20
                color: "#2F8BE6"
                radius: 3
            }
        }

        ListView {
            id: list
            anchors.fill: parent
            delegate: Component {
                Item {
                    width: parent.width
                    height: 60
                    Column {
                        x: 10
                        y: 15
                        Text {
                            text: model.title
                            font.pixelSize: 24
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            list.currentIndex = index
                            maincontent.push(model.source)
                            drawer.close()
                        }
                    }
                    Rectangle {
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: 1
                        color: "black"
                    }
                }
            }
            highlight: Rectangle {
                color: 'steelblue'
                Text {
                    color: 'white'
                }
            }
            focus: true
            model: ListModel {
                ListElement { title: "Calculator"; source: "pageqml/calculator/CalculatorPage.qml"; destroyOnPop: true }
                ListElement { title: "Canvas Paint"; source: "pageqml/canvaspaint/CanvasPaintPage.qml"; destroyOnPop: true }
                ListElement { title: "DelayButton"; source: "pageqml/DelayButtonPage.qml"; destroyOnPop: true }
                ListElement { title: "Dial"; source: "pageqml/DialPage.qml"; destroyOnPop: true }
                ListElement { title: "Screen Values"; source: "pageqml/ScreenValuesPage.qml"; destroyOnPop: true }
            }
            ScrollIndicator.vertical: ScrollIndicator { }
        }
    }

    // MainContent

    StackView {
        id: maincontent
        y: 120
        width: parent.width
        height: parent.height - 120
        initialItem: { title: "Calculator"; source: "pageqml/calculator/CalculatorPage.qml" }

        pushEnter: Transition {
            ParallelAnimation {
                PropertyAnimation {
                    property: "opacity"
                    from: 0
                    to:1
                    duration: 200
                }
                PathAnimation {
                    duration: 200
                    easing.type: Easing.InBounce
                    path: Path {
                        startX: 0
                        startY: 900
                        PathCubic {
                            x: 0
                            y: 0
                            control1X: x; control1Y: 900
                            control2X: 0; control2Y: y
                        }
                    }
                }
            }
        }
        pushExit: Transition {
            ParallelAnimation {
                PropertyAnimation {
                    property: "opacity"
                    from: 1
                    to:0
                    duration: 200
                }
            }
            PathAnimation {
                duration: 200

                path: Path {
                    startX: 0
                    startY: 0
                    PathCubic {
                        x: 0
                        y: 0
                        control1X: x; control1Y: 0
                        control2X: 1000; control2Y: y
                    }
                }
            }
        }
        popEnter: Transition {
            PropertyAnimation {
                property: "opacity"
                from: 0
                to:1
                duration: 200
            }
        }
        popExit: Transition {
            PropertyAnimation {
                property: "opacity"
                from: 1
                to:0
                duration: 200
            }
        }
    }
}

I can rotate the pages included in the Stackview, but the Menubar and also Drawer don't rotate to the portrait mode.
Is there a possibility to rotate the whole Window oder Screen?

[J.Hilk]

@Walter-X MenuBar/ApplicationWindow, Drawer etc don't have a rotate property for you do manipulate.

You could z.b. wrap the menubar in a Rectangle and rotate that one.

Why exactly do you need that ? Layouted items should automatically rearrange themselves according to the orientation of the OS

and you can even "request" a forced orientation with calls to the OS, for example on android:

void setOrientationLandscape() {
    QtAndroid::runOnAndroidThread([=]() {
        QAndroidJniObject activity = QtAndroid::androidActivity();
        if (activity.isValid()) {
            QAndroidJniObject windowManager = activity.callObjectMethod("getWindow", "()Landroid/view/Window;");
            if (windowManager.isValid()) {
                windowManager.callMethod<void>("clearFlags", "I", 0x00002000); // SYSTEM_UI_FLAG_FULLSCREEN
                windowManager.callMethod<void>("addFlags", "I", 0x08000000); // FLAG_KEEP_SCREEN_ON

                activity.callMethod<void>("setRequestedOrientation", "I", 0); // ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
            }
        }
    });
}

[Walter-X]

@J-Hilk Thank you for the quick answer.
Unfortunately your suggestions don't be true in my case.

1. I tried to rotate the menubar but then the menubar applies in the middle of the display/monitor.

2. I don't have an Android application. I build a Linux with Yocto and include my Qt application into it.

3. I can't rotate the OS by myself. Eventually I have to change the device tree, but that's out of my scope.

Do you know an equivalent method in Linux to force the orientation of the screen?

[J.Hilk]

@Walter-X

On linux thats not as trivial, and usually depends on the flavour used and most certainly will require admin privileges!

xrandr as a command should work most of the time.

something like this:

    const char* command = "xrandr --output eDP-1 --rotate right";
///eDP-1 == display connected

    int result = std::system(command);

[Walter-X]

Unfortunately we don't use a X server.

The image is built with eglfs_kms plugin.

[J.Hilk]

@Walter-X thats outside of my expertise then. The only thing I can offer is the first google/ai result I came across:

If you are using an eglfs_kms image, it likely implies you are working with an Embedded Linux system that uses the Direct Rendering Manager (DRM) for Kernel Mode Setting (KMS). You can use the DRM interface and specific libraries to change the screen rotation directly through the KMS API. Keep in mind that this depends on the hardware and the availability of corresponding libraries.

Here's a general C++ approach using the DRM library:

#include <fcntl.h>
#include <xf86drm.h>
#include <xf86drmMode.h>
#include <unistd.h>

void rotateScreen(const char* drmDevicePath, uint32_t crtcId, uint32_t rotation) {
    int drmFd = open(drmDevicePath, O_RDWR);
    if (drmFd < 0) {
        perror("Error opening DRM device");
        return;
    }

    drmModeObjectPropertiesPtr props = drmModeObjectGetProperties(drmFd, crtcId, DRM_MODE_OBJECT_CRTC);
    if (!props) {
        perror("Error getting CRTC properties");
        close(drmFd);
        return;
    }

    drmModePropertyBlobResPtr blob = drmModeGetPropertyBlob(drmFd, props->values[1]);
    if (!blob) {
        perror("Error getting blob");
        drmModeFreeObjectProperties(props);
        close(drmFd);
        return;
    }

    drmModePropertyPtr prop = (drmModePropertyPtr)blob->data;
    if (drm_property_type_is(prop, DRM_MODE_PROP_BLOB) && prop->count_blobs) {
        uint32_t oldBlobId = props->values[1];
        uint32_t newBlobId;

        uint32_t data[4] = {0, 0, 0, 0};
        data[0] = rotation;

        newBlobId = drmModeCreatePropertyBlob(drmFd, data, sizeof(data));
        if (newBlobId) {
            drmModeObjectSetProperty(drmFd, crtcId, DRM_MODE_OBJECT_CRTC, newBlobId);
            drmModeObjectSetProperty(drmFd, crtcId, DRM_MODE_OBJECT_CRTC, newBlobId);
            drmModeDestroyPropertyBlob(drmFd, oldBlobId);
        }
    }

    drmModeFreeObjectProperties(props);
    close(drmFd);
}

int main() {
    const char* drmDevicePath = "/dev/dri/card0";  // Path to the DRM device
    uint32_t crtcId = 64;  // Example CRTC ID, adjust accordingly
    uint32_t rotation = DRM_MODE_ROTATE_90;  // Example rotation, adjust accordingly

    rotateScreen(drmDevicePath, crtcId, rotation);

    return 0;
}

Please note that this is a general example. You may need to adjust the CRTC ID, the DRM device path, and other parameters according to your hardware and configuration. Also, make sure your application has the necessary permissions for DRM access.

[Walter-X]

Thank you. I already discovered the DRM_MODE_ROTATE_xxx settings in the kernel.

I'll try first, to patch the kernel_module with DRM_MODE_ROTATE_270 settings.

That should have the advantage, that all output should be rotated.

If that don't work, I'll try your last suggestion.

[Ronel_qtmaster]

@Walter-X if you are using yocto, you just have to rotate your display
in config.txt you can add

display_rotate=0
display_rotate=1
display_rotate=2
display_rotate=3

0 is the normal configuration. 1 is 90 degrees. 2 is 180 degrees. 3 is 270 degrees.