<< to CrossControl homepage

Support & Service Center

Rotate a Qt5 application with QML

Printer-friendly versionPrinter-friendly versionPDF versionPDF version

With the introduction of Qt5 and QML the rotation of the screen content needs to be handled with a different approach compared with Qt4. Qt5 applications use the EGLFS platform which is basically an OpenGL area which spans over the entire screen. This area will always use the dimensions of screen and be the root size for the GUI. New dimensions or orientation cannot be set to the root element. However, it is perfectly fine to alter the visible content; and that is what will be presented in this article. An example project is included which shows these steps in practice.

Below is an example which shows the general structure to achieve rotation of the visible content.

Item {
    id: base
    Rectangle {
        id: view
        anchors.centerIn: parent
        width: base.width; 
        height: base.height
        // Content area…
} 

The QML-file use "Item" as the base and then add content in a container, in this case called “view”. By doing it this way, it is possible to manipulate the visible layer's dimensions and rotation without changing the base (which is always fixed to the screen size).

With this structure is it very easy to rotate the visible content. There are many ways this could be achieved, and to conclude this article, here is an example how the rotation could be handled by a function. The function accepts an orientation index and the changes the width, height and rotation properties for the “view”.

function orientationChanged(orientation) {
    highlightindex(orientation)

    if(orientation == 1) {
        view.rotation = 0
        view.width = base.width; view.height = base.height
        console.log("orientation1")
    }
    else if(orientation == 2) {
        view.rotation = 180
        view.width = base.width; view.height = base.height
        console.log("orientation2")
    }
    else if(orientation == 3) {
        view.rotation = 270
        view.width = base.height; view.height = base.width
        console.log("orientation3")
    }
    else if(orientation == 4) {
        view.rotation = 90
        view.width = base.height; view.height = base.width
        console.log("orientation4")
    }
}

Width and height is the same as the “base” when the content is rotated 0 or 180 degrees. If the content should be rotated 90 or 270 degrees, it is important to switch width and height with each other. The base width becomes the content’s new height, and base height the new width.

Screen Orientation Tester GUI
AttachmentSize
Package icon Project files14.66 KB
whatever