Theater View Skinning Tutorial

Based on this post by LanceD: http://yabb.jriver.com/interact/index.php?topic=34639.0

Introduction

Theater View Skins are stored under the MEDIA CENTER install path: FULL SKINS\<Skin Name> If the default installation path is used (c:\Program Files\J River\Media Center\), the Noire skin would be located in: c:\Program Files\J River\Media Center\Full Skins\Noire

Skins may either be standalone, or may use a base skin, and apply their own customization to that skin. The default skin “Noire” used a base skin named “Shared” for most of its elements, and applies only customisations to achieve its own look. Note that the “Shared” skin is defined as a base skin, and does not appear as a selectable Theater View skin within MEDIA CENTER.

Skins support both relative and absolute paths, relative paths are highly recommended.

Files & Folders

Typical Files and Folders that may be found in a Theater View skin:

• Animation (Folder)

Background.png: Specifies the background animation picture for theater view. (By default, this is the bouncing MEDIA CENTER logo)

• Background.png

The skin's 'wallpaper'. It’s in all the screens and sub screens, so if you have images that you don’t want in every screen, don’t include them in the background.png. You can do that later.

• Buttons (Folder)

Button.png: These are the buttons on the main screen, and on the left hand side of the other screens.

There are six images that make up Button.png. You need to alternate three ‘unselected’ buttons and three ‘selected’ buttons. I haven’t really played with them enough to know why there are three of each. Obviously there are different categories of button. Play with it, and post your findings.

• Dialog (Folder)

DialogBack.png: The background image for the pop-up dialog boxes (e.g. The confirmation screen when exiting Theater View)

DisableOverlay.png: <<unknown>>

• List (Folder)

BackThumb.png : Self explanatory, it’s the ‘back button’.

Check.png: Two images in one .png file. Unchecked is on the left, checked is on the right.

FolderThumb.png: in ‘icon view’ it represents a folder.

ListBackground.png: in ‘list’ view, it’s the unselected (left) and selected (right) states of each list item.

NoThumb.png: it’s what shows up when there’s no image information in the db for the specific cd or video.

PlayOverlay.png: The ‘play’ triangle that tells you when something is playing.

ThumbBackground.png: This is another two-images-in-one. It’s what’s behind the CD or videos in your library in ‘icon’ view.

• Main.xml

Defines the layout and graphics required to make a skin.

• Menu (Folder)

MenuBackground.png: This is the submenu of ‘Buttons’ in all but the main screen. So, when you select ‘Controls’ in the audio or now playing screens, this is the background for the resulting menu. It’s safest to just fill it with a color that blends in with the background.png.

MenuItem.png: This is the button that’s used in the submenus mentioned above. It’s just a unselected / selected image.

• Pictures (Folder)

Audio.png: Picture for the “Audio” menu selection.

CD & DVD.png: Picture for the “CD & DVD” menu selection.

Generic.png: Picture for menu selections without a specific image.

Images.png: Picture for the “Images” menu selection.

LocationBackground.png: All of the pre-installed skins use this as a top-border. The system time and location sit inside here. YOU DON’T HAVE TO USE THIS! It’s just an image. You can include it or not.

News.png: Picture for the “News” menu selection.

Playing Now.png: Picture for the “Playing Now” menu selection.

Playlist.png: Picture for the “Playlist” menu selection.

TV.png: Picture for the “TV” menu selection.

Video.png: Picture for the “Video” menu selection.

Weather.png: Picture for the “Weather” menu selection.

• Player Controls (Folder)

Back.png, ButtonBackground.png, Fullscreen.png, Home.png, Next.png

Play.png, Previous.png, VolumeDown.png, VolumeMute.png, VolumeUp.png

Each of these images corresponds to the similarly named menu selection.

• Scroll (Folder)

Down.png: The “more available below” indicator/button on a scroll bar.

Handle.png: The position indicator / “grab” handle on a scroll bar.

Up.png: The “more available above” indicator/button on a scroll bar.

• Search (Folder)

LetterBackground.png: The background tile for individual letters when the search pane is selected.

• Sounds (Folder)

Back.wav: The sound played when you go back through the menu structure.

Enter.wav: The sound played when Enter is pressed.

Forward.wav: The sound played when going forward through the menu structure.

Invalid.wav: The sound played when an invalid action is attempted.

Select.wav: The sound played when something is selected.

Main.xml

Header

<MJFS version="2.3" base="0" >

MJFS Version=”2.3” : The base version of the MEDIA CENTER Theater View rendering engine required for the skin.

Base=”0” : Is this skin a base skin (0=no, 1=yes) – used to indicate if this skin is displayed as a Theater View skin within MEDIA CENTER.

Skin Information

<SKIN Name="Blue too" Author="jmone" WebSite="" BaseSkin="..\Shared\Base 1.xml" />

SKIN Name="Blue too" : The name of the skin.

Author="jmone" : Who designed the skin

WebSite="" : The Author’s website

BaseSkin="..\Shared\Base 1.xml" : What this skin uses as its base skin, for elements not specified by the current skin.

Animation

<ANIMATION>

<Background Bitmap="..\Shared\Animation\Background.png" Alpha="100" Mode="1" />

</ANIMATION>

This section defines the background animation. At this point the only known option here is a background picture.

<Background Bitmap="..\Shared\Animation\Background.png" Alpha="100" Mode="1" />

Background Bitmap="..\Shared\Animation\Background.png": Specifies the location where the background picture can be found.

Alpha="100" : Specifies the transparency of the background image. (0= not visible, 100= opaque)

Mode="1" : Specifies the type of animation to be applied.

Layout

<LAYOUT>

<<-- SNIPPED -->>

</LAYOUT>

The layout section contains all the layout components required to define the layout of the skin. It does not contain information relating to images, rather it defines the structure of a skin.

Layout Sections

<LAYOUT>

<Layout Name="Root" Location="" >

<Item Name="Navigation" Placement="Left" Size="[Overscan Left] + 200" />

<Item Name="Navigation" Placement="Top" Size="[Overscan Top] + 150" />

<Item Name="Navigation" Placement="Right" Size="[Overscan Right]" />

<Item Name="Navigation" Placement="Bottom" Size="[Overscan Bottom] + 10" />

<Item Name="Navigation" Placement="CenterX" Size="3 * [Button Width]" Crop="5%" />

</Layout>

</LAYOUT>

Layout Name="Root" : The name of the particular layout component

Location="" : The location of the component, with regard to the List areas (eg: Playing Now, Audio, Video, All,... more explanation required)

<Item Name="Navigation" Placement="Left" Size="[Overscan Left] + 200" />

This defines the

Buttons

<BUTTONS>

<Position Rect="0.9,8.0,22.5,76" NoListRect="35,10,65,90" PlayingNowRect="0.9,8.0,22.5,50.0" ButtonVerticalSpacing="8" Alignment="1" NoListAlignment="0" />

<Image Bitmap="Buttons\Button.png" Columns="26,?-Flex,26" Rows="15,?-Flex,19" InternalMargins="10,6,10,12" />

<Text TextColor="FFFFFF" SelectedTextColor="FFC32F" Capitalization="0" />

</BUTTONS>

Rectangles: these define where and how big the buttons are displayed in each of the screens.

The coordinates are percentages of the screen. So for the Rect property the upper left corner is 0.9% of the screen width from the left and 8.0% of the screen height from the top. The lower left corner is 22.5% of the screen width from the left and 76% of the screen height from the top.

NoListRect : The button area on any screen that doesn’t display a list (pretty much the main screen)

PlayingNowRect : Where and how are the buttons displayed on the Playing Now screen.

Rect : The button area on all the other screens.

ButtonVerticalSpacing : The space between the buttons.

Alignment : This is how the buttons are aligned in the rectangle (same is true for NoListAlignment). It is NOT how the text is aligned in the button (text is always centered. You can’t change that at this point).

Columns="26,?-Flex,26" : This means that the top and bottom 26 pixels of the button.png are kept as they are, and whatever is in between is stretched or shrunk to fit the rectangle. The Rows property is handled the same way.

InternalMargins: These are the margins for the text displayed in the buttons. So, if your text is too big or small within the buttons, this is where to go.

TextColor, SelectedTextColor: You don’t have any say over the font, but you do get to choose the color.

Capitalization: self explanatory…

Picture in Picture

<PIP Rect="1.2,76.5,22.2,97.5" PlayingNowRect="0.9,51.0,99.5,99.5" />

PIP (Picture in Picture): the rectangle taken up by visualizations or video when not in full screen. You can see the difference in PlayingNowRect and Rect just by switching between the Audio screen and the Playing now screen. I don’t need a half-screen sized visualization in the Playing Now window, so I resize it to the same size as the other windows.

List

<LIST>

<Position Rect="23.4,8.0,99.5,99.5" PlayingNowRect="23.4,8.0,99.5,50.0" ItemsRect="0,0,100,100" ImageRect="1,1,99,99" ImageWithTextRect="1,1,99,82" TextRect="1,84,99,98" />

<Text TextColor="FFFFFF" SelectedTextColor="FFC32F" Capitalization="0"/>

<ThumbBackground Bitmap="List\ThumbBackground.png" Columns="10,?-Flex,10" Rows="10,?-Flex,10" InternalMargins="6,6,6,6" />

<ListBackground Bitmap="List\ListBackground.png" Columns="10,?-Flex,10" Rows="10,?-Flex,10" InternalMargins="6,6,6,6" />

<NoThumb Bitmap="List\NoThumb.png" />

<BackThumb Bitmap="List\BackThumb.png" />

<FolderThumb Bitmap="List\FolderThumb.png" />

<Check Bitmap="List\Check.png" ThumbRect="2,59.3,34,81.6" ListRect="95.2,0,100,100" Rows="2,?-Flex,4" Colums="2,?-Flex,3" />

<PlayOverlay Bitmap="List\PlayOverlay.png" ThumbRect="0,60,35,95" ListRect="94,0,100,100" />

</LIST>

List: contains the items on the right hand side of the (non main menu) screen. It’s the portion of the library that you’re looking at.

Most of this section has already been covered, apart from:

ItemsRect: How much of the space you’ve allotted to the list it actually takes up. Play with it to control the size of thumbnails.

ItemsWithTextRect: This is the portion of ItemsRect taken up by the actual thumbnail without text.

TextRect: The portion of ItemsRect that’s taken up by text.

Sounds

<SOUNDS Select="..\Shared\Sounds\Select.wav" Enter="..\Shared\Sounds\Enter.wav" Invalid="..\Shared\Sounds\Invalid.wav" Back="..\Shared\Sounds\Back.wav" Forward="..\Shared\Sounds\Forward.wav" />

What sound is played for each event (Select, enter, invalid selection, back, forward).

Picture

<PICTURE>

<Item Bitmap="..\Shared\Pictures\Setup.png" Location="Setup\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="..\Shared\Pictures\Playlist.png" Location="Playlists\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="..\Shared\Pictures\TV.png" Location="TV\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="..\Shared\Pictures\Audio.png" Location="Audio\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="..\Shared\Pictures\Images.png" Location="Images\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="..\Shared\Pictures\Video.png" Location="Video\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="..\Shared\Pictures\CD & DVD.png" Location="CD & DVD\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="..\Shared\Pictures\Playing Now.png" Location="Playing Now\***" Rect="70.7,5.3,100,44.4" Alpha="20" Alignment="3" />

<Item Bitmap="Pictures\LocationBackground.png" Location="***" Rect="0.0,0.0,100,7.2" Alpha="100" Alignment="-1" />

</PICTURE>

Pictures! Here’s where you get to display images on the skin. You can display them anywhere on any screen you want. We’ve discussed what Rect does (placement on the screen). The fun thing to play with here is Location. An asterisk ‘*’ in the path is a level in the tree. Eg:

Location="Audio\***" : This image will show up on the main screen when Audio is selected, and on each sub-level of the Audio button.

Location="Audio" : This image will show up ONLY on the main screen when the Audio button is selected and on NO subsequent level.

Location="Audio\*" : This image will show up in the audio screen, but NOT on the main screen even when the audio button is selected.

Location="Audio\HOME" : This image will show up ONLY in the Audio menu when the HOME button is selected.

Play with the Location property. It’s a great way to customize what images are shown in your skin.

Text

<TEXT>

<Item Text="[Location]" Location="***" TextColor="FFFFFF" Rect="2.5,0.2,89.0,5.4" Capitalization="0" Alignment="0" />

<Item Text="[Time]" Location="***" TextColor="FFFFFF" Rect="90.0,0.2,99.0,5.4" Capitalization="0" Alignment="1" />

</TEXT>

These two items put the location in the navigation tree and the system time on the top of the screen. At this point these are the only known fields ([Location] and [Time]) that can be used in this manner. Once again, the Rect, and Location properties can help customize your skin.

Menu

<MENU>

<Text TextColor="FFFFFF" SelectedTextColor="FFC32F" />

<Background Bitmap="Menu\MenuBackground.png" Columns="8,?-Flex,8" Rows="8,?-Flex,8" />

<Item Bitmap="Menu\MenuItem.png" Columns="36,?-Flex,36" Rows="10,?-Flex,10" />

</MENU>

Once again, MENU is the sub-menu on some screens. You can customize everything but RECT.

That’s pretty much the long and the short of creating a Theater View skin. A little experimentation will get you pretty familiar with the main.xml The hardest part of making a skin is creating the graphics. If you don’t have Photoshop, I’d recommend downloading the GIMP. It’s free and cross-platform. And with sites like www.gimptalk.com and www.wingimp.org, you won’t run short of tutorials.