I’m creating a custom canvas progress bar using a 1x25 pixel default image that I stretch horizontally according to the value of the progress bar.
For Retina, would the default image be 1x50 pixels or 2x50 pixels?
2x50. Both dimensions must be multiplied.
If you’re stretching it I’d expect 1x50 to work the same. You can try them both and see if there’s a difference.
But if you’re creating an image set with both resolutions it has to be 2x50 to maintain aspect ratio.
Ok. Thanks. I guess I would need to test it out to see what happens in both scenarios.
I intend to create an image set and haven’t researched the new system thoroughly yet but know there’s apparently a difference between pic.width and pic.graphics.width.
I think at the moment I determine the width of the stretched progress bar image to go by pic.width value but would this still work for the new system and retina or would I have to go by pic.graphics.width?
So for instance, say my progress bar canvas is 1000 pixels wide in the IDE and 1000 is the maximum value and I need to show 50% progress, I would code it so I stretch the progress bar image to 500 wide etc. Would Xojo automatically scale it correctly for retina or would I have to scale it x 2?
an image that is 1x50 [myimage@2x.png] should be fine…
in Retina mode each point is 2x2 pixels (hence the usual need to “double” things)
This is the whole reason behind “retina”…
A NON-RETINA display is 1 point = 1 pixel [1x1]
a RETINA display is 1 point = 4 pixels [2x2] [and then you have the iphone 6+ which is 1 point = 9 pixels [3x3]
So a @2x image the has an ODD number dimension, is perfectly acceptable… and EXPECTED to be acceptable
You need to thing in POINTS vs PIXELS , where before it didn’t matter as they were “the same”
and as mentioned before these are GRAPHIC/VIDEO “points”, not typographical “points”
If you want to use Images and you want the Xojo framework to automatically choose the right picture for you and you don’t want to have to always specify the width and height of the things you are drawing, I strongly urge you to use the system the way it was designed. In this case, that means putting a 1x25 into the 1x spot and a 2x50 version into the 2x spot. Doing it this way means that you can simply use code like this:
g.DrawPicture myPic,x,yWe specifically designed this so you can basically leave your drawing code the way it was in the past and just add a 2x picture.
Just remember that the destination coordinates (the first four parameters) are in Graphics coordinates (points) and that the source coordinates (the last four parameters) are in picture coordinates (pixels). In the past this didn’t matter because the coordinate systems were the same. See my blog post about the process of updating the IDE for retina for more info. http://blog.xojo.com/a-journey-of-a-thousand-pixels
Thanks, Dave for the explanation and Greg for the advice and blog post. I think I will need to experiment to see it in practice to fully understand. Here’s my current code where width and height are the values of the canvas progress bar class:
// Create stretched gradiated pattern
p = new Picture(round(value/maximum * Width), Height, Screen(0).Depth)
p.graphics.DrawPicture progressbarpattern, 0, 0, p.Width, p.Height, 0, 0, progressbarpattern.Width, progressbarpattern.Height
// Draw progress bar picture to canvas
Graphics.DrawPicture p, 0, 0Note: This also hasn’t been updated yet to call Invalidate and handle in the Paint event as per the latest recommendations.
Because I haven’t upgraded yet to the latest Xojo version I can’t test this out but I’m hoping it will work for Retina and an image set of “progressbarpattern” using the same code and either 1x50 or 2x50 pixel retina @2x image etc,
Just FYI. We’ve noticed under certain circumstances on Linux Only that stretching like this can fail when the width exceeds 10x the width of the original.
Thanks for the heads up.
To clarify: am I correct in saying that if I create a picture object based on the dimensions of a 500 width x 25 height canvas, in standard resolution, the pic.width = 500 and the pic.graphics.width = 500 … but in retina mode, the pic.width = 500 but the pic.graphics.width = 1000?
Canvas (or picture object) size : 500 x 25 (POINTS)
Graphic Image (png/jpg etc) would be 1000 x 50 (PIXELS) for a RETINA display (@2x)
but would need to be 500 x 50 (PIXELS) for a NON-RETINA display (@1x)
remember, RETINA point is 2x2 pixels, while NON-Retina point is same as pixel (1x1)
Dave,
I think you meant to type… @1x (non-retina version) should be 500 x 25, (not 500 x 50).
Otherwise the height would be doubled, whilst the width stayed the same.
1000 x 50 Retina
500 x 25 Non-Retina.
[quote=269437:@Richard Summers]Dave,
I think you meant to type… @1x (non-retina version) should be 500 x 25, (not 500 x 50).
Otherwise the height would be doubled, whilst the width stayed the same.
1000 x 50 Retina
500 x 25 Non-Retina.[/quote]
you are correct… dang cut/paste 
[quote=269401:@Denise Adams]Thanks for the heads up.
To clarify: am I correct in saying that if I create a picture object based on the dimensions of a 500 width x 25 height canvas, in standard resolution, the pic.width = 500 and the pic.graphics.width = 500 … but in retina mode, the pic.width = 500 but the pic.graphics.width = 1000?[/quote]
You’ve got those backwards. pic.width is 1000, pic.graphics.width = 500.
Thanks for the clarification Greg. It’s hard to get your head around it and how the changes will affect your existing code while it’s just theory and numbers in your head. I guess I won’t really be able to fully comprehend how it works until I upgrade to the latest framework and see it all in action in a live retina and non-retina environment.
I purchased Sam’s Retina Kit a while ago but haven’t actually used it yet. Do the new framework changes make this redundant or can they work together? I will need to handle this cross-platform for both Mac and Windows so I suspect it will be easier to use the new framework in place of the Retina Kit but wondered if there were any advantages to using the Kit on Mac instead?
If you haven’t started using RetinaKit, I suggest using Xojo first. You’ll automatically get Windows HiDPI support when it’s out of Beta (it’s not really ready in 2016r1). That said, I haven’t used RetinaKit myself, so I don’t know if there are any features you’ll still need. You’d have to talk to Sam about compatibility.
Just to be clear, you don’t need to be using the new framework to take advantage of Retina. I suggest just flipping the switch and running your app to start.
Thanks, Greg. I think I’ll take your advice and ask Sam also.