zantis
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-30-2012
08:01 AM
Handing screen sizes for roImageCanvas
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
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
5 REPLIES 5
YungBlood
Streaming Star
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-30-2012
08:53 AM
Re: Handing screen sizes for roImageCanvas
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:
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.
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.
YungBlood
Bringing more fun to Roku!
Bringing more fun to Roku!

TheEndless
Channel Surfer
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-30-2012
11:50 AM
Re: Handing screen sizes for roImageCanvas
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
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
destruk
Streaming Star
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-30-2012
01:03 PM
Re: Handing screen sizes for roImageCanvas
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'. 🙂
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.
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.

TheEndless
Channel Surfer
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-30-2012
01:23 PM
Re: Handing screen sizes for roImageCanvas
"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.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
zantis
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-31-2012
04:41 PM
Re: Handing screen sizes for roImageCanvas
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!
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!