2010-03-20, 16:44
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.
-----
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.
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:
Under this section, add a new node, something like the following:
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:
Add a new control at the end:
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:
Add a node at the end of this list as well:
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!
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.
-----
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" -fsAfter 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!
