HOW-TO:Simple Modifications: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>Sho
mNo edit summary
 
(34 intermediate revisions by 15 users not shown)
Line 1: Line 1:
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.
{{mininav|[[Development]]|[[Add-on development]]|[[Skinning]]}}
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:
* [[Window IDs]]<br>


==How to Reorder the Main Menu==
This tutorial will show you how to change the main menu on the Home Screen of the Confluence skin.
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>
This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml].


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>


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).
== How to Reorder the Main Menu ==
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>


==How to Change the Function of an Option==
Now the weather button will show up next to, on the right of, the music button on the Home menu.
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.


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.
As you may have found out by now, Kodi will show the buttons (left to right) in the order they are listed in the xml file.


We do this by first editing the Sources.xml file to establish the bookmarks for My 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 My Pictures button.
== How to Change the Function of an item ==
The homepage of Kodi 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.


===Source Configuration===
The action of a button is defined by it's <onclick> function.
You can just do this using the GUI to add sources (press '''White''' while in the root listing of My Programs).
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.


Alternatively, configure the Sources.xml shares for My Programs as follows:
If you prefer to go directly to the artist listing, you can change the function to:
<xml>
<myprograms>
    <default>Programs</default>
    <bookmark>
      <name>Games</name>
      <path>F:\Games\</path>
      <depth>1</depth>
    </bookmark>
    <bookmark>
      <name>Programs</name>
      <path>F:\Apps\</path>
      <depth>1</depth>
    </bookmark>
</myprograms>
</xml>
Note that we've just setup 2 bookmarks – Games and Programs. And we've made Programs the default bookmark. Clicking on My Programs now will automatically load the My Programs section and display all the applications in F:\Apps (the Programs bookmark). In order to get to the Games bookmark, 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===
<onclick>ActivateWindow(MusicLibrary,Artists)</onclick>
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.


Find the <control> for the My Pictures button:
Other options are listed on the [[Opening_Windows_and_Dialogs]] page


<xml>
== How to add a new button to the Menu ==
<control>
Let's say you want a button on the menu linking to your kids movies.
      <description>My Pictures normal push button</description>
the fist thing you need to do as add the folder containing the kids movies as a source in Kodi.
      <type>button</type>
This can be done by going to Videos > Files > Add videos
      <id>4</id>
 
      <posX>91</posX>
Alternatively, configure the sources.xml in your userdata folder as follows:
      <posY>271</posY>
<pre>
      <width>14</width>
<sources>
      <height>13</height>
    <video>
      <label>1</label>
        <default pathversion="1"></default>
      <onclick>ActivateWindow(MyPictures)</onclick>
        <source>
      <font>special13</font>
            <name>Kids</name>
      <onleft>98</onleft>
            <path pathversion="1">smb://Kodi/Movies/Kids-Movies/</path>
      <onright>99</onright>
        </source>
      <onup>2</onup>
    </video>
      <ondown>5</ondown>
<sources>
      <textureFocus>home-focus.gif</textureFocus>
</pre>
      <textureNoFocus>-</textureNoFocus>
 
      <textOffsetX>30</textOffsetX>
Adding a button is pretty easy, you can just use the code of one of the other buttons as a template.
</control>
<pre>
</xml>
<item id="19">
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:
    <label>Kids Movies</label>
<xml>
    <onclick>ActivateWindow(Videos,Kids)</onclick>
<control>
    <icon>-</icon>
      <description>My Games push button</description>
    <thumb>-</thumb>
      <type>button</type>
</item>
      <id>4</id>
</pre>
      <posX>91</posX>
The only thing you need to take care of, is to use an unique 'id' for the button.
      <posY>271</posY>
In the code above, i've chosen to use id="19" as it's not used elsewhere on the Home menu.
      <width>14</width>
 
      <height>13</height>
Now we have our code ready, we can simple insert it wherever we want in between the other menu buttons.
      <label>My Games</label>
 
      <onclick>ActivateWindow(MyPrograms,Games)</onclick>
== How to add weather labels to a window ==
      <font>special13</font>
 
      <onleft>98</onleft>
Kodi has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.
      <onright>99</onright>
      <onup>2</onup>
      <ondown>5</ondown>
      <textureFocus>home-focus.gif</textureFocus>
      <textureNoFocus>-</textureNoFocus>
      <textOffsetX>30</textOffsetX>
</control>
</xml>


The button will now have a label “My Games”, and will automatically launch the My Programs section, using Games as the default bookmark. 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!
This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[Basic_controls#Home_Screen|Home Screen]] of the Confluence skin.


===Prettying it up===
We start by opening up [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml], which is the XML file for the Home window for all resolutions. [[Window IDs|You can find a list of the windows and their XML files here.]]<br />
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).
We find the <controls> section in the XML file, and insert the following XML code after the rest of the <control> blocks. This effectively places it on top of everything else, as controls are rendered in the order that they appear in the XML file.


<xml>
<source lang="xml">
<control>
<control type="image">
    <type>multiimage</type>
  <description>Weather conditions</description>
    <id>0</id>
  <left>1200</left>
    <posX>182</posX>
  <top>600</top>
    <posY>105</posY>
  <width>48</width>
    <width>538</width>
  <height>48</height>
    <height>362</height>
  <texture>$INFO[Weather.Conditions]</texture>
    <imagepath>4x3home-mypictures</imagepath>
  <colordiffuse>98FFFFFFF</colordiffuse>
    <visible>Control.HasFocus(4) + !Player.HasVideo</visible>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>
</control>
</xml>
     
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
<control type="label">
<xml>
  <description>Weather Temperature</description>
<imagepath>4x3home-myprograms</imagepath>
  <left>1000</left>
</xml>
  <top>600</top>
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:
  <width>200</width>
<xml>
  <height>20</height>
<imagepath>mygamesimage.png</imagepath>
  <label>$INFO[Weather.Temperature]</label>
</xml>
  <font>font13</font>
 
  <align>left</align>
==References==
  <visible effect="fade" time="250">Weather.IsFetched</visible>
[[Window Structure|More information on the structure of skin xml files can be found here]]
</control>
     
<control type="label">
  <description>Weather Location</description>
  <left>1000</left>
  <top>620</top>
  <width>200</width>
  <height>20</height>
  <label>$INFO[Weather.Location]</label>
  <font>font13</font>
  <align>left</align>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>
</source>


[[Window IDs|More information on the different skin files, window names, and id's can be found here]]
Note that the above code is making use of $INFO[] label in the [[Image Control|image control]] and in the [[Label_control|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels|can be found here]]. Kodi fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.


[[Button control|Information on Button controls]]
== More simple mods ==
*[[HOW-TO:Add Time Remaining to Confluence]]
*[[HOW-TO:Add volume value in Confluence]]
*[[HOW-TO:Change time and date in Confluence]]
*[[HOW-TO:Change the episode thumbnail in Confluence]]
*[[HOW-TO:Remove media flags in Confluence]]
*[[HOW-TO:Remove ratings in Confluence]]
*[[HOW-TO:Remove the logo in Confluence]]
*[[HOW-TO:Simplify the seekbar in Confluence]]


[[MultiImage Control|Information on MultiImage controls]]


'''See also:'''<br>
==See also==
* [[How to show the weather on the home page]]
* [[Add-on development]]
* [[Skinning]]


[[category:How To|Edit the Main Menu (Home Screen)]]
[[Category:How-to|Edit the Main Menu (Home Screen)]]
[[category:How To|Main Menu (Home Screen)]]
[[Category:Development]]
[[Category:Skin development]]

Latest revision as of 07:36, 21 July 2020

Home icon grey.png   ▶ Development ▶ Add-on development ▶ Skinning ▶ HOW-TO:Simple Modifications

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.


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, Kodi will show the buttons (left to right) in the order they are listed in the xml file.

How to Change the Function of an item

The homepage of Kodi 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 containing the kids movies as a source in Kodi. 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://Kodi/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.

How to add weather labels to a window

Kodi has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.

This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the Home Screen of the Confluence skin.

We start by opening up 720p/Home.xml, which is the XML file for the Home window for all resolutions. You can find a list of the windows and their XML files here.

We find the <controls> section in the XML file, and insert the following XML code after the rest of the <control> blocks. This effectively places it on top of everything else, as controls are rendered in the order that they appear in the XML file.

<control type="image">
  <description>Weather conditions</description>
  <left>1200</left>
  <top>600</top>
  <width>48</width>
  <height>48</height>
  <texture>$INFO[Weather.Conditions]</texture>
  <colordiffuse>98FFFFFFF</colordiffuse>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>
      
<control type="label">
  <description>Weather Temperature</description>
  <left>1000</left>
  <top>600</top>
  <width>200</width>
  <height>20</height>
  <label>$INFO[Weather.Temperature]</label>
  <font>font13</font>
  <align>left</align>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>
       
<control type="label">
  <description>Weather Location</description>
  <left>1000</left>
  <top>620</top>
  <width>200</width>
  <height>20</height>
  <label>$INFO[Weather.Location]</label>
  <font>font13</font>
  <align>left</align>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>

Note that the above code is making use of $INFO[] label in the image control and in the label controls. A list of the various information available through the $INFO[] label can be found here. Kodi fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.

More simple mods


See also