🌟 orientation side of qml camera 📸 🔃 + Award 🎁 🌟

[aqamorisny]

📸 🔃 my aim is showing orientation beside of camera, like other standard app that using camera .

standard apps rotated camera elements(like shutter, setting button , . . . ) when user rotate his/her phone to show user the orientation has been changed .

1 . Using camera.orientation :
I tried add some code to my project to show orientation for user using camera.orientation.

but that way does not work, i added some code to qml camera example, https://doc.qt.io/qt-5/qtmultimedia-multimedia-declarative-camera-example.html

so i added below code to this file :
https://doc.qt.io/qt-5/qtmultimedia-multimedia-declarative-camera-photocapturecontrols-qml.html

CameraButton {
                id: orientbutton
                text: captureControls.camera.orientation
            }

whole files of the code :
http://qomac.ir/wp-content/uploads/declarative-camera-orientation.7z

unfortunately the result always will be 270 , i tested the result on emulator and some other android devices , all of them return 270 .

2 . Using Orientation Sensor :
After awhile i tried to show orientation using QtSensors , with this piece of code :

import QtSensors 5.0
.
.
.
OrientationSensor {
    id: orient
    active: true
    onReadingChanged: {
        if (reading.orientation === OrientationReading.TopUp)
            orientbutton.text = "TopUp";

    else if (reading.orientation === OrientationReading.TopDown)
            orientbutton.text = "TopDown";

    else if (reading.orientation === OrientationReading.LeftUp)
            orientbutton.text = "LeftUp";

    else if (reading.orientation === OrientationReading.RightUp)
            orientbutton.text = "RightUp";

    else if (reading.orientation === OrientationReading.FaceUp)
            orientbutton.text = "FaceUp";

    else if (reading.orientation === OrientationReading.FaceDown)
            orientbutton.text = "FaceDown";

    else
            orientbutton.text = "Unknown";
    }
}
.
.
.
CameraButton {
    id: orientbutton
    text: "orientation"
}

whole files of the code :
http://qomac.ir/wp-content/uploads/declarative-camera-sensor-orientation.7z

after testing and testing finally i found position that the code works on declarative camera example nicely, but still does not work on my project on the same position! 😢

But on my project text of button does not changed , i don't know why?

whole files of my project :
http://qomac.ir/wp-content/uploads/touch-sensor-orientation.7z

see below code :

import QtQuick 2.0
import QtMultimedia 5.4
import QtSensors 5.0

FocusScope {
    
    smooth: true
    
    rotation: 90
    
    property Camera camera
    property bool previewAvailable : false
    property bool isfocused : false
    
    property int buttonsPanelWidth: buttonPaneShadow.width
    
    signal previewSelected
    signal videoModeSelected
    property alias cameraButton1: cameraButton1
    
    id : captureControls
    
    Rectangle{
        smooth: true
        width: parent.height
        height: parent.width
        color: "#00000000"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        
        Rectangle {
            id: buttonPaneShadow
            width: bottomColumn.width + bottomColumn.width / 8
            height: parent.height
            anchors.top: parent.top
            anchors.right: parent.right
            color: Qt.rgba(0.08, 0.08, 0.08, 1)
            
            OrientationSensor {
                id: orient
                active: true
                onReadingChanged: {
                    if (reading.orientation === OrientationReading.TopUp)
                        orientbutton.text = "TopUp";
                    
                    else if (reading.orientation === OrientationReading.TopDown)
                        orientbutton.text = "TopDown";
                    
                    else if (reading.orientation === OrientationReading.LeftUp)
                        orientbutton.text = "LeftUp";
                    
                    else if (reading.orientation === OrientationReading.RightUp)
                        orientbutton.text = "RightUp";
                    
                    else if (reading.orientation === OrientationReading.FaceUp)
                        orientbutton.text = "FaceUp";
                    
                    else if (reading.orientation === OrientationReading.FaceDown)
                        orientbutton.text = "FaceDown";
                    
                    else
                        orientbutton.text = "Unknown";
                }
            }
            
            Column {
                //unvisible all button when image captured
                visible: camera.imageCapture.ready
                anchors {
                    right: parent.right
                    top: parent.top
                    margins: 8
                }
                
                id: buttonsColumn
                spacing: 8
                
                CameraButton {
                    id: orientbutton
                    text: "orientation"
                }
                
                //            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: "Sunny"
                        }
                        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: flashButton
                    Image {
                        id: flashButtonIcon
                        anchors.centerIn: parent
                        source: "../images/camera_flash_fill.png"
                        height: parent.width / 2
                        width: height
                    }
                    //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
                                   flashButtonIcon.source = "../images/camera_flash_fill.png"
                               }
                               else{
                                   camera.flash.mode = Camera.FlashVideoLight
                                   flashButtonIcon.source = "../images/camera_flash_off.png"
                               }
                    
                }
                
                
                //            CameraButton {
                //                text: "captureControls.camera"
                //                onClicked: captureControls.camera.imageProcessing.setColorFilter(CameraImageProcessing.ColorFilterNegative)
                //            }
            }
            
            Column {
                anchors {
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                    margins: 8
                }
                
                id: middleColumn
                spacing: 8
                
                CameraButton {
                    id: cameraButton1
                    visible: camera.imageCapture.ready
                    //text: "Capture odd page"
                    Text {
                        rotation: -90
                        text: "Odd"
                        color: "White"
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.margins: parent.width / 20
                        elide: Text.ElideRight
                        font.bold: true
                        style: Text.Raised
                        styleColor: "black"
                        font.pixelSize: parent.width / 3
                    }
                    
                    Image {
                        //anchors.centerIn: parent
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.margins: parent.width / 30
                        source: "../images/camera_capture_button.png"
                        height: parent.width / 2
                        width: height
                    }
                    
                    MouseArea{
                        anchors.fill: parent
                        onPressed: camera.searchAndLock();
                        onClicked: {
                            var timeStart = new Date().getTime();
                            while (new Date().getTime() - timeStart < 1000) {
                                // Do nothing
                            }
                            camera.imageCapture.captureToLocation(myoddpgnum.getoddpgnum());
                        }
                        //                    onReleased: {
                        //                        var timeStart = new Date().getTime();
                        //                        while (new Date().getTime() - timeStart < 1000) {
                        //                            // Do nothing
                        //                        }
                        //                        mythumbnail.createthumbnail();
                        //                    }
                    }
                }
            }
            
            Column {
                anchors {
                    bottom: parent.bottom
                    right: parent.right
                    margins: 8
                }
                
                id: bottomColumn
                spacing: 8
                
                CameraButton {
                    id: cameraButton2
                    visible: camera.imageCapture.ready
                    //text: "Capture even page"
                    
                    Text {
                        rotation: -90
                        text: "Even"
                        color: "White"
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.margins: 1
                        elide: Text.ElideRight
                        font.bold: true
                        style: Text.Raised
                        styleColor: "black"
                        font.pixelSize: parent.width / 3
                    }
                    
                    Image {
                        //anchors.centerIn: parent
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.margins: parent.width / 30
                        source: "../images/camera_capture_button.png"
                        height: parent.width / 2
                        width: height
                    }
                    
                    MouseArea{
                        anchors.fill: parent
                        onPressed: camera.searchAndLock();
                        onClicked: {
                            var timeStart = new Date().getTime();
                            while (new Date().getTime() - timeStart < 1000) {
                                // Do nothing
                            }
                            camera.imageCapture.captureToLocation(myevenpgnum.getevenpgnum())
                        }
                        //                    onReleased: {
                        //                        var timeStart = new Date().getTime();
                        //                        while (new Date().getTime() - timeStart < 1000) {
                        //                            // Do nothing
                        //                        }
                        //                        mythumbnail.createthumbnail();
                        //                    }
                    }
                    
                    
                    //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 : parent.width / 6
            height: parent.height
            
            currentZoom: camera.digitalZoom
            maximumZoom: Math.min(4.0, camera.maximumDigitalZoom)
            onZoomTo: camera.setDigitalZoom(value)
        }
    }
}

whole files of my project :
http://qomac.ir/wp-content/uploads/touch-sensor-orientation.7z

The project compile and run without any error , but orientation sensor can't change button text , What's wrong with my code ?

[aqamorisny]

I Will Send a ScanQT Gadget as gift for appreciation who debug my app and show orientation on my project , As described above .

The prize will be sent to the person's address !

more about my project on github :
https://github.com/aqamorisny/scanqt

[GTDev]

Hi!

For detecting the device orientation, you can also have a look at V-Play Engine for Qt-based mobile apps and games.

It comes with many features that make mobile development with Qt easier. For example, the App component has a ready-to-use portrait property, which you can use to build your UI:

import VPlayApps 1.0

App {
  id: app

  AppText {
    anchors.centerIn: parent
    text: app.portrait ? "Orientation: Portrait" : "Orientation: Landscape"
  }

}

Best,
GTDev

[J.Hilk]

@aqamorisny Hi,
I don't have a 1:1 fix for your situtaion, but have you seen this wiki entry?

You should be able to adapt that for your app.