Official Kodi Wiki - User contributions [en]

Radio button control

2015-04-19T21:30:08Z

Ac3d912: Just added two shortcuts for setting the radio texture

<section begin="main content" />
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 (textureradioon and textureradiooff). Used for settings controls.
=== Example ===
<syntaxhighlight lang="XML" enclose="div">
<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>
<textureradioonfocus colordiffuse="FFFFAAFF">myradiobutton.png</textureradioonfocus>
<textureradioonnofocus colordiffuse="FFFFAAFF">myradiobutton.png</textureradioonnofocus>
<textureradioofffocus colordiffuse="FFFFAAFF">myradiobutton_nf.png</textureradioofffocus>
<textureradiooffnofocus colordiffuse="FFFFAAFF">myradiobutton_nf.png</textureradiooffnofocus>
<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>
</syntaxhighlight>

=== 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.
{| class="prettytable"
! Tag !! Description
|-
| '''texturefocus'''
|
Specifies the image file which should be displayed when the button has focus. [[Texture Attributes|See here for additional information about textures.]]
|-
| '''texturenofocus'''
| Specifies the image file which should be displayed when the button does not have focus.
|-
| '''textureradioonfocus'''
| Specifies the image file which should be displayed for the radio button portion when it's the button is on and focused. This texture is positioned on the right of the button – it's positioned 24 pixels from the right edge of the button, and 8 pixels above the center vertically.
|-
| '''textureradioonnofocus'''
| Specifies the image file which should be displayed for the radio button portion when it's the button is on and unfocused. This texture is positioned on the right of the button – it's positioned 24 pixels from the right edge of the button, and 8 pixels above the center vertically.
|-
| '''textureradioon'''
| A shortcut to set both of the above textures to the same image file.
|-
| '''textureradioofffocus'''
| Specifies the image file which should be displayed for the radio button portion when the button is off and focused.
|-
| '''textureradiooffnofocus'''
| Specifies the image file which should be displayed for the radio button portion when the button is off and unfocused.
|-
| '''textureradiooff'''
| A shortcut to set both of the above textures to the same image file.
|-
| '''label'''
| The label used on the button. It can be a link into strings.xml, or an actual text label.
|-
| '''font'''
| Font used for the button label. From fonts.xml.
|-
| '''textcolor'''
| Color used for displaying the button label. In AARRGGBB hex format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''focusedcolor'''
| Color used for the button label when the button has in focus. In AARRGGBB hex format or a name from the [[Colour Themes|colour theme.]]
|-
| '''disabledcolor'''
| Color used for the button label if the button is disabled. In AARRGGBB hex format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''shadowcolor'''
| Specifies the color of the drop shadow on the text, in AARRGGBB format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''align'''
| Label horizontal alignment on the button. Defaults to left, can also be center or right.
|-
| '''aligny'''
| Label vertical alignment on the button. Defaults to top, can also be center.
|-
| '''textoffsetx'''
| Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
|-
| '''textoffsety'''
| Amount to offset the label from the top edge of the button when using top alignment.
|-
| '''selected'''
| The boolean condition that when met will cause the control to become selected. [[Conditional Visibility|see here for more information.]]
|-
| '''onclick'''
| The function to perform when the radio button is clicked. Should be a [[Built-in functions available to FTP, Webserver, skins, keymap and to python|built in function.]]
|-
| '''radioposx'''
| X offset of the ''dot'' or radio button itself
|-
| '''radioposy'''
| Y offset of the ''dot'' or radio button itself
|-
| '''radiowidth'''
| Width in Pixels of the ''dot'' or radio button itself
|-
| '''radioheight'''
| Height in Pixels of the ''dot'' or radio button itself
|-
| '''onfocus'''
| Specifies the action to perform when the button is focused. Should be a built in function. The action is performed after any focus animations have completed. [[List of Built In Functions|See here for more information.]]
|-
| '''onunfocus'''
| Specifies the action to perform when the button loses focus. Should be a built in function.
|}

<section end="main content" />

== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]

[[Category:Skin development]]

Settings Spin Control

2015-04-17T06:10:42Z

Ac3d912: moved settings from spincontrol that were supposed to be here

<section begin="main content" />
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.
=== Example ===
<syntaxhighlight lang="xml" enclose="div">
<control type="spincontrolex" id="12">
<description>My first settings spin control</description>
<posx>80</posx>
<posy>60</posy>
<width>250</width>
<height>200</height>
<spinposx>220</spinposx>
<spinposy>180</spinposy>
<spinwidth>16</spinwidth>
<spinheight>16</spinheight>
<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>
</syntaxhighlight>

=== 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.

{| class="prettytable"
! Tag !! Description
|-
| '''spinposx'''
| The horizontal position of the spin control for multipage lists. This is offset from the top left of the list.
|-
| '''spinposy'''
| The vertical position of the spin control for multipage lists. This is offset from the top left of the list.
|-
| '''spinwidth'''
| The width of one of the spin control buttons. The textures for this spin control will be scaled to fit this width.
|-
| '''spinheight'''
| The height of one of the spin control buttons. The textures for this spin control will be scaled to fit this height.
|-
| '''texturefocus'''
| Specifies the image file which should be displayed for the control when it has focus. [[Texture Attributes|See here for additional information about textures.]]
|-
| '''texturenofocus'''
| Specifies the image file which should be displayed for the control when it doesn't focus.
|-
| '''textureup'''
| Specifies the image file which should be displayed for the up arrow when it doesn't have focus. It is displayed to the left of the down arrow.
|-
| '''textureupfocus'''
| Specifies the image file which should be displayed for the up arrow when it has focus.
|-
| '''texturedown'''
| Specifies the image file which should be displayed for the down arrow when it is not focused. It is displayed to the right of the up arrow so that it's right edge is <textoffsetx> pixels away from the right edge of the control.
|-
| '''texturedownfocus'''
| Specifies the image file which should be displayed for the down arrow when it has focus.
|-
| '''label'''
| Either a numeric reference into strings.xml (for localization), or a string that will be shown on the left of the control.
|-
| '''font'''
| Font used for the controls label. From fonts.xml.
|-
| '''textcolor'''
| Color used for displaying the label. In AARRGGBB hex format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''disabledcolor'''
| Color used for the label if the control is disabled. In AARRGGBB hex format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''shadowcolor'''
| Specifies the color of the drop shadow on the text. In AARRGGBB hex format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''align'''
| Label horizontal alignment on the control. Defaults to left.
|-
| '''aligny'''
| Label vertical alignment on the control. Defaults to top, can also be center.
|-
| '''textoffsetx'''
| Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
|-
| '''textoffsety'''
| Amount to offset the label from the top edge of the button when using top alignment.
|}

<section end="main content" />

== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]

[[Category:Skin development]]

Spin Control

2015-04-17T06:07:36Z

Ac3d912: removed misplaced items (moving them to spincontrolex); added note to spincolor

<section begin="main content" />
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.
=== Example ===
<syntaxhighlight lang="XML" enclose="div">
<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 colordiffuse="FFFFAAFF">myuptexture.png</textureup>
<textureupfocus colordiffuse="FFFFAAFF">myupfocustexture.png</textureupfocus>
<texturedown colordiffuse="FFFFAAFF">mydowntexture.png</texturedown>
<texturedownfocus colordiffuse="FFFFAAFF">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>
</syntaxhighlight>

=== 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.

{| class="prettytable"
! Tag !! Description
|-
| '''textureup'''
| Specifies the image file which should be displayed for the up arrow when it doesn't have focus. [[Texture Attributes|See here for additional information about textures.]]
|-
| '''textureupfocus'''
| Specifies the image file which should be displayed for the up button when it has focus.
|-
| '''texturedown'''
| Specifies the image file which should be displayed for the down button when it is not focused.
|-
| '''texturedownfocus'''
| Specifies the image file which should be displayed for the down button when it has focus.
|-
| '''font'''
| Font used for the button label. From fonts.xml.
|-
| '''spincolor'''
| The colour of the text used for this spin control. In AARRGGBB hex format. ''As of Helix, this doesn't actually get processed, use textcolor''
|-
| '''textcolor'''
| Color used for displaying the label. In AARRGGBB hex format, or a name from the [[Colour Themes|colour theme.]].
|-
| '''disabledcolor'''
| Color used for the label if the control is disabled. In AARRGGBB hex format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''shadowcolor'''
| Specifies the color of the drop shadow on the text. In AARRGGBB format, or a name from the [[Colour Themes|colour theme.]]
|-
| '''subtype'''
| Defines what type of information the spinner holds. Can be int, float, text or page. Defaults to text. Make sure you use page for a page control.
|-
| '''align'''
| Label horizontal alignment on the control. Defaults to right, can also be left.
|-
| '''aligny'''
| Label vertical alignment on the control. Defaults to top, can also be center.
|-
| '''textoffsetx'''
| Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
|-
| '''textoffsety'''
| Amount to offset the label from the top edge of the button when using top alignment.
|}

<section end="main content" />

== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]

[[Category:Skin development]]

Fonts

2015-04-17T05:33:05Z

Ac3d912: /* Format of the Font.xml File */ Added in <fonts> tag

{{mininav|[[Development]]|[[Skinning]]}}
<section begin="main content" />
There's one special file called font.xml. This file contains a list of all fonts the skin uses. XBMC
will load all the fonts mentioned in this file from the /myskin/fonts directory first, and if that fails,
will attempt to load them from XBMC/media/fonts. In the event that XBMC is unable to locate the specified font, it will default to "font13". You can modify this file as you like and
add/delete/change fonts. The user friendly font name is referenced by the other xml files mentioned
below.
{{see also|HOW-TO:Add a new true type font to the skin}}
== Format of the Font.xml File ==
The font.xml file is divided into font sets, which includes a set of fonts used by the skin. Every
font set must contain the same font names in order for the skin to work with all font sets.
<syntaxhighlight lang="xml" enclose="div">
<?xml version="1.0" encoding="UTF-8"?>
<fonts>
<fontset id="Default" idloc="31390">
<font>
....
</font>
<font>
....
</font>
....
</fontset>
<fontset id="Arial" idloc="31391">
<font>
....
</font>
....
</fontset>
</fonts>
</syntaxhighlight>
A font set has the following attributes:

; id
: Name of the font set. Displayed to the user. Can have any value.
; idloc
: Refers to a string in the Skins' language file, so font names can be localized.

There has to be at least one font set with the unicode attribute set to true else languages like Chinese or Korean will not display properly. There is a font called Arialuni.TTF with a size of 20MB. It is a unicode True Type Font and works with all languages Kodi supports.

'''Note:''' Kodi will automatically switch to the first available unicode font set if the user selects a language that needs one. This switch will not be made if the currently loaded font set already supports unicode.

== Supported Font Types ==
=== True type Fonts ===
True type fonts must have a .ttf suffix. For a true type font it is possible to define the size (default 20)
and a style ''normal'', ''bold'', ''italics'', or ''bolditalics''. Frodo also includes ''lowercase'' or ''uppercase''. Isengard includes ''capitalize''.

Note: Multiple styles can be used by separating them with a space.

Example:
<syntaxhighlight lang="xml" enclose="div">
<font>
<name>font12</name>
<filename>arial.ttf</name>
<size>12</size>
<style>uppercase lowercase bold</style>
<aspect>0.75</aspect>
<linespacing>1.0</linespacing>
</font>
</syntaxhighlight>

The <aspect> tag specifies the aspect ratio of the font. An aspect of 0.75 means that the width of the font will be 0.75 of the height. By default the aspect is 1.0 for all but the SD 16x9 modes (PAL16x9, NTSC16x9 and 480p16x9) where the aspect ratio is 0.75, due to the stretched pixels.

The <linespacing> tag defines height of each line (sometimes called leading or inteline spacing). By default linespacing is set to 1.0.

<section end="main content" />

[[Category:Development]]
[[Category:Skin development]]
[[Category:Languages]]