HOW-TO:Simple Modifications: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
No edit summary
Line 31: Line 31:
Now the weather button will show up next to, on the right of, the music button on the Home menu.
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.
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 Option ==
== 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 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.
The action of a button is defined by it's <onclick> function.
Line 48: Line 48:
== How to add a new button to the Menu ==
== How to add a new button to the Menu ==
Let's say you want a button on the menu linking to your kids movies.
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.
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
This can be done by going to Videos > Files > Add videos


Line 58: Line 58:
         <source>
         <source>
             <name>Kids</name>
             <name>Kids</name>
             <path pathversion="1">smb://XBMC/Movies/Kids-Movies/</path>
             <path pathversion="1">smb://Kodi/Movies/Kids-Movies/</path>
         </source>
         </source>
     </video>
     </video>
Line 80: Line 80:
== How to add weather labels to a window ==
== How to add weather labels to a window ==


XBMC 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.
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 [[General Navigation#Home Screen|Home Screen]] of the Confluence skin.
This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[General Navigation#Home Screen|Home Screen]] of the Confluence skin.
Line 125: Line 125:
</source>
</source>


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





Revision as of 00:25, 13 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.

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, 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 Option

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.


See also