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



  • I am working on this project :
    ScanQT_Version_0.9
    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.
    rotated scanqt from android manifest

    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
    }
    

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



  • @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 :

    scanqt

    Friends, any idea?


  • Moderators

    @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.



  • @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.


  • Moderators

    @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?



  • 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.



  • @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"
    alt text

    and cameraUI come from "declarative.qml"
    scanqt header

    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.



  • OMG ! Finally i found the solution !

    alt text
    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 :
    result when android portrait
    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"
        }
    }
    

  • Moderators

    @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. :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.