🌟 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



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

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