Graphical Tearing/Distortion on Retina Canvas Pictures (Retina mode)?

Targets macOS
1

Hello, on 2016r2 w/ HiDPI/Retina mode enabled, is anyone seeing graphical tearing/distortion/artifacts on their canvas images? Especially when resizing the window in OS X… Whenever it redraws I get glitches. Double buffering does not affect the issue. This is on a 2014 Retina MBP. I did not try on a low resolution MBP yet.

What it’s supposed to look like:

Some of the glitches I see when resizing the window:

Windows low DPI and HiDPI are ok . . . just Retina OS X is where I see this issue.

Am I alone? Am I doing something wrong?

2

Is it on Sierra?

3

Zachary do you mind stating how you went about building out the images and the code to draw them?

Thanks!

4

Are the canvases locked on all sides ? Do they resize as well ?

5

Hello; no sir, this is on El Capitan

[quote=278157:@Mike Cotrone]Zachary do you mind stating how you went about building out the images and the code to draw them?

Thanks![/quote]

[code] g.ForeColor = &c000000
g.DrawRect(0, 0, g.Width, g.Height)

g.drawpicture imgRefreshIcon,(me.width - imgRefreshIcon.width)/2,(me.height - imgRefreshIcon.height)/2,imgRefreshIcon.width,imgRefreshIcon.height,0,0,imgRefreshIcon.width,imgRefreshIcon.height[/code]

Images are PNG files. Since I was working with limited resources I believe I used MSPaint to save the PNG. It may have been a freeware editor like Paint.NET though.

The canvas objects are only locked on two sides. One of them is locked Top-Left, and one is Top-Right. They don’t resize, they only move around when the window form size is manipulated by the user.

I recently switches to Canvases from ImageWells and BevelButtons when updating the project to work with Retina/HiDPI mode

Maybe my code I posted above is incorrect and that is causing the issues? The code there is how I keep the image aligned correctly. Seems to work great on Windows. OS X Retina just giving me headaches.

Thanks all.

6

Zach can you post the image and Ill try for you here.

7

Sure, thanks

This is the file refresh.png

I can’t test much right now as I am not at work, but if you find anything out I will try it out tomorrow and let you know.

Thanks.

8

i can’t download that… Can you link it through tinypic.com or something?
Thanks

9

g.drawpicture imgRefreshIcon,(me.width - imgRefreshIcon.width)/2,(me.height - imgRefreshIcon.height)/2,imgRefreshIcon.width,imgRefreshIcon.height,0,0,imgRefreshIcon.width,imgRefreshIcon.height

I expect what you’re seeing is that
g.drawpicture is specified using
x in points but the icon width is probably pixels so you have a mismatch here (ie/ me.width is in POINTS but imgRefreshIcon.Width is pixels)
y in points but the icon width is probably pixels so you have a mismatch here
width in points but you’re using the icon width which is pixels
height in points but you’re using the icon width which is pixels

and the rest of your args are more than likely in pixels (which on a hi dpi screen will be wrong)

http://blog.xojo.com/2016/04/07/advanced-retinahidpi-bitmapforcaching-and-scalefactorchanged/
http://blog.xojo.com/2016/04/05/xojo-retinahidpi-the-journey-of-a-thousand-pixels/

and also the HiDPI pdf next to the ide in its documentation folder

You’re drawing the whole thing anyways
So try altering that to

10

[quote=278175:@Mike Cotrone]i can’t download that… Can you link it through tinypic.com or something?
Thanks[/quote]
Are you able to right click and save it?

Here it is on tinypic, per your request:

[quote=278176:@Norman Palardy]g.drawpicture imgRefreshIcon,(me.width - imgRefreshIcon.width)/2,(me.height - imgRefreshIcon.height)/2,imgRefreshIcon.width,imgRefreshIcon.height,0,0,imgRefreshIcon.width,imgRefreshIcon.height

I expect what you’re seeing is that
g.drawpicture is specified using
x in points but the icon width is probably pixels so you have a mismatch here (ie/ me.width is in POINTS but imgRefreshIcon.Width is pixels)
y in points but the icon width is probably pixels so you have a mismatch here
width in points but you’re using the icon width which is pixels
height in points but you’re using the icon width which is pixels

and the rest of your args are more than likely in pixels (which on a hi dpi screen will be wrong)

http://blog.xojo.com/2016/04/07/advanced-retinahidpi-bitmapforcaching-and-scalefactorchanged/
http://blog.xojo.com/2016/04/05/xojo-retinahidpi-the-journey-of-a-thousand-pixels/

and also the HiDPI pdf next to the ide in its documentation folder

You’re drawing the whole thing anyways
So try altering that to[/quote]

OK I will try to look at it tomorrow when I have access to a Mac. Do you know why it would work on HiDPI Windows (3K screen) and not Retina with that code? Theoretically shouldn’t it fail on both platforms equally?

I have to be honest here, I am really bad with graphics and still a novice Xojo programmer. I will try to fumble my way through this :slight_smile:

Mac users of my project are in the minority, so right now I am just making them deal with using the Retina version of my project with glitchy graphics :slight_smile:

I will reference the HiDPI PDF, thanks.

11

Yikes… Been working with Retina since 2012 and I don’t recall ever coming across an issue like this with a Xojo made application. Do you get the same issue in other applications?

Is this not the same as:

g.drawpicture imgRefreshIcon, ( g.width - imgRefreshIcon.width ) / 2, ( g.height - imgRefreshIcon.height ) / 2
12

well not quite

g.width is SCREEN POINTS
imgRefreshIcon.Width is likely PIXELS

so scale factors come into play

Probably something more like

g.drawpicture imgRefreshIcon, ( g.width - (imgRefreshIcon.width/g.scaleX) ) / 2, ( g.height - (imgRefreshIcon.height/g.scaleY) ) / 2

since a 144 pixel wide image on a 2x display will appears as if it were 72 pixels if you dont scale it up

OR you draw everything “scaled up” by the scale factors so they appear the same user perceived size

Its all a lot easier if points = pixels and when they dont you have to decide which you want to do

13

Wait… something creeping forwards from the darkest depths of my brain’s fusion drive…

Do you have “eraseBackgound” checked on the canvas? Does toggling this checkbox make any difference?

14

As far as I can see, I agree with what Normal already pointed out. The OP should read
the blogs regarding Retina/HiDPI which are fundamental to understand how HiDPI works, especially when upgrading older project or using the new Xojo framework version.

#edit:
Do you have any other code that modifies the “g” before painting your image ?

Not sure if this was already mentioned but OS x you should use
Transparent = true
EraseBackground = false
DoubleBuff = false

for the Canvas settings

15

If the picture is static (no dynamic scaling), it is way simpler in HiDPI to use an Image Set and the Backdrop property.

16

anyone know what the pixel depth on that image is? The OP screenshots seem to indicate that it might be 1-bit or a ping with a one color palette.

17

An example project or even the full app would be useful. It’s hard to say for certain what’s going on without being able to take a look at the image files and what the program is trying to do.

18

Sorry for such a slow response!

Here is a test project:

https://drive.google.com/open?id=0B34zblcKiIEMZl9KSXc3aktTZzg

I am sure the code is just wrong, like Norman said.

Tearing occurs OS X only (Retina) and not Windows. Source PNG included too

19

I overcame this issue by simply using “Backdrop” on canvas to display the static images. Works great on all platforms now.

20

Exactly what I suggested.