Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Highlighted
migmigmig
Level 7

What are the required sizes for theme images?

So I'm now going through the theme options.

There's *lots* of images that can be specified, but nowhere does it suggest what the correct sizes are supposed to be (if I guess at them, I'll put it in parentheses):

OverhangSliceSD (720x480)
OverhangPrimaryLogoSD (Any)
OverhangSecondaryLogoSD (Any)
OverhangSliceHD (1280x720)
OverhangPrimaryLogoHD (Any)
OverhangSecondaryLogoHD (Any)
FilterBannerSliceSD (720xAny)
FilterBannerActiveSD (???xAny)
FilterBannerInactiveSD (???xAny)
FilterBannerSliceSD (1280xAny)
FilterBannerActiveSD (???xAny)
FilterBannerInactiveSD (???xAny)
etc...

(There's plenty of GridScreen images, too, but I'm too lazy to type them out here)
0 Kudos
9 Replies
Highlighted
destruk
Level 10

Re: What are the required sizes for theme images?

0 Kudos
Highlighted
migmigmig
Level 7

Re: What are the required sizes for theme images?

Thanks for the link, but that's not really what I need.

Mostly that's talking about all the various disparate thumbnail image sizes --

What I REALLY need is the "FilterBannerXXXXXX" image sizes, specifically the HD and SD widths for the active and inactive buttons (I took a guess and it's obviously wrong and equally obviously looking for a specific width).
0 Kudos
Highlighted
destruk
Level 10

Re: What are the required sizes for theme images?

It mentions overhang sizes and filter sizing as well as telling you about notes to keep them within the boundaries for SD and HD so they can be seen. I'm sorry it didn't give you what you are requesting.

Overhang Art: (The stripe at the top of all your screens in your channel)
Note that Overhangs are designed in two different ways. Some channels
will have their logos part of the Overhang slice image and not have separate
logos displayed over the slice backround. Other channels will use the
primary and/or secondary logos and their offsets to display logos on top of
the background slice. The first option gives the artist complete control of
the layout. The second option requires the developer to code offsets in the
script but gives the flexibility of programatically displaying different
icons over the background slice.

OverhangSliceSD
Overhang width SD: 720
suggested maximum Overhang height SD: 83
enforced maximum Overhang height SD: 92

OverhangSliceHD
Overhang width HD: 1280
suggested maximum Overhang height HD: 124
enforced maximum Overhang height HD: 138

Between the suggested maximum height and the enforced maximum height
is a transition area in which graphic artists should alpha blend their
overhang art into the screen background. The transition area will
be overlayed by the Filter Banner, Modal Dialogs, and other native
UI widgets. Therefore the transition area of the overhang will not
always be visible. Note that the Overhang width pattern will be
repeated if it is not full width.
A solid Overhang can be created with a width of 1 pixel and the same
pixel will be extended to 720 or 1280 width depending on SD or HD.

OverhangPrimaryLogoSD
OverhangSecondaryLogoSD
OverhangPrimaryLogoHD
OverhangSecondaryLogoHD
If you've chosen to use these logos, they must fit nicely
in the Overhang enforced max dimensions.
0 Kudos
Highlighted
TheEndless
Level 7

Re: What are the required sizes for theme images?

Not definitive, but I use the following for the filter banner...

filter banner slice HD: 1x70
filter button HD: 375x54
filter banner slice SD: 1x47
filter button SD: 210x37
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)
0 Kudos
migmigmig
Level 7

Re: What are the required sizes for theme images?

Thanks, I'll try that!
0 Kudos
Highlighted
ionatan
Level 7

Re: What are the required sizes for theme images?

Related to this:
"destruk" wrote:
....The second option requires the developer to code offsets in the
script but gives the flexibility of programatically displaying different
icons over the background slice.


Is it possible to change logo when "page" is changed. Let's say a user is in main page of the channel, and then he goes in a specific category. Can I display there another logo?

And where I can use Overhang Secondary Logo?
0 Kudos
Highlighted
destruk
Level 10

Re: What are the required sizes for theme images?

You could, however then you need to set up an array to track which screens have which logo, so when a screen closes you can change the logos back to what they were prior, and whenever the logos are changed, it flickers the default blue theme until it can display the logo you want. To avoid that I suppose you could use a single roImageCanvas for all 'screens' and manually program the logo graphics, positioning, background, and item displays. Or just ignore the changeover sequence.
Maybe some day Roku will have the capability of having more than a single user-defined theme. You can use the overhang secondary logo wherever you like. Just if one is set, it'll be displayed. So if you define the primary logo AND the secondary logo, both will be drawn on the screen. If you just have the secondary defined, then the secondary will be displayed - if you follow.

What we've done before is monitor the close event for the screen on top, when the screen is closed it refers to the array and subtracts 1 from the array index and resets the theme with the saved logo name. When a new screen opens we grab the new logo name from the xml, push the name into the array (to increase it by one), and reset the theme again. There might be a better way, but that worked for our purposes.
0 Kudos
Highlighted
roquoonewbie
Level 9

Re: What are the required sizes for theme images?

Is there some trick for getting the secondary overhang logo to show? I can't for the life of me get it to appear. Very simple function is below. Primary shows. Secondary does not.


Sub initTheme()

app = CreateObject("roAppManager")
theme = CreateObject("roAssociativeArray")

theme.OverhangPrimaryLogoOffsetHD_X = "123"
theme.OverhangPrimaryLogoOffsetHD_Y = "48"
theme.OverhangPrimaryLogoHD = "pkg:/images/Logo_Overhang_Roku_SDK_HD.png"

theme.OverhangSecondaryLogoOffsetHD_X = "373"
theme.OverhangSecondaryLogoOffsetHD_Y = "48"
theme.OverhangSecondaryLogoHD = "pkg:/images/my_logo_hd.png"

app.SetTheme(theme)

End Sub
0 Kudos
Highlighted
roquoonewbie
Level 9

Re: What are the required sizes for theme images?

Does anyone have an example of an initThem() function that displays a secondary logo?
0 Kudos