QtQuick Rotate Application to 90° or 270° portrait
-
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? -
@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 } } }); }
-
@J-Hilk Thank you for the quick answer.
Unfortunately your suggestions don't be true in my case.-
I tried to rotate the menubar but then the menubar applies in the middle of the display/monitor.
-
I don't have an Android application. I build a Linux with Yocto and include my Qt application into it.
-
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?
-
-
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 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.
-
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.
-
@Walter-X if you are using yocto, you just have to rotate your display
in config.txt you can adddisplay_rotate=0
display_rotate=1
display_rotate=2
display_rotate=30 is the normal configuration. 1 is 90 degrees. 2 is 180 degrees. 3 is 270 degrees.