Hi, thank you for your answer, but that is not the same thing.
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.
1 person found this helpful
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?
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.
Jeffrey, I am using X and Y coordinates and am having problems with placement corrections Flex makes for different DPI settings.
1 person found this helpful
It has something under-the-hood (as this is complicated), see explanatory article with reasoning behind current resolution-independance solutions here:
and e.g. that blog post:
which has direct reference to current docs:
(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.
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.
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.
Also, many thanks to Peter, I just saw you had posted.
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?
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.
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?
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.
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?
That's an excellent idea.
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.
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?
private function positionMarker(bitmapImage:BitmapImage,
// make sure the bitmapData exists before we do anything
// (any resizes that happen before the ready event)
// 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;
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);
<s:Group id="fieldGroup" width="100%" height="100%"
<s:Rect id="bg" width="100%" height="100%">
<s:SolidColor color="blue" />
<s:BitmapImage id="fieldImage" source="Field.png" scaleMode="letterbox"
width="100%" height="100%" />
<s:Ellipse id="marker" width="10" height="10">
<s:SolidColor color="black" />
Message was edited by: Shongrunden (fix code formatting)
Field.png 54.5 K
I cannot thank you enough for that.
It is exactly what I need. The code is very simple and clear.