6 Replies Latest reply on Nov 7, 2011 2:20 PM by alinator11

    Getting Mobile Device (Correct) Screen Size

    alinator11 Level 2

      I have some confusion over getting the screen size of a mobile device. I measured the following:

       

      var hsa:AlertObject = new AlertObject();

      hsa.alertMessage = "screen w:" +  this.stage.fullScreenWidth + "  h:" + this.stage.fullScreenHeight + "\n" +

                          "capscreen w: " + capmc.width + " h:" + capmc.height + "\n" +                    

                          "capabilites w: " + Capabilities.screenResolutionX + " h: " + Capabilities.screenResolutionY;

      hsa.open(this, false);

       

      I ran this on an iPod touch 4 which has a resolution of 960 X 640. The above code gives me:

       

      screen = 480 X 320

      capscreen (a movie clip I load that is scaled to the full screen and is displaying properly) = 1548.85 X 677 (I presume the original dimensions my designer gave the SWF).

      Capabilities = 480 X 320

       

      Note that 480 X 320 is precisely half of the actual screen dimensions of an iPod Touch 4. Can someone please tell me why. And, given that capscreen is displaying (properly) at the time I take these measurements and display results, why is capscreen reporting larger than the actual dimensions of the device? Also, my app orrientation is landscape only and yet the dimensions I'm getting are that width is < height which means the device is reporting in portrait mode.

       

      If I just need to check for iOS and then double dimensions, that's fine. But, I don't want to do that for this iPod Touch test to find it works differently on other iOS devices.

       

      I know that all of my screens are on the stage, BTW. I know this because I get the AlertObject to show me alerts by pressing one of the buttons of a loaded screen I am measuring - and the button is not enabled until all SWF's are finished loading and being added to stage.

        • 1. Re: Getting Mobile Device (Correct) Screen Size
          Shongrunden Adobe Employee

          Maybe you aren't using the retina display?

           

          If you look in your -app.xml file is requestedDisplayResolution set to high?

           

          <iPhone>

                  <InfoAdditions><![CDATA[

                                        <key>UIDeviceFamily</key>

                                        <array>

                                                  <string>1</string>

                                                  <string>2</string>

                                        </array>

            ]]></InfoAdditions>

                  <requestedDisplayResolution>high</requestedDisplayResolution>

              </iPhone>

          • 2. Re: Getting Mobile Device (Correct) Screen Size
            alinator11 Level 2

            Mine looked a little different than yours but it was all commented out. I posted it below. I copied and pasted your tag into my app.xml and ran the app.  But, things that worked find with no res defined were no longer working once I went to the higher resolution. For instance, I have a pop up box (SWF) that directs the user. When the resolution is commented out, that popup box has clearly legible text (an embedded font). When I add the tag you show, the pop up box displays and looks great but there is no text. I have no idea what to make of that. Can you give me some idea of why that may be occuring?

             

            <!-- <iPhone> -->

                    <!-- A list of plist key/value pairs to be added to the application Info.plist -->

                    <!-- <InfoAdditions>

                        <![CDATA[

                            <key>UIDeviceFamily</key>

                            <array>

                                <string>1</string>

                                <string>2</string>

                            </array>

                            <key>UIStatusBarStyle</key>

                            <string>UIStatusBarStyleBlackOpaque</string>

                            <key>UIRequiresPersistentWiFi</key>

                            <string>YES</string>

                        ]]>

                    </InfoAdditions> -->

                    <!-- <requestedDisplayResolution></requestedDisplayResolution> -->

                <!-- </iPhone> -->

            • 3. Re: Getting Mobile Device (Correct) Screen Size
              Shongrunden Adobe Employee

              Can you provide a small sample project that demonstrates this? 

              • 4. Re: Getting Mobile Device (Correct) Screen Size
                alinator11 Level 2

                I'm loading an SWF over top of the video image which has my video buttons. After I load my SWF, I create the camera and video objects. To get them to be sized correctly, the only way I am successfully able to do so is with the code below (hope this suffices as a sample, or at least a demonstration of what I find has to be done to get expected behavior). It is worth noting that on Android, I have to double the resolution no matter which direction the device is registered in at the time Capabilities... is called. On iOS, if the device is registering that it is in the landscape mode, there is no need to double as the resolution will be correct. This same code has been run on both devices and proven to have the above results.

                 

                Load my SWF:

                 

                var ch:Number = Capabilities.screenResolutionY;
                var cw:Number = Capabilities.screenResolutionX;
                var vidh:Number = ch;
                var vidw:Number = cw;
                if(ch > cw) {
                //in this case, the device must be registering in the portrait mode
                //multiply eveything by 2 and switch orientation...
                vidw = ch * 2;
                vidh = cw * 2;
                camera.setMode(vidw, vidh, 30, false);
                }
                else if(!(ch < cw) && isAndroid) {
                vidw = cw * 2;
                vidh = ch * 2;
                camera.setMode(vidw, vidh, 30, false);
                }
                else {
                //otherwise, everything should already be double and there's no need to switch
                //width and height like there is above.
                //need to test that this remains the case with ipod.
                camera.setMode(vidw, vidh, 30);
                }
                • 5. Re: Getting Mobile Device (Correct) Screen Size
                  Shongrunden Adobe Employee

                  We'll need a more complete sample project.  See my example in this post: http://forums.adobe.com/message/4012463#4012463

                  • 6. Re: Getting Mobile Device (Correct) Screen Size
                    alinator11 Level 2

                    <?xml version="1.0" encoding="utf-8"?>

                    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                            xmlns:s="library://ns.adobe.com/flex/spark" title="NewCappoCamera" actionBarVisible="false" xmlns:mx="library://ns.adobe.com/flex/mx">

                        <fx:Declarations>

                            <!-- Place non-visual elements (e.g., services, value objects) here -->

                        </fx:Declarations>

                        <fx:Script>

                            <![CDATA[

                     




                     

                    private function loadSWF():void {





                    pictureButtons.load();







                    pictureButtons.content.addEventListener(Event.ADDED, loadComplete);




                    //initCamera();



                    }



                    private var mc:MovieClip;



                    private var hasBeenInit:Boolean = false;



                    private function loadComplete(event:Event):void{




                    event.target.removeEventListener(Event.ADDED, loadComplete);




                    if(event.target is MovieClip && mc == null) {









                    mc = MovieClip(event.target);





                    mc.play();




                    }







                    if(event.target.name == "acceptPicBtn") {









                    acceptButton = SimpleButton(event.target);









                    acceptButton.enabled = false;




                    }




                    else if(event.target.name == "retakePicBtn") {









                    retakeButton = SimpleButton(event.target);





                    retakeButton.addEventListener(MouseEvent.CLICK, retakeClicked);





                    retakeButton.enabled = false;








                    }




                    else if(event.target.name == "takePicBtn") {





                    cameraButton = SimpleButton(event.target);





                    cameraButton.addEventListener(MouseEvent.CLICK, cameraButtonPressed);




                    }




                    if(cameraButton != null && acceptButton != null





                    && retakeButton != null && cameraButton != null && mc != null && !hasBeenInit) {





                    mc.stop();









                    pictureButtons.endEffectsStarted();





                    hasBeenInit = true;









                    initCamera();




                    }



                    }







                    //private var numTimes:uint = 0;



                    private function initCamera():void {







                    cameraButton.visible = true;




                    cameraButton.enabled = true;




                    acceptButton.enabled = false;







                    retakeButton.enabled = false;




                    acceptButton.visible = false;




                    retakeButton.visible = false;









                    //front camera loads if they have one and it's an iOS device.




                    var a:Array = Camera.names;




                    var camName:String = "";




                    var isAndroid:Boolean = false;




                    for(var i:uint = 0; i < a.length; i++) {





                    camName = a[i];





                    if(camName.indexOf("Front") != -1) {











                    break;





                    }




                    }




                    //test if android as right now only the back camera




                    ///works on that platform.




                    if(Capabilities.version.indexOf('AND') != -1) {









                    this.camera = Camera.getCamera();





                    isAndroid = true;




                    }




                    else if(camName.indexOf("Front") != -1 &&





                    !isAndroid) {





                    this.camera = Camera.getCamera("1");




                    }




                    else {









                    this.camera = Camera.getCamera();




                    }







                    if(!Camera.isSupported) {





                    //todo




                    }




                    if(camera.muted) {





                    //todo




                    }




                    //following works on droid but is not working in iPod...




                    //camera.setMode(





                    //pictureButtons.contentWidth + this.width,





                    //pictureButtons.contentHeight + this.height, 30, true);









                    //the code below works on both platforms.




                    var ch:Number = Capabilities.screenResolutionY;




                    var cw:Number = Capabilities.screenResolutionX;




                    var vidh:Number = ch;




                    var vidw:Number = cw;




                    if(ch > cw) {





                    //in this case, the device must be registering in the portrait mode





                    //multiply eveything by 2 and switch orrientation...





                    vidw = ch * 2;





                    vidh = cw * 2;





                    camera.setMode(vidw, vidh, 30, false);




                    }




                    //android dimensions have to be doubled no matter what




                    else if(!(ch < cw) && isAndroid) {









                    vidw = cw * 2;





                    vidh = ch * 2;





                    camera.setMode(vidw, vidh, 30, false);




                    }




                    else {





                    //otherwise, everything should already be double and there's no need to switch





                    //width and height like there is above.









                    //need to test that this remains the case with ipod but can't seem to get ipod





                    //orientation to report other than "rotatedRight" no matter how the device is held.





                    camera.setMode(vidw, vidh, 30);




                    }




                    vidComponent.height = vidh;




                    vidComponent.width = vidw;







                    this.video = new Video();




                    video.width = vidComponent.width;




                    video.height = vidComponent.height;











                    video.attachCamera(camera);







                    vidComponent.addChild(video);




                    vidComponent.visible = true;



                    }

                     

                    ]]>
                    </fx:Script>

                    <mx:UIComponent id="vidComponent" x="0" y="0" width="100%" height="100%"/>

                        <s:Image id="capturedImage" x="0" y="0"

                                 width="100%" height="100%"

                                 visible="false"/>

                        <s:SWFLoader

                            id="pictureButtons"

                            x="0" y="0"

                            width="100%" height="100%"

                            scaleContent="true"

                            source="@Embed('assets/SignUpPicButtons.swf')"

                            creationComplete="{loadSWF()}" autoLoad="false"

                            />   

                     

                        <s:SWFLoader

                            id="busyLoader"

                            x="0" y="0"

                            width="100%" height="100%"

                            scaleContent="true"

                            source="@Embed('assets/CheckingSWF.swf')"

                            autoLoad="false"

                            />

                        <s:SWFLoader

                            id="invisibleBusy"

                            x="0" y="0"

                            width="100%" height="100%"

                            scaleContent="true"

                            source="@Embed('assets/InvCheckingSWF.swf')"

                            autoLoad="false"

                            />

                     

                    </s:View>

                     

                    Let me know if you want the SWF's required to run this code.