High dpi images.

[quote=268988:@Marco Hof]So the Metadata is nothing more than some additional information. You can set it to 72 PPI, 150 PPI or 100000 PPI but that’s just the Metadata. The Image itself stays the same.
What you do with this PPI information is up to you. Either let Xojo handle things for you or override/ignore it.[/quote]

Actually, it seems that Xojo does care about the picture dpi. At least as saved from Photoshop. Not long ago as I was HiDPIfying Fonts Manager, I used three 72 dpi pictures. Xojo picked the 2x picture for 72 dpi and it was cut off. Then I think it is Greg who stressed the dpi setting. After I made 1x at 72 dpi, then 2x at 144 dpi and 3x at 216 dpi everything was cool.

I create all images in photoshop at 300dpi.
This way they can be used for print, web and Xojo apps, without me having to remake them.

I now have no need to make 2 or 3 different sized images for every canvas.
If I need to display an image in a 500 x 500 px canvas, I just create ONE image (500 x 500, @300dpi) and BOOM - job done.
Looks perfectly crisp and clear on both retina and non-retina screens :slight_smile:

The results speak for themselves.

[quote=268998:@Richard Summers]I create all images in photoshop at 300dpi.
This way they can be used for print, web and Xojo apps, without me having to remake them.

I now have no need to make 2 or 3 different sized images for every canvas.
If I need to display an image in a 500 x 500 px canvas, I just create ONE image (500 x 500, @300dpi) and BOOM - job done.
Looks perfectly crisp and clear on both retina and non-retina screens :slight_smile:

The results speak for themselves.[/quote]
Well, like I said, that’s one way to go. Just keep in mind that your apps will require a lot more memory when displaying pictures, they will take longer to draw because they have to be scaled, and if you’re doing iOS apps, you may get dinged by the App Store reviewers. When working on web projects, remember that the browser will need to download the whole image and that takes time and that it also hurts the performance of the web app itself.

To be clear Canvas dimensions are in points. So that’s a 500x500 point Canvas. On a non-retina screen the canvas is 500x500 pixels, on a 2x retina screen the canvas is 1000x1000 pixels and on a 3x retina screen the canvas is 1500x1500 pixels. The pixel size differs but on all 3 the canvas is 500x500 points.

For this to work the 500x500 of the image must be in points. To get that size in points at 300dpi the image is around 2083x2083 pixels (assuming 72dpi is where 1pixel=1point).

You say “for this to work”, but it DOES work :slight_smile:

I created a 500 x 500 pixel image @300dpi.
I then created a 500 x 500 canvas in Xojo, and dragged the image in.

It looks perfect on both types of screen, so the image does not need to be 2083 x 2083 :slight_smile:

Yes, I’m agreeing that it works, but just saying that “500x500” must be points, not pixels. If it were 500x500 pixels then it would be blurry on a retina screen drawn to fill a 500x500 point canvas.

Unless you’re drawing the image into a smaller point size on retina. Does your “500x500” image fill the 500x500 point canvas in retina mode?

[quote=269028:@Will Shank]Yes, I’m agreeing that it works, but just saying that “500x500” must be points, not pixels. If it were 500x500 pixels then it would be blurry on a retina screen drawn to fill a 500x500 point canvas.

Unless you’re drawing the image into a smaller point size on retina. Does your “500x500” image fill the 500x500 point canvas in retina mode?[/quote]
All of this assumes that the image is being drawn 1:1. I suspect Richard is drawing these images much smaller than 500x500 pixels when he finally uses them.

[quote=268832:@Richard Summers]// CENTER IMAGE IN CANVAS
g.drawpicture CodeSnippets,(me.width - CodeSnippets.width)/2,(me.height - CodeSnippets.height)/2,CodeSnippets.width,CodeSnippets.height,0,0,CodeSnippets.width,CodeSnippets.height[/quote]

Does that not draw at 72 dpi anyway ?

OK, I will explain it fully :slight_smile:

  1. I drag a canvas in my app and in the inspector, set its width and height to 500 x 500.
  2. I then create an image 500 pixels by 500 pixels @300 dpi in Photoshop.
  3. I drag this image into the inspector.
  4. I set the canvas’ background image to the image I just made in photoshop.

BINGO - my canvas is filled with my image and looks perfect on all screens.
I have no idea how it works, or why it works, I just know that its positioned correctly, and looks perfectly crisp on both screens.

:slight_smile:

Has HiDPI been turned on at this point or no?

Can you post one of these photoshop images so I can try? I just don’t see how a 500x500 pixel image will look crisp in retina in a 500x500 point canvas.

[quote=269078:@Will Shank]Has HiDPI been turned on at this point or no?

Can you post one of these photoshop images so I can try? I just don’t see how a 500x500 pixel image will look crisp in retina in a 500x500 point canvas.[/quote]

Especially since DrawPicture is in Points and not in Pixels.

To correctly support Retina, it would take changing g.ScaleX and g.ScaleY, if I am not mistaken.

Yes, HiDPI is turned on, but I don’t have any other versions in the drop spots for the 2x or 3x areas in the image set.
Are you saying that my app is displaying my image at 72dpi, instead of 300dpi which it was created at??
If so, then 72dpi @1x images look perfectly fine on Retina screens.

I created a 300dpi image with Xojo but when I drag it into the navigator the dpi is ignored. It’s placed in the 1x position at the pixel size, 1:1, 72dpi. Going to retina it’s definitely blurry. But maybe there’s something special about these photoshop files, or maybe you need your eyes checked :slight_smile: I know I do and get close to the screen to see the fuzz.

I have looked at my retina screen from all different angles; up close; far away and it always looks mega crisp.
Oh well, not to worry. I’m happy with my app, and at the end of the day - that is all that matters :slight_smile:

Thanks everyone for the discussion, it was interesting :slight_smile:

Well, I’d like to see one of these photoshop images because if it works the way you say then I’d like to exploit it too :slight_smile:

I will make you one tomorrow, as it is 11pm here in the UK :slight_smile:
If you then still say it looks blurry on Retina - I will go out and buy myself some bifocals :slight_smile:

Thanks (^_^)/

Why does your emoticon have 1 ear?
Or do I need glasses :slight_smile:

The way this step is done is very important. If you’re creating a 500x500 image @300dpi in the same dialog, that’s one thing. But if you create a 500x500 pixel image and then change the dpi to 300, with scaling turned on, that’s a whole other ball of wax. That’s where you’d end up with a picture that’s 2083x2083 pixels and I’d completely understand your results. Keep in mind though… If this is what you’re doing, an uncompressed image of those dimensions could take as much as 36GB of RAM.

For a definitive answer, you could open it in Preview on a Mac and show the inspector. It’ll tell you exactly what’s going on.

I scanned one of my old business card yesterday at 72, 96 and 300 dpi and they appears at different sizes on my Retina screen (I do not took time to check on my HiDPI Windows 10 laptop) AND i am totally lost on the subject.

That said, if Richard found a working solution, this is OK for me.

BTW: it seems that setting Pict.VerticalReolution and Pict.HorizontalResolution is useless, Xojo 2016r1.1 does it automatically (that is what the debugger displays: the dpi I used to scan my business card).