HOW-TO:Simple Modifications: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
No edit summary
>Ronie
No edit summary
Line 1: Line 1:
{{outdated}}
This tutorial will show you how to change the main menu on the [[General Navigation#Home Screen|Home Screen]] of the Confluence skin.
This tutorial will show you how to change the main menu on the [[General Navigation#Home Screen|Home Screen]] of the Project Mayhem 3 skin. [http://forum.xbmc.org/showpost.php?p=713384&postcount=4 For the Confluence skin check out this link]
This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml].
This is achieved by editing [http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL/Home.xml?view=markup PAL/Home.xml], which is the xml file for the Home window for all 4x3 resolutions. If you want to change the home.xml for a 16x9 resolution, you would change [http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL16x9/Home.xml?view=markup PAL16x9/Home.xml].
;You can find a list of the windows and their xml files here:
;You can find a list of the windows and their xml files here:
* [[Window IDs]]<br />
* [[Window IDs]]<br />


== How to Reorder the Main Menu ==
== How to Reorder the Main Menu ==
In the relevant home.xml file, locate for example “My Pictures normal push button”. Here you can change posX, posY to match your preference (in your case you'll edit posY only). Of course you will have to change all the other buttons as well if you change one.<br />
In the relevant Home.xml file, locate for example this piece of code:
<pre>
<item id="7">
    <label>8</label>
    <onclick>ActivateWindow(Weather)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
    <visible>!Skin.HasSetting(HomeMenuNoWeatherButton) + !IsEmpty(Weather.Plugin)</visible>
</item>
</pre>
this is the code for the Weather button on the Home menu. It's the first item on the left of the menu.
You can just cut the piece of code and paste it after for the code for the Music button for instance:
<pre>
<item id="3">
    <label>2</label>
    <onclick>ActivateWindow(Music)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
    <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>
</item>
</pre>


Note that you have to edit the ondown and onup tags as well for each button. The ondown and onup tags denote which button should be selected after the current one when you press up or down on the controller. The number you see, for example <onup>6</onup> is the id of a button. All buttons have an unique id (tag <id>), which should be specified for onup and ondown accordingly.<br />
Now the weather button will show up next to, on the right of, the music button on the Home menu.


Just write posY and id down for all buttons and then you can arrange them by just exchanging the posY tag between them (and change the onup and ondown tags accordingly of course).
As you may have found out by now, XBMC will show the buttons (left to right) in the order they are listed in the xml file.


== How to Change the Function of an Option ==
== How to Change the Function of an Option ==
The homepage of XBMC features the main sections (My Programs, My Pictures, My Videos and My Music) as separate buttons. This tutorial shows you how to change one of these buttons so that it launches one of the other sections with a different default folder. This allows you to have 2 different links into the same section, with different default paths.
The homepage of XBMC features the main sections (Programs, Pictures, Videos, Music, Weather, Settings) as separate buttons. This tutorial shows you how to change one of these buttons so that it directly open a certain section of the library.


In particular, in this tutorial we set the My Programs button so that it loads the My Programs section with a default path of F:\apps. We then change the “My Pictures” button to also launch the My Programs section, but this time with a default path of F:\games.
The action of a button is defined by it's <onclick> function.
If you look at the code example above, you'll see the Music button uses <onclick>ActivateWindow(Music)</onclick>.
Clicking on the button will take you either to the Music Library or the Music Files list.


We do this by first editing the Sources.xml file to establish the sources for Programs, and then edit the [http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL/Home.xml?view=markup Home.xml] file in the skin to change the functionality of the Pictures button.
If you prefer to go directly to the artist listing, you can change the function to:


=== Source Configuration ===
<onclick>ActivateWindow(MusicLibrary,Artists)</onclick>
You can just do this using the GUI to add sources (press '''White''' while in the root listing of My Programs).


Alternatively, configure the Sources.xml shares for My Programs as follows:
Other options are listed on the [[Opening_Windows_and_Dialogs]] page
<pre>
<xml>
<myprograms>
    <default>Programs</default>
    <source>
      <name>Games</name>
      <path>F:\Games\</path>
      <depth>1</depth>
    </source>
    <source>
      <name>Programs</name>
      <path>F:\Apps\</path>
      <depth>1</depth>
    </source>
</myprograms>
</xml>
</pre>
Note that we've just setup 2 sources – Games and Programs. And we've made Programs the default source. Clicking on My Programs now will automatically load the My Programs section and display all the applications in F:\Apps (the Programs source). In order to get to the Games source, we'd have to navigate up a folder (pressing B) then go into Games. We want this to be a separate section on the home page, so we have to change one of the current buttons (or add a new one) to do this.


=== Changing the My Pictures button to My Games ===
== How to add a new button to the Menu ==
Load up the [http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL/Home.xml?view=markup Home.xml] file that you use. This will either be in the PAL folder, or in the PAL16x9 folder, depending on whether you use a 4x3 or 16x9 resolution.
Let's say you want a button on the menu linking to your kids movies.
the fist thing you need to do as add the folder containg the kids movies as a source in XBMC.
This can be done by going to Videos > Files > Add videos


Find the <control> for the My Pictures button:
Alternatively, configure the sources.xml in your userdata folder as follows:
<pre>
<pre>
<xml>
<sources>
<control>
    <video>
      <description>My Pictures normal push button</description>
        <default pathversion="1"></default>
      <type>button</type>
        <source>
      <id>4</id>
            <name>Kids</name>
      <posX>91</posX>
            <path pathversion="1">smb://XBMC/Movies/Kids-Movies/</path>
      <posY>271</posY>
        </source>
      <width>14</width>
    </video>
      <height>13</height>
<sources>
      <label>1</label>
      <onclick>ActivateWindow(MyPictures)</onclick>
      <font>special13</font>
      <onleft>98</onleft>
      <onright>99</onright>
      <onup>2</onup>
      <ondown>5</ondown>
      <textureFocus>home-focus.gif</textureFocus>
      <textureNoFocus>-</textureNoFocus>
      <textOffsetX>30</textOffsetX>
</control>
</xml>
</pre>
</pre>
As you can see, this button normally has <label> 1 (a reference into the strings.xml file), and normally launches the MyPictures window (<onclick> tag). Change it's <label> and replace the <onclick> tag as follows:
 
Adding a button is pretty easy, you can just use the code of one of the other buttons as a template.
<pre>
<pre>
<xml>
<item id="19">
<control>
    <label>Kids Movies</label>
      <description>My Games push button</description>
    <onclick>ActivateWindow(Videos,Kids)</onclick>
      <type>button</type>
    <icon>-</icon>
      <id>4</id>
    <thumb>-</thumb>
      <posX>91</posX>
</item>
      <posY>271</posY>
      <width>14</width>
      <height>13</height>
      <label>My Games</label>
      <onclick>ActivateWindow(MyPrograms,Games)</onclick>
      <font>special13</font>
      <onleft>98</onleft>
      <onright>99</onright>
      <onup>2</onup>
      <ondown>5</ondown>
      <textureFocus>home-focus.gif</textureFocus>
      <textureNoFocus>-</textureNoFocus>
      <textOffsetX>30</textOffsetX>
</control>
</xml>
</pre>
</pre>
The button will now have a label “My Games”, and will automatically launch the My Programs section, using Games as the default source. Note that I also changed the <description> tag as it's always nice to document the changes you make. This tag is not read by XBMC at all – it's just there for the skinners benefit. Ok, now that's done, upload the file to the xbox, and test it out!
The only thing you need to take care of, is to use an unique 'id' for the button.
In the code above, i've chosen to use id="19" as it's not used elsewhere on the Home menu.
 
Now we have our code ready, we can simple insert it wherever we want in between the other menu buttons.


=== Prettying it up ===
The last thing we might want to do is fix up the image that is displayed when focus is set to the new My Games button. If you've tested what happens currently, when the My Games button is focused, it will still show the background picture for My Pictures, which doesn't really fit. There's a couple of ways around this, but the easiest one is as follows.


Find the image that it's loading. This will be the multiimage control that has <visible>Control.HasFocus(4)</visible>. (see that the id of the button we changed above was 4).
<pre>
<xml>
<control>
    <type>multiimage</type>
    <id>0</id>
    <posX>182</posX>
    <posY>105</posY>
    <width>538</width>
    <height>362</height>
    <imagepath>4x3home-mypictures</imagepath>
    <visible>Control.HasFocus(4) + !Player.HasVideo</visible>
</control>
</xml>
</pre>
As you can see, it's loading image from the 4x3home-mypictures/ folder. We want to change this to load the games picture, so change the <imagepath> tag to
<xml>
<imagepath>4x3home-myprograms</imagepath>
</xml>
Note that you could add a completely different imagepath, or image at this point. It should be around 512x362 to match the current one. Just name something different than the textures already included (as they're pre-packaged into Textures.xpr), for instance “mygamesimage.png” will do the trick. Place it in the media folder of the skin, and change the <imagepath> tag to:
<xml>
<imagepath>mygamesimage.png</imagepath>
</xml>


== References ==
== References ==

Revision as of 01:07, 14 January 2013

This tutorial will show you how to change the main menu on the Home Screen of the Confluence skin. This is achieved by editing 720p/Home.xml.

You can find a list of the windows and their xml files here

How to Reorder the Main Menu

In the relevant Home.xml file, locate for example this piece of code:

<item id="7">
    <label>8</label>
    <onclick>ActivateWindow(Weather)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
    <visible>!Skin.HasSetting(HomeMenuNoWeatherButton) + !IsEmpty(Weather.Plugin)</visible>
</item>

this is the code for the Weather button on the Home menu. It's the first item on the left of the menu. You can just cut the piece of code and paste it after for the code for the Music button for instance:

<item id="3">
    <label>2</label>
    <onclick>ActivateWindow(Music)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
    <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>
</item>

Now the weather button will show up next to, on the right of, the music button on the Home menu.

As you may have found out by now, XBMC will show the buttons (left to right) in the order they are listed in the xml file.

How to Change the Function of an Option

The homepage of XBMC features the main sections (Programs, Pictures, Videos, Music, Weather, Settings) as separate buttons. This tutorial shows you how to change one of these buttons so that it directly open a certain section of the library.

The action of a button is defined by it's <onclick> function. If you look at the code example above, you'll see the Music button uses <onclick>ActivateWindow(Music)</onclick>. Clicking on the button will take you either to the Music Library or the Music Files list.

If you prefer to go directly to the artist listing, you can change the function to:

<onclick>ActivateWindow(MusicLibrary,Artists)</onclick>

Other options are listed on the Opening_Windows_and_Dialogs page

How to add a new button to the Menu

Let's say you want a button on the menu linking to your kids movies. the fist thing you need to do as add the folder containg the kids movies as a source in XBMC. This can be done by going to Videos > Files > Add videos

Alternatively, configure the sources.xml in your userdata folder as follows:

<sources>
    <video>
        <default pathversion="1"></default>
        <source>
            <name>Kids</name>
            <path pathversion="1">smb://XBMC/Movies/Kids-Movies/</path>
        </source>
    </video>
<sources>

Adding a button is pretty easy, you can just use the code of one of the other buttons as a template.

<item id="19">
    <label>Kids Movies</label>
    <onclick>ActivateWindow(Videos,Kids)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
</item>

The only thing you need to take care of, is to use an unique 'id' for the button. In the code above, i've chosen to use id="19" as it's not used elsewhere on the Home menu.

Now we have our code ready, we can simple insert it wherever we want in between the other menu buttons.


References

More information on the structure of skin xml files can be found here

More information on the different skin files, window names, and id's can be found here

Information on Button controls

Information on MultiImage controls

See also: