Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[LanceD]

Ok, so why are there not more theater view skins? Because there are no docs to explain how to make them. Why are there no docs? Because theater view skins are so easy to make (But you wouldn’t know that with no docs, right?). So, in this thread, I’ll try to explain the basics of making a theater view skin. I’m by no means an expert, but I think I’ve got the basics down.

If anyone finds holes or mistakes in my explanation of things, please correct me.

To make things easy, I’ll just take apart the Acajou skin that’s included with Media Center.

Let’s take a look at the images in the Acajou folder:

Background.png: It’s the 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.

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: Yep! It’s 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.


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:
   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 an include it or not.

I put anything in the pictures folder that doesn’t belong anywhere else. You use relative locations in the main.xml. so any image can really go anywhere.

If you really wanted to, you could just replace the existing images in a skin folder (keeping the same filenames of course) to change the look of a skin.

(continued in next post)

[LanceD]

Ok, so now that you know what all of the default pictures are… Let’s take a look at the file that tells Media Center where and how to display them.

Main.xml

Here, I’ll just print the sections of the main.xml and try to explain them.

<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 is the button area on any screen that doesn’t display a list (pretty much the main screen)
   PlayingNowRect is pretty self explanatory. Where and how are the buttons displayed on the Playing Now screen.
   Rect is the button area on all the other screens.

ButtonVerticalSpacing: Well… there ya go. 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…

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

PIP (Picture in Picture) is 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>
   <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>

Ok, this one looks big, but it’s mostly just stuff we’ve gone over before

The List are 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.

ItemsRect: How much of the space you’ve allotted to the list it actually takes up. Play with it to control the size of your 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.

The rest is stuff we’ve covered… Really… Play with it!

<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" />

I’m sure you can figure this bit out. What sound is played for each event (Select, enter, invalid selection, back, forward).

<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 &amp; DVD.png" Location="CD &amp; 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>
   <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. I don’t know if there are any other properties that you can put in [] braces. I’ve tried a few, but to no avail… Once again, the Rect, and Location properties can help customize your skin.

<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.

If I’ve misled or you need clarification, please let me know.

[raym]

This is excellent. Very well explained.

Thanks for your efforts LanceD!

[Mr ChriZ]

Cheers Lance.  May have a go at one of these after finishing my mega skin!

[Tanoshimi]

An excellent tutorial!  One question.  I have a major beef with Theatre View (as do others) in that a regular left click on a library item or folder results in a menu popping up.  I would like that menu to popup on right clicks, and the default action (enter the folder or play the file) to occur on left clicks.  Is there a section in the Main.xml that controls the action taken on clicks?  Can we modify it to do so?
Thanks,
-Tano

[raym]

Is there a section in the Main.xml that controls the action taken on clicks?  Can we modify it to do so?

Hi there. Not at this time I'm afraid.

[Tanoshimi]

I am writing a plugin to create my own Theater View (mainly to set the default click action to open rather than popup menu), and am trying to incorporate the existing skins.  Here's my problem.  It seems everyone's Buttons are sized differently.  Is there nowhere in the skin file to determine the dimesions of the button within the jpg or png?  Is there no standardization among the Button files?  Maybe someone with some programming savvy can help me determine where to clip the buttons.
-Tano