Handing screen sizes for roImageCanvas

Archived
1

Hi,

I’ve recently started learning brightscript/roku development and looking for a little advice about handling screen sizes when using roImageCanvas. Using an roImageCanvas, I’m simply displaying some text and images. I’ve positioned these elements via setLayer() on the screen perfectly for HDTV settings. I noticed that my roImageCanvas screen doesn’t look so great when the screen resolution is changed to 4:3 via Roku settings. When I do change my Roku video settings “GetDisplayType()” returns ‘HDTV’, ‘4:3 standard’ and ‘16:9 anamorphic’ for the 4 possible settings. So my question.. Is there a best way to reduce the size of the “targetRect” attributes I’ve set when calling setLayer() on a roImageCanvas from 16:9 to 4:3? Is there a standard % reduction for x and y of the targetRect? Heck.. is there a way to resize the whole canvas for different resolutions (couldn’t be that easy)?

I’m guessing (maybe someone can confirm) best practices is to simply detect the screen size and have different “targetRect” attribute settings for both 4:3 and 16:9? After looking at the documentation again this morning seems like GetDisplayAspectRatio() might be a better approach to detect screen size than GetDisplayType(), too.

Thanks,

-Z

2

Z,
Although Roku has specific recommended pixels, I use a simple calculation that is only off by a couple pixels. Here’s what I use:


canvas = CreateObject("roImageCanvas")
cx = int(canvas.getwidth() * 0.1)
cy = int(canvas.getheight() * 0.1)
cw = int(canvas.getwidth() * 0.8)
ch = int(canvas.getheight() * 0.8)

That gives a 10% margin on all sides. cx/cy is my starting point. cw/ch is the max width/height. If you are doing a more complex layout, you can still use those vars as a base to make sure you are within your 10% margin.

3

I use the following, where rect is { x, y, w, h }, point is { x, y }, and size is { w, h }.

Sub HDRectToSDRect(rect As Object)
	wMultiplier = 720 / 1280
	hMultiplier = 480 / 720
	
	If rect.x <> invalid Then
		rect.x = Int(rect.x * wMultiplier + .5)
		rect.x = IIf(rect.x < 1, 1, rect.x)
	End If
	If rect.y <> invalid Then
		rect.y = Int(rect.y * hMultiplier + .5)
		rect.y = IIf(rect.y < 1, 1, rect.y)
	End If
	If rect.w <> invalid Then
		rect.w = Int(rect.w * wMultiplier + .5)
		rect.w = IIf(rect.w < 1, 1, rect.w)
	End If
	If rect.h <> invalid Then
		rect.h = Int(rect.h * hMultiplier + .5)
		rect.h = IIf(rect.h < 1, 1, rect.h)
	End If
End Sub

Sub HDPointToSDPoint(point As Object)
	HDRectToSDRect(point)
End Sub

Sub HDSizeToSDSize(size As Object)
	HDRectToSDRect(size)
End Sub

Function IIf(Condition, Result1, Result2) As Dynamic
	If Condition Then
		Return Result1
	Else
		Return Result2
	End If
End Function
4

For the little bit I ever use roimagecanvas, I take a screenshot with a roku1 running the app with my graphic loaded, and then use corel to place objects on top where I need them to be noting the x and y coordinates, width and height of the object. I have a roku1 permanently in 4:3 mode, and a roku1 permanently in 720p mode. If I was dealing with a lot of separate objects, I suppose having it do some math would be ‘smart’. :slightly_smiling_face:

btw - the mode (480 or 720) appears to be important - the anamorphic doesn’t seem to matter as it seems to stretch the canvas to fit.

5

“destruk” wrote:
btw - the mode (480 or 720) appears to be important - the anamorphic doesn’t seem to matter as it seems to stretch the canvas to fit.
Assuming you actually meant “4:3 standard” vs “16:9 anamorphic”, you’re right that it doesn’t matter with regards to the canvas size (it’s always 720x480), but you should consider the implications of how images will get stretched vertically in 4:3 mode (or squashed horizontally, if you prefer), and adjust accordingly if it’s important (e.g., square album covers will display as tall rectangles at 4:3). For most UI elements, it’s probably not important, but for something that has a defined aspect ratio, it’s worth considering.

6

Thanks for the replies.

Finally got back to a little roku dev tonight. Dropped in TheEndless’s HDRectToSDRect() and the results were awesome. Canvas items are adjusted perfectly at 4:3. Well done. Big thanks!