How to create your own Roku Channel–Part2: Icons and Images

First off, there are really 3 sets of images:

1. Images distributed with your application in its package
2. Images posted in the Roku Channel Store when uploading the package
3. Category and item images referenced by the xml files and stored on your web server

Here is the somewhat ambiguous description from the Artwork guide included in the SDK

Channel artwork for the Roku Channel Store:
HD version: 290px (W) x 218px (H)
SD version: 214px (W) x 144px (H)

Channel artwork for the Roku home screen:
Focus HD: 336px (W) x 210px (H)
Focus SD: 248px (W) x 140px (H)
Sides HD: 108px (W) x 69px (H)
Sides SD: 80px (W) x 46px (H)

Images with the Package (Home Screen)

So, starting with the images that are included in your application, by default the videoplayer contains 8 images:

Four of these files (all the Main Menu files) are referenced in the file called “manifest” which is at the root of our zip file (and consequently the package).

title=TED Talks
subtitle=Video player example using category based XML feeds
mm_icon_focus_hd=pkg:/images/MainMenu_Icon_CenterFocus_HD.png
mm_icon_side_hd=pkg:/images/MainMenu_Icon_Side_HD.png
mm_icon_focus_sd=pkg:/images/MainMenu_Icon_CenterFocus_SD.png
mm_icon_side_sd=pkg:/images/MainMenu_Icon_Side_SD.png

The images are stored in the images directory in our zip file.  So, simply change the names in the manifest files to point to your replacement images which you store in your images directory.  While your editing the manifest, you should change the title (of the application), subtitle, and version info if you like.

The other 4 images are for creating a “Theme” for your application.  The settings for the theme, along with the reference to these images are from your application directory “source”, in a file named appMain.brs

theme.OverhangOffsetSD_X = "72"
theme.OverhangOffsetSD_Y = "31"
theme.OverhangSliceSD = "pkg:/images/Overhang_Background_SD.png"
theme.OverhangLogoSD  = "pkg:/images/Overhang_Logo_SD.png"

theme.OverhangOffsetHD_X = "125"
theme.OverhangOffsetHD_Y = "35"
theme.OverhangSliceHD = "pkg:/images/Overhang_Background_HD.png"
theme.OverhangLogoHD  = "pkg:/images/Overhang_Logo_HD.png"

app.SetTheme(theme)

As long as you keep the pointers consistent with your files in the images directory, and the file sizes the same, you should be good to go.

Creating some new Home Screen Images

Again, here is public domain to the rescue (Wikimedia Commons) where I am going to use a free logo image, and modify it. Click on the file to link to the page where I downloaded it.

Attribution: By Eek7.jpg: Bivolinoderivative work: Rondador (Eek7.jpg) [CC-BY-SA-3.0 or GFDL], via Wikimedia Commons

I modified the file in GIMP so that it now looks like this:

And, now I have my images. I created a set of them so that they are all the same size as the default “TED” images in the image dir of videoplayer from the SDK, but renamed them so I can keep track of what they do.

In the example from the SDK, the files
366×210 MainMenu_Icon_CenterFocus_HD.png
248×140 MainMenu_Icon_CenterFocus_SD.png
108×69 MainMenu_Icon_Side_HD.png
80×46 MainMenu_Icon_Side_SD.png

are all the same, with the difference being the size.

Modify the manifest file:

title=My Channel
subtitle=My simple test channel to get us rolling
mm_icon_focus_hd=pkg:/images/mmicf_HD.png
mm_icon_side_hd=pkg:/images/mmis_HD.png
mm_icon_focus_sd=pkg:/images/mmicf_SD.png
mm_icon_side_sd=pkg:/images/mmis_SD.png
major_version=1
minor_version=0
build_version=00001

Now following the procedure on the last blog entry, rebuild your package (rezip the files, install to the local Roku box, check the debugger if ok then create package and deliver to Roku).

If its now working, the debugger (via putty) should show this:

And you should see new icons in your TV !

Images for Roku Channel Store

These are the images you associate with your Channel when you upload your channel application (the package) to Roku for distribution.  During that process, you can select HD and SD images to associate with your Channel.  These images can be different than what is supplied with your application.

The Roku Channel store only seems to like jpeg images for some reason.  While the artwork guide claims:

To maintain high quality display of your logo through possible format conversion processes, we recommend you submit your image as either an 8bit 256-color PNG or 24bit PNG. However, if channel file size becomes an issue for your package, JPEG is also an acceptable compression type.

When I tried to submit png images I got told they were the wrong format…

Here we want to follow the size guidelines

Channel artwork for the Roku Channel Store:
HD version: 290px (W) x 218px (H)
SD version: 214px (W) x 144px (H)

Select these from you local computer when creating your channel at Roku.com, via Manage My Channels.

Category and Item Images

These are images stored on your web server, and referenced by your categories and categoryLeaf items.  These show up on the TV after you have launched your Channel.  These seemed to give me the most trouble for some reason.  I suspect because these images are cached on the Roku box and you need to power down the Roku when you make changes to the xml and images for the new images to be displayed.

Ok, first are the Category images, referenced in the categories.xml file like this:

Above you will notice that the category points to 2 different images sd_img and hd_img.  The next thing you will notice if your paying attention is that in this example (provided by Roku) the sd_img and hd_img are the same file…

Here is the test png file

Here are this images properties:

Notice that the image size is 304×237 ?  That doesn’t match any of the file sizes in the Artwork guide.

Next is the categoryLeaf images which are in the feed xml file for that leaf, lets continue our example, and look at the xml file themind.xml

Here we notice right away (especially after the last note) that these files are ALSO the same.

Here are the images properties (that we care about)

So, this file not only is a different size, but one is jpeg vs png.  So, the size doesn’t seem to matter much, just keep the file sizes down so they load quickly, otherwise it will be dog slow scrolling.  For example, just to test, I used this image (from the National Park Service – public domain):

Which is 1400×1108, not really an image size you want for scrolling speedily, but it posted just fine on my channel.

Related posts:

1. How to create you own Roku Channel