XBMC includes a new GUI library written from scratch. This library allows you to skin/change everything you see in XBMC, from the images, the sizes and positions of all controls, colours, fonts, and text, through to altering navigation and even adding new functionality.

The skin system is quite complex, and this portion of the manual is dedicated to providing in depth information on how it all works, along with tips to make the experience a little more pleasant.

If you are just getting started with skinning XBMC, then it is suggested that the best way to learn is by modifying one of the many existing skins that are available. The default skin, Confluence, includes almost all the various tricks and features that make the XBMC skinning engine so powerful, so is an ideal place to start. You may wish to start by having a look through the tutorial section on skinning XBMC as well as the "Skinning XBMC" article, and try modifying a window or two by adding a button, or altering the textures or layout.

1 Anatomy of a Skin

XBMC skins once installed are located in userdata addons folder. This is the folder where all skins are placed and listed.

Any additional skins you create, or download from or be installed via zip XBMC will load and ask you if you would like to load the skin and also allow you to load them up from within the Appearance Settings. It is suggested that if you want to make your own skin, then starting by copying an existing skins files over into a new folder (let's say skin/myskin) is a good place to start. You can then edit each of the files as you become more familiar with the skinning system.

Each skin folder contains several subdirectorys, and one file:

myskin/font

This subdirectory contains all fonts used by the skin. you can add/replace fonts here

myskin/media

This subdirectory contains all the media files (.png/.gif/.jpg...) You can replace/edit these as you like.

myskin/addon.xml

This contains the information that XBMC uses to find the other files that XBMC requires to describe it's skin. It also contains credits information, and versioning information.

myskin/720p

This is a resolution-specific directory. XBMC can run in multiple resolutions, and thus can use different files for some resolutions (as there is a big difference between NTSC at 720x480 pixels and 1080i at 1920x1080 pixels!) See here for the order in which it looks for skin files.

2 Skin Themes

All the basic media files for a skin should be compressed into the Textures.xbt file, and placed in the media/ folder. You can use the tool Texturepacker for this. All the images that make up the default skin theme should be in the Textures.xbt file.

In addition to this, XBMC allows other .xbt files in the media/ folder, each one representing a different theme for your skin. For instance, you could tint all your main textures a red colour, and create a new theme package Red.xbt. This gives users more choice in the look of a particular skin, and only the textures change when you change themes – the layout stays the same. If the user has selected a theme, then when a control requires a texture, XBMC will first look in the <themename>.xbt file for the texture. It will fall back to the Textures.xbt file if <themename>.xbt doesn't contain the image. This means that the theme .xbt files need only contain the changed textures – all other textures will fallback to using Textures.xbt as usual.

A suggested method of creating a theme is as follows:

1. Run Texturepacker.exe on the folder containing the default texture files, to generate Textures.xbt as you would normally do.
2. Identify the textures you wish to have themed and copy them to a separate folder.
3. Create a separate folder for each theme outside of your normal skin work area, and place the altered copies of each of the textures in them.
4. Run Texturepacker.exe on each of the theme folders created in step 3 to create the themed .xbt files (note you can use the -output switch with Texturepacker.exe to name the theme appropriately).
5. Place Textures.xbt and each of the theme .xbt files in the media/ folder of your skin. XBMC will automatically pick them up.

3 Includes

The other special (and arguably the most important skinning file of all) is includes.xml. This is, as its title suggests, a place from which you can define the default look, size, and positioning of controls, to save you replicating many of the control's attributes throughout the window .xml files. For instance, you can setup the size, and textures used for a button control, thus allowing you to leave those details out in the rest of the skin files, unless of course you want to override the default look or size etc. in a particular window.

This is extremely valuable as it allows you to greatly simplify a lot of the work in building a skin. For one thing, it means that once you have include files setup, many of the default parameters for a different resolution can be done by just altering the parameters within the include file(s) for the different resolution.

With the 2.1 skinning engine, you can infact have more than one include file - you can specify the file attribute when including from a different file, allowing you to have an include file dedicated to a particular set of attributes.

The layout of an includes file is as follows.

  <includes>
    <include name="whitetext">
      <textcolor>ffffffff</textcolor>
    </include>
    <include file="listdefaults.xml" />
    <default type="button">
      <include>whitetext</include>
    </default>
    <constant name="leftedge">50</constant>
  </includes>

You'll notice in the above example that we have 4 different types of includes. The first <include> tag basically allows a substitution of the tags underneath it whenever it occurs. For instance, if in a window .xml file you have this:

  <control type="togglebutton">
    <include>whitetext</include>
    ... other tags go here
  </control>

Then it would substitute the <textcolor> tag for where the include tag is. You can have as many includes as you like, and as many tags can be inside an include - even complete controls, or complete control groups.

The second <include> tag in the example demonstrates how to include from a different file. As there is no include name specified, it will include the contents of the entire file at that point.

The <default> tag is similar to an include, except that it is used in every control of that type - even if you don't specify that the control is to use includes. Thus every buttoncontrol will have the whitetext include in it. Note that you can override this by specifying the <textcolor> tag in the buttoncontrol.

And finally, the <constant> tag allows you to define a numeric (floating point) constant by name for use in place of numeric values (<posx>, height="" etc.) would otherwise be used. This allows alignment of items using the same position values which can then easily be altered in one place.

4 The Window XML Files

The other xml files each define the skin for a single window. They all have the same basic layout, allowing you to place different controls on the window, and define how navigation should operate.

A list of all window .xml files and what they represent may be found in Apendix I: List of Windows.

The important thing to remember is that each window has a unique identifying number (id). This is how XBMC identifies the window from within the source code.

Furthermore, many of the controls within each window should have a unique id as well, unless they're just used as images or labels where navigation is unimportant and XBMC does not need to be able to identify them uniquely. The window id's are all listed in the Apendix I: List of Windows.

The structure of the window .xml files can be found below in the Window Structure.

5 addon.xml

6 Introduction

Each skin or script/plugin in XBMC contains the addon.xml file which sets up an overview of the addon and provides credits, versioning information and dependencies. Below we will explain which elements must be used to create an addon to be used in XBMC. At the end we will show you two different layouts to be used depending if you are developing a skin or script/addon.

7 Overview of the addon.xml items

There are a few things to notice:

• The <addon> element must be present, and is used to present the data about the addon package as a whole.
• Inside the <addon> element is a <requires> element, listing the requirements that this addon needs in order to function.
• Then there is one or more <extension> elements, each of which describes which part of XBMC the addon extends.
• Finally, there is a specific <extension> element which describes the addon for the user.

7.1 Mandatory

7.1.1 The <addon> element

The addon element has 4 attributes: id, version, name, and provider-name.

• The id attribute is the unique identifier used for this add-on. It must be unique, and must use only lowercase characters, periods, underscores, dashes and numbers. This identifier is also used as the name of the folder that contains the add-on, so for ease of searching, we suggest you use something like <type>.<uniquename>.
• The version attribute is used by XBMC to determine whether updates are available. This should be following the X.Y.Z (Major.Minor.Patch) version numbering for example: version="0.0.1" Most commonly you start with a 0.y.z for testing purpose and once you feel it is ready you go to version="1.0.0"
• The name attribute is the name of the add-on as it appears in the UI. This should be in English where it makes sense for it to be so, and is not translatable.
• The provider-name attribute is used as the author field. This could be a team of authors or a single author.
• If it's maintained by multiple people please separate them by using a komma sign ,

Example:

    <addon id="script.hello.world" name="Hello World" version="0.0.1" provider-name="Dev1, Dev2">

How versioning works:

• 2.2.1 is newer than 2.2.9
• 2.3 is newer than 2.2.9
• 2.3.0 is newer than 2.2
• 2.2.1 is older than 2.2.1b << only one character = newer version
• 2.2.1 is newer than 2.2.1bc << two or more = older version
• 2.2.1 is newer than 2.2.1 beta
• 2.2.1 is newer than 2.2.1beta

Text should only be added in case of beta or release version. In other cases version number should only contain numbers.

7.1.2 The <requires> element

The requires element contains one or more <import> elements which specify which other add-ons this particular add-on requires, and which version of those add-ons it requires. These add-ons may be part of XBMC itself, or may be parts of other 3rd party add-ons.

XBMC will only allow the add-on to be run if suitable versions of the non-optional add-ons on which this add-on depends are installed. When a user installs your add-on from an online repository via XBMC's add-on manager, XBMC attempts to resolve these dependencies, and install anything that your add-on relies on first. The dependency must be provided with the minimum version number your script/skin requires.

The requirement may be made optional by setting the optional attribute to true. This will only install the dependency when the depending addon actually needs it. If this dependency is missing the depending addon will still be able to be installed.

If your module relies on third party modules, they must be installed prior to installing your module, by the user. Assuming the third party module is available on an existing repository, XBMC will install this automatically when the user installs your addon. Libraries outside of the xbmc domain must be loaded by your code and do not form part of the <requires> statement as XBMC doesn't know what to do with them.

• Example of <requires> element:

    <requires>
      <import addon="xbmc.python"                 version="2.1.0"/>
      <import addon="script.module.elementtree"   version="1.2.7"/>
      <import addon="script.module.simplejson"    version="2.0.10" optional="true"/>
    </requires>

• For example this will only install on OPENELEC:

    </requires>
        <import addon="os.openelec.tv" version="2.0" optional="false"/>
    </requires>

• Example of an optional <requires> element:

    <import addon="script.module.simplejson"    version="2.0.10" optional="true"/>

Each different XBMC version might require you to use a higher version of the xbmc.* addon dependencies to control on which version of XBMC the addon can be installed.

7.1.3 The <extension> elements

The extension element describes the technical aspects of this add-on. It will have at least a point attribute which will give the part of XBMC that the add-on extends. For instance, the addon.xml file for the Confluence skin extends the "xbmc.gui.skin" part of XBMC. All available extension points are given below.

The various extension points that XBMC provides are given in the list below.

Add-ons that don't correspond to a specific add-on category can not be installed by users. These are usually supporting or shared add-ons that are installed automatically by the add-ons that require them.

7.1.3.1 xbmc.python.pluginsource

The most common extension point that will be used by plugin addon developers is "xbmc.python.pluginsource" .

The <extension point="xbmc.python.pluginsource"> tag has an extra attribute "library". This is the name of the python script (startup script) that will be run when the plugin is activated. This file must exist in the root of your addon directory. The extension has an addition sub element <provides> and is a whitespace separated list of image, video, audio, executable. This determines in what area (or context) of the XBMC system your addon will make itself visible in.

• image => Pictures
• video => Video
• audio => Music
• executable => Programs
• <blank> => No visible presence

Example:

    <extension point="xbmc.python.pluginsource" library="gpodderxbmc.py">
        <provides>audio video</provides>
    </extension>

More info on Plugin Sources

7.1.4 The xbmc.addon.metadata extension

This special extension point must be provided by all add-ons, and is the way that your add-on is described to users of the XBMC add-on manager.

7.1.4.1 Required information

There are several elements that this should contain and all are compulsory (except the broken tag). Each of the elements below must always be present in English as a minmum.:

• One or more summary elements provide a short summary of what the add-on does. This should be a single sentence. It may be translated into multiple languages, whereby each has a lang="ch" attribute. No lang attribute indicates English but is recommended.

<summary lang="en">Hello World script provides some basic examples on how to create your first script.</summary>

• One or more description elements provide a more detailed summary of what the add-on does. Again, these can be translated.

<description lang="en">Hello World script provides some basic examples on how to create your first script
 and hopefully will increase the number of XBMC users to start creating their own addons.</description>

• One or more disclaimer elements that indicate what (if any) things the user should know about the add-on. There is no need to have a disclaimer if you don't want one, though if something requires settings, or only works in a particular country then you may want to state this here.

<disclaimer lang="en">Feel free to use this script. For information visit the wiki.</disclaimer>

• A platform tag which specifies which platforms (operating systems, hardware) this add-on runs on. Many add-ons will run on all platforms, so "all" is an option. If the platform tag is missing, we assume the add-on runs on all platforms. A combination of these is also possible. Currently available options are:

• all
• linux
• osx
• osx64
• osx32
• ios
• windx
• wingl
• android

<platform>all</platform>

• Language tag(s). These are the language(s) of the *content* provided by your add-on. it applies to plugins, scripts, scrapers etc. This allows browsing the add-on list by language. When there is no specific language provided in your content leave it blank.

List of language codes (ISO-639:1988)

    <language>en de fr</language>
    or
    <language></language>

• Broken tag. This will mark the add-on as broken in the XBMC repo with providing the reason why. You don't need to do a version bump for this to work.

    <broken>deprecated</broken>

7.1.4.2 Optional information

These tags will be used to provide easy navigation on our upcoming add-on front-end where you can browse through available add-ons and directly visit the forum thread, source code or contact the add-on author.

• License tag that indicate what license is used for this add-on.

    <license>GNU GENERAL PUBLIC LICENSE. Version 2, June 1991</license>

• Forum tag. This this provide the forum thread URL for this specific add-on.

    <forum>put URL here</forum>

• Website tag. This provides the website URL for this specific add-on.

    <website>put URL here</website>

• Source tag. This provides the source code location URL for this specific add-on.

    <source>put URL here</source>

• E-mail tag. This provides the e-mail adress of the author if he wishes to do so for this specific add-on. Her's two examples of how you can make it look (the second one it harder for spambots to use)

    <email>foo@bar.com</email>
    <email>foo at bar dot com</email>

7.2 Skin specific elements

7.2.1 Overview

7.2.2 How window xml files are found

XBMC can run in many differing resolutions, and a skin should try and cater to all these resolutions. The easiest way is to develop for one specific resolution and make sure that all controls contain <width> and <height> tags. That way, XBMC can scale the controls to the new screen resolution.

However, you may choose to develop alternative window xml files for differing resolutions (such as for HDTV resolutions, or for widescreen versus 4x3 resolutions).

The order that XBMC looks for it's skin files are as follows:

1. It first looks in the current screenmode folder (one of 1080i, 720p, NTSC16x9, NTSC, PAL16x9 or PAL)
2. If the current screenmode is 1080i, it then looks in the 720p folder.
3. If the current screenmode is a widescreen mode (1080i, 720p, NTSC16x9, PAL16x9) then it looks in the <defaultresolutionwide> folder.
4. Finally, it looks in the <defaultresolution> folder.

This allows you to just put any window files that do not require special treatment for 16x9 resolutions etc. in the <defaultresolution> folder, preventing needless repetition.

7.3 Overview of the script/plugin specific items

INFO HERE

8 addon.xml examples

8.1 addon.xml for skins

<?xml version="1.0" encoding="UTF-8"?>
<addon
  id="skin.confluence"
  version="2.1.3"
  name="Confluence"
  provider-name="Jezz_X|Team XBMC">
  <requires>
    <import addon="xbmc.gui" version="4.0.0"/>
  </requires>
  <extension
    point="xbmc.gui.skin"
    defaultthemename="textures.xbt"
    debugging="false"
    effectslowdown="0.75">
    <res width="1280" height="720" aspect="16:9" default="true" folder="720p" />
  </extension>
  <extension point="xbmc.addon.metadata">
    <summary lang="en">Confluence skin by Jezz_X. (XBMC's default skin)</summary>
    <description lang="en">Confluence is the default skin for XBMC 9.11 and above. It is a combination of concepts from many popular skins, and attempts to embrace and integrate their good ideas into a skin that should be easy for first time XBMC users to understand and use.</description>
    <disclaimer lang="en">Confluence is the default skin for XBMC, removing it may cause issues</disclaimer>
    <platform>all</platform>
    <license>GNU GENERAL PUBLIC LICENSE. Version 2, June 1991</license>
    <forum></forum>
    <website></website>
    <email></email>
    <source></source>
  </extension>
</addon>

One thing to note is that all tag names are lower case. XML tag names are case sensitive!

8.2 addon.xml for scripts/plugins

9 XBMC source code

addon.xml is handled in following XML Schema Definition

10 Windows

10.1 Window Structure

10.2 About the Window XML Files

Each window in an XBMC skin is represented by a single .xml file. See here for a list of the standard windows and links to their .xml files.

Each .xml file has the same basic structure – it starts with some heading information that pertains to the window as a whole, and then contains a <controls> block within which all the controls that describe the window are defined.

10.3 Window Header

<window>
  <onload>RunScript(script.foobar)</onload>
  <onunload>SetProperty(foo,bar)</onunload>
  <defaultcontrol always="false">2</defaultcontrol>
  <allowoverlay>yes</allowoverlay>
  <backgroundcolor>0xff00ff00</backgroundcolor>
  <views>50,51,509,510</views>
  <visible>Window.IsActive(Home)</visible>
  <animation effect="fade" time="100">WindowOpen</animation>
  <animation effect="slide" end="0,576" time="100">WindowClose</animation>
  <zorder>1</zorder>
  <coordinates>
    <posx>40</posx>
    <posy>50</posy>
    <origin x="100" y="50">Window.IsActive(Home)</origin>
  </coordinates>
  <previouswindow>MyVideos</previouswindow>
  <controls>
    <control>
    </control>
    ....
  </controls>
</window>

One thing to note is that all tag names are lower case. XML tag names are case sensitive!

The header contains the following tags:

onload

Optional: the build-in function to execute when the window opens

onunload

Optional: the build-in function to execute when the window closes

defaultcontrol

This specifies the default control of the window. This is the id of the control that will receive focus when the window is first opened. Note that most XBMC windows save the current focus when you leave the window, and will return to the last focused item when you return to a window. This behaviour can be stopped by specifying the attribute always="true".

backgroundcolor

Specifies whether the window needs clearing prior to rendering, and if so which colour to use. Defaults to clearing to black. Set to 0 (or 0x00000000) to have no clearing at all. If your skin always renders opaque textures over the entire screen (eg using a backdrop image or multiple backdrop images) then setting the background color to 0 is the most optimal value and may improve performance significantly on slow GPUs.

allowoverlay

Setting this tag to true, or yes, indicates that the music or video overlay may be shown when this window is active. If this tag is not present, the state of the previous (or parent) window is used.

visible

Specifies the conditions under which a dialog will be visible. XBMC evaluates this at render time, and shows or hides a dialog depending on the evaluation of this tag. See here for more details. Applies only to <type>dialog</type>.

animation

Specifies the animation effect to perform when opening or closing the window. See here for more details.

zorder

This specifies the “depth” that the window should be drawn at. Windows with higher zorder are drawn on top of windows with lower z-order. All dialogs by default have zorder 1, so if you have a particular dialog that you want underneath all others, give it a zorder of 0. (Note that the normal render order is: The base window, then the overlays (music + video), then dialogs. <zorder> only effects the rendering of the dialogs.

coordinates

This block is used to specify how XBMC should compute the coordinates of all controls.

posx

Sets the horizontal “origin” position of the window. Defaults to 0 if not present.

posy

Sets the vertical “origin” position of the window. Defaults to 0 if not present.

origin

Sets a conditional origin for the window. The window will display at (x,y) whenever the origin condition is met. You can have as many origin tags as you like – they are evaluated in the order present in the file, and the first one for which the condition is met wins. If none of the origin conditions are met, we fall back to the <posx> and <posy> tags.

previouswindow

This can be used to specify a window to force XBMC to go to on press of the Back button. Normally XBMC keeps a “window stack” of previous windows to handle this. This tag allows you to override this behaviour. The value is the name of the window.

views

This tag lets you use view id's beyond 50 to 59 it also lets you set the order in which they cycle with the change view button in the skin. Only useful in My<Foo>.xml windows.

controls

This is the block the defines all controls that will appear on this window.

10.3.1 The Different Types of Controls

XBMC supports many different types of controls.

Click here for the control types and what they all do.

Some of these controls are required on specific windows, as they're necessary for that window to perform it's duty, or, the contents of the control are only valid on a particular window. The mandatory controls for each window are listed here. While the controls are mandatory, you can ofcourse move them about and change their appearance within the windows to your hearts content!

10.3.2 Adding Extra Windows

All of the windows in the window list are defined within the executeable of XBMC itself, as most of them have a specific purpose. However, the skinner may add extra windows as and when they are needed or wanted. The only restriction to this is that only controls that do not require specific source code to operate can be used. This is not too much of a restriction though, as many skinners have found out.

To add an extra window, all you need to do is design up the window's .xml file in the usual way, assign it an <id> outside of the ones defined in the window list, and then name the file customN.xml, where N is a number. You can have as many as you like, as long as they have unique <id>'s, and are named differently. Then just define the <type> of window you want, the coordinate system and so on, add the controls and setup the navigation. To activate your window, you can do it by adding a button control elsewhere in the skin, or you can get it to popup on a press of the controller or remote via keymap.xml and so on. Basically you just need to run XBMC.ActivateWindow(id) from a suitable place.

11 Controls

Controls are the substance of your skin. They define everything from buttons, to text labels, to visualization placement. This portion of the manual will explain each and every control in detail.

11.1 Label Control

The label control is used for displaying text in XBMC. You can choose the font, size, colour, location and contents of the text to be displayed.

11.1.1 Example

  <control type="label" id="1">
        <description>My First label</description>
        <posx>80</posx>
        <posy>60</posy>
        <width>250</width>
        <visible>true</visible>
        <align>center</align>
        <aligny>center</aligny>
        <scroll>false</scroll>
        <label>6</label>
        <info>MusicPlayer.Artist</info>
        <number></number>
        <angle>30</angle>
        <haspath>false</haspath>
        <font>font14</font>
        <textcolor>FFB2D4F5</textcolor>
        <shadowcolor>ff000000</shadowcolor>
        <wrapmultiline>false</wrapmultiline>
        <scrollspeed>50</scrollspeed>
        <scrollsuffix> - </scrollsuffix>
  </control>

11.1.2 Auto Size Labels

Wrapping your label in a grouplist with the auto width and appropriate minium and maximum values. Allows the labels width to dynamically change relevalant to how long the label text is. This allows a image or other control to be alligned to the right of the actual label text no matter how wide the label is.

   <width min="29" max="200">auto</width>

11.1.3 Multi-Line Labels

If you want your label control to span multiple lines, you can insert a new line character in your label. For example:

   <label>This will be on the first line[CR]And this will be on the second line</label>

Also, if you want your label control to conform to the <width> parameter, but still want to be able to give it more content than will fit on one line, then setting:

   <wrapmultiline>true</wrapmultiline>

will cause the text to be cut up (at the spaces in the text) onto multiple lines. Note that if a single word is larger than <width> then it will not be cut, and will still overflow.

11.1.4 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.2 See also

Development:

• Add-on development
• Skinning

11.3 Fade Label Control

The fade label control is used for displaying multiple pieces of text in the same space in XBMC. You can choose the font, size, colour, location and contents of the text to be displayed. The first piece of information to display fades in over 50 frames, then scrolls off to the left. Once it is finished scrolling off screen, the second piece of information fades in and the process repeats. A fade label control is not supported in a list container.

11.3.1 Example

  <control type="fadelabel" id="1">
        <description>My First fadelabel</description>
        <posx>80</posx>
        <posy>60</posy>
        <width>250</width>
        <visible>true</visible>
        <scroll>false</scroll>
        <scrollout>true</scrollout>
        <pauseatend>200</pauseatend>
        <label>6</label>
        <info>MusicPlayer.Genre</info>
        <info>MusicPlayer.Artist</info>
        <info>MusicPlayer.Album</info>
        <info>MusicPlayer.Year</info>
        <font>font14</font>
        <textcolor>FFB2D4F5</textcolor>
        <textoffsetx>20</textoffsetx>
  </control>

11.3.2 Tag Descriptions

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.4 See also

Development:

• Add-on development
• Skinning

11.5 Button Control

The button control is used for creating push buttons in XBMC. You can choose the position, size, and look of the button, as well as choosing what action(s) should be performed when pushed.

11.5.1 Example

<control type="button" id="1">
      <description>My first button control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynormaltexture.png</texturenofocus>
      <label>29</label>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <focusedcolor>FFFFFFFF</focusedcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align></align>
      <aligny></aligny>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <pulseonselect></pulseonselect>
      <onclick>XBMC.ActivateWindow(MyVideos)</onclick>
      <onfocus>-</onfocus>
      <onunfocus>-</onunfocus>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.5.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.6 See also

Development:

• Add-on development
• Skinning

11.7 Multiselect Control

The multiselect control is used for creating a single line of text with multiple selectable pieces of text that can perform various actions. You can choose the position, size, and look of the text and highlights as well as choosing what action(s) should be performed when items are selected.

11.7.1 Example

<control type="multiselect" id="13">
      <description>My first multiselect control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynormaltexture.png</texturenofocus>
      <label>[ONCLICK Shutdown]Shutdown[/ONCLICK] or [ONCLICK Reboot]Reboot[/ONCLICK] XBMC</label>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <aligny>center</aligny>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.7.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.8 See also

Development:

• Add-on development
• Skinning

11.9 Image Control

The image control is used for displaying images in XBMC. You can choose the position, size, transparency and contents of the image to be displayed.

11.9.1 Example

<control type="image" id="1">
      <description>My first image control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <fadetime>200</fadetime>
      <texture border="5" flipy="true" flipx="false">mytexture.png</texture>
      <bordertexture border="5">mybordertexture.png</bordertexture>
      <bordersize>5</bordersize>
      <texture>$INFO[MusicPlayer.Cover]</texture>
      <aspectratio>keep</aspectratio>
</control>

11.9.2 Image Size and Type Restrictions

For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:

11.9.2.1 Size

Images can be any size, though some graphics cards allow only power of 2 textures, so this may be a consideration. For the most case, it doesn't really matter what size things are - XBMC will quite happily load most files.

11.9.2.2 Formats

If you wish to use transparency, then use PNG. It is suggested that you use PNG and JPG as much as possible. Note that once the images are injected into Textures.xbt, they are not stored as JPG or PNG – rather they are stored in a native format used for GPUs for faster loading, such as ARGB or DXTc textures. The size of the images (in kb) is therefore not as important as the size of the images in pixels – so feel free to store them in a lossless (eg PNG) manner if you wish.

The only exception to this is if you require an animated texture. In this case, we support only animated GIF. There are also some animated gifs that may not work. Use ImageReady CS and make sure you set the gif-anim to “restore to background” and they should work fine.

11.9.3 Available Tags and Attributes

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.10 See also

Development:

• Add-on development
• Skinning

11.11 MultiImage Control

The MultiImage control is used for displaying a slideshow of images from a folder in XBMC. You can choose the position and size of the slideshow, as well as timing information.

11.11.1 Example

<control type="multiimage" id="1">
      <description>My first slideshow control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <imagepath>myimagepath</imagepath>
      <info></info>
      <timeperimage>5000</timeperimage>
      <fadetime>2000</fadetime>
      <pauseatend>10000</pauseatend>
      <randomize>true</randomize>
      <loop>no</loop>
      <aspectratio>stretch</aspectratio>
</control>

11.11.2 Image Size and Type Restrictions

For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:

11.11.2.1 Formats

If you wish to use full 8 bit transparency, then use PNG. If you only need a single transparent colour, then you can specify this in the <colorkey> tag, so any image will be fine. It is suggested that you use PNG and JPG as much as possible. The size of the images (in kb) is therefore not as important as the size of the images in pixels – so feel free to store them in a lossless (eg PNG) manner if you wish.

The only exception to this is if you require an animated texture. In this case, we only support animated GIF. There are also SOME animated gifs that may not work. Use ImageReady CS and make sure you set the gif-anim to “restore to background” and they should work fine.

11.11.3 Available Tags and Attributes

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.12 See also

Development:

• Add-on development
• Skinning

11.13 Radio button Control

The radio button control is used for creating push button on/off settings in XBMC. You can choose the position, size, and look of the button. When the user clicks on the radio button, the state will change, toggling the extra textures (textureradiofocus and textureradionofocus). Used for settings controls.

11.13.1 Example

<control type="radiobutton" id="2">
      <description>My first radiobutton control</description>
      <type>radiobutton</type>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynormaltexture.png</texturenofocus>
      <textureradioon>myradiobutton.png</textureradioon>
      <textureradiooff>myradiobutton_nf.png</textureradiooff>
      <selected>Player.Paused</selected>
      <onclick>PlayerControls(Pause)</onclick>
      <label>29</label>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <focusedcolor>FFFFFFFF</focusedcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align>left</align>
      <aligny>center</aligny>
      <textoffsetx>4</textoffsetx>
      <textoffsety>5</textoffsety>
      <pulseonselect>false</pulseonselect>
      <onfocus>-</onfocus>
      <onunfocus>-</onunfocus>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.13.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.14 See also

Development:

• Add-on development
• Skinning

11.15 Select button control

The select button control is used for creating a push button that hides multiple options in XBMC. You can choose the position, size, and look of the button, as well as what it looks like when it's pushed in (option arrows etc.)

When the button is pushed, two arrows pop up allowing you to alter the contents of the button (thus select different options). Used to alter the current View mode in My Videos and My Music.

11.15.1 Example

<control type="selectbutton" id="4">
      <description>My first select button control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynormaltexture.png</texturenofocus>
      <texturebg>mybgtexture.png</texturebg>
      <textureleft>mylefttexture.png</textureleft>
      <textureleftfocus>myleftfocustexture.png</textureleftfocus>
      <textureright>myrighttexture.png</textureright>
      <texturerightfocus>myrightfocustexture.png</texturerightfocus>
      <label>29</label>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align></align>
      <alignY></alignY>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <pulseonselect>false</pulseonselect>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.15.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.16 See also

Development:

• Add-on development
• Skinning

11.17 Toggle button control

The toggle button control is used for creating buttons that have 2 states. You can choose the position, size, and look of the button. When the user clicks on the toggle button, the state will change, toggling the extra textures (alttexturefocus and alttexturenofocus). Used for controls where two states are needed (pushed in and pushed out for instance).

11.17.1 Example

<control type="togglebutton" id="25">
      <description>My first togglebutton control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynormaltexture.png</texturenofocus>
      <alttexturefocus>myselectedTexture.png</alttexturefocus>
      <alttexturenofocus>myselectedTexture_nf.png</alttexturenofocus>
      <usealttexture>!Player.IsPaused</usealttexture>
      <label>29</label>
      <altlabel>29</altlabel>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align>left</align>
      <aligny>center</aligny>
      <textoffsetx>4</textoffsetx>
      <textoffsety>5</textoffsety>
      <pulseonselect>false</pulseonselect>
      <onclick>Player.Pause</onclick>
      <onfocus>-</onfocus>
      <onunfocus>-</onunfocus>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.17.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.18 See also

Development:

• Add-on development
• Skinning

11.19 Spin Control

The spin control is used for when a list of options can be chosen (such as a page up/down control). You can choose the position, size, and look of the spin control.

11.19.1 Example

<control type="spincontrol" id="14">
      <description>My first spin control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <textureup>myuptexture.png</textureup>
      <textureupfocus>myupfocustexture.png</textureupfocus>
      <texturedown>mydowntexture.png</texturedown>
      <texturedownfocus>mydownfocustexture.png</texturedownfocus>
      <subtype>page</subtype>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align></align>
      <aligny></aligny>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <pulseonselect></pulseonselect>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.19.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.20 See also

Development:

• Add-on development
• Skinning

11.21 Settings Spin Control

The settings spin control is used in the settings screens for when a list of options can be chosen from using up/down arrows. You can choose the position, size, and look of the spin control. It is basically a cross between the button control and a spin control. It has a label and focus and non focus textures, as well as a spin control on the right.

11.21.1 Example

<control type="spincontrolex" id="12">
      <description>My first settings spin control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynofocustexture.png</texturenofocus>
      <textureup>myuptexture.png</textureup>
      <textureupfocus>myupfocustexture.png</textureupfocus>
      <texturedown>mydowntexture.png</texturedown>
      <texturedownfocus>mydownfocustexture.png</texturedownfocus>
      <label>46</label>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align></align>
      <aligny></aligny>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <pulseonselect></pulseonselect>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.21.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.22 See also

Development:

• Add-on development
• Skinning

11.23 Slider Control

The slider control is used for things where a sliding bar best represents the operation at hand (such as a volume control or seek control). You can choose the position, size, and look of the slider control.

11.23.1 Example

<control type="slider" id="17">
      <description>My first slider control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>30</height>
      <visible>true</visible>
      <texturesliderbar>mybackgroundtexture.png</texturesliderbar>
      <textureslidernib>mydowntexture.png</textureslidernib>
      <textureslidernibfocus>mydownfocustexture.png</textureslidernibfocus>
      <info></info>
      <action></action>
      <controloffsetx></controloffsetx>
      <controloffsety></controloffsety>
      <pulseonselect></pulseonselect>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

11.23.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.24 See also

Development:

• Add-on development
• Skinning

11.25 List Container

The list container is one of several containers used to display items from file lists in various ways. The list container is very flexible - it's only restriction is that it is a list - i.e. a single column or row of items. The layout of the items is very flexible and is up to the skinner.

11.25.1 Example

<control type="list" id="50">
      <description>My first list container</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <viewtype label="3D list">list</viewtype>
      <orientation>vertical</orientation>
      <pagecontrol>25</pagecontrol>
      <scrolltime tween="sine" easing="out">200</scrolltime>
      <itemlayout width="250" height="29">
		<control type="image">
			<posx>5</posx>
			<posy>3</posy>
			<width>22</width>
			<height>22</height>
			<info>ListItem.Icon</info>
		</control>
		<control type="label">
			<posx>30</posx>
			<posy>3</posy>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<info>ListItem.Label</info>
		</control>
		<control type="label">
			<posx>475</posx>
			<posy>3</posy>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<info>ListItem.Label2</info>
		</control>
      </itemlayout>
      <focusedlayout height="29" width="250">
		<control type="image">
			<width>485</width>
			<height>29</height>
			<posx>0</posx>
			<posy>0</posy>
			<visible>Control.HasFocus(50)</visible>
			<texture>list-focus.png</texture>
		</control>
		<control type="image">
			<posx>5</posx>
			<posy>3</posy>
			<width>22</width>
			<height>22</height>
			<info>ListItem.Icon</info>
		</control>
		<control type="label">
			<posx>30</posx>
			<posy>3</posy>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<info>ListItem.Label</info>
		</control>
		<control type="label">
			<posx>475</posx>
			<posy>3</posy>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<info>ListItem.Label2</info>
		</control>
      </focusedlayout>
</control>

11.25.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.26 See also

Development:

• Add-on development
• Skinning

11.27 Wraplist Container

The wrap list container is one of several containers used to display items from file lists in various ways. The wrap list container is the same as the List Container, with two exceptions:

1. The focused item is fixed.
2. The items "wrap" around once they reach the end.

As with all container controls, the layout of the items within the control is very flexible.

11.27.1 Example

<control type="wraplist" id="50">
      <description>My first wraplist container</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <viewtype label="3D list">list</viewtype>
      <orientation>vertical</orientation>
      <pagecontrol>25</pagecontrol>
      <focusposition>3</focusposition>
      <scrolltime tween="sine" easing="out">200</scrolltime>
      <itemlayout width="250" height="29">
		<control type="image">
			<posx>5</posx>
			<posy>3</posy>
			<width>22</width>
			<height>22</height>
			<info>ListItem.Icon</info>
		</control>
		<control type="label">
			<posx>30</posx>
			<posy>3</posy>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<info>ListItem.Label</info>
		</control>
		<control type="label">
			<posx>475</posx>
			<posy>3</posy>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<info>ListItem.Label2</info>
		</control>
      </itemlayout>
      <focusedlayout height="29" width="250">
		<control type="image">
			<width>485</width>
			<height>29</height>
			<posx>0</posx>
			<posy>0</posy>
			<visible>Control.HasFocus(50)</visible>
			<texture>list-focus.png</texture>
		</control>
		<control type="image">
			<posx>5</posx>
			<posy>3</posy>
			<width>22</width>
			<height>22</height>
			<info>ListItem.Icon</info>
		</control>
		<control type="label">
			<posx>30</posx>
			<posy>3</posy>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<info>ListItem.Label</info>
		</control>
		<control type="label">
			<posx>475</posx>
			<posy>3</posy>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<info>ListItem.Label2</info>
		</control>
      </focusedlayout>
</control>

11.27.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.28 See also

Development:

• Add-on development
• Skinning

11.29 FixedList Container

The fixed list container is one of several containers used to display items from file lists in various ways. The fixed list container is the same as the List Container, with one exception: the focused item is fixed. Thus, moving up or down scrolls the items, not the focused position. As with all container controls, the layout of the items within the control is very flexible.

    <control type="fixedlist" id="50">
          <description>My first fixed list container</description>
          <posx>80</posx>
          <posy>60</posy>
          <width>250</width>
          <height>200</height>
          <visible>true</visible>
          <onup>2</onup>
          <ondown>3</ondown>
          <onleft>1</onleft>
          <onright>1</onright>
          <viewtype label="3D list">list</viewtype>
          <orientation>vertical</orientation>
          <pagecontrol>25</pagecontrol>
          <scrolltime tween="sine" easing="out">200</scrolltime>
          <focusposition>4</focusposition>
          <itemlayout width="250" height="29">
                    <control type="image">
                            <posx>5</posx>
                            <posy>3</posy>
                            <width>22</width>
                            <height>22</height>
                            <info>ListItem.Icon</info>
                    </control>
                    <control type="label">
                            <posx>30</posx>
                            <posy>3</posy>
                            <width>430</width>
                            <height>22</height>
                            <font>font13</font>
                            <aligny>center</aligny>
                            <selectedcolor>green</selectedcolor>
                            <align>left</align>
                            <info>ListItem.Label</info>
                    </control>
                    <control type="label">
                            <posx>475</posx>
                            <posy>3</posy>
                            <width>300</width>
                            <height>22</height>
                            <font>font13</font>
                            <aligny>center</aligny>
                            <selectedcolor>green</selectedcolor>
                            <textcolor>grey</textcolor>
                            <align>right</align>
                            <info>ListItem.Label2</info>
                    </control>
          </itemlayout>
          <focusedlayout height="29" width="250">
                    <control type="image">
                            <width>485</width>
                            <height>29</height>
                            <posx>0</posx>
                            <posy>0</posy>
                            <visible>Control.HasFocus(50)</visible>
                            <texture>list-focus.png</texture>
                    </control>
                    <control type="image">
                            <posx>5</posx>
                            <posy>3</posy>
                            <width>22</width>
                            <height>22</height>
                            <info>ListItem.Icon</info>
                    </control>
                    <control type="label">
                            <posx>30</posx>
                            <posy>3</posy>
                            <width>430</width>
                            <height>22</height>
                            <font>font13</font>
                            <aligny>center</aligny>
                            <selectedcolor>green</selectedcolor>
                            <align>left</align>
                            <info>ListItem.Label</info>
                    </control>
                    <control type="label">
                            <posx>475</posx>
                            <posy>3</posy>
                            <width>300</width>
                            <height>22</height>
                            <font>font13</font>
                            <aligny>center</aligny>
                            <selectedcolor>green</selectedcolor>
                            <textcolor>grey</textcolor>
                            <align>right</align>
                            <info>ListItem.Label2</info>
                    </control>
          </focusedlayout>
    </control>

11.29.1 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.30 See also

Development:

• Add-on development
• Skinning

11.31 Panel Container

The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.

11.31.1 Example

<control type="panel" id="52">
	<posx>190</posx>
	<posy>100</posy>
	<width>485</width>
	<height>425</height>
	<onleft>9000</onleft>
	<onright>60</onright>
	<onup>52</onup>
	<ondown>52</ondown>
	<scrolltime tween="sine" easing="out">200</scrolltime>
	<viewtype label="536">icon</viewtype>
	<pagecontrol>60</pagecontrol>
	<include>contentpanelslide</include>
	<itemlayout height="141" width="120">
		<control type="image">
			<posx>10</posx>
			<posy>10</posy>
			<width>100</width>
			<height>100</height>
			<info>ListItem.Icon</info>
		</control>
		<control type="image">
			<posx>80</posx>
			<posy>75</posy>
			<width>32</width>
			<height>32</height>
			<info>ListItem.Overlay</info>
		</control>
		<control type="label">
			<posx>60</posx>
			<posy>115</posy>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<info>ListItem.Label</info>
		</control>
	</itemlayout>
	<focusedlayout height="141" width="120">
		<control type="image">
			<width>110</width>
			<height>110</height>
			<posx>5</posx>
			<posy>5</posy>
			<texture>folder-focus.png</texture>
			<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
		</control>
		<control type="image">
			<posx>10</posx>
			<posy>10</posy>
			<width>100</width>
			<height>100</height>
			<info>ListItem.Icon</info>
			<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
		</control>
		<control type="image">
			<posx>80</posx>
			<posy>75</posy>
			<width>32</width>
			<height>32</height>
			<info>ListItem.Overlay</info>
			<animation effect="slide" end="5,5" time="100">focus</animation>
		</control>
		<control type="label">
			<posx>60</posx>
			<posy>120</posy>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<info>ListItem.Label</info>
		</control>
	</focusedlayout>
</control>

11.31.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.32 See also

Development:

• Add-on development
• Skinning

11.33 Progress Control

The progress control is used to show the progress of an item that may take a long time, or to show how far through a movie you are. You can choose the position, size, and look of the progress control.

11.33.1 Example

<control type="progress" id="12">
      <description>My first progress control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>30</height>
      <visible>true</visible>
      <reveal>false</reveal>
      <texturebg>mybackgroundtexture.png</texturebg>
      <lefttexture>mydowntexture.png</lefttexture>
      <midtexture>mymidtexture.png</midtexture>
      <righttexture>myrighttexture.png</righttexture>
      <overlaytexture>myoverlaytexture.png</overlaytexture>
      <info></info>
</control>

11.33.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.34 See also

Development:

• Add-on development
• Skinning

11.35 Text Box

The text box is used for showing a large multipage piece of text in XBMC. You can choose the position, size, and look of the text.

11.35.1 Example

<control type="textbox" id="2">
      <description>My first text box control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <font>font13</font>
      <textcolor>FFFFFFFF</textcolor>
      <pulseonselect></pulseonselect>
      <pagecontrol>13</pagecontrol>
      <autoscroll delay="3000" time="1000" repeat="10000">!Control.HasFocus(13)</autoscroll>
      <label>Text to display goes here [CR] next line...</label>
</control>

11.35.2 Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.36 See also

Development:

• Add-on development
• Skinning

11.37 RSS feed Control

The rss control is used for displaying scrolling RSS feeds from the internet in XBMC. You can choose the font, size, colour, location and the RSS feed to be displayed.

Note: Don't confuse RSS feed Control with RSS Feeds which allows you to view/listen to online video/audio/picture streams.

11.37.1 Example

 <control type="rss" id="1">
      <description>My First RSS control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>500</width>
      <visible>true</visible>
      <font>font14</font>
      <textcolor>FFB2D4F5</textcolor>
      <headlinecolor>FFFFFFFF</headlinecolor>
      <titlecolor>FF655656</titlecolor>
 </control>

11.37.2 Available Tags and attributes

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

The actual content of the RSS feed is defined in the RssFeeds.xml file stored in the user's profile. Here is an example :

 <rssfeeds>
   <set id="1">
     <feed updateinterval="30">http://feeds.feedburner.com/XboxScene</feed>
     <feed updateinterval="30">http://feeds.wired.com/wired/topheadlines</feed>
   </set>
   <set id="2">
     <feed updateinterval="30">http://www.cnet.co.uk/feeds/public/rss_news_10.htm</feed>
   </set>
 </rssfeeds>

As can be seen, each feedset has an id attribute – this is what we are referencing in the <id> attribute of the control. There can be more than one <set> defined, and more than one <feed> per set. The <feed>'s must be escaped so that they're xml-safe (ie replace & with & etc.). Each feed in the set runs through in the order they are defined. You can get more details on this specific configuration file at RssFeeds.xml

11.38 See also

Development:

• Add-on development
• Skinning

11.39 Visualisation Control

The visualisation control is used for displaying those funky patterns that jump to the music in XBMC. You can choose the position, and size of the visualisation displayed. Note that the control is only rendered if music is being played.

11.39.1 Example

<control type="visualisation" id ="3">
      <description>My first visualisation control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
</control>

11.39.2 Available Tags

Only the default control tags are applicable to this control.

11.40 See also

Development:

• Add-on development
• Skinning

11.41 Video Control

The video control is used for displaying the currently playing video elsewhere in the XBMC GUI. You can choose the position, and size of the video displayed. Note that the control is only rendered if video is being played.

11.41.1 Example

<control type="videowindow" id="2">
      <description>My first video control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
</control>

11.41.2 Available Tags

Only the default control tags are applicable to this control.

11.42 See also

Development:

• Add-on development
• Skinning

11.43 Mover Control

The mover control is used for the screen calibration portions of XBMC. You can choose the size and look of the mover control.

11.43.1 Example

<control type="mover" id="3">
      <description>My first mover control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <texturefocus>mytexture.png</texturefocus>
      <texturenofocus>mytexture.png</texturenofocus>
      <pulseonselect>true</pulseonselect>
</control>

11.43.2 Available Tags

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.44 See also

Development:

• Add-on development
• Skinning

11.45 Resize Control

The resize control is used to specify an area of changeable ratio for use in the screen calibration portion of XBMC. You can choose the size, and look of the resizer.

11.45.1 Example

<control type="resize" id="3">
      <description>My first resize control</description>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <texturefocus>mytexture.png</texturefocus>
      <texturenofocus>mytexture.png</texturenofocus>
      <pulseonselect>true</pulseonselect>
</control>

11.45.2 Available Tags

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

11.46 See also

Development: