HOW TO: Add items to the home screen
#1
I think rapier is an absolutely amazing skin, and I've had a lot of fun digging into the XML a bit to add hulu desktop and WMC (for netflix) into my home screen on my media center, so I thought I'd share my process. I'm using Windows and Rapier 3.06.

While I'm no modding expert, and I know that much of this process is pretty basic as far as mods go, I think it's a good project for people wanting to start learning modding.

Image

Image

-----
Text Images

Before you start editing XML, you will need to create at least two, possibly three images for each new category: the focused text, the unfocused text, and the large icon for the category.

The two text versions of the home text are found in
images\homecategories\focus
with focused images being 300x96 .png files with clear backgrounds, and
images\homecategories\nofocus
with un-focused images being 300x64 .png files, also with clear backgrounds

You can look at the existing text and try to duplicate the effect (As I did with the WMC screenshot) or just make something up yourself (such as with the hulu text, which i got from the hulu website, and just added a reflection with photoshop.)

--------
Icon

If you want a custom icon for your entry, there is a more involved process. the existing home screen icons are in a .xpr file, which can be edited with XPR express (http://www.teamblackbolt.co.uk/projdetails.php?id=5). the icons are 256x256 .pngs, also with transparent backgrounds.

XPR express is a pretty straightforward tool - on the extract tab, simply browse to \media\textures.xpr, and extract it to the directory of your choice. The other home screen icons have names such as home-tvshows-icon.png

After you have added your new icon, make sure you have a backup of textures.xpr, then use the compress tab to select the directory you extracted the files to, and save it again to the \media\textures.xpr. Remember the name of the images you saved - you'll need them again.

-----
Batch files
To actually launch the programs, i thought the easiest way would be to use a batch file to close XBMC and open the app. After the app closes, i would then reopen XBMC. It's not a perfect solution (sometimes XBMC will open out of focus) but it works pretty well with my setup. Any modders with more experience, feel free to comment on this.

Anyway, here's a sample batch file to open hulu desktop for me. The program has to be an original program, not a launcher, since XBMC will open once the program closes. Hulu desktop was a little bit of a pain, since they had two identically named programs in different folders, and one of the programs just launched the other one.

Code:
taskkill /F /IM XBMC.EXE

start "" /wait "C:\Users\User\AppData\Local\HuluDesktop\instances\0.9.10.1\HuluDesktop.exe"

start "" "C:\Program Files\XBMC\XBMC.exe" -fs

After you get your batch files created, it's on to the XML editing!

------
XML

The XML file that needs to be edited is includes_Home.xml in the 720p folder of the rapier skin.

First of all, find the XML node called <include name="HomeMenuBasic">.

Under this node, you should notice a list of home menu items something like the following:
Code:
...
<item id="7">
    <description>General Category</description>
    <icon>special://skin/images/homecategories/nofocus/$INFO[System.Language]-general-text-nofocus.png</icon>
    <thumb>$INFO[Skin.String(GeneralCustomBG)]</thumb>
    <onclick>ActivateWindow(3006)</onclick>        
    <visible>!Skin.HasSetting(HideGeneralCategory)</visible>
</item>    
<item id="8">
    <description>System Category</description>
    <icon>special://skin/images/homecategories/nofocus/$INFO[System.Language]-system-text-nofocus.png</icon>
    <thumb>$INFO[Skin.String(SystemCustomBG)]</thumb>
    <onclick>ActivateWindow(3007)</onclick>                     
</item>

Under this section, add a new node, something like the following:
Code:
<item id="9">
    <description>Hulu Category</description>
    <icon>special://skin/images/homecategories/nofocus/en-hulu-text-nofocus.png</icon>
    <thumb>$INFO[Skin.String(ProgramsCustomBG)]</thumb>
    <onclick>XBMC.System.Exec("C:\Progra~1\XBMC\Launchers\HuluDesktop.bat")</onclick>    
    <visible>true</visible>
</item>

A few things to change here - the first is the id number. Make sure you increment it :-). The second thing would be the icon - simply change the filename to the icon you created earlier. Finally, for the <onclick> section, Use the XBMC.System.Exec() command like above, but specify the batch file you just created instead of mine. I also changed <visible> to true just to make it a bit cleaner. Note - XBMC has a bug in System.Exec for filenames with spaces, so make sure to take the space free (or shorthand, like above) route when naming and locating your batch files.

Now, copy the new node you created to the same place under <include name="HomeMenuAdvanced">. Thsi is for if you use the "Advanced" home menu.

Next, find <include name="HomeMenuCategoryFocusImages">.
Under this node, there will be sections like the following:
Code:
...
<control type="image">
    <Description>System Category Focus</Description>
    <include>HomeMenuCategoryFocusPos</include>
    <include>HomeMenuCategoryFocusDim</include>
    <texture>special://skin/images/homecategories/focus/$INFO[System.Language]-system-text-focus.png</texture>
    <visible>Container(850).HasFocus(8)</visible>
    <include>HomeMenuCategoryFocusAnim</include>
</control>

Add a new control at the end:
Code:
<control type="image">
    <Description>Hulu Category Focus</Description>
    <include>HomeMenuCategoryFocusPos</include>
    <include>HomeMenuCategoryFocusDim</include>
    <texture>special://skin/images/homecategories/focus/en-hulu-text-focus.png</texture>
    <visible>Container(850).HasFocus(9)</visible>
    <include>HomeMenuCategoryFocusAnim</include>
</control>

The two important changes here are first the <texture>, from which you should change the filename to your focused image. Secondly, make sure that HasFocus() in the <visible> section correctly links to the id number that you changed in the HomeMenuBasic section.

Next, find the <include name="HomeCategoryIcons"> section. Again, it should contain a list of <control> tags such as the following:

Code:
...
<control type="image">
    <description>System Icon</description>
    <include>HomeMenuIconDim</include>
    <texture>home-settings-icon.png</texture>
    <aspectratio>keep</aspectratio>
    <visible>Container(850).HasFocus(8)</visible>
    <include>HomeMenuIconAnim</include>
</control>

Add a node at the end of this list as well:

Code:
<control type="image">
    <description>Hulu Icon</description>
    <include>HomeMenuIconDim</include>
    <texture>home-tvshows-icon.png</texture>
    <aspectratio>keep</aspectratio>
    <visible>Container(850).HasFocus(9)</visible>
    <include>HomeMenuIconAnim</include>
</control>

The <texture> here will be the icon in the textures.xpr fiel that you want to use. In this instance, I just kept the home-tvshows-icon.png from the TV shows item, but if you created a custom icon in textures.xpr, you would change this to the filename of your new icon.

Again, make sure that HasFocus() in the <visible> section points to your new ID.

Finally, go to the <include name="HomeCustomCategoryIcons"> section, and copy this new image node to the end of the list here as well. This is for people who use the custom image functionality on the home menu.

------
And that's it. Start up XBMC and see how it looks! Big Grin
Reply
#2
awesome guide, man. thanks a lot.
Reply
#3
Great Guide!!! I was able to add Hulu and MLB.TV with playon on my xbox! So much easier now then to go into it manually.

Do you know how what font is used to create the .png text?
Reply
#4
Ok. Here's one for you. I have folder on my hard drive for audio books. Now I have this setup as a normal music source but not added to the library. Right now I just use the normal "Favourite menu" to get right to that folder when ever I want. but it would be nice to have it as a Home Menu Category. So What would I need to change from your info from above to make this happen?

I get the feeling it's really only this part that needs to be edited for my needs.

Code:
<item id="9">
    <description>Hulu Category</description>
    <icon>special://skin/images/homecategories/nofocus/en-hulu-text-nofocus.png</icon>
    <thumb>$INFO[Skin.String(ProgramsCustomBG)]</thumb>
    <onclick>XBMC.System.Exec("C:\Progra~1\XBMC\Launchers\HuluDesktop.bat")</onclick>    
    <visible>true</visible>
</item>

Mainly
Code:
<onclick>XBMC.System.Exec("C:\Progra~1\XBMC\Launchers\HuluDesktop.bat")</onclick>

I think.

I Am sure I would have to do all the rest the same (OK not using HuLu images, But you get the idea I hope).

Hope you can help.

PS I plan to do this on the "Rapier Qualar Mod" Skin. Would it be the same?

Oddsodz
Reply
#5
Oddsodz Wrote:Ok. Here's one for you. I have folder on my hard drive for audio books. Now I have this setup as a normal music source but not added to the library. Right now I just use the normal "Favourite menu" to get right to that folder when ever I want. but it would be nice to have it as a Home Menu Category. So What would I need to change from your info from above to make this happen?

I get the feeling it's really only this part that needs to be edited for my needs.

Code:
<item id="9">
    <description>Hulu Category</description>
    <icon>special://skin/images/homecategories/nofocus/en-hulu-text-nofocus.png</icon>
    <thumb>$INFO[Skin.String(ProgramsCustomBG)]</thumb>
    <onclick>XBMC.System.Exec("C:\Progra~1\XBMC\Launchers\HuluDesktop.bat")</onclick>    
    <visible>true</visible>
</item>

Mainly
Code:
<onclick>XBMC.System.Exec("C:\Progra~1\XBMC\Launchers\HuluDesktop.bat")</onclick>

I think.

I Am sure I would have to do all the rest the same (OK not using HuLu images, But you get the idea I hope).

Hope you can help.

PS I plan to do this on the "Rapier Qualar Mod" Skin. Would it be the same?

Oddsodz

I believe the command you would be looking for is
Code:
<onclick>XBMC.ActivateWindow(MusicFiles,AudioBooks)</onclick>

where "AudioBooks" is the (case sensitive I believe?) name of your audio book source in music.

While I'm not sure exactly what changes the Qualar Mod makes, if the same XML entries as above are in includes_Home, then they should still work.



Also, jbalicki10, I'm not sure what font the skin uses specifically... I ended up just using some form of Arial, if I remember right (Although it doesn't completely match)...
Reply
#6
I want to add Trailers (Apple Movie Trailers Lite) to Home menu. What should <onclick> menu contain ? Thank you.

LE: Nevermind, I figure it out by myself.

Code:
<onclick>XBMC.ActivateWindow(VideoLibrary,plugin://video/Apple Movie Trailers Lite)</onclick>
Reply
#7
The alternative also is to used the Advanced Home Menu setting in skin settings, which activates the secondary menu that can be customized...
Reply
#8
Thanks for the great tutorial.

I would like to add 'Weather' to the main menu. I can deal with the XML mods but was wondering if someone created a Photoshop file with a sample Rapier home menu text and the reflection that he can share? Or can someone write a short tutorial how to create one?

Best regards,
Sundance
Reply
#9
Hi there,
What would be the command to open/list the content of a directory on the ActiveWindow? "XBMC.System.Exec" is for executing external program, right? Cheers!!!
MINIX NEO U22-XJ | Denon AVC-X3800H | KEF Q750 | KEF Q150 | KEF Q250c | KEF Q50a | KEF Kube 10 MIE | LG OLED65G16LA | CoreELEC
Reply
#10
Bump for the Font requist, or Photoshop file! Wink!
Reply

Logout Mark Read Team Forum Stats Members Help
HOW TO: Add items to the home screen0