Forum Discussion

migmigmig's avatar
migmigmig
Visitor
15 years ago

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)

9 Replies

  • 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).
  • destruk's avatar
    destruk
    Streaming Star
    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.
  • 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
  • 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?
  • destruk's avatar
    destruk
    Streaming Star
    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.
  • 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
  • Does anyone have an example of an initThem() function that displays a secondary logo?