Resolution independence and button icons

[Adrian]

Hi all,

apologies if this is covered somewhere: I can't find it.

Although 6.5 is currently only at developer preview, it won't be long coming and I'm sure there's lots of us eager to use Resolution Independence (amongst other things). I've read the newsletter and other coverage, but being a simple soul, I don't follow exactly how it is to be used for images.

Has anyone done work on this and can share some steps on how to deal with images? Specifically, I'm currently thinking about button icons (on iOS) and how one would define the different images/densities to be used. When defining the properties of a button, of course, one can only select/enter a numeric image reference (it would be great to be able to specify an image filename, as one does in script).

Here's hoping someone can lift the fog for me.

Cheers,

Adrian

[Klaus]

Hi Adrian,

sorry for chiming in a bit late, but just yesterday I played a bit with LC 6.5rc6
and found the mechanism pretty straightforward

1. This will ONLY work with referenced images!
2. To make the automatic image substituition work, you need for iOS two versions of the image:
a. a small one that you will use for the layout for a NON retina display: "image.jpg"
b. a HI RES version (double size) of that image and name it like the LOW RES image named: "image@2x.jpg"
Just add @2x after the name and before the suffix

That's all!
Livecode will automatically use the HI-RES image on RETINA devices!
This is way cool, I think!

See this little screenshot from my Mac, I first forgot to add the x also in the filename as you see
After adding that, everything worked as exspected!



Best

Klaus

[Adrian]

Thanks Klaus. I get it for images, but not button icons?

[Klaus]

Hi Adrian,

well, what is a button's "ICON"? The ID of an -> image
Or what do you mean?


Best

Klaus

[Klaus]

Ah, now I get it, took a while

Yes sure, if you use the ID of any referenced image in your button,
the icon will also change to the hi-res version, if present!

Livecode "simply" changes the FILENAME of your image(s)!


Best

Klaus

[Adrian]

Ah, thanks Klaus. Now that really is clever

Cheers,

Adrian

[Klaus]

That's just like Apple does it

[Adrian]

OK, simple me still can't seem to get it!

I have two images imported as (image) controls. I have named the images (i.e. the "name" property): imagename.png and imagename@2x.png

I have a button which references the imagename.png image number as its icon

The higher resolution one doesn't show up in the iOS simulator using a high res device. The same icon appears at all resolutions.

So I'm assuming that this resolution independence business only works with images, where the image files are defined in the "Copy files" area - and doesn't work with buttons (using images imported (as controls) as their icon). Or put another way, we can't get higher resolution button icons on high-res devices; we have to use Image areas instead of buttons.

Does that sound correct? (It's not the end of the world if it is, but it means I have to change my apps from using buttons).

Cheers,

Adrian

[Klaus]

Hi Adrian,

NOPE!

This works with button icons, I tested this here a couple of times!

here is how:
1. you have two (2) external images:
image.jpg
image@2x.jpg

2. You create a stack in low res (1024*768 for iPad 1)

3. This is the important part:
You only create ONE (1) image object for the LOW RES image and set its filename to image.jpg

4. Use THAT image ID for the icon in your button

5. That's it, check the stack in the (Retina) simulator and you will see.



Best

Klaus

[Adrian]

OK, imagine I'm an idiot (because I clearly am )

I have attached a stack. It has two files in Copy files, with the same image filename, except one has "@2x" at the end.

I have imported the lower res image (it's in the bottom right of the stack) and created a button and used that image's ID.

Testing on iPad, then on iPad with retina shows the same (low res) image each time.

So, what am I doing wrong here? (I told you I was an idiot).

Thanks for your patience, Klaus.

[Adrian]

This may make it a bit clearer: the one attached here has an Image to the right of the button. You can see the image works fine, but not the button.

Cheers,

Adrian

[Klaus]

Hi Adrian,

I have imported the lower res image ...

I don't think that I did NOT mention "REFERENCED" and "FILENAME" a couple of times here
See e.g. item #1 of my first posting...

In other words, that does NOT work with imported/internal images!


Best

Klaus

[Adrian]

OK, then my question becomes: how do you specify an external image file for a button icon? As far as I can see, one has to specify the ID of an image, no?

[Klaus]

Yes, you need to set the image id, but it does not matter if that image has been imported or is referenced = its FILENAME set!
Never used referenced images before?

Do this:
1. Create an image
2. In the inspector ENTER a filename*** or click the little FOLDER button to select any image file from your disk.

***This is what I did!
I have my 2 test images:
image.jpg
image@2x.jpg
in the same folder as my stack, so I can just enter the image name here and Livecode will find it.

See screenshot...

[Adrian]

Yes, I'm OK with images, as I showed in the second stack.

But there's nowhere to specify a filename on a button icon ???