Difference between revisions of "Controls"

From Official Kodi Wiki
Jump to: navigation, search
 
(43 intermediate revisions by 10 users not shown)
Line 1: Line 1:
__NOTOC__
+
{{cleanup}}
__NOEDITSECTION__
+
NOTE: The control definitions here can be become out of date. The latest xml behavior can be found in [https://github.com/xbmc/xbmc/blob/master/xbmc/guilib/GUIControlFactory.cpp?view=markup the Git cpp code]
The control definition here can be become out of date. The latest xml behavior can be found in [http://xbmc.svn.sourceforge.net/viewvc/xbmc/trunk/XBMC/guilib/GuiControlFactory.cpp?view=markup the SVN cpp code]
 
  
====The skin engine in XBMC has available to it the following frequently used controls:====
+
== Available controls ==
  
 
; [[Group Control]] : used to group controls together.
 
; [[Group Control]] : used to group controls together.
 
; [[Group List Control]] : special case of the group control that forms a scrolling list of controls.
 
; [[Group List Control]] : special case of the group control that forms a scrolling list of controls.
; [[Label Control]] : used to show some lines of text.
+
; [[Label control]] : used to show some lines of text.
; [[Fade Label Control]] : used to show multiple pieces of text in the same position, by fading from one to the other.
+
; [[Fade label control]] : used to show multiple pieces of text in the same position, by fading from one to the other.
 
; [[Image Control]] : used to show an image.
 
; [[Image Control]] : used to show an image.
 
; [[MultiImage Control]] : used to show a slideshow of images.
 
; [[MultiImage Control]] : used to show a slideshow of images.
 
; [[Button control]] : a standard push button control.
 
; [[Button control]] : a standard push button control.
 
; [[Radio button control]] : a radio button control (as used for on/off settings).
 
; [[Radio button control]] : a radio button control (as used for on/off settings).
; [[Select button control]] : a select button control (allows multiple selections from a single button)
 
 
; [[Toggle button control]] : a toggle on/off button that can take 2 different states.
 
; [[Toggle button control]] : a toggle on/off button that can take 2 different states.
; [[Buttonscrollers]] : used for multiple buttons in a scrollable list.
 
 
; [[Spin Control]] : used for cycling up/down controls.
 
; [[Spin Control]] : used for cycling up/down controls.
 
; [[Settings Spin Control]] : used for cycling up/down controls in the settings menus.
 
; [[Settings Spin Control]] : used for cycling up/down controls in the settings menus.
 
; [[Slider Control]] : used for a volume slider.
 
; [[Slider Control]] : used for a volume slider.
 +
; [[Scroll Bar Control]] : used for a implementing a scroll bar.
 
; [[Settings Slider Control]] : used for a slider control in the settings menus.
 
; [[Settings Slider Control]] : used for a slider control in the settings menus.
 
; [[Progress Control]] : Used to show the progress of a particular operation.
 
; [[Progress Control]] : Used to show the progress of a particular operation.
; [[List Container]] : used for a scrolling lists of items. Replaces the list control.
+
; [[List Container]] : used for a scrolling lists of items. Replaces the list control.
 
; [[Wrap List Container]] : used for a wrapping list of items with fixed focus.
 
; [[Wrap List Container]] : used for a wrapping list of items with fixed focus.
; [[Fixed List Container]] : used for a list of items with a fixed focus. Same as the [[Wrap List Container]] except it doesn't wrap.
+
; [[Fixed List Container]] : used for a list of items with a fixed focus. Same as the [[Wrap List Container]] except it doesn't wrap.
; [[Panel Container]] : used for a scrolling panel of items. Replaces the thumbnail panel.
+
; [[Panel Container]] : used for a scrolling panel of items. Replaces the thumbnail panel.
; [[List Control]] : used for lists of items. <depreciated>
 
; [[Thumbnail Panel]] : used to show a panel of thumbnails. <depreciated>
 
 
; [[Text Box]] : used to show a multi-page piece of text.
 
; [[Text Box]] : used to show a multi-page piece of text.
; [[RSS feed Control]] : used to display scrolling RSS feeds.
+
; [[RSS ticker]] : used to display scrolling RSS feeds.
 
; [[Visualisation Control]] : used to display a visualisation while music is playing.
 
; [[Visualisation Control]] : used to display a visualisation while music is playing.
; [[Video Control]] : used to display the currently playing video whilst in the GUI.<br><br>
+
; [[Video Control]] : used to display the currently playing video whilst in the GUI.
'''It also has the following controls which are used less frequently:'''<br><br>
+
; [[Edit Control]] : used as an input control for the osd keyboard and other input fields.
; [[Edit Control]] : used as an input control for a USB keyboard (XLink Kai window).
+
; [[EPGGrid control]] : used to display the EPG guide in the PVR section.
; [[Recently Added Media Control]] : used to display the last few items added to the video database. <depreciated>
+
 
; [[Console Control]] : used as a multi-coloured text display (XLink Kai window).
+
== Rarely used controls ==
; [[Checkmark Control]] : Used on the Kai Host Dialog. Similar to Radio Button but does not have the button texture, and the checkmark is on the left.
+
 
; [[Extended List Control]] : used in the XLink Kai window.
 
 
; [[Mover Control]] : used in the calibration screens.
 
; [[Mover Control]] : used in the calibration screens.
; [[Resize Control]] : used to set the pixel ratio in Video Calibration.
+
; [[Resize control]] : used to set the pixel ratio in Video Calibration.
 +
 
 +
 
 +
== Depreciated controls ==
 +
These controls are not recommended to be used inside skins
 +
and will be removed from the skinning engine at some point.
 +
Or may not work at all
 +
 
 +
; Buttonscrollers : used for multiple buttons in a scrollable list.
 +
; Checkmark Control : Used on the XLink Kai Host Dialog. Similar to Radio Button but does not have the button texture, and the check-mark is on the left.
 +
; Console Control : used as a multi-coloured text display (XLink Kai window).
 +
; Extended List Control : used in the XLink Kai window.
 +
; Large Image Control : background loading version of the image control, for larger images.
 +
; List Control : used for lists of items.
 +
; Multiselect control : a piece of text with multiple selectable "button" components.
 +
; Recently Added Media Control : used to display the last few items added to the video database.
 +
; Select button control : a select button control (allows multiple selections from a single button)
 +
; Thumbnail Panel : used to show a panel of thumbnails.
 +
 
 +
== Built in controls ==
 +
 
 +
A list of built in controls [[List of Built In Controls|can be found here.]]
 +
 
 +
== XML tags that affect all control types ==
 +
 
 +
The XML tags that affect all control types [[Default_control_tags|can be found here.]]
  
====XML tags that affect all control types====
+
== Filling controls and dictating how they respond from the skin ==
  
The XML tags that affect all control types [[Default_Control_Tags|can be found here.]]
+
Most of the controls' contents are filled at runtime by the Kodi source codebase, but for controls such as buttons, labels and images, the Skinner has full control over what the button does or what the label and images look like, if they so desire. This is done via the use of conditional &lt;visible&gt; tags, built in &lt;execute&gt; functions, and &lt;info&gt; information tags. See the following links for more information.
  
====Filling controls and dictating how they respond from the skin====
+
; [[Conditional visibility]] : Defining when to display and hide a control, and how to animate the effect.
 +
; [[Animating_your_skin]] : Breathing life into controls by having defining how they move and respond to actions.
 +
; [[List_of_built-in_functions|Built In Functions]] : Defining what a button or list does when clicked or focused.
 +
; [[InfoLabels|Specifying Labels]] : Defining what a label control or image control's contents should be.
  
Most of the controls' contents are filled at runtime by the XBMC source codebase, but for controls such as buttons, labels and images, the skinner has full control over what the button does or what the label and images look like, if they so desire. This is done via the use of conditional <visibile> tags, built in <execute> functions, and <info> information tags. See the following links for more information.
+
== See also ==
 +
'''Development:'''
 +
* [[Add-on development]]
 +
* [[Skinning]]
  
====[[Conditional Visibility|Defining when to display and hide a control, and how to animate the effect]]====
+
[[Category:Skin development]]
====[[List of Built In Functions|Defining what a button does in the skin using built in functions]]====
 
====[[InfoLabels|Defining what a label control or image control's contents should be]]====
 
[[category:Skin Development]]
 

Latest revision as of 08:59, 19 July 2020

Cleanup.png This page or section may require cleanup, updating, spellchecking, reformatting and/or updated images. Please improve this page if you can. The discussion page may contain suggestions.

NOTE: The control definitions here can be become out of date. The latest xml behavior can be found in the Git cpp code

1 Available controls

Group Control 
used to group controls together.
Group List Control 
special case of the group control that forms a scrolling list of controls.
Label control 
used to show some lines of text.
Fade label control 
used to show multiple pieces of text in the same position, by fading from one to the other.
Image Control 
used to show an image.
MultiImage Control 
used to show a slideshow of images.
Button control 
a standard push button control.
Radio button control 
a radio button control (as used for on/off settings).
Toggle button control 
a toggle on/off button that can take 2 different states.
Spin Control 
used for cycling up/down controls.
Settings Spin Control 
used for cycling up/down controls in the settings menus.
Slider Control 
used for a volume slider.
Scroll Bar Control 
used for a implementing a scroll bar.
Settings Slider Control 
used for a slider control in the settings menus.
Progress Control 
Used to show the progress of a particular operation.
List Container 
used for a scrolling lists of items. Replaces the list control.
Wrap List Container 
used for a wrapping list of items with fixed focus.
Fixed List Container 
used for a list of items with a fixed focus. Same as the Wrap List Container except it doesn't wrap.
Panel Container 
used for a scrolling panel of items. Replaces the thumbnail panel.
Text Box 
used to show a multi-page piece of text.
RSS ticker 
used to display scrolling RSS feeds.
Visualisation Control 
used to display a visualisation while music is playing.
Video Control 
used to display the currently playing video whilst in the GUI.
Edit Control 
used as an input control for the osd keyboard and other input fields.
EPGGrid control 
used to display the EPG guide in the PVR section.

2 Rarely used controls

Mover Control 
used in the calibration screens.
Resize control 
used to set the pixel ratio in Video Calibration.


3 Depreciated controls

These controls are not recommended to be used inside skins and will be removed from the skinning engine at some point. Or may not work at all

Buttonscrollers 
used for multiple buttons in a scrollable list.
Checkmark Control 
Used on the XLink Kai Host Dialog. Similar to Radio Button but does not have the button texture, and the check-mark is on the left.
Console Control 
used as a multi-coloured text display (XLink Kai window).
Extended List Control 
used in the XLink Kai window.
Large Image Control 
background loading version of the image control, for larger images.
List Control 
used for lists of items.
Multiselect control 
a piece of text with multiple selectable "button" components.
Recently Added Media Control 
used to display the last few items added to the video database.
Select button control 
a select button control (allows multiple selections from a single button)
Thumbnail Panel 
used to show a panel of thumbnails.

4 Built in controls

A list of built in controls can be found here.

5 XML tags that affect all control types

The XML tags that affect all control types can be found here.

6 Filling controls and dictating how they respond from the skin

Most of the controls' contents are filled at runtime by the Kodi source codebase, but for controls such as buttons, labels and images, the Skinner has full control over what the button does or what the label and images look like, if they so desire. This is done via the use of conditional <visible> tags, built in <execute> functions, and <info> information tags. See the following links for more information.

Conditional visibility 
Defining when to display and hide a control, and how to animate the effect.
Animating_your_skin 
Breathing life into controls by having defining how they move and respond to actions.
Built In Functions 
Defining what a button or list does when clicked or focused.
Specifying Labels 
Defining what a label control or image control's contents should be.

7 See also

Development: