[TIMOB-2819] iOS - loading a @2x image with hires set to true does not scale to imageView

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2011-04-17T02:00:10.000+0000
Affected Version/s	n/a
Fix Version/s	Release 1.6.0 M07
Components	iOS
Labels	2x, image, ios, regression, release-1.6.0, retina
Reporter	Thomas Huelbert
Assignee	Stephen Tramer
Created	2011-04-15T03:30:21.000+0000
Updated	2011-04-17T02:00:10.000+0000

Description

notes from, #1543 (#2805 has also been logged against 2X image scaling). Works as expected in 1.5.1 [INFO] Titanium SDK version: 1.6.0 (01/12/11 09:38 db09d1e)

"The 2x image loaded, but it seems that the image scaling code was not modified to take this into account. 2x images appear visually to be half the size they should be. Example:
I have a 60x60 Ti.UI.ImageView. On a iPhone 3, my remote image loads, and is scaled to fill the 60x60 space.
However, on an iPhone 4, the high-res image seems to have scaled to only take up half of the space. I believe the image scaled to literally 60x60px, instead of 60x60 points on the screen (aka 120x120px).
My code:

// left image
var updateImage = Titanium.UI.createImageView({
    defaultImage:'images/loading_60.png',
    image:thisUpdate.updateCauseIcon,
    top:5,
    left:10,
    width:60,
    height:60
});
// iPhone 4 display
if (Titanium.Platform.displayCaps.dpi == 320) {
    updateImage.image = thisUpdate.updateCauseIcon2x;
    updateImage.hires = true;
}

Comments

Blain Hamon 2011-04-15

Going to have to dig deeper on that. Do we have the sample images so I can understand the context? Is there an images/loading_60@2x.png that's being shrunk?
MelloMike 2011-04-15

Hi Blain, this only happens with remote images, not images in the resources folder with @2x.png. So for example:

and UI.Image component with the following properties

imageComponent.image = http://example.com/image200x200.jpg">http://example.com/image200x200.jpg;
imageComponent.width = 200;
imageComponent.height = 200;
imageComponent.hires = true;

As you can see the Image being pulled from the web is 200x200 .. and the image component in the app is 200x200. However when the image loads into the component it'll be scaled down 50% to 100x100. The bounds of the imageComponent is still 200x200.

imageComponent
----------------- |-------- | | | | | | | | | | |-------- | | | | | -----------------
Blain Hamon 2011-04-15

You do realize that the hires property was made explicitly to treat the image as a hi-res image, and like @2x local images, show the image at 50% where one pixel in the graphic maps to one physical pixel onscreen?

That is, imageComponent.image MUST 400 pixels by 400 pixels in order to fill a logical 200*200?
MelloMike 2011-04-15

Hi Blain, sorry I gave you that example wrong.

if the imageComponent.width and height are both 100 ... and the image is 200x200 ... the image will still be scaled 50% .. so the image will actually be 50x50 inside the imageComponent

Sorry for the mixup.
Jeff Haynie 2011-04-15

(from [955e9a133c8613d76c8df7fdff28716832268175]) [#2819 state:fixed-in-qa] There's a more elegant way, but this works for now. https://github.com/appcelerator/titanium_mobile/commit/955e9a133c8613d76c8df7fdff28716832268175"> https://github.com/appcelerator/titanium_mobile/commit/955e9a133c86...
Shannon 2011-04-15
jhaynie: I just tried with build "Jan 25 2011 13:35 r1f1dd51d", and I'm not finding any change. Yes, I tried emptying out the build/iphone directory and doing a clean build. In fact, it looks like a step backwards, as now my defaultImage is displaying at half the correct size. Here's a code example with URL for you to test:
```
   var beerImage = Titanium.UI.createImageView({
       defaultImage:'images/loading_60.png',
       image:'http://beerimages.pintley.com/2948/PietraVerre25cl_mobileThumb.png',
       width:60,
       height:60
   });
   // iPhone 4 display
   if (Titanium.Platform.displayCaps.dpi == 320) {
       beerImage.image = 'http://beerimages.pintley.com/2948/PietraVerre25cl_web.png';
       beerImage.hires = true;
   }
   myView.add(beerImage);
   
```
Note that the hires image is actually bigger than needed, it's 141x141, not 120x120 as you might expect.
Thomas Huelbert 2011-04-15

hey Shannon, please try a more recent pull.

closing against [INFO] Titanium SDK version: 1.6.0 (02/02/11 07:59 a632082) ipod 4GT (4.2.1) and 4.1
Shannon 2011-04-15

PERFECT! Thanks for the fast work on this one guys, it was a real showstopper for my app!
hamii 2011-04-15

How about the coverflow object? How can we set "hires" on it? I certainly can see checking for the higher dpi, but I don't see anyway to tell the object that the images are "hires".

Love to hear your thoughts.
Stephen Tramer 2011-04-15

Coverflow does not support remote hires images.
hamii 2011-04-15

How unfortunate. It is a great control and is of little value for the Retna display devices. Would be a great enhancement to have.

JSON Source