diff options
Diffstat (limited to 'examples/multimedia')
| -rw-r--r-- | examples/multimedia/declarative-camera/declarative-camera.qml | 52 | ||||
| -rw-r--r-- | examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc | 16 |
2 files changed, 42 insertions, 26 deletions
diff --git a/examples/multimedia/declarative-camera/declarative-camera.qml b/examples/multimedia/declarative-camera/declarative-camera.qml index ce827d80a..d3b0767e9 100644 --- a/examples/multimedia/declarative-camera/declarative-camera.qml +++ b/examples/multimedia/declarative-camera/declarative-camera.qml @@ -16,24 +16,6 @@ Rectangle { property int buttonsPanelLandscapeWidth: 328 property int buttonsPanelPortraitHeight: 180 - onWidthChanged: { - setState() - } - function setState() { - if (Qt.platform.os === "android" || Qt.platform.os === "ios") { - if (Screen.desktopAvailableWidth < Screen.desktopAvailableHeight) { - stillControls.state = "MobilePortrait"; - } else { - stillControls.state = "MobileLandscape"; - } - } else { - stillControls.state = "Other"; - } - console.log("State: " + stillControls.state); - stillControls.buttonsWidth = (stillControls.state === "MobilePortrait") - ? Screen.desktopAvailableWidth/3.4 : 144 - } - states: [ State { name: "PhotoCapture" @@ -108,10 +90,38 @@ Rectangle { // autoOrientation: true } + Item { + id: controlLayout + + readonly property bool isMobile: Qt.platform.os === "android" || Qt.platform.os === "ios" + readonly property bool isLandscape: Screen.desktopAvailableWidth >= Screen.desktopAvailableHeight + property int buttonsWidth: state === "MobilePortrait" ? Screen.desktopAvailableWidth / 3.4 : 114 + + states: [ + State { + name: "MobileLandscape" + when: controlLayout.isMobile && controlLayout.isLandscape + }, + State { + name: "MobilePortrait" + when: controlLayout.isMobile && !controlLayout.isLandscape + }, + State { + name: "Other" + when: !controlLayout.isMobile + } + ] + + onStateChanged: { + console.log("State: " + controlLayout.state) + } + } + PhotoCaptureControls { id: stillControls - state: setState() + state: controlLayout.state anchors.fill: parent + buttonsWidth: controlLayout.buttonsWidth buttonsPanelPortraitHeight: cameraUI.buttonsPanelPortraitHeight buttonsPanelWidth: cameraUI.buttonsPanelLandscapeWidth captureSession: captureSession @@ -123,9 +133,9 @@ Rectangle { VideoCaptureControls { id: videoControls - state: stillControls.state + state: controlLayout.state anchors.fill: parent - buttonsWidth: stillControls.buttonsWidth + buttonsWidth: controlLayout.buttonsWidth buttonsPanelPortraitHeight: cameraUI.buttonsPanelPortraitHeight buttonsPanelWidth: cameraUI.buttonsPanelLandscapeWidth captureSession: captureSession diff --git a/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc b/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc index b22c80234..633592aad 100644 --- a/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc +++ b/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc @@ -26,13 +26,19 @@ controls. \section1 Using screen orientation to select layout -In \c declarative-camera.qml we handle detecting the orientation we're in and -select the appropriate layout while also catering for the limitations of small -screen mobile devices like so: +The orientation and control layout state logic is encapsulated in a separate +Item, \c controlLayout like so: \quotefromfile declarative-camera/declarative-camera.qml -\skipto Rectangle { -\printto states: [ +\skipto Item { +\printto PhotoCaptureControls { + +The \c stillControls and \c videoControls objects both bind to the \c state +and \c buttonsWidth properties of this Item, as shown in \c stillControls: + +\printto VideoCaptureControls { + +To support debugging, a message about layout state change is logged. Here is the portrait layout: |