Default control tags: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>Jmarshall
No edit summary
 
(29 intermediate revisions by 7 users not shown)
Line 1: Line 1:
Here are the tags and attributes available for all controls. '''Note that they're all lowercase, as XML is case sensitive'''.
Here are the tags and attributes available for all controls. '''Note that they're all lowercase, as XML is case sensitive'''.


{| class="dtable" border="0"
=== Tags available to all controls ===
|- class="userrow"
 
| class="usercell" | <strong>description</strong>
{| class="prettytable"
| class="usercell" | Only used to make things clear for the skinner. Not read by XBMC at all.
! style="background: lightgrey; width: 150px" | Tag(s)
|- class="userrow"
! style="background: lightgrey; width: 850px" | Definition
| class="usercell" | <strong>type</strong>
|-
| class="usercell" | The type of control.
! description
|- class="userrow"
| Only used to make things clear for the skinner. Not read by Kodi at all.
| class="usercell" | <strong>id</strong>
|-
| class="usercell" | Specifies the control's id. The value this takes depends on the control type, and the window that you are using the control on. There are special control id's that must be present in each window. Any other controls that the skinner adds can be any id they like. Any controls that the skinner specifies content needs not have an id unless it's needed for animation purposes.  For instance, most image and label controls don't need an id if the skinner specifies they're content.
! type
|- class="userrow"
| The type of control.
| class="usercell" | <strong>posx</strong>
|-
| class="usercell" | Specifies where the left edge of the control should be drawn, relative to it's parent's left edge. If an "r" is included (eg 180r) then the measurement is taken from the parent's right edge (in the left direction).
! id
|- class="userrow"
| Specifies the control's id. The value this takes depends on the control type, and the window that you are using the control on. There are special control id's that must be present in each window. Any other controls that the skinner adds can be any id they like. Any controls that the skinner specifies content needs not have an id unless it's needed for animation purposes.  For instance, most image and label controls don't need an id if the skinner specifies they're content.
| class="usercell" | <strong>posy</strong>
|-
| class="usercell" | Specifies where the top edge of the control should be drawn, relative to it's parent's top edge. If an "r" is included (eg 180r) then the measurement is taken from the parent's bottom edge (in the up direction).
! left
|- class="userrow"
| Specifies where the left edge of the control should be drawn, relative to it's parent's left edge. If an "r" is included (eg 180r) then the measurement is taken from the parent's right edge (in the left direction). This can be an absolute value or a %.
| class="usercell" | <strong>width</strong>
|-
| class="usercell" | Specifies the width that should be used to draw the control.
! top
|- class="userrow"
| Specifies where the top edge of the control should be drawn, relative to it's parent's top edge. If an "r" is included (eg 180r) then the measurement is taken from the parent's bottom edge (in the up direction). This can be an absolute value or a %.
| class="usercell" | <strong>height</strong>
|-
| class="usercell" | Specifies the height that should be used to draw the control.
! right
|- class="userrow"
| Specifies where the right edge of the control should be drawn. This can be an absolute value or a %.
| class="usercell" | <strong>visible</strong>
|-
| class="usercell" | Specifies a condition as to when this control will be visible. Can be true, false, or a condition. [[Conditional Visibility|See here for&nbsp;more information.]] Defaults to true.
! bottom
|- class="userrow"
| Specifies where the bottom edge of the control should be drawn. This can be an absolute value or a %.
| class="usercell" | <strong>animation</strong>
 
| class="usercell" | Specifies the animation to be run when the control enters a particular state. [[Animating Your Skin|See here for more information]]
|-
|- class="userrow"
! centerleft
| class="usercell" | <strong>camera</strong>
| Aligns the control horizontally at the given coordinate measured from the left side of the parent control. This can be an absolute value or a %.
| class="usercell" | Specifies the location (relative to the parent's coordinates) of the camera.  Useful for the 3D animations such as rotatey.  Format is <camera x="20" y="30" />
|-
|- class="userrow"
! centerright
| class="usercell" | <strong>colordiffuse</strong>
| Aligns the control horizontally at the given coordinate measured from the right side of the parent control. This can be an absolute value or a %.
| class="usercell" | This specifies the color to be used for the texture basis. It's in hex AARRGGBB format. If you define <colordiffuse>FFFF00FF</colordiffuse> (magenta), the image will be given a magenta tint when rendered. Defaults to FFFFFFFF (no tint).
|-
! centertop
| Aligns the control vertically at the given coordinate measured from the top side of the parent control. This can be an absolute value or a %.
|-
! centerbottom
| Aligns the control vertically at the given coordinate measured from the bottom side of the parent control. This can be an absolute value or a %.
|-
! width
| Specifies the width that should be used to draw the control. You can use <width>auto</width> for labels (in grouplists) and button/togglebutton controls.
|-
! height
| Specifies the height that should be used to draw the control.
|-
! visible
| Specifies a condition as to when this control will be visible. Can be true, false, or a condition. See [[Conditional Visibility]] for more information.  Defaults to true.
|-
! animation
| Specifies the animation to be run when the control enters a particular state. See [[Animating your skin]] for more information.
|-
! camera
| Specifies the location (relative to the parent's coordinates) of the camera.  Useful for the 3D animations such as rotatey.  Format is <code><camera x="20" y="30" /></code>. 'r' values and % are also supported.
|-'
! depth
| Specifies the 3D stereoscopic depth of a control. possible values range from -1.0 to 1.0, which brings control "to back" and "to front".</code>
|-
! colordiffuse
| This specifies the color to be used for the texture basis. It's in hex AARRGGBB format. If you define <code><colordiffuse>FFFF00FF</colordiffuse></code> (magenta), the image will be given a magenta tint when rendered. Defaults to FFFFFFFF (no tint).  You can also specify this as a name from the [[Colour themes|colour theme]].
|}
|}
[[File:Control-positioning.jpg|1000px]]
=== Tags available to focusable controls ===


In addition, any control that is focusable (e.g. a buttoncontrol) will have the following tags available.
In addition, any control that is focusable (e.g. a buttoncontrol) will have the following tags available.


{| class="dtable" border="0"
{| class="prettytable"
|- class="userrow"
! style="background: lightgrey; width: 150px" | Tags
| class="usercell" | <strong>onup</strong>
! style="background: lightgrey; width: 850px" | Definition
| class="usercell" | Specifies the <id> of the control that should be moved to when the user moves up off this control.  Can point to a control group (which remembers previous focused items).
|-
|- class="userrow"
! onup
| class="usercell" | <strong>ondown</strong>
| Specifies the <code><id></code> of the control that should be moved to when the user moves up off this control.  Can point to a control group (which remembers previous focused items).
| class="usercell" | Specifies the <id> of the control that should be moved to when the user moves down off this control.  Can point to a control group (which remembers previous focused items).
|-
|- class="userrow"
! ondown
| class="usercell" | <strong>onleft</strong>
| Specifies the <code><id></code> of the control that should be moved to when the user moves down off this control.  Can point to a control group (which remembers previous focused items).
| class="usercell" | Specifies the <id> of the control that should be moved to when the user moves left off this control.  Can point to a control group (which remembers previous focused items).
|-
|- class="userrow"
! onleft
| class="usercell" | <strong>onright</strong>
| Specifies the <code><id></code> of the control that should be moved to when the user moves left off this control.  Can point to a control group (which remembers previous focused items).
| class="usercell" | Specifies the <id> of the control that should be moved to when the user moves right off this control.  Can point to a control group (which remembers previous focused items).
|-
|- class="userrow"
! onright
| class="usercell" | <strong>hitrect</strong>
| Specifies the <code><id></code> of the control that should be moved to when the user moves right off this control.  Can point to a control group (which remembers previous focused items).
| class="usercell" | Specifies the location and size of the "focus area" of this control (relative to the parent's coordinates) used by the mouse cursor. Format is <hitrect x="20" y="30" w="50" h="10" />
|-
|- class="userrow"
! onback
| class="usercell" | <strong>enable</strong>
| Specifies the <code><id></code> of the control that should be focussed when the user presses the back key.  Can point to a control group (which remembers previous focused items).
| class="usercell" | Specifies a condition as to when this control will be enabled. Can be true, false, or a condition. [[Conditional Visibility|See here for&nbsp;more information.]] Defaults to true.
|-
|- class="userrow"
! oninfo
| class="usercell" | <strong>pulseonselect</strong>
| Specifies the built-in function that should be executed when the user presses the info key.
| class="usercell" | This specifies whether or not a button type will "pulse" when it has focus.  This is done by varying the alpha channel of the button.  Defaults to true.
|-
! onfocus
| Specifies the built-in function that should be executed when the control is focussed.
|-
! onunfocus
| Specifies the built-in function that should be executed when the control is loses focus.
|-
! hitrect
| Specifies the location and size of the "focus area" of this control (relative to the parent's coordinates) used by the mouse cursor. Format is <code><hitrect x="20" y="30" w="50" h="10" /></code>
|-
! hitrectcolor
| This adds the ability to visualize hitrects for controls. When visible and there's a <hitrectcolor> tag, it will paint a colored rectangle over the actual control. Colors can be specified in AARRGGBB format or a name from the color theme.
|-
! enable
| Specifies a condition as to when this control will be enabled. Can be true, false, or a condition. See [[Conditional Visibility]] for more information.  Defaults to true.
|-
! pulseonselect
| This specifies whether or not a button type will "pulse" when it has focus.  This is done by varying the alpha channel of the button.  Defaults to true.
|}
|}


[[category:Skin Development]]
== Similar page names ==
{{#lst:Tags|similar pages}}
 
== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]
 
[[Category:Skin development]]

Latest revision as of 00:37, 13 July 2020

Here are the tags and attributes available for all controls. Note that they're all lowercase, as XML is case sensitive.

Tags available to all controls

Tag(s) Definition
description Only used to make things clear for the skinner. Not read by Kodi at all.
type The type of control.
id Specifies the control's id. The value this takes depends on the control type, and the window that you are using the control on. There are special control id's that must be present in each window. Any other controls that the skinner adds can be any id they like. Any controls that the skinner specifies content needs not have an id unless it's needed for animation purposes. For instance, most image and label controls don't need an id if the skinner specifies they're content.
left Specifies where the left edge of the control should be drawn, relative to it's parent's left edge. If an "r" is included (eg 180r) then the measurement is taken from the parent's right edge (in the left direction). This can be an absolute value or a %.
top Specifies where the top edge of the control should be drawn, relative to it's parent's top edge. If an "r" is included (eg 180r) then the measurement is taken from the parent's bottom edge (in the up direction). This can be an absolute value or a %.
right Specifies where the right edge of the control should be drawn. This can be an absolute value or a %.
bottom Specifies where the bottom edge of the control should be drawn. This can be an absolute value or a %.
centerleft Aligns the control horizontally at the given coordinate measured from the left side of the parent control. This can be an absolute value or a %.
centerright Aligns the control horizontally at the given coordinate measured from the right side of the parent control. This can be an absolute value or a %.
centertop Aligns the control vertically at the given coordinate measured from the top side of the parent control. This can be an absolute value or a %.
centerbottom Aligns the control vertically at the given coordinate measured from the bottom side of the parent control. This can be an absolute value or a %.
width Specifies the width that should be used to draw the control. You can use <width>auto</width> for labels (in grouplists) and button/togglebutton controls.
height Specifies the height that should be used to draw the control.
visible Specifies a condition as to when this control will be visible. Can be true, false, or a condition. See Conditional Visibility for more information. Defaults to true.
animation Specifies the animation to be run when the control enters a particular state. See Animating your skin for more information.
camera Specifies the location (relative to the parent's coordinates) of the camera. Useful for the 3D animations such as rotatey. Format is <camera x="20" y="30" />. 'r' values and % are also supported.
depth Specifies the 3D stereoscopic depth of a control. possible values range from -1.0 to 1.0, which brings control "to back" and "to front".
colordiffuse This specifies the color to be used for the texture basis. It's in hex AARRGGBB format. If you define <colordiffuse>FFFF00FF</colordiffuse> (magenta), the image will be given a magenta tint when rendered. Defaults to FFFFFFFF (no tint). You can also specify this as a name from the colour theme.

Control-positioning.jpg

Tags available to focusable controls

In addition, any control that is focusable (e.g. a buttoncontrol) will have the following tags available.

Tags Definition
onup Specifies the <id> of the control that should be moved to when the user moves up off this control. Can point to a control group (which remembers previous focused items).
ondown Specifies the <id> of the control that should be moved to when the user moves down off this control. Can point to a control group (which remembers previous focused items).
onleft Specifies the <id> of the control that should be moved to when the user moves left off this control. Can point to a control group (which remembers previous focused items).
onright Specifies the <id> of the control that should be moved to when the user moves right off this control. Can point to a control group (which remembers previous focused items).
onback Specifies the <id> of the control that should be focussed when the user presses the back key. Can point to a control group (which remembers previous focused items).
oninfo Specifies the built-in function that should be executed when the user presses the info key.
onfocus Specifies the built-in function that should be executed when the control is focussed.
onunfocus Specifies the built-in function that should be executed when the control is loses focus.
hitrect Specifies the location and size of the "focus area" of this control (relative to the parent's coordinates) used by the mouse cursor. Format is <hitrect x="20" y="30" w="50" h="10" />
hitrectcolor This adds the ability to visualize hitrects for controls. When visible and there's a <hitrectcolor> tag, it will paint a colored rectangle over the actual control. Colors can be specified in AARRGGBB format or a name from the color theme.
enable Specifies a condition as to when this control will be enabled. Can be true, false, or a condition. See Conditional Visibility for more information. Defaults to true.
pulseonselect This specifies whether or not a button type will "pulse" when it has focus. This is done by varying the alpha channel of the button. Defaults to true.

Similar page names

See also

Development: