diff options
author | Martijn Kaijser <martijn@xbmc.org> | 2016-04-24 14:03:40 +0200 |
---|---|---|
committer | Martijn Kaijser <martijn@xbmc.org> | 2016-04-24 14:03:40 +0200 |
commit | 20e0fd9c6036260dc14b4262e7bb6560738c6aca (patch) | |
tree | 7da6812ff5fc55be7e249f40f12e3836127bc132 | |
parent | 528cd93f06c6d7b66dacead3cc2476ff814aca11 (diff) | |
parent | a50db21fc9864f5e3cf3a7ebfab5eefc4d28c1ca (diff) |
Merge pull request #9560 from AlwinEsch/next-addon-doc-part
[addon] add doxygen documentation for skin controls
33 files changed, 2702 insertions, 8 deletions
diff --git a/xbmc/addons/kodi-addon-dev-kit/.gitignore b/xbmc/addons/kodi-addon-dev-kit/.gitignore index f4d0bfe244..039c6a72a8 100644 --- a/xbmc/addons/kodi-addon-dev-kit/.gitignore +++ b/xbmc/addons/kodi-addon-dev-kit/.gitignore @@ -27,5 +27,5 @@ *.out *.app -/doxygen-generated +/docs /build diff --git a/xbmc/addons/kodi-addon-dev-kit/doxygen/Doxyfile b/xbmc/addons/kodi-addon-dev-kit/doxygen/Doxyfile index a0d8044198..64b9cd1789 100644 --- a/xbmc/addons/kodi-addon-dev-kit/doxygen/Doxyfile +++ b/xbmc/addons/kodi-addon-dev-kit/doxygen/Doxyfile @@ -58,7 +58,7 @@ PROJECT_LOGO = ./kodi-dev.png # entered, it will be relative to the location where doxygen was started. If # left blank the current directory will be used. -OUTPUT_DIRECTORY = ../doxygen-generated +OUTPUT_DIRECTORY = ../docs # If the CREATE_SUBDIRS tag is set to YES then doxygen will create 4096 sub- # directories (in 2 levels) under the output directory of each output format and @@ -376,7 +376,7 @@ SUBGROUPING = YES # SEPARATE_MEMBER_PAGES. # The default value is: NO. -INLINE_GROUPED_CLASSES = NO +INLINE_GROUPED_CLASSES = YES # When the INLINE_SIMPLE_STRUCTS tag is set to YES, structs, classes, and unions # with only public data fields or simple typedef fields will be shown inline in @@ -424,7 +424,7 @@ LOOKUP_CACHE_SIZE = 0 # normally produced when WARNINGS is set to YES. # The default value is: NO. -EXTRACT_ALL = YES +EXTRACT_ALL = NO # If the EXTRACT_PRIVATE tag is set to YES, all private members of a class will # be included in the documentation. @@ -533,7 +533,7 @@ HIDE_COMPOUND_REFERENCE= YES # the files that are included by a file in the documentation of that file. # The default value is: YES. -SHOW_INCLUDE_FILES = YES +SHOW_INCLUDE_FILES = NO # If the SHOW_GROUPED_MEMB_INC tag is set to YES then Doxygen will add for each # grouped member an include statement to the documentation, telling the reader @@ -559,7 +559,7 @@ INLINE_INFO = YES # name. If set to NO, the members will appear in declaration order. # The default value is: YES. -SORT_MEMBER_DOCS = YES +SORT_MEMBER_DOCS = NO # If the SORT_BRIEF_DOCS tag is set to YES then doxygen will sort the brief # descriptions of file, namespace and class members alphabetically by member @@ -586,7 +586,7 @@ SORT_MEMBERS_CTORS_1ST = NO # appear in their defined order. # The default value is: NO. -SORT_GROUP_NAMES = YES +SORT_GROUP_NAMES = NO # If the SORT_BY_SCOPE_NAME tag is set to YES, the class list will be sorted by # fully-qualified names, including namespaces. If set to NO, the class list will @@ -606,7 +606,7 @@ SORT_BY_SCOPE_NAME = YES # accept a match between prototype and implementation in such cases. # The default value is: NO. -STRICT_PROTO_MATCHING = NO +STRICT_PROTO_MATCHING = YES # The GENERATE_TODOLIST tag can be used to enable (YES) or disable (NO) the todo # list. This list is created by putting \todo commands in the documentation. @@ -776,6 +776,37 @@ WARN_LOGFILE = INPUT = main.txt \ ../../../GUIInfoManager.cpp \ Modules/modules_general.dox \ + Skin/skin.dox \ + ../../../guilib/GUIRenderingControl.dox \ + ../../../guilib/GUIButtonControl.dox \ + ../../../guilib/GUIEditControl.dox \ + ../../../epg/GUIEPGGridContainer.dox \ + ../../../guilib/GUIFadeLabelControl.dox \ + ../../../guilib/GUIFixedListContainer.dox \ + ../../../guilib/GUIControlGroup.dox \ + ../../../guilib/GUIListContainer.dox \ + ../../../guilib/GUIImage.dox \ + ../../../guilib/GUILabelControl.dox \ + ../../../guilib/GUIListGroup.dox \ + ../../../guilib/GUIMoverControl.dox \ + ../../../guilib/GUIMultiImage.dox \ + ../../../guilib/GUIPanelContainer.dox \ + ../../../guilib/GUIProgressControl.dox \ + ../../../guilib/GUIRadioButtonControl.dox \ + ../../../guilib/GUIResizeControl.dox \ + ../../../guilib/GUIRSSControl.dox \ + ../../../guilib/GUIScrollBarControl.dox \ + ../../../guilib/GUISelectButtonControl.dox \ + ../../../guilib/GUISettingsSliderControl.dox \ + ../../../guilib/GUISpinControlEx.dox \ + ../../../guilib/GUISliderControl.dox \ + ../../../guilib/GUISpinControl.dox \ + ../../../guilib/GUITextBox.dox \ + ../../../guilib/GUIToggleButtonControl.dox \ + ../../../guilib/GUIVideoControl.dox \ + ../../../guilib/GUIVisualisationControl.dox \ + ../../../guilib/GUIWrappingListContainer.dox \ + ../../../guilib/_Controls.txt \ ../../../interfaces/builtins/AddonBuiltins.cpp \ ../../../interfaces/builtins/AndroidBuiltins.cpp \ ../../../interfaces/builtins/ApplicationBuiltins.cpp \ diff --git a/xbmc/addons/kodi-addon-dev-kit/doxygen/Skin/skin.dox b/xbmc/addons/kodi-addon-dev-kit/doxygen/Skin/skin.dox new file mode 100644 index 0000000000..7ab93d3971 --- /dev/null +++ b/xbmc/addons/kodi-addon-dev-kit/doxygen/Skin/skin.dox @@ -0,0 +1,27 @@ +/*! + +\page skin_parts Skin Development +\brief \htmlonly + <h3><span style="text-decoration: underline;"><span style="font-style: italic;"><span + style="color: rgb(102, 102, 102);">Skin Add-On Development</span></span></span></h3> + \endhtmlonly + +Kodi includes a GUI library that allows you to skin/change everything you see. +The images, sizes and positions of controls, colours, fonts, text, through to +altering navigation and even adding new functionality. + +The skin system is quite complex. This portion of the manual is dedicated to +providing in depth information on how it all works. It contains tips to make the +experience a little more pleasant. + +If you are just getting started with skinning Kodi, 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, Estuary, includes almost all the various tricks +and features that make the Kodi 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 Kodi as well as the "Skinning Kodi" article, and try modifying a window +or two by adding a button, or altering the textures or layout. + +- \subpage skin_controls - Controls are the substance of your skin. + +*/ diff --git a/xbmc/epg/GUIEPGGridContainer.dox b/xbmc/epg/GUIEPGGridContainer.dox new file mode 100644 index 0000000000..ea90977475 --- /dev/null +++ b/xbmc/epg/GUIEPGGridContainer.dox @@ -0,0 +1,243 @@ +/*! + +\page EPGGrid_control EPGGrid control +\brief **Used to display the EPG guide in the PVR section.** + +\tableofcontents + +The epggrid control is used for creating an epg timeline in Kodi. You can choose +the position, size, and look of the grid and it's contents. + + +-------------------------------------------------------------------------------- +\section EPGGrid_control_sect1 Example + +~~~~~~~~~~~~~ +<control type="epggrid" id="10"> + <description>EPG Grid</description> + <posx>80</posx> + <posy>81</posy> + <width>1120</width> + <height>555</height> + <pagecontrol>10</pagecontrol> + <scrolltime>350</scrolltime> + <timeblocks>40</timeblocks> + <rulerunit>6</rulerunit> + <progresstexture border="5">PVR-EpgProgressIndicator.png</progresstexture> + <onleft>31</onleft> + <onright>31</onright> + <onup>10</onup> + <ondown>10</ondown> + <rulerlayout height="35" width="40"> + <control type="image" id="1"> + <width>40</width> + <height>29</height> + <posx>0</posx> + <posy>0</posy> + <texture border="5">button-nofocus.png</texture> + </control> + <control type="label" id="2"> + <posx>10</posx> + <posy>0</posy> + <width>34</width> + <height>29</height> + <font>font12</font> + <aligny>center</aligny> + <selectedcolor>selected</selectedcolor> + <align>left</align> + <label>$INFO[ListItem.Label]</label> + </control> + </rulerlayout> + <channellayout height="52" width="280"> + <animation effect="fade" start="110" time="200">UnFocus</animation> + <control type="image" id="1"> + <posx>0</posx> + <posy>0</posy> + <width>270</width> + <height>52</height> + <texture border="5">button-nofocus.png</texture> + </control> + <control type="label"> + <posx>5</posx> + <posy>5</posy> + <width>40</width> + <height>35</height> + <font>font12</font> + <align>left</align> + <aligny>center</aligny> + <textcolor>grey</textcolor> + <selectedcolor>grey</selectedcolor> + <info>ListItem.ChannelNumber</info> + </control> + <control type="image"> + <posx>45</posx> + <posy>4</posy> + <width>45</width> + <height>44</height> + <texture>$INFO[ListItem.Icon]</texture> + </control> + <control type="label" id="1"> + <posx>94</posx> + <posy>0</posy> + <width>160</width> + <height>52</height> + <font>special12</font> + <aligny>center</aligny> + <selectedcolor>selected</selectedcolor> + <align>left</align> + <label>$INFO[ListItem.ChannelName]</label> + </control> + </channellayout> + <focusedchannellayout height="52" width="280"> + <animation effect="fade" start="110" time="200">OnFocus</animation> + <control type="image" id="1"> + <posx>0</posx> + <posy>0</posy> + <width>270</width> + <height>52</height> + <texture border="5">button-focus.png</texture> + </control> + <control type="label"> + <posx>5</posx> + <posy>5</posy> + <width>40</width> + <height>35</height> + <font>font12</font> + <align>left</align> + <aligny>center</aligny> + <textcolor>grey</textcolor> + <selectedcolor>grey</selectedcolor> + <info>ListItem.ChannelNumber</info> + </control> + <control type="image"> + <posx>45</posx> + <posy>4</posy> + <width>45</width> + <height>44</height> + <texture>$INFO[ListItem.Icon]</texture> + </control> + <control type="label" id="1"> + <posx>94</posx> + <posy>0</posy> + <width>160</width> + <height>52</height> + <font>special12</font> + <aligny>center</aligny> + <selectedcolor>selected</selectedcolor> + <align>left</align> + <label>$INFO[ListItem.ChannelName]</label> + </control> + </focusedchannellayout> + <itemlayout height="52" width="40"> + <control type="image" id="2"> + <width>40</width> + <height>52</height> + <posx>0</posx> + <posy>0</posy> + <aspectratio>stretch</aspectratio> + <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture> + </control> + <control type="label" id="1"> + <posx>6</posx> + <posy>3</posy> + <width>30</width> + <height>25</height> + <font>font12</font> + <aligny>center</aligny> + <selectedcolor>selected</selectedcolor> + <align>left</align> + <info>ListItem.Label</info> + </control> + <control type="image"> + <posx>5</posx> + <posy>28</posy> + <width>30</width> + <height>20</height> + <texture>PVR-IsRecording.png</texture> + <visible>ListItem.IsRecording</visible> + </control> + <control type="image"> + <posx>5</posx> + <posy>28</posy> + <width>20</width> + <height>20</height> + <texture>PVR-HasTimer.png</texture> + <visible>ListItem.HasTimer + !ListItem.IsRecording</visible> + </control> + </itemlayout> + <focusedlayout height="52" width="40"> + <control type="image" id="14"> + <width>40</width> + <height>52</height> + <posx>0</posx> + <posy>0</posy> + <texture border="5">folder-focus.png</texture> + </control> + <control type="image" id="2"> + <width>40</width> + <height>52</height> + <posx>0</posx> + <posy>0</posy> + <aspectratio>stretch</aspectratio> + <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture> + </control> + <control type="label" id="1"> + <posx>6</posx> + <posy>3</posy> + <width>30</width> + <height>25</height> + <font>font12</font> + <aligny>center</aligny> + <selectedcolor>selected</selectedcolor> + <align>left</align> + <info>ListItem.Label</info> + </control> + <control type="image"> + <posx>5</posx> + <posy>28</posy> + <width>30</width> + <height>20</height> + <texture>PVR-IsRecording.png</texture> + <visible>ListItem.IsRecording</visible> + </control> + <control type="image"> + <posx>5</posx> + <posy>28</posy> + <width>20</width> + <height>20</height> + <texture>PVR-HasTimer.png</texture> + <visible>ListItem.HasTimer + !ListItem.IsRecording</visible> + </control> + </focusedlayout> +</control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section EPGGrid_control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|----------------------:|:--------------------------------------------------------------| +| timeblocks | The number of timeframes on the top row. +| rulerunit | Timeframe of each unit on the top row. 1 unit equals 5 minutes. +| rulerlayout | The layout of the top row. +| progresstexture | A texture which indicates the current progress time +| channellayout | The layout of the left column. +| focusedchannellayout | The focused layout of the left column. +| itemlayout | The layout of the grid +| focusedlayout | The focused layout of the grid + + +-------------------------------------------------------------------------------- +\section EPGGrid_control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIButtonControl.dox b/xbmc/guilib/GUIButtonControl.dox new file mode 100644 index 0000000000..985e813e06 --- /dev/null +++ b/xbmc/guilib/GUIButtonControl.dox @@ -0,0 +1,85 @@ +/*! + +\page skin_Button_control Button control +\brief **A standard push button control.** + +\tableofcontents + +The button control is used for creating push buttons in Kodi. You can +choose the position, size, and look of the button, as well as choosing what +action(s) should be performed when pushed. + +-------------------------------------------------------------------------------- +\section skin_Button_control_sect1 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 colordiffuse="FFFFAAFF">myfocustexture.png</texturefocus> + <texturenofocus colordiffuse="FFFFAAFF">mynormaltexture.png</texturenofocus> + <label>29</label> + <wrapmultiline>true</wrapmultiline> + <font>font12</font> + <textcolor>FFFFFFFF</textcolor> + <focusedcolor>FFFFFFFF</focusedcolor> + <disabledcolor>80FFFFFF</disabledcolor> + <invalidcolor>FFFFFFFF</invalidcolor> + <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> +~~~~~~~~~~~~~ + +-------------------------------------------------------------------------------- +\section skin_Button_control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| texturefocus | Specifies the image file which should be displayed when the button has focus. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| texturenofocus| Specifies the image file which should be displayed when the button does not have focus. +| label | The label used on the button. It can be a link into <b>`strings.xml`</b>, 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 theme](http://kodi.wiki/view/Colour_Themes). +| focusedcolor | Color used for the button label when the button has in focus. In **AARRGGBB** hex format or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| disabledcolor | Color used for the button label if the button is disabled. In **AARRGGBB** hex format or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| invalidcolor | Color used for the button if the user entered some invalid value. In **AARRGGBB** hex format or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text, in **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| angle | The angle the text should be rendered at, in degrees. A value of 0 is horizontal. +| 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. +| textwidth | Will truncate any text that's too long. +| onclick | Specifies the action to perform when the button is pressed. Should be a built in function. [See here for more information](http://kodi.wiki/view/Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python). You may have more than one <b>`<onclick>`</b> tag, and they'll be executed in sequence. +| 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. [See here for more information](http://kodi.wiki/view/Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python). +| onunfocus | Specifies the action to perform when the button loses focus. Should be a built in function. +| wrapmultiline | Will wrap the label across multiple lines if the label exceeds the control width. + + +-------------------------------------------------------------------------------- +\section skin_Button_control_sect3 See also +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIControlGroup.dox b/xbmc/guilib/GUIControlGroup.dox new file mode 100644 index 0000000000..66ac5206e4 --- /dev/null +++ b/xbmc/guilib/GUIControlGroup.dox @@ -0,0 +1,108 @@ +/*! + +\page Group_Control Group Control +\brief **Used to group controls together.** + +\tableofcontents + +The group control is one of the most important controls. It allows you to group +controls together, applying attributes to all of them at once. It also remembers +the last navigated button in the group, so you can set the <b>`<onup>`</b> of a control +to a group of controls to have it always go back to the one you were at before. +It also allows you to position controls more accurately relative to each other, +as any controls within a group take their coordinates from the group's top left +corner (or from elsewhere if you use the "r" attribute). You can have as many +groups as you like within the skin, and groups within groups are handled with +no issues. + + +-------------------------------------------------------------------------------- +\section Group_Control_sect1 Example + +~~~~~~~~~~~~~ +<control type="group" id="17"> + <description>My first group control</description> + <posx>80</posx> + <posy>60</posy> + <width>250</width> + <height>30</height> + <defaultcontrol>2</defaultcontrol> + <visible>true</visible> + <onup>2</onup> + <ondown>3</ondown> + <onleft>1</onleft> + <onright>1</onright> + ... more controls go here ... +</control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Group_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|------------------:|:--------------------------------------------------------------| +| defaultcontrol | Specifies the default control that will be focused within the group when the group receives focus. Note that the group remembers it's previously focused item and will return to it. + + +-------------------------------------------------------------------------------- +\section Group_Control_sect3 Notes on positioning of controls within groups + +All controls within a group take their positions relative to the group's placement. +Thus, the group always requires its <b>`<posx>`</b>, <b>`<posy>`</b>, +<b>`<width>`</b>, and <b>`<height>`</b> attributes to be defined. +As this can be a pain to remember, anything that you don't specify will be +inherited from it's parent group (or the main window). + +By way of example, consider the first group within a PAL full screen window +(720x576), and suppose we have + +~~~~~~~~~~~~~ +<control type="group" id="15"> + <posx>30</posx> + <posy>70</posy> + <width>400</width> + ... more controls go here ... +</control> +~~~~~~~~~~~~~ + +so that the <b>`<height>`</b> hasn't been defined. Then Kodi will +automatically set the <b>`<height>`</b> equal to 506 by inheriting this +from the window's height of 576, less the <b>`<posy>`</b> amount. + +You can align controls within a group to the right edge of the group, by +using the <b>"r"</b> modifier to the <b>`<posx>`</b> and <b>`<posy>`</b> fields + +~~~~~~~~~~~~~ +<control type="group" id="20"> + <control type="button" id=2> + <posx>180r</posx> + <width>180</width> + </control> + <control type="button" id=3> + <posx>180r</posx> + <width>180</width> + </control> + <control type="button" id=4> + <posx>180r</posx> + <width>180</width> + </control> +</control> +~~~~~~~~~~~~~ + +All the buttons have width 180, and are aligned 180 pixels from the right edge of the group they're within. + + +-------------------------------------------------------------------------------- +\section Group_Control_sect4 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIEditControl.dox b/xbmc/guilib/GUIEditControl.dox new file mode 100644 index 0000000000..61c678b924 --- /dev/null +++ b/xbmc/guilib/GUIEditControl.dox @@ -0,0 +1,60 @@ +/*! + +\page skin_Edit_control Edit control +\brief **Used as an input control for the osd keyboard and other input fields.** + +\tableofcontents + +The edit control allows a user to input text in Kodi. You can choose the font, +size, colour, location and header of the text to be displayed. + +-------------------------------------------------------------------------------- +\section skin_Edit_control_sect1 Example + +~~~~~~~~~~~~~ + <control type="edit" id="1"> + <description>My First edit control</description> + <posx>80</posx> + <posy>60</posy> + <width>250</width> + <visible>true</visible> + <aligny>center</aligny> + <label>Search</label> + <hinttext>Enter search string</hinttext> + <font>font14</font> + <textoffsetx>10</textoffsetx> + <textcolor>FFB2D4F5</textcolor> + <disabledcolor>FF000000</disabledcolor> + <invalidcolor>FFFFFFFF</invalidcolor> + <texturefocus>button-focus.png</texturefocus> + <texturenofocus>button-nofocus.png</texturenofocus> + <pulseonselect>no</pulseonselect> + </control> +~~~~~~~~~~~~~ + +-------------------------------------------------------------------------------- +\section skin_Edit_control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| aligny | Can be top or center. Aligns the text within its given control <b>`<height>`</b>. Defaults to top +| label | Specifies the header text which should be shown. You should specify an entry from the **strings.xml** here (either the Kodi strings.xml or your skin's strings.xml file), however you may also hardcode a piece of text also if you wish, though of course it will not be localized. You can use the full [label formatting syntax](http://kodi.wiki/view/Label_Formatting) and [you may also specify more than one piece of information here by using the $INFO and $LOCALIZE formats.strings.xml](http://kodi.wiki/view/Label_Parsing)) +| hinttext | Specifies the text which should be displayed in the edit label control, until the user enters some text. It can be used to provide a clue as to what a user should enter in this control. +| font | Specifies the font to use from the **font.xml** file. +| textcolor | Specifies the color the text should be, in hex **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| textwidth | Will truncate any text that's too long. + + +-------------------------------------------------------------------------------- +\section skin_Edit_control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIFadeLabelControl.dox b/xbmc/guilib/GUIFadeLabelControl.dox new file mode 100644 index 0000000000..d9c4cf981a --- /dev/null +++ b/xbmc/guilib/GUIFadeLabelControl.dox @@ -0,0 +1,72 @@ +/*! + +\page Fade_Label_Control Fade label control +\brief **Used to show multiple pieces of text in the same position, by fading from one to the other.** + +\tableofcontents + +The fade label control is used for displaying multiple pieces of text in the +same space in Kodi. 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. + +-------------------------------------------------------------------------------- +\section Fade_Label_Control_sect1 Example + +~~~~~~~~~~~~~ + <control type="fadelabel" id="1"> + <description>My First fadelabel</description> + <posx>80</posx> + <posy>60</posy> + <width>250</width> + <visible>true</visible> + <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> + <scroll>true</scroll> + <randomize>true</randomize> + </control> +~~~~~~~~~~~~~ + +-------------------------------------------------------------------------------- +\section Fade_Label_Control_sect2 Tag descriptions + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------------:|:--------------------------------------------------------------| +| label | Specifies the text which should be drawn. You should specify an entry from the strings.xml here, however you may also specify a piece of text yourself if you wish, though ofcourse it will not be localisable. [You may also specify more than one piece of information here by using the $INFO and $LOCALIZE formats](http://kodi.wiki/view/Label_Parsing). +| info | Specifies the information that should be presented. Kodi will auto-fill in this info in place of the <b>`<label>`</b>. [See here for more information](http://kodi.wiki/view/InfoLabels). +| font | Specifies the font to use from the font.xml file. +| textcolor | Specified the color the text should be, in hex **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| textoffsetx | Specify the offset from the left edge that the text should be rendered at when static (not scrolling). The scrolling text will still scroll using the full <b>`<width>`</b> of the control. +| shadowcolor | Specifies the color of the drop shadow on the text, in **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| angle | Specifies the angle at which the text should be drawn, measured counter clockwise from the horizontal. +| scrollout | If set to False the fadelabel will only scroll until the last char is to the right side of the width of the fadelabel instead of all the way out to the left. +| pauseatend | Specifies the time that the text will wait until it fades away before it scrolls again or moves to the next item. +| resetonlabelchange | If set to false the fadelabel will not reset the scrolling offset when the label's content changes. Useful if you have things such as the play time (in seconds) inside a fadelabel. Defaults to true. +| scrollspeed | Scroll speed of text in pixels per second. Defaults to 60. +| scroll | If set to false, the labels won't scroll. Defaults to true. +| randomize | If set to true, the labels will be displayed in a random order. Defaults to false. + + +-------------------------------------------------------------------------------- +\section Fade_Label_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIFixedListContainer.dox b/xbmc/guilib/GUIFixedListContainer.dox new file mode 100644 index 0000000000..cd021c8c2c --- /dev/null +++ b/xbmc/guilib/GUIFixedListContainer.dox @@ -0,0 +1,142 @@ +/*! + +\page Fixed_List_Container Fixed List Container +\brief <b>Used for a list of items with a fixed focus. Same as the +\ref Wrap_List_Container "Wrap List Container" except it doesn't wrap.</b> + +\tableofcontents + +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](http://kodi.wiki/view/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> + <autoscroll>true</autoscroll> + <focusposition>4</focusposition> + <movement>6</movement> + <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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Fixed_List_Container_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| viewtype | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via **strings.xml**. *viewtype* has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set viewtype to describe the layout as best as possible. +| orientation | The orientation of the list. Defaults to vertical. +| pagecontrol | Used to set the <b>`<id>`</b> of the page control used to control this list. +| scrolltime | The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available [tween](http://kodi.wiki/view/Tweeners) methods. +| focusposition | Specifies the focus position (from 0 -> number of displayable items - 1). The focused position doesn't change - instead, the items move up or down (or left and right) as focus changes. +| movement | This will make the focused position scroll again at the end of the list. (ie. <b>`<movement>6</movement>`</b> if there are only 6 items below the focus, the focus moves down to the bottom) +| itemlayout | Specifies the layout of items in the list. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <b>`<itemlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| focusedlayout | Specifies the layout of items in the list that have focus. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <b>`<focusedlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| content | Used to set the item content that this list will contain. Allows the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control. [See here for more information](http://kodi.wiki/view/Static_List_Content). +| preloaditems | Used in association with the background image loader. [See here for more information](http://kodi.wiki/view/Background_Image_Loader). +| autoscroll | Used to make the container scroll automatically + + +-------------------------------------------------------------------------------- +\section Fixed_List_Container_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + + +*/ diff --git a/xbmc/guilib/GUIImage.dox b/xbmc/guilib/GUIImage.dox new file mode 100644 index 0000000000..79c2f07a5e --- /dev/null +++ b/xbmc/guilib/GUIImage.dox @@ -0,0 +1,85 @@ +/*! + +\page Image_Control Image Control +\brief **Used to show an image.** + +\tableofcontents + +The image control is used for displaying images in Kodi. You can choose the +position, size, transparency and contents of the image to be displayed. + +-------------------------------------------------------------------------------- +\section Image_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Image_Control_sect2 Image Size and Type Restrictions +For the <b>`<texture>`</b> tags, and for all <b>`<texture>`</b> tags in +other controls, there is a small set of rules that you should follow if at all +possible: + +\subsection Image_Control_sect2_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 - Kodi will quite happily load most files. + +\subsection Image_Control_sect2_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. + +-------------------------------------------------------------------------------- +\section Image_Control_sect3 Available tags and attributes + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| aspectratio | This specifies how the image will be drawn inside the box defined by <b>`<width>`</b> and <b>`<height>`</b>. [See here for more information](http://kodi.wiki/view/Aspect_Ratio). +| texture | Specifies the image file which should be displayed. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| bordertexture | Specifies the image file which should be displayed as a border around the image. Use the <b>`<bordersize>`</b> to specify the size of the border. The <b>`<width>`</b>, <b>`<height>`</b> box specifies the size of the image plus border. +| bordersize | Specifies the size of the border. A single number specifies the border should be the same size all the way around the image, whereas a comma separated list of 4 values indicates left,top,right,bottom values. +| info | Specifies the information that this image control is presenting. Kodi will select the texture to use based on this tag. [See here for more information](http://kodi.wiki/view/InfoLabels). +| fadetime | This specifies a crossfade time that will be used whenever the underlying <b>`<texture>`</b> filename changes. The previous image will be held until the new image is ready, and then they will be crossfaded. This is particularly useful for a large thumbnail image showing the focused item in a list, or for fanart or other large backdrops. +| background | For images inside a container, you can specify background="true" to load the textures in a background worker thread. [See here for additional information about background loading](http://kodi.wiki/view/Background_Image_Loader). + + +-------------------------------------------------------------------------------- +\section Image_Control_sect4 See also + + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUILabelControl.dox b/xbmc/guilib/GUILabelControl.dox new file mode 100644 index 0000000000..cda2b4a95a --- /dev/null +++ b/xbmc/guilib/GUILabelControl.dox @@ -0,0 +1,112 @@ +/*! + +\page Label_Control Label Control +\brief **Used to show some lines of text.** + +\tableofcontents + +The label control is used for displaying text in Kodi. You can choose the font, +size, colour, location and contents of the text to be displayed. + + +-------------------------------------------------------------------------------- +\section Label_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Label_Control_sect2 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> +~~~~~~~~~~~~~ + +As of XBMC Gotham, simply specifying <b>`<width>auto</width>`</b> is also supported. + + +-------------------------------------------------------------------------------- +\section Label_Control_sect3 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 <b>`<width>`</b> 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 <b>`<width>`</b> then it will not be cut, and +will still overflow. + + +-------------------------------------------------------------------------------- +\section Label_Control_sect4 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| align | Can be left, right, or center. Aligns the text within the given label <b>`<width>`</b>. Defaults to left +| aligny | Can be top or center. Aligns the text within its given label <b>`<height>`</b>. Defaults to top +| scroll | When true, the text will scroll if longer than the label's <b>`<width>`</b>. If false, the text will be truncated. Defaults to false. +| label | Specifies the text which should be drawn. You should specify an entry from the strings.xml here (either the Kodi strings.xml or your skin's strings.xml file), however you may also hardcode a piece of text also if you wish, though of course it will not be localisable. You can use the full [label formatting syntax](http://kodi.wiki/view/Label_Formatting) and [you may also specify more than one piece of information here by using the $INFO and $LOCALIZE formats](http://kodi.wiki/view/Label_Parsing). +| info | Specifies the information that should be presented. Kodi will auto-fill in this info in place of the <b>`<label>`</b>. [See here for more information](http://kodi.wiki/view/InfoLabels). +| number | Specifies a number that should be presented. This is just here to allow a skinner to use a number rather than a text label (as any number given to <b>`<label>`</b> will be used to lookup in strings.xml) +| angle | The angle the text should be rendered at, in degrees. A value of 0 is horizontal. +| haspath | Specifies whether or not this label is filled with a path. Long paths are shortened by compressing the file path while keeping the actual filename full length. +| font | Specifies the font to use from the font.xml file. +| textcolor | Specifies the color the text should be, in hex **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text, in **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| wrapmultiline | If true, any text that doesn't fit on one line will be wrapped onto multiple lines. +| scrollspeed | Scroll speed of text in pixels per second. Defaults to 60. +| scrollsuffix | Specifies the suffix used in scrolling labels. Defaults to <b>`"¦"`</b>. + + + +-------------------------------------------------------------------------------- +\section Label_Control_sect5 See also + + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + + +*/ diff --git a/xbmc/guilib/GUIListContainer.dox b/xbmc/guilib/GUIListContainer.dox new file mode 100644 index 0000000000..6d8049e156 --- /dev/null +++ b/xbmc/guilib/GUIListContainer.dox @@ -0,0 +1,138 @@ +/*! + +\page List_Container List Container +\brief **Used for a scrolling lists of items. Replaces the list control.** + +\tableofcontents + +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. + +-------------------------------------------------------------------------------- +\section List_Container_sect1 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> + <autoscroll>true</autoscroll> + <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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section List_Container_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| viewtype | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.xml. viewtype has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set viewtype to describe the layout as best as possible. +| orientation | The orientation of the list. Defaults to vertical. +| pagecontrol | Used to set the <b>`<id>`</b> of the page control used to control this list. +| scrolltime | The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available [tween](http://kodi.wiki/view/Tweeners) methods. +| itemlayout | Specifies the layout of items in the list. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <b>`<itemlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| focusedlayout | Specifies the layout of items in the list that have focus. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <b>`<focusedlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| content | Used to set the item content that this list will contain. Allows the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control. [See here for more information](http://kodi.wiki/view/Static_List_Content). +| preloaditems | Used in association with the background image loader. [See here for more information](http://kodi.wiki/view/Background_Image_Loader). +| autoscroll | Used to make the container scroll automatically + + +-------------------------------------------------------------------------------- +\section List_Container_sect3 See also + + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIListGroup.dox b/xbmc/guilib/GUIListGroup.dox new file mode 100644 index 0000000000..d57791f64a --- /dev/null +++ b/xbmc/guilib/GUIListGroup.dox @@ -0,0 +1,67 @@ +/*! + +\page Group_List_Control Group List Control +\brief **Special case of the group control that forms a scrolling list of controls.** + +\tableofcontents + +The group list control is a special case of the group control. It is used for +placing a set of controls into a list (either horizontally or vertically) and +handles all the navigation within the list and placement within the list for +you. It will be scrollable if the number of items exceeds the size of the +list, and you can assign a scrollbar to it just like you can to any of the +containers (list, panel, etc.). + + +-------------------------------------------------------------------------------- +\section Group_List_Control_sect1 Example + +~~~~~~~~~~~~~ +<control type="grouplist" id="17"> + <description>My first group list control</description> + <posx>80</posx> + <posy>60</posy> + <width>250</width> + <height>300</height> + <itemgap>10</itemgap> + <pagecontrol>25</pagecontrol> + <scrolltime tween="sine" easing="out">200</scrolltime> + <orientation>vertical</orientation> + <usecontrolcoords>false</usecontrolcoords> + <visible>true</visible> + <onup>2</onup> + <ondown>3</ondown> + <onleft>1</onleft> + <onright>1</onright> + <align>right</align> +</control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Group_List_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|------------------:|:--------------------------------------------------------------| +| itemgap | Specifies the gap (in pixels) between controls in the list. Defaults to 5px. +| orientation | Specifies whether the list is horizontal or vertical. Defaults to vertical. +| pagecontrol | Specifies the page control used to scroll up and down the list. Set the page control's id here. +| scrolltime | The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available [tween](http://kodi.wiki/view/Tweeners) methods. +| usecontrolcoords | Specifies whether the list should use the control's coordinates as an offset location from the coordinates it would normally use to draw the control. Defaults to false. Useful for staggering a control in from the edge of the grouplist, or for having more space around a control than <c>`<itemgap>`</c> gives. +| align | Specifies how to align the grouplist. possible values: left, right, center, justify. defaults to left. + + +-------------------------------------------------------------------------------- +\section Group_List_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + + +*/ diff --git a/xbmc/guilib/GUIMoverControl.dox b/xbmc/guilib/GUIMoverControl.dox new file mode 100644 index 0000000000..1ddb03e1d4 --- /dev/null +++ b/xbmc/guilib/GUIMoverControl.dox @@ -0,0 +1,50 @@ +/*! + +\page Mover_Control Mover Control +\brief **Used in the calibration screens.** + +\tableofcontents + +The mover control is used for the screen calibration portions of Kodi. You can +choose the size and look of the mover control. + + +-------------------------------------------------------------------------------- +\section Mover_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Mover_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|----------------:|:--------------------------------------------------------------| +| texturefocus | Specifies the image file which should be displayed when the mover has focus. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| texturenofocus | Specifies the image file which should be displayed when the mover does not have focus. + + +-------------------------------------------------------------------------------- +\section Mover_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIMultiImage.dox b/xbmc/guilib/GUIMultiImage.dox new file mode 100644 index 0000000000..c741b43a98 --- /dev/null +++ b/xbmc/guilib/GUIMultiImage.dox @@ -0,0 +1,78 @@ +/*! + +\page MultiImage_Control Group MultiImage Control +\brief **Used to show a slideshow of images.** + +\tableofcontents + +The MultiImage control is used for displaying a slideshow of images from a folder +in Kodi. You can choose the position and size of the slideshow, as well as +timing information. + + +-------------------------------------------------------------------------------- +\section MultiImage_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section MultiImage_Control_sect2 Image Size and Type Restrictions +For the <b>`<texture>`</b> tags, and for all <b>`<texture>`</b> tags in other +controls, there is a small set of rules that you should follow if at all possible: + +\subsection MultiImage_Control_sect2_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 <b>`<colorkey>`</b> +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. + +\section MultiImage_Control_sect3 Available tags and attributes + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| imagepath | Specifies the path containing the images to use for the slideshow. Kodi will first look inside the compressed Textures.xbt file for images, and then will look in the actual folder. The path is relative to the media/ folder if it is not specified completely. +| info | Specifies the information that this image control is presenting. Kodi will select the texture to use based on this tag. [See here for more information](http://kodi.wiki/view/InfoLabels). +| timeperimage | Time in milliseconds that an image is shown for. +| fadetime | Time in milliseconds to fade between images. +| pauseatend | Time in milliseconds to pause (in addition to <b>`<timeperimage>`</b>) on the last image at the end of a complete cycle through the images. Only useful if <b>`<loop>`</b> is set to yes. +| loop | If set to no, the last image will display indefinitely. Setting it to yes will loop around once they reach the last image. Defaults to yes. +| aspectratio | This specifies how the image will be drawn inside the box defined by <b>`<width>`</b> and <b>`<height>`</b>. [See here for more info](http://kodi.wiki/view/Aspect_Ratio). + +-------------------------------------------------------------------------------- +\section MultiImage_Control_sect4 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIPanelContainer.dox b/xbmc/guilib/GUIPanelContainer.dox new file mode 100644 index 0000000000..4ff05a0db0 --- /dev/null +++ b/xbmc/guilib/GUIPanelContainer.dox @@ -0,0 +1,126 @@ +/*! + +\page Panel_Container Panel Container +\brief **Used for a scrolling panel of items. Replaces the thumbnail panel.** + +\tableofcontents + +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. + + +-------------------------------------------------------------------------------- +\section Panel_Container_sect1 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> + <autoscroll>true</autoscroll> + <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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Panel_Container_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| viewtype | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.xml. viewtype has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set viewtype to describe the layout as best as possible. +| orientation | The orientation of the panel. Defaults to vertical. +| pagecontrol | Used to set the <b>`<id>`</b> of the page control used to control this panel. +| scrolltime | The time (in ms) to scroll from one item to another. By default, this is 200ms. The panel will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available [tween](http://kodi.wiki/view/Tweeners) methods. +| itemlayout | Specifies the layout of items in the list. Requires both width and height attributes set. The <b>`<itemlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| focusedlayout | Specifies the layout of items in the list that have focus. Requires both width and height attributes set. The <b>`<focusedlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| content | Used to set the item content that this panel will contain. Allows the skinner to setup a panel anywhere they want with a static set of content, as a useful alternative to the grouplist control. [See here for more information](http://kodi.wiki/view/Static_List_Content) +| preloaditems | Used in association with the background image loader. [See here for more information](http://kodi.wiki/view/Background_Image_Loader) +| autoscroll | Used to make the container scroll automatically + + +-------------------------------------------------------------------------------- +\section Panel_Container_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIProgressControl.dox b/xbmc/guilib/GUIProgressControl.dox new file mode 100644 index 0000000000..c3b9ac4158 --- /dev/null +++ b/xbmc/guilib/GUIProgressControl.dox @@ -0,0 +1,62 @@ +/*! + +\page Progress_Control Progress Control +\brief **Used to show the progress of a particular operation.** + +\tableofcontents + +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. + + +-------------------------------------------------------------------------------- +\section Progress_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Progress_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|----------------:|:--------------------------------------------------------------| +| reveal | If set to true the midtexture will reveal itself instead of stretching to fill the gap (works best when its the same size as **texturebg**) +| texturebg | Specifies the image file which should be displayed in the background of the progress control. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| lefttexture | Specifies the image file which should be displayed for the left side of the progress bar. This is rendered on the left side of the bar. +| midtexture | Specifies the image file which should be displayed for the middle portion of the progress bar. This is the `fill` texture used to fill up the bar. It's positioned on the right of the <b>`<lefttexture>`</b> texture, and fills the gap between the <b>`<lefttexture>`</b> and <b>`<righttexture>`</b> textures, depending on how far progressed the item is. +| righttexture | Specifies the image file which should be displayed for the right side of the progress bar. This is rendered on the right side of the bar. +| overlaytexture | Specifies the image file which should be displayed over the top of all other images in the progress bar. It is centered vertically and horizontally within the space taken up by the background image. +| info | Specifies the information that the progress bar is reporting on. [See here for more information](http://kodi.wiki/view/InfoLabels). + + +-------------------------------------------------------------------------------- +\section Progress_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + + +*/ diff --git a/xbmc/guilib/GUIRSSControl.dox b/xbmc/guilib/GUIRSSControl.dox new file mode 100644 index 0000000000..e51430cddd --- /dev/null +++ b/xbmc/guilib/GUIRSSControl.dox @@ -0,0 +1,106 @@ +/*! + +\page RSS_feed_Control RSS ticker +\brief **Used to display scrolling RSS feeds.** + +\tableofcontents + +Kodi can display an RSS feed on the home screen of the default skin/interface +(Estuary), as well as any other skin that supports RSS feeds. By default, +the RSS news feed is taken from [http://kodi.tv](http://kodi.tv/), but the feed +can be changed to almost any RSS feed. + +@note Don't confuse the RSS ticker with RSS media source, which allows access to +video and/or audio RSS streams. + + +-------------------------------------------------------------------------------- +\section RSS_feed_Control_sect1 RSS ticker settings + +The RSS ticker can be toggled on or off by going to +<b>`Settings -> Appearance -> Skin -> Show RSS news feed`</b> + +Below this setting one can also change the RSS news feed address. + + +-------------------------------------------------------------------------------- +\section RSS_feed_Control_sect2 Technical documentation for skinners + + Main page: [Skin development](http://kodi.wiki/view/Skin_development) + +\subsection RSS_feed_Control_sect2_1 RSS control +The rss control is used for displaying scrolling RSS feeds from the internet +in Kodi. You can choose the font, size, colour, location and the RSS feed to +be displayed. + +__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> +~~~~~~~~~~~~~ + + +\subsection RSS_feed_Control_sect2_2 Available tags and attributes + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| id | This refers to the feedset to be displayed. This is the id reference to the <b>`<set>`</b> section in [RssFeeds.xml](http://kodi.wiki/view/RssFeeds.xml) (see below): +| font | Specifies the font to use from the font.xml file. +| textcolor | Specified the color the text should be. In hex **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text. In **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| headlinecolor | Specified the color that any highlighted text should be. In hex **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| titlecolor | Specified the color the titles of the feeds should be. In hex **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| scrollspeed | Scroll speed of text in pixels per second. + + +\subsection RSS_feed_Control_sect2_3 RssFeeds.xml + +- <em>Main page: [RssFeeds.xml](http://kodi.wiki/view/RssFeeds.xml)</em> + +The actual content of the RSS feed is defined in the +[RssFeeds.xml](http://kodi.wiki/view/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 <b>`<id>`</b> attribute of the control. There can be more +than one <b>`<set>`</b> defined, and more than one <b>`<feed>`</b> per +set. The <b>`<feed>`</b>'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. + + +-------------------------------------------------------------------------------- +\section RSS_feed_Control_sect3 See also + +- [RssFeeds.xml](http://kodi.wiki/view/RssFeeds.xml) + +#### Development: +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIRadioButtonControl.dox b/xbmc/guilib/GUIRadioButtonControl.dox new file mode 100644 index 0000000000..36388dd7ef --- /dev/null +++ b/xbmc/guilib/GUIRadioButtonControl.dox @@ -0,0 +1,102 @@ +/*! + +\page Radio_button_control Radio button control +\brief **A radio button control (as used for on/off settings).** + +\tableofcontents + +The radio button control is used for creating push button on/off settings in +Kodi. 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. + +-------------------------------------------------------------------------------- +\section Radio_button_control_sect1 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> + <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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Radio_button_control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|------------------------:|:--------------------------------------------------------------| +| texturefocus | Specifies the image file which should be displayed when the button has focus. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| 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. +| textureradioondisabled | Specifies the image file which should be displayed for the radio button portion when the button is on and disabled. +| 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. +| textureradioondisabled | Specifies the image file which should be displayed for the radio button portion when the button is off and disabled. +| label | The label used on the button. It can be a link into strings.xml, or an actual text label. +| label2 | Optional. Will display an 'on' or 'off' label. Only available if you specify an empty radiowidth and radioheight. +| 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 theme](http://kodi.wiki/view/Colour_Themes). +| focusedcolor | Color used for the button label when the button has in focus. In **AARRGGBB** hex format or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| disabledcolor | Color used for the button label if the button is disabled. In **AARRGGBB** hex format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text, in **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| 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. [see here for more information](http://kodi.wiki/view/Conditional_Visibility). +| onclick | The function to perform when the radio button is clicked. Should be a [built in function](http://kodi.wiki/view/Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python). +| 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. See here for more information. +| onunfocus | Specifies the action to perform when the button loses focus. Should be a built in function. + + +-------------------------------------------------------------------------------- +\section Radio_button_control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIRenderingControl.dox b/xbmc/guilib/GUIRenderingControl.dox new file mode 100644 index 0000000000..1f1b44b7ee --- /dev/null +++ b/xbmc/guilib/GUIRenderingControl.dox @@ -0,0 +1,34 @@ +/*! + +\page Addon_Rendering_control Add-on Rendering control +\brief **Control where rendering becomes performed from add-on to show on Kodi** + +\tableofcontents + +-------------------------------------------------------------------------------- +\section Addon_Rendering_control_sect1 Example + +~~~~~~~~~~~~~ +<control type="renderaddon" id ="9"> + <left>5</left> + <top>50</top> + <width>780</width> + <height>515</height> +</control> +~~~~~~~~~~~~~ + +-------------------------------------------------------------------------------- +\section Addon_Rendering_control_sect2 Available tags + +Only the [default control](http://kodi.wiki/view/Default_Control_Tags) tags are +applicable to this control. + + +-------------------------------------------------------------------------------- +\section Addon_Rendering_control_sect3 See also +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIResizeControl.dox b/xbmc/guilib/GUIResizeControl.dox new file mode 100644 index 0000000000..2dbb5df4b3 --- /dev/null +++ b/xbmc/guilib/GUIResizeControl.dox @@ -0,0 +1,51 @@ +/*! + +\page Resize_Control Resize control +\brief **Used to set the pixel ratio in Video Calibration.** + +\tableofcontents + +The resize control is used to specify an area of changeable ratio for use in +the screen calibration portion of Kodi. You can choose the size, and look of +the resizer. + + +-------------------------------------------------------------------------------- +\section Resize_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Resize_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|----------------:|:--------------------------------------------------------------| +| texturefocus | Specifies the image file which should be displayed when the resizer has focus. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| texturenofocus | Specifies the image file which should be displayed when the resizer does not have focus. + + +-------------------------------------------------------------------------------- +\section Resize_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIScrollBarControl.dox b/xbmc/guilib/GUIScrollBarControl.dox new file mode 100644 index 0000000000..4ee67a7de3 --- /dev/null +++ b/xbmc/guilib/GUIScrollBarControl.dox @@ -0,0 +1,79 @@ +/*! + +\page Scroll_Bar_Control Scroll Bar Control +\brief **Used for a implementing a scroll bar.** + +\tableofcontents + +The scroll bar control is used as a page control for lists, panels, wraplists, +fixedlists, textboxes, and grouplists. You can choose the position, size, and +look of the scroll bar. + + +-------------------------------------------------------------------------------- +\section Scroll_Bar_Control_sect Example + +~~~~~~~~~~~~~ +<control type="scrollbar" id="17"> + <description>My first scroll bar control</description> + <posx>80</posx> + <posy>60</posy> + <width>250</width> + <height>30</height> + <visible>true</visible> + <texturesliderbackground>scroll-background.png</texturesliderbackground> + <texturesliderbar>bar.png</texturesliderbar> + <texturesliderbarfocus>bar-focus.png</texturesliderbarfocus> + <textureslidernib>nib.png</textureslidernib> + <textureslidernibfocus>nib-focus.png</textureslidernibfocus> + <pulseonselect></pulseonselect> + <orientation>vertical</orientation> + <showonepage>false</showonepage> + <onup>2</onup> + <ondown>3</ondown> + <onleft>1</onleft> + <onright>1</onright> +</control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Scroll_Bar_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|------------------------:|:--------------------------------------------------------------| +| texturesliderbackground | Specifies the image file which should be displayed in the background of the scroll bar control. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| texturesliderbar | Specifies the image file which should be displayed for the scroll bar. As the size of the scroll bar is dynamic, it is often useful to [use the border attribute of this texture](http://kodi.wiki/view/Texture_Attributes). +| texturesliderbarfocus | Specifies the image file which should be displayed for the scroll bar when it has focus. +| textureslidernib | Specifies the image file which should be displayed for the scroll bar nib. The nib is always centered within the scroll bar. +| textureslidernibfocus | Specifies the image file which should be displayed for the scroll bar nib when it has focus. The nib is always centered within the scroll bar. +| orientation | Specifies whether this scrollbar is horizontal or vertical. Defaults to vertical. +| showonepage | Specifies whether the scrollbar will show if the container it's controlling has just one page. Defaults to true. + +\section Scroll_Bar_Control_sect3 Adding Up and Down buttons above and below a scrollbar +To add arrow buttons above and below the scrollbar, you need to add 2 additional button controls to the window, and set their <b>`<onclick>`</b> tag to + +~~~~~~~~~~~~~ +<onclick>pageup(id)</onclick> +~~~~~~~~~~~~~ +or +~~~~~~~~~~~~~ +<onclick>pagedown(id)</onclick> +~~~~~~~~~~~~~ + +where id is the id of this scroll bar. + + +-------------------------------------------------------------------------------- +\section Scroll_Bar_Control_sect4 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUISelectButtonControl.dox b/xbmc/guilib/GUISelectButtonControl.dox new file mode 100644 index 0000000000..5f20db0d1d --- /dev/null +++ b/xbmc/guilib/GUISelectButtonControl.dox @@ -0,0 +1,96 @@ +/*! + +\page Select_Button_Control Select Button Control +\brief **Button with multi selection choice.** + +\tableofcontents + +Behaves like a normal button control, but when pressing, it can show multiple +strings. The user can choose one by moving left or right. + +Messages the button reactes on: + +- GUI_MSG_LABEL_ADD \n + Add a label to the control. +- GUI_MSG_LABEL_RESET \n + Remove all labels from the control. +- GUI_MSG_ITEM_SELECTED \n + After sending this message Kodi contains the selected label as an integer. + \note The order of the items depends on the order they have been added to + the control using GUI_MSG_LABEL_ADD. +- GUI_MSG_ITEM_SELECT \n + Send this message to set the label to be selected. + + +-------------------------------------------------------------------------------- +\section Select_Button_Control_sect1 Example + +Example entry to define a select button in a window or as reference control: + +~~~~~~~~~~~~~ + <control> + <description>default select button</description + <type>selectbutton</type> + <id>6</id> + <posX>60</posX> + <posY>192</posY> + <width>130</width> + <height>32</height> + <label>132</label> + <font>font13</font> + <textureFocus>button-focus.png</textureFocus> + <textureNoFocus>button-nofocus.jpg</textureNoFocus> + <texturebg>button-focus.png</texturebg> + <textureLeft>scroll-left.png</textureLeft> + <textureRight>scroll-right.png</textureRight> + <font>font13</font> + <textcolor>ffffffff</textcolor> + <colordiffuse>ffffffff</colordiffuse> + <disabledcolor>60ffffff</disabledcolor> + <onleft>50</onleft> + <onright>50</onright> + <onup>3</onup> + <ondown>7</ondown> + </control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Select_Button_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| texturefocus | Specifies the image file which should be displayed when the button has focus. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| texturenofocus| Specifies the image file which should be displayed when the button does not have focus. +| label | The label used on the button. It can be a link into <b>`strings.xml`</b>, 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 theme](http://kodi.wiki/view/Colour_Themes). +| focusedcolor | Color used for the button label when the button has in focus. In **AARRGGBB** hex format or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| disabledcolor | Color used for the button label if the button is disabled. In **AARRGGBB** hex format or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| invalidcolor | Color used for the button if the user entered some invalid value. In **AARRGGBB** hex format or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text, in **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| angle | The angle the text should be rendered at, in degrees. A value of 0 is horizontal. +| 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. +| textwidth | Will truncate any text that's too long. +| onclick | Specifies the action to perform when the button is pressed. Should be a built in function. [See here for more information](http://kodi.wiki/view/Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python). You may have more than one <b>`<onclick>`</b> tag, and they'll be executed in sequence. +| 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. [See here for more information](http://kodi.wiki/view/Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python). +| onunfocus | Specifies the action to perform when the button loses focus. Should be a built in function. +| wrapmultiline | Will wrap the label across multiple lines if the label exceeds the control width. + + +-------------------------------------------------------------------------------- +\section Select_Button_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + + */ diff --git a/xbmc/guilib/GUISettingsSliderControl.dox b/xbmc/guilib/GUISettingsSliderControl.dox new file mode 100644 index 0000000000..034a4276de --- /dev/null +++ b/xbmc/guilib/GUISettingsSliderControl.dox @@ -0,0 +1,80 @@ +/*! + +\page Settings_Slider_Control Settings Slider Control +\brief **Used for a slider control in the settings menus.** + +\tableofcontents + +The settings slider control is used in the settings screens for when an option +is best specified on a sliding scale. You can choose the position, size, and +look of the slider control. It is basically a cross between the button control +and a slider control. It has a label and focus and non focus textures, as well +as a slider control on the right. + +-------------------------------------------------------------------------------- +\section Settings_Slider_Control_sect1 Example + +~~~~~~~~~~~~~ +<control type="sliderex" id="12"> + <description>My first settings slider control</description> + <posx>80</posx> + <posy>60</posy> + <width>250</width> + <height>200</height> + <sliderwidth>100</sliderwidth> + <sliderheight>20</sliderheight> + <visible>true</visible> + <texturefocus>myfocustexture.png</texturefocus> + <texturenofocus>mynofocustexture.png</texturenofocus> + <texturebg>mybackgroundtexture.png</texturebg> + <textureslidernib>mydowntexture.png</textureslidernib> + <textureslidernibfocus>mydownfocustexture.png</textureslidernibfocus> + <info></info> + <label>46</label> + <font>font12</font> + <textcolor>FFFFFFFF</textcolor> + <disabledcolor>80FFFFFF</disabledcolor> + <textoffsetx></textoffsetx> + <pulseonselect></pulseonselect> + <onup>2</onup> + <ondown>3</ondown> + <onleft>1</onleft> + <onright>1</onright> +</control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Settings_Slider_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|----------------------:|:--------------------------------------------------------------| +| sliderwidth | Specifies the width of the slider portion of the slider control (ie without the text value, if present). The texture image for the slider background will be resized to fit into this width, and the nib textures will be resized by the same amount. +| sliderheight | Specifies the height of the slider portion of the slider control (ie without the text value, if present). The texture image for the slider background will be resized to fit into this height, and the nib textures will be resized by the same amount. +| texturefocus | Specifies the image file which should be displayed for the control when it has focus. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| texturenofocus | Specifies the image file which should be displayed for the control when it doesn't focus. +| texturebg | Specifies the image file which should be displayed in the background of the slider portion of the control. Will be positioned so that the right edge is <b>`<textoffsetx>`</b> away from the right edge of the <b>`<texturefocus>`</b> image, and centered vertically. +| textureslidernib | Specifies the image file which should be displayed for the slider nib. +| textureslidernibfocus | Specifies the image file which should be displayed for the slider nib 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 theme](http://kodi.wiki/view/Colour_Themes). +| disabledcolor | Color used for the label if the control is disabled. In **AARRGGBB** hex format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text. In **AARRGGBB** hex format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| textoffsetx | Amount to offset the label from the left edge of the control. +| info | Specifies the information that the slider controls. [See here for more information](http://kodi.wiki/view/InfoLabels). + + +-------------------------------------------------------------------------------- +\section Settings_Slider_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUISliderControl.dox b/xbmc/guilib/GUISliderControl.dox new file mode 100644 index 0000000000..5c15e1c6c3 --- /dev/null +++ b/xbmc/guilib/GUISliderControl.dox @@ -0,0 +1,66 @@ +/*! + +\page Slider_Control Slider Control +\brief **Used for a volume slider.** + +\tableofcontents + +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. + + +-------------------------------------------------------------------------------- +\section Slider_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Slider_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|----------------------:|:--------------------------------------------------------------| +| texturesliderbar | Specifies the image file which should be displayed in the background of the slider control. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| textureslidernib | Specifies the image file which should be displayed for the slider nib. +| textureslidernibfocus | Specifies the image file which should be displayed for the slider nib when it has focus. +| controloffsetx | Amount to offset the slider background texture from the left edge of the control. Only useful if a value is being rendered as well (ie in int or float mode). +| controloffsety | Amount to offset the slider background texture from the top edge of the control. +| info | Specifies the information that the slider controls. [See here for more information](http://kodi.wiki/view/InfoLabels). +| action | Can be <b>'volume'</b> to adjust the volume or 'seek' to change the seek position. + + +-------------------------------------------------------------------------------- +\section Slider_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUISpinControl.dox b/xbmc/guilib/GUISpinControl.dox new file mode 100644 index 0000000000..0c42fcf6cc --- /dev/null +++ b/xbmc/guilib/GUISpinControl.dox @@ -0,0 +1,83 @@ +/*! + +\page Spin_Control Spin Control +\brief **Used for cycling up/down controls.** + +\tableofcontents + +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. + + +-------------------------------------------------------------------------------- +\section Spin_Control_sect1 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 colordiffuse="FFFFAAFF">myuptexture.png</textureup> + <textureupfocus colordiffuse="FFFFAAFF">myupfocustexture.png</textureupfocus> + <texturedown colordiffuse="FFFFAAFF">mydowntexture.png</texturedown> + <texturedownfocus colordiffuse="FFFFAAFF">mydownfocustexture.png</texturedownfocus> + <textureupdisabled colordiffuse="AAFFAAFF">mydowntexture.png</textureupdisabled> + <texturedowndisabled colordiffuse="AAFFAAFF">mydownfocustexture.png</texturedowndisabled> + <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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Spin_Control_sect2 Available tags +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------------:|:--------------------------------------------------------------| +| textureup | Specifies the image file which should be displayed for the up arrow when it doesn't have focus. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| textureupfocus | Specifies the image file which should be displayed for the up button when it has focus. +| textureupdisabled | Specifies the image file which should be displayed for the up arrow when the button is disabled. +| 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. +| texturedowndisabled | Specifies the image file which should be displayed for the up arrow when the button is disabled. +| 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 theme](http://kodi.wiki/view/Colour_Themes). +| disabledcolor | Color used for the label if the control is disabled. In **AARRGGBB** hex format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text. In **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| 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. +| textwidth | Will truncate any text that's too long. + + +-------------------------------------------------------------------------------- +\section Spin_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUISpinControlEx.dox b/xbmc/guilib/GUISpinControlEx.dox new file mode 100644 index 0000000000..4726db2ba7 --- /dev/null +++ b/xbmc/guilib/GUISpinControlEx.dox @@ -0,0 +1,96 @@ +/*! + +\page Settings_Spin_Control Settings Spin Control +\brief **Used for cycling up/down controls in the settings menus.** + +\tableofcontents + +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. + +-------------------------------------------------------------------------------- +\section Settings_Spin_Control_sect1 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> + <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> + <textureupdisabled colordiffuse="AAFFAAFF">mydowntexture.png</textureupdisabled> + <texturedowndisabled colordiffuse="AAFFAAFF">mydownfocustexture.png</texturedowndisabled> + <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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Settings_Spin_Control_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| 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. [See here for additional information about textures](http://kodi.wiki/view/Texture_Attributes). +| 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. +| textureupdisabled | Specifies the image file which should be displayed for the up arrow when the button is disabled. +| 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 <b>`<textoffsetx>`</b> 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. +| texturedowndisabled | Specifies the image file which should be displayed for the up arrow when the button is disabled. +| 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 theme](http://kodi.wiki/view/Colour_Themes). +| disabledcolor | Color used for the label if the control is disabled. In **AARRGGBB** hex format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text. In **AARRGGBB** hex format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| 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. +| textwidth | Will truncate any text that's too long. + + +-------------------------------------------------------------------------------- +\section Settings_Spin_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUITextBox.dox b/xbmc/guilib/GUITextBox.dox new file mode 100644 index 0000000000..aba63cae83 --- /dev/null +++ b/xbmc/guilib/GUITextBox.dox @@ -0,0 +1,63 @@ +/*! + +\page Text_Box Text Box +\brief **Used to show a multi-page piece of text.** + +\tableofcontents + +The text box is used for showing a large multipage piece of text in Kodi. You +can choose the position, size, and look of the text. + + +-------------------------------------------------------------------------------- +\section Text_Box_sect1 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> + <scrolltime>200</scrolltime> + <autoscroll delay="3000" time="1000" repeat="10000">!Control.HasFocus(13)</autoscroll> + <label>Text to display goes here [CR] next line...</label> + <align>center</align> +</control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Text_Box_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| height | <b>`<height>auto</height>`</b> is supported in textbox controls +| font | Font used for the items first label. From `fonts.xml`. +| textcolor | Color used for displaying the text. In **AARRGGBB** hex format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| shadowcolor | Specifies the color of the drop shadow on the text. In **AARRGGBB** format, or a name from the [colour theme](http://kodi.wiki/view/Colour_Themes). +| pagecontrol | Specifies the <b>`<id>`</b> of the page control used to control this textbox. The page control can either be a \ref Spin_Control "Spin Control" or a \ref Scroll_Bar_Control "Scroll Bar Control". +| scrolltime | The time (in ms) to scroll from one item to another. By default, this is *200ms*. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. +| align | possible values for text alignment: left, right, center, justify +| autoscroll | Specifies the timing and conditions of any autoscrolling this textbox should have. Times are in milliseconds. The content is delayed for the given delay, then scrolls at a rate of one line per time interval until the end. If the repeat tag is present, it then delays for the repeat time, fades out over 1 second, and repeats. It does not wrap or reset to the top at the end of the scroll. You can use any [bool condition](http://kodi.wiki/view/List_of_Boolean_Conditions) to specify when autoscrolling should be allowed. + + +-------------------------------------------------------------------------------- +\section Text_Box_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIToggleButtonControl.dox b/xbmc/guilib/GUIToggleButtonControl.dox new file mode 100644 index 0000000000..9bbb8721e3 --- /dev/null +++ b/xbmc/guilib/GUIToggleButtonControl.dox @@ -0,0 +1,91 @@ +/*! + +\page skin_Toggle_button_control Toggle button control +\brief **A toggle on/off button that can take 2 different states.** + +\tableofcontents + +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). + +-------------------------------------------------------------------------------- +\section skin_Toogle_button_control_sect1 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> + <wrapmultiline>false</wrapmultiline> +</control> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section skin_Toogle_button_control_sect2 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. + +| Tag | Description | +|------------------:|:--------------------------------------------------------------| +| texturefocus | Specifies the image file which should be displayed when the button has focus. See here for additional information about texture tags. +| texturenofocus | Specifies the image file which should be displayed when the button does not have focus. +| alttexturefocus | Specifies the image file which should be displayed when the toggle button is in it's selected state. This texture replaces the <b>`<texturefocus>`</b> texture when the toggle button is selected. +| alttexturenofocus | Specifies the image file which should be displayed when the button is in it's selected state but unfocused. +| usealttexture | Specifies the conditions under which the Alternative Textures should be shown. Some toggle button controls are handled by Kodi internally, but any extra ones that the skinner has can be controlled using this tag. See here for more information. +| label | The label used on the button. It can be a link into strings.xml, or an actual text label. +| altlabel | The alternate label used on the button. It can be a link into strings.xml, or an actual text label. +| altclick | The alternate action to perform when the button is pressed. Should be a built in function. See here for more information. You may have more than one <b>`<altclick>`</b> tag, and they'll be executed in sequence. +| 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 theme. +| disabledcolor | Color used for the button label if the button is disabled. In AARRGGBB hex format, or a name from the colour theme. +| shadowcolor | Specifies the color of the drop shadow on the text. In AARRGGBB hex format, or a name from the 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. +| textwidth | Will truncate any text that's too long. +| onclick | Specifies the action to perform when the button is pressed. Should be a built in function. See here for more information. You may have more than one <b>`<onclick>`</b> tag, and they'll be executed in sequence. +| 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. See here for more information. +| onunfocus | Specifies the action to perform when the button loses focus. Should be a built in function. +| wrapmultiline | Allows wrapping on the label across multiple lines. Defaults to false. + + +-------------------------------------------------------------------------------- +\section skin_Toogle_button_control_sect3 See also +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIVideoControl.dox b/xbmc/guilib/GUIVideoControl.dox new file mode 100644 index 0000000000..24a20426df --- /dev/null +++ b/xbmc/guilib/GUIVideoControl.dox @@ -0,0 +1,42 @@ +/*! + +\page Video_Control Video Control +\brief **Used to display the currently playing video whilst in the GUI.** + +\tableofcontents + +The videowindow control is used for displaying the currently playing video +elsewhere in the Kodi GUI. You can choose the position, and size of the video +displayed. Note that the control is only rendered if video is being played. + + +-------------------------------------------------------------------------------- +\section Video_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Video_Control_sect2 Available tags + +Only the [default control](http://kodi.wiki/view/Default_Control_Tags) tags are applicable to this control. + + +-------------------------------------------------------------------------------- +\section Video_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIVisualisationControl.dox b/xbmc/guilib/GUIVisualisationControl.dox new file mode 100644 index 0000000000..256b6848fd --- /dev/null +++ b/xbmc/guilib/GUIVisualisationControl.dox @@ -0,0 +1,42 @@ +/*! + +\page Visualisation_Control Visualisation Control +\brief **Used to display a visualisation while music is playing.** + +\tableofcontents + +The visualisation control is used for displaying those funky patterns that jump +to the music in Kodi. You can choose the position, and size of the visualisation +displayed. Note that the control is only rendered if music is being played. + + +-------------------------------------------------------------------------------- +\section Visualisation_Control_sect1 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> +~~~~~~~~~~~~~ + + +-------------------------------------------------------------------------------- +\section Visualisation_Control_sect2 Available tags +Only the [default control](http://kodi.wiki/view/Default_Control_Tags) tags are +applicable to this control. + + +-------------------------------------------------------------------------------- +\section Visualisation_Control_sect3 See also + +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/GUIWrappingListContainer.dox b/xbmc/guilib/GUIWrappingListContainer.dox new file mode 100644 index 0000000000..ed12e68396 --- /dev/null +++ b/xbmc/guilib/GUIWrappingListContainer.dox @@ -0,0 +1,139 @@ +/*! + +\page Wrap_List_Container Wrap List Container +\brief **Used for a wrapping list of items with fixed focus.** + +\tableofcontents + +The wrap list container is one of several containers used to display items +fromfile lists in various ways. The wrap list container is the same as the +\ref List_Container "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. + +-------------------------------------------------------------------------------- +\section Wrap_List_Container_sect1 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> + <autoscroll>true</autoscroll> + <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> +~~~~~~~~~~~~~ + +-------------------------------------------------------------------------------- +\section Wrap_List_Container_sect2 Available tags + +In addition to the [Default Control Tags](http://kodi.wiki/view/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. + +| Tag | Description | +|--------------:|:--------------------------------------------------------------| +| viewtype | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the <i>"View As"</i> control within the GUI. It is localizable via strings.xml. viewtype has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set _viewtype_ to describe the layout as best as possible. +| orientation | The orientation of the list. Defaults to vertical. +| pagecontrol | Used to set the <b>`<id>`</b> of the page control used to control this list. +| scrolltime | The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available [tween](http://kodi.wiki/view/Tweeners) methods. +| focusposition | Specifies the index (from 0 -> number items displayable - 1) of the focused item. The focused item doesn't move - as the user moves up and down (or left and right) the items scroll instead. +| itemlayout | Specifies the layout of items in the list. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <b>`<itemlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| focusedlayout | Specifies the layout of items in the list that have focus. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <b>`<focusedlayout>`</b> then contains as many label and image controls as required. [See here for more information](http://kodi.wiki/view/Container_Item_Layout). +| content | Used to set the item content that this list will contain. Allows the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control. [See here for more information](http://kodi.wiki/view/Static_List_Content) +| autoscroll | Used to make the container scroll automatically + +-------------------------------------------------------------------------------- +\section Wrap_List_Container_sect3 See also +#### Development: + +- [Add-on development](http://kodi.wiki/view/Add-on_development) +- [Skinning](http://kodi.wiki/view/Skinning) + +*/ diff --git a/xbmc/guilib/_Controls.dox b/xbmc/guilib/_Controls.dox new file mode 100644 index 0000000000..206a870ee0 --- /dev/null +++ b/xbmc/guilib/_Controls.dox @@ -0,0 +1,38 @@ +/*! + +\page skin_controls Controls +\brief 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. + +- \subpage Addon_Rendering_control - Control where rendering becomes performed from add-on +- \subpage skin_Button_control - a standard push button control. +- \subpage EPGGrid_control - used to display the EPG guide in the PVR section. +- \subpage skin_Edit_control - used as an input control for the osd keyboard and other input fields. +- \subpage Fade_Label_Control - used to show multiple pieces of text in the same position, by fading from one to the other. +- \subpage Fixed_List_Container - used for a list of items with a fixed focus. Same as the \ref Wrap_List_Container "Wrap List Container" except it doesn't wrap. +- \subpage Group_Control - used to group controls together. +- \subpage Group_List_Control - special case of the group control that forms a scrolling list of controls. +- \subpage Image_Control - used to show an image. +- \subpage Label_Control - used to show some lines of text. +- \subpage List_Container - used for a scrolling lists of items. Replaces the list control. +- \subpage Mover_Control - used in the calibration screens. +- \subpage MultiImage_Control - used to show a slideshow of images. +- \subpage Panel_Container - used for a scrolling panel of items. Replaces the thumbnail panel. +- \subpage Progress_Control - Used to show the progress of a particular operation. +- \subpage RSS_feed_Control - used to display scrolling RSS feeds. +- \subpage Radio_button_control - a radio button control (as used for on/off settings). +- \subpage Resize_Control - used to set the pixel ratio in Video Calibration. +- \subpage Scroll_Bar_Control - used for a implementing a scroll bar. +- \subpage Select_Button_Control - Button with multi selection choice. +- \subpage Settings_Slider_Control - used for a slider control in the settings menus. +- \subpage Settings_Spin_Control - used for cycling up/down controls in the settings menus. +- \subpage Slider_Control - used for a volume slider. +- \subpage Spin_Control - used for cycling up/down controls. +- \subpage Text_Box - used to show a multi-page piece of text. +- \subpage skin_Toggle_button_control - a toggle on/off button that can take 2 different states. +- \subpage Video_Control - used to display the currently playing video whilst in the GUI. +- \subpage Visualisation_Control - used to display a visualisation while music is playing. +- \subpage Wrap_List_Container - used for a wrapping list of items with fixed focus. + +*/ |