🌟 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 .
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.htmlCameraButton { id: orientbutton text: captureControls.camera.orientation }
whole files of the code :
http://qomac.ir/wp-content/uploads/declarative-camera-orientation.7zunfortunately 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.7zafter 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.7zsee 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.7zThe 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 !
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.