Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



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

    alt text

    alt text

    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 .
    alt text

    alt text

    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! 😢

    alt text

    alt text

    alt text

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

    alt text

    alt text

    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 ?



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

    prize scanqt pic 00

    prize scanqt pic 01

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



  • 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


  • Moderators

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


Log in to reply