19 Replies Latest reply on Jul 15, 2011 4:00 AM by Francisc

    Flex Mobile dp

    Francisc Level 3

      Hello,

       

      Does Flex have dp (density independent pixel) as unit of measurement?

      It would simplify things, at least in theory.

       

      Thank you.

        • 1. Re: Flex Mobile dp
          kokorito Level 4

          it uses dpi for different resolutions

           

          this might be of use

           

          http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html

          • 2. Re: Flex Mobile dp
            Francisc Level 3

            Hi, thank you for your answer, but that is not the same thing.

            • 3. Re: Flex Mobile dp
              JeffryHouser Level 4

              I guess I'm not sure what you're after.

               

              I was about to point you to the DPI docs too.

               

              But, that said.  You can easily use absolute positioning on any given Flex component and that is "pixel" based without any consideration for pixel density.

              • 4. Re: Flex Mobile dp
                pauland Level 4

                I think the OP is alluding to a system such as the points system used in Apples IOS. UIs are designed according to a points system that relates to the shape of the screen and not necessarily the pixel co-ordinates. So an app designed to run on an iPhone can work on iPhones regardless of whether it's a iPhone 4 with higher resolution display or the older, lwer resolution one. In the case of the iPhone 4 the points are scaled up to double the pixel value, in the lower resolution screens a point is equivalent to a pixel.

                 

                I think the real question is whether an app designed for a low resolution screen iPhone will just automatically scale for an iPhone4.

                 

                OP, is this what your question is about?

                1 person found this helpful
                • 5. Re: Flex Mobile dp
                  Francisc Level 3

                  Hi, Pauland.

                   

                  Yup, pretty much, but Android has that as well.

                  DP are virtual pixel units. You can use them to specify dimensions or position in a density-independent way.

                   

                  The equation is:  pixels = DP * (DPI / 160).

                  For example, on a 240 DPI screen, 1 DP equals 1.5 physical pixels.

                  • 6. Re: Flex Mobile dp
                    Francisc Level 3

                    Jeffrey, I am using X and Y coordinates and am having problems with placement corrections Flex makes for different DPI settings.

                    • 7. Re: Flex Mobile dp
                      Peter Blazejewicz Level 4

                      Hi,

                      @M*A*S*H 4077

                      It has something under-the-hood (as this is complicated), see explanatory article with reasoning behind current resolution-independance solutions here:

                      http://opensource.adobe.com/wiki/display/flexsdk/DPI+Auto+Scaling+for+Density+Independent+ Mobile+Apps

                      and e.g. that blog post:

                      http://blogs.adobe.com/jasonsj/tag/dpi

                      which has direct reference to current docs:

                      http://help.adobe.com/en_US/flex/mobileapps/WS19f279b149e7481c682e5a9412cf5976c17-8000.htm l

                      (which describes different approaches to fight-with problem). As noted that is not-the same as on iOS - so for example drawing api is to be computed/scaled in ActionScript while on iOS drawing with CG is independent of screen.

                      Note that e.g. flash.display.DisplayObject coordinates (x/y) are abstract and are only "coordinates" related to parent - not pixels or even points.

                       

                      regards,

                      Peter

                      1 person found this helpful
                      • 8. Re: Flex Mobile dp
                        Shongrunden Adobe Employee

                        Flex does not currently have a notion of DP.  You could wire up something like that with Capabilities.screenDPI (the exact DPI value) or FlexGlobals.topLevelApplication.runtimeDPI (the bucketed DPI value, either 160, 240, or 320).  But that approach will have its own problems since sizing/positioning things at sub pixel boundaries can lead to rendering artifacts.

                         

                        It sounds like you may want to take advantage of the DPI scaling feature in Flex 4.5: http://opensource.adobe.com/wiki/display/flexsdk/DPI+Auto+Scaling+for+Density+Independent+ Mobile+Apps

                         

                        Set applicationDPI=160 on your application, design your application for a 160dpi device and then let Flex scale everything up to higher DPI devices from there.

                        • 9. Re: Flex Mobile dp
                          Francisc Level 3

                          Thank you.

                           

                          I am already using applicationDPI and trying to make my own calculations based on DPI, but the problem is that not all devices actually have 160, 240 or 320. Most are close to that, but that difference is tricky.

                           

                          It's my old problem with wanting to position elements over a graphic in exact zones which doesn't work for different DPIs properly.

                          • 10. Re: Flex Mobile dp
                            Francisc Level 3

                            Also, many thanks to Peter, I just saw you had posted.

                            • 11. Re: Flex Mobile dp
                              Shongrunden Adobe Employee

                              If you're using applicationDPI=160 then you shouldn't be doing any of your own calculations with DPI, you should just position it where you want while running on a 160 device, then let Flex scale that up.  If that workflow is breaking down for you can you provide a small sample application that demonstrates that?

                              • 12. Re: Flex Mobile dp
                                Francisc Level 3

                                Well, I have a football pitch and I want to place some markers over it that demark player positions.

                                Positioning varies grately on 240 and 320.

                                 

                                I am using values relative to horizontalCenter and verticalCenter. Tried top right bottom left relative ones as well and it failed.

                                 

                                Should I try simple X and Y?

                                 

                                The reason I tried hC and vC is that the background image (football pitch) is resized to fit the screen height and centered if screen width is larger than the proportional scaling of the image width.

                                • 13. Re: Flex Mobile dp
                                  Shongrunden Adobe Employee

                                  I see, so you have resizing caused by two factors: normal width/height resizing because of resizing the application based on screen sizes, and then DPI scaling on top of that.

                                   

                                  In this case it sounds like you may want to calculate your x/y position of these markers based on the size of the field.  So if you want something at the 20 yard line then figure out what pixel is at 20% of the height of the field.  That way the markers are placed correctly on all 160 DPI devices with varying screen sizes (or even just rotating from portrait to landscape on one device).  Then Flex should scale the app appropriately for different DPI buckets from there.

                                   

                                  Would that work?

                                  • 14. Re: Flex Mobile dp
                                    Francisc Level 3

                                    Yup, that's what I am trying to do now, I'm having issues with getting the width and height of the scaled image (not container, but content).

                                    Someone from here suggested multiplying the content width with scaleX of the image container and same for height.

                                     

                                    Thank you once more.

                                    • 15. Re: Flex Mobile dp
                                      Shongrunden Adobe Employee

                                      I don't know if you should be using scaleX/scaleY.  Can't you just have a BitmapImage element with width="100%" height="100%" then you can query that element for its size when calculating the positions of the markers?

                                      • 16. Re: Flex Mobile dp
                                        Francisc Level 3

                                        That's an excellent idea.

                                        • 17. Re: Flex Mobile dp
                                          Francisc Level 3

                                          Steve, seems I have the same problem: the container has the width of the screen when "asked" for its width, while the scaled image has a different one.

                                           

                                          Let's say the image is 600x1000 and the container of the BitmapImage is 500x500.

                                          That would make the image of the BitmapImage that has letterbox scaleMode to be 300x500.

                                           

                                          What I need is the content width and height which are 300 and 500 respectively in my example and eventually the X and Y the content holds in the BitmapImage container.

                                          • 18. Re: Flex Mobile dp
                                            Shongrunden Adobe Employee

                                            Ah I see, I was thinking about stretch not letterbox.  Letterbox makes sense and I think the same approach works with a little extra math.

                                             

                                            I threw this together pretty quickly so it's probably buggy, but is this what you are looking for?

                                             

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

                                                    xmlns:s="library://ns.adobe.com/flex/spark">

                                                <fx:Script>

                                                    <![CDATA[         

                                                        import mx.core.IVisualElement;

                                                        private function positionMarker(bitmapImage:BitmapImage,

                                                                                        marker:IVisualElement):void

                                                        {

                                                            // make sure the bitmapData exists before we do anything

                                                            // (any resizes that happen before the ready event)

                                                            if (!bitmapImage.bitmapData)

                                                                return;

                                             

                                                            // get the size of the original image source

                                                            var sourceWidth:Number = bitmapImage.bitmapData.width;

                                                            var sourceHeight:Number = bitmapImage.bitmapData.height;

                                                            var sourceAspectRatio:Number = sourceWidth / sourceHeight;

                                             

                                                            // get the size of the BitmapImage's parent

                                                            var parentWidth:Number = bitmapImage.parent.width;

                                                            var parentHeight:Number = bitmapImage.parent.height;

                                                            var parentAspectRatio:Number = parentWidth / parentHeight;

                                             

                                                            // start with the adjusted bitmap size being the same as the parent

                                                            var adjustedBitmapWidth:Number = parentWidth;

                                                            var adjustedBitmapHeight:Number = parentHeight;

                                             

                                                            // then if the the parent and source aspect ratios don't match we

                                                            // want either the width or height of the source to equal the parent

                                                            // size, then adjust the other appropriately

                                                            if (sourceAspectRatio > parentAspectRatio)

                                                                adjustedBitmapHeight = parentWidth / sourceAspectRatio;

                                                            else

                                                                adjustedBitmapWidth = parentHeight * sourceAspectRatio;

                                             

                                                            // calculate the excess space that this letterbox calculation created

                                                            var excessLeft:Number = (parentWidth - adjustedBitmapWidth) / 2;

                                                            var excessTop:Number  = (parentHeight - adjustedBitmapHeight) / 2

                                             

                                                            // now that we know the size and position of the letterbox'd bitmap we

                                                            // can calculate where to position the marker relative to that.

                                             

                                                            // let's say at the 33 yard line, so 33% of 100 yards or 33% of

                                                            // the adjusted image width

                                                            var yardLine:Number = 33;

                                                            marker.x = excessLeft + (adjustedBitmapWidth * yardLine / 100)

                                                                                  - (marker.width / 2);

                                                            marker.y = excessTop + (adjustedBitmapHeight / 2) - (marker.height / 2);

                                             

                                                            // we should probably also set the size of the marker to be relative size

                                                            // say 5% of the adjusted image height

                                                            var markerSize:Number = 5;

                                                            marker.width  = adjustedBitmapHeight * (markerSize / 100);

                                                            marker.height = adjustedBitmapHeight * (markerSize / 100);

                                                        }

                                                    ]]>

                                                </fx:Script>

                                             

                                                <s:Group id="fieldGroup" width="100%" height="100%"

                                                         resize="positionMarker(fieldImage, marker)">

                                             

                                                    <s:Rect id="bg" width="100%" height="100%">

                                                        <s:fill>

                                                            <s:SolidColor color="blue" />

                                                        </s:fill>

                                                    </s:Rect>

                                             

                                                    <s:BitmapImage id="fieldImage" source="Field.png" scaleMode="letterbox"

                                                                   ready="positionMarker(fieldImage, marker)"

                                                                   width="100%" height="100%" />

                                             

                                                    <s:Ellipse id="marker" width="10" height="10">

                                                        <s:fill>

                                                            <s:SolidColor color="black" />

                                                        </s:fill>

                                                    </s:Ellipse>

                                                </s:Group>

                                             

                                            </s:View>

                                             

                                            Message was edited by: Shongrunden (fix code formatting)

                                            • 19. Re: Flex Mobile dp
                                              Francisc Level 3

                                              I cannot thank you enough for that.

                                              It is exactly what I need. The code is very simple and clear.