Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    8
    Vote Rating
    0
    em7191 is on a distinguished road

      0  

    Default Native Camera Issue: Sencha + Cordova

    Native Camera Issue: Sencha + Cordova


    Browser versions or Packager version tested against:
    • Sencha Native
    • Cordova
    Device and OS tested against:
    • iPhone 5s
    What theme are you using for your application:
    • Cupertino
    Description:
    • When in landscape mode, taking a picture causes the UI to go haywire . The device is still in landscape orientation, but the UI thinks it's portrait (it only takes up part of the width).
    Steps to reproduce the problem:
    • Do a native build for iOS and run it from Xcode on an iPhone 5s (maybe others). Once it loads on the device, rotate the device to landscape orientation and tap the button to take a picture. As soon as the transition to the camera screen begins, you should notice a quick UI adjustment when the orientation changes from landscape to portrait. Take a picture in landscape mode. Keep device in landscape mode. Select ‘Use Photo’. Upon return to Sencha layout (still in landscape mode) the UI appears in portrait mode and only takes up the width of the screen that portrait mode would. Rotate the device to portrait mode (may or may not adjust) and then rotate back to landscape (should be ok now).
    • What I found is that once it starts to go into camera mode the Viewport orientation changes and the window width and height changes accordingly, but the window.orientation still reports portrait mode (should be landscape).
    • I tested using html, js and cordova and it does not have the same issue.
    The result that was expected:
    • Once returned from camera mode, the UI should still be in landscape orientation and look just as it did before entering camera mode.
    The result that occurs instead:
    • UI appears to be in portrait mode and only takes up the width of the screen that portrait mode would.
    The url to fiddle testcase:
    https://fiddle.sencha.com/#fiddle/8hv

    S
    ince we're using native device capabilities, the fiddle won't really help. Here's some code to test with:

    Sencha:
    Code:
    Ext.define('CameraTest2.view.Main', {
        extend: 'Ext.form.Panel',
        xtype: 'main',
        requires: [
            'Ext.Button'
        ],
        config: {
            items: [
                {
                    xtype: 'button',
                    itemId: 'mybutton',
                    text: 'Take Photo',
                    margin: 40,
                    handler: function () {
                        if( navigator && navigator.camera && navigator.camera.getPicture ) {
                            navigator.camera.getPicture(
                                // success:
                                function ( image ) {
                                    console.log( image );
                                },
                                // failure:
                                function ( errMessage ) {
                                    console.log( 'Capture Failure: ' + errMessage );
                                },
                                // cameraOptions
                                {
                                    allowEdit: false,
                                    correctOrientation: true,  // tried false, too
                                    destinationType: Camera.DestinationType.FILE_URI,
                                    quality: 40,
                                    sourceType : Camera.PictureSourceType.CAMERA
                                }
                            );
                        } else {
                            console.log('Capture not available.');
                        }
                    }
                }
            ]
        }
    });
    Cordova (ONLY):
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <title>Camera Test</title>
            <script type="text/javascript">
                function takePhoto() {
                    navigator.camera.getPicture(
                        // success:
                        function ( image ) {
                            console.log( image );
                        },
                        // failure:
                        function ( errMessage ) {
                            console.log( 'capture failure: ' + errMessage );
                        },
                        // cameraOptions
                        {
                            allowEdit: true,
                            correctOrientation: false,
                            destinationType: Camera.DestinationType.FILE_URI,
                            quality: 100,
                            sourceType : Camera.PictureSourceType.CAMERA
                        }
                    );
                }
            </script>
        </head>
        <body>
            <div style="height: 100%; margin: 0px; padding: 0px;">
                <div style="text-align: center; padding: 50px;">
                    <input type="button" id="mybutton" value="Take Photo" onclick="takePhoto();" />
                </div>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
        </body>
    </html>

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Just to be clear. When you experienced this issue you packaged your Sencha Touch project with Cordova correct? What version of Cordova did you use?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    8
    Vote Rating
    0
    em7191 is on a distinguished road

      0  

    Default


    Cordova v3.4.1-0.1.0
    Sencha CMD v5.0.0.160
    Sencha Touch v2.3.1-gpl
    OS X Mavericks v10.9.4
    Last edited by em7191; 8 Aug 2014 at 10:28 AM. Reason: adding more info

  4. #4
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    I apologize for the delay. I was unable to reproduce this issue. I tested on a iPad 3.
    Cordova v3.5.0-0.2.6
    Sencha CMD v5.0.1.231
    Sencha Touch v2.3.2pl
    OS X Mavericks v10.9.4

    I will try to reproduce on a iPhone 5 once I have access.
    Did you test on a iPad as well?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

Thread Participants: 1

Tags for this Thread