How to set screen orientation on specific QML (how to rotate all specific QML elements on screen) ?

[aqamorisny]

I am working on this project :

https://github.com/aqamorisny/scanqt/releases/tag/0.9

i like to rotate all elements in a qml file not using "AndroidManifest.xml" because i don't like rotate the header.

when i used this code in "deceleative-camera.qml" the elements was rotated but the page drop out of the screen.

transform: Rotation {
angle: 90
origin.x: root.width / 2
origin.y: root.height / 2
}

any single line code solution ? or any technical solution ? or any solution to set qml screen orientation from c++?

[aqamorisny]

@aqamorisny
I found a solution but not good solution!
i added this block of code in "PhotoCaptureControls.qml" below of "FocusScope {"

    transform: Rotation {
    angle: 90
    origin.x: root.width / 2
    origin.y: root.height / 2
    }

then i added this block of code in "declarative-camera.qml" below of "Rectangle {"

    transform: Scale {
    origin.x: width / 2;
    origin.y: height / 2;
    xScale: width / height;
    yScale: height / width;
    }

the qml fited to screen but result was not scale and bad :

Friends, any idea?

[ambershark]

@aqamorisny Are you using a layout for your controls? Layouts will make sure things are sized and fit on screen correctly. I haven't tested this with transformations yet but it should keep your controls on screen.

[aqamorisny]

@ambershark

thanks for your reply i work on this example:
http://doc.qt.io/qt-5/qtmultimedia-multimedia-declarative-camera-example.html

i think its use component can you look at the example? if i can find a way to resize main layer i can rotate all elements.

[ambershark]

@aqamorisny So I reread your post and I misunderstood what the problem was.

So you are saying that when you rotate the controls work fine but the "page" (assuming the preview picture) drops out of view? What do you mean by drops out of the view?

[seyed]

Hello dear,
You can make your app forced to be portrait within AndroidManifest.xml and rotate your layout manually in main.cpp file using this:

QScreen* screen = QGuiApplication::primaryScreen();
screen->setOrientationUpdateMask(Qt::PortraitOrientation);

for more information see this and this links.

[aqamorisny]

@ambershark
@seyed

my target is this ( i create this image using gimp not programming ! ) :

• UI of my app have a qml in qml structure :
  "main.qml" -> "declarative-camera.qml"

the header come from "main.qml"

and cameraUI come from "declarative.qml"

i don't like force orientation because this not good solution to force users.

my source code here :
https://github.com/aqamorisny/scanqt/archive/v0.9.zip

my apk :
https://github.com/aqamorisny/scanqt/releases/download/v0.9/ScanQT_version_0.9.apk

What do you mean by drops out of the view?

when i insert this block of code in "PhotoCaptureControls.qml" below of "FocusScope {"

transform: Rotation {
angle: 90
origin.x: root.width / 2
origin.y: root.height / 2
}

all "PhotoCaptureControls.qml" elements was rotated but drop out of screen.

i tested changing width and height in "declarative.qml" but it's not effect.

[aqamorisny]

OMG ! Finally i found the solution !

Idea:
in "PothoCaptureControls.qml"

FocusScope {
    //rotate all elements
    rotation: 90

    //put all qml elements in new rectangle !
    Rectangle{
        //reverse width & height !
        width: parent.height
        height: parent.width

        color: "#00000000"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        //old QML codes . . .
        }
}

in "declarative-camera.qml" edit videoOutput block

VideoOutput {
        id: viewfinder
        visible: cameraUI.state == "PhotoCapture" || cameraUI.state == "VideoCapture"

        x: 0
        y: 0
        width: parent.width
        height: parent.height - stillControls.buttonsPanelWidth
        //old codes:
        //width: parent.width - stillControls.buttonsPanelWidth
        //height: parent.height

        source: camera
        autoOrientation: true
    }

result :

note: the solution is not complete because this has bad effect on "landscape" mode !
now i will forced to be "portrait" within AndroidManifest.xml in next vesion i will post complete solution.

full codes :

"PothoCaptureControls.qml"

import QtQuick 2.0
import QtMultimedia 5.4


FocusScope {

    rotation: 90

    property Camera camera
    property bool previewAvailable : false

    property int buttonsPanelWidth: buttonPaneShadow.width

    signal previewSelected
    signal videoModeSelected
    property alias cameraButton1: cameraButton1

    id : captureControls

    Rectangle{
        width: parent.height
        height: parent.width
        color: "#00000000"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter


    Rectangle {
        id: buttonPaneShadow
        width: bottomColumn.width + 16
        height: parent.height
        anchors.top: parent.top
        anchors.right: parent.right
        color: Qt.rgba(0.08, 0.08, 0.08, 1)

        Column {
            anchors {
                right: parent.right
                top: parent.top
                margins: 8
            }

            id: buttonsColumn
            spacing: 8

            FocusButton {
                camera: captureControls.camera
                visible: camera.cameraStatus == Camera.ActiveStatus && camera.focus.isFocusModeSupported(Camera.FocusAuto)
            }

            CameraPropertyButton {
                id : wbModesButton
                value: CameraImageProcessing.WhiteBalanceAuto
                model: ListModel {
                    ListElement {
                        icon: "../images/camera_auto_mode.png"
                        value: CameraImageProcessing.WhiteBalanceAuto
                        text: "Auto"
                    }
                    ListElement {
                        icon: "../images/camera_white_balance_sunny.png"
                        value: CameraImageProcessing.WhiteBalanceSunlight
                        text: "Sunlight"
                    }
                    ListElement {
                        icon: "../images/camera_white_balance_cloudy.png"
                        value: CameraImageProcessing.WhiteBalanceCloudy
                        text: "Cloudy"
                    }
                    ListElement {
                        icon: "../images/camera_white_balance_incandescent.png"
                        value: CameraImageProcessing.WhiteBalanceTungsten
                        text: "Tungsten"
                    }
                    ListElement {
                        icon: "../images/camera_white_balance_flourescent.png"
                        value: CameraImageProcessing.WhiteBalanceFluorescent
                        text: "Fluorescent"
                    }
                }
                onValueChanged: captureControls.camera.imageProcessing.whiteBalanceMode = wbModesButton.value
                //onValueChanged: captureControls.camera.imageProcessing.setWhiteBalanceMode(wbModesButton.value)
            }

            CameraButton {
                id: cameraButton1
                text: "Capture odd page"
                visible: camera.imageCapture.ready
                onClicked: camera.imageCapture.captureToLocation(myoddpgnum.getoddpgnum())
            }

            CameraButton {
                id: flashButton
                text: "Flash On"
                //i can't set visiblity, if device has not flash the button should be hiden
//                visible: {
//                    camera.flash.mode = Camera.FlashOff
//                    if(camera.flash.mode == Camera.FlashVideoLight){
//                        return true
//                    }
//                    else{
//                        return false
//                    }
//                }
                onClicked: if(camera.flash.mode == Camera.FlashVideoLight){
                               camera.flash.mode = Camera.FlashOff
                               flashButton.text = "Flash On"
                           }
                           else{
                               camera.flash.mode = Camera.FlashVideoLight
                               flashButton.text = "Flash Off"
                           }

            }

//            CameraButton {
//                text: "captureControls.camera"
//                onClicked: captureControls.camera.imageProcessing.setColorFilter(CameraImageProcessing.ColorFilterNegative)
//            }
        }

        Column {
            anchors {
                bottom: parent.bottom
                right: parent.right
                margins: 8
            }

            id: bottomColumn
            spacing: 8

            CameraButton {
                text: "Capture even page"
                visible: camera.imageCapture.ready
                onClicked: camera.imageCapture.captureToLocation(myevenpgnum.getevenpgnum())
                //text: "Switch to Video"
                //onClicked: captureControls.videoModeSelected()
            }

            //CameraListButton {
            //    model: QtMultimedia.availableCameras
            //    onValueChanged: captureControls.camera.deviceId = value
            //}


            //            CameraButton {
            //                id: quitButton
            //                text: "Quit"
            //                onClicked: Qt.quit()
            //            }
        }


    }


    ZoomControl {
        x : 0
        y : 0
        width : 100
        height: parent.height

        currentZoom: camera.digitalZoom
        maximumZoom: Math.min(4.0, camera.maximumDigitalZoom)
        onZoomTo: camera.setDigitalZoom(value)
    }

   }
}

"declarative-camera.qml"

import QtQuick 2.0
import QtMultimedia 5.4

Rectangle {

    id : cameraUI

    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter

    width: 800
    height: 480

    color: "black"
    state: "PhotoCapture"

    states: [
        State {
            name: "PhotoCapture"
            StateChangeScript {
                script: {
                    camera.captureMode = Camera.CaptureStillImage
                    camera.start()
                }
            }
        },
        State {
            name: "PhotoPreview"
        },
        State {
            name: "VideoCapture"
            StateChangeScript {
                script: {
                    camera.captureMode = Camera.CaptureVideo
                    camera.start()
                }
            }
        },
        State {
            name: "VideoPreview"
            StateChangeScript {
                script: {
                    camera.stop()
                }
            }
        }
    ]

    Camera {
        id: camera
        captureMode: Camera.CaptureStillImage

        imageCapture {
            onImageCaptured: {
                photoPreview.source = preview
                stillControls.previewAvailable = true
                cameraUI.state = "PhotoPreview"
            }
        }

        videoRecorder {
             resolution: "640x480"
             frameRate: 30
        }
    }

    PhotoPreview {
        id : photoPreview
        anchors.fill : parent
        onClosed: cameraUI.state = "PhotoCapture"
        visible: cameraUI.state == "PhotoPreview"
        focus: visible
    }

    VideoPreview {
        id : videoPreview
        anchors.fill : parent
        onClosed: cameraUI.state = "VideoCapture"
        visible: cameraUI.state == "VideoPreview"
        focus: visible

        //don't load recorded video if preview is invisible
        source: visible ? camera.videoRecorder.actualLocation : ""
    }

    VideoOutput {
        id: viewfinder
        visible: cameraUI.state == "PhotoCapture" || cameraUI.state == "VideoCapture"

        x: 0
        y: 0
        width: parent.width
        height: parent.height - stillControls.buttonsPanelWidth

        source: camera
        autoOrientation: true
    }

    PhotoCaptureControls {
        id: stillControls
        anchors.fill: parent
        camera: camera
        visible: cameraUI.state == "PhotoCapture"
        onPreviewSelected: cameraUI.state = "PhotoPreview"
        onVideoModeSelected: cameraUI.state = "VideoCapture"
    }

    VideoCaptureControls {
        id: videoControls
        anchors.fill: parent
        camera: camera
        visible: cameraUI.state == "VideoCapture"
        onPreviewSelected: cameraUI.state = "VideoPreview"
        onPhotoModeSelected: cameraUI.state = "PhotoCapture"
    }
}

[ambershark]

@aqamorisny Awesome! Glad you got it. Sorry I haven't been able to get the time to surf the forums here lately so I missed your update to this post until now.

Sorry I didn't help out more, it's been a busy week. :)

[AdamHeavens]

@aqamorisny Just wanted to say thank you!, been trying to get the same idea to work and failing until I came across your post!