Panel Container: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>Theuni
(Update wikilink targets broken during archiving and refresh page style)
 
(16 intermediate revisions by 9 users not shown)
Line 1: Line 1:
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.
:{{See also|Add-on development|Skinning}}
===Example===
<section begin="main content" />
<source lang="xml">
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.
 
== Example ==
<div style="font-size: 1.06em; margin-left: 2.5em; max-width: 60vmax;"><syntaxhighlight lang="xml">
<control type="panel" id="52">
<control type="panel" id="52">
<posx>190</posx>
<left>190</left>
<posy>100</posy>
<top>100</top>
<width>485</width>
<width>485</width>
<height>425</height>
<height>425</height>
Line 11: Line 14:
<onup>52</onup>
<onup>52</onup>
<ondown>52</ondown>
<ondown>52</ondown>
<scrolltime>200</scrolltime>
<scrolltime tween="sine" easing="out">200</scrolltime>
<autoscroll>true</autoscroll>
<viewtype label="536">icon</viewtype>
<viewtype label="536">icon</viewtype>
<pagecontrol>60</pagecontrol>
<pagecontrol>60</pagecontrol>
<include>contentpanelslide</include>
<include>contentpanelslide</include>
<itemlayout height="141" width="120">
<itemlayout height="150" width="120">
<control type="image">
<control type="image">
<posx>10</posx>
<left>10</left>
<posy>10</posy>
<top>10</top>
<width>100</width>
<width>100</width>
<height>100</height>
<height>100</height>
<info>ListItem.Icon</info>
<texture>$INFO[ListItem.Icon]</texture>
</control>
</control>
<control type="image">
<control type="image">
<posx>80</posx>
<left>80</left>
<posy>75</posy>
<top>75</top>
<width>32</width>
<width>32</width>
<height>32</height>
<height>32</height>
<info>ListItem.Overlay</info>
<texture>$INFO[ListItem.Overlay]</texture>
</control>
</control>
<control type="label">
<control type="label">
<posx>60</posx>
<left>0</left>
<posy>115</posy>
<top>115</top>
<width>110</width>
<width>110</width>
<height>22</height>
<height>22</height>
Line 38: Line 42:
<selectedcolor>green</selectedcolor>
<selectedcolor>green</selectedcolor>
<align>center</align>
<align>center</align>
<info>ListItem.Label</info>
<label>$INFO[ListItem.Label]</label>
</control>
</control>
</itemlayout>
</itemlayout>
<focusedlayout height="141" width="120">
<focusedlayout height="150" width="120">
<control type="image">
<control type="image">
<width>110</width>
<width>110</width>
<height>110</height>
<height>110</height>
<posx>5</posx>
<left>5</left>
<posy>5</posy>
<top>5</top>
<texture>folder-focus.png</texture>
<texture>folder-focus.png</texture>
<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
</control>
</control>
<control type="image">
<control type="image">
<posx>10</posx>
<left>10</left>
<posy>10</posy>
<top>10</top>
<width>100</width>
<width>100</width>
<height>100</height>
<height>100</height>
<info>ListItem.Icon</info>
<texture>$INFO[ListItem.Icon]</texture>
<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
</control>
</control>
<control type="image">
<control type="image">
<posx>80</posx>
<left>80</left>
<posy>75</posy>
<top>75</top>
<width>32</width>
<width>32</width>
<height>32</height>
<height>32</height>
<info>ListItem.Overlay</info>
<texture>$INFO[ListItem.Overlay]</texture>
<animation effect="slide" end="5,5" time="100">focus</animation>
<animation effect="slide" end="5,5" time="100">focus</animation>
</control>
</control>
<control type="label">
<control type="label">
<posx>60</posx>
<left>0</left>
<posy>120</posy>
<top>120</top>
<width>110</width>
<width>110</width>
<height>22</height>
<height>22</height>
Line 74: Line 78:
<selectedcolor>green</selectedcolor>
<selectedcolor>green</selectedcolor>
<align>center</align>
<align>center</align>
<info>ListItem.Label</info>
<label>$INFO[ListItem.Label]</label>
</control>
</control>
</focusedlayout>
</focusedlayout>
</control>
</control>
</source>
</syntaxhighlight></div>


===Available Tags===
=== 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.
In addition to the [[Default Control Tags]], the following tags are also available. Note that each tag is <span style="font-weight: bold; text-decoration: underline;">lower case</span> only. This is important, as XML tags are case-sensitive.
{| class="dtable"
 
|- class="userrow"
{| class="prettytable"
| class="usercell" | '''viewtype'''
|+ Available tags
| class="usercell" | The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, and bigwrap. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.xml.
! scope="col" | Tag
|- class="userrow"
! scope="col" | Description
| class="usercell" | '''orientation'''
|-
| class="usercell" | The orientation of the panel. Defaults to vertical.
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><viewtype label="">…</viewtype></syntaxhighlight>
|- class="userrow"
| style="padding: 0.4em 1em;" | The type of view, valid values are: <code>list</code>, <code>icon</code>, <code>wide</code>, <code>wrap</code>, <code>biglist</code>, <code>bigicon</code>, <code>bigwide</code>, <code>bigwrap</code>, <code>info</code> and <code>biginfo</code>. The <code>label</code> attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. This tag has no effect on the view itself, it is simply used by {{Kodi}} when switching skins to automatically select a view with a similar layout; skinners should try to set it to best describe the layout provided.
| class="usercell" | '''pagecontrol'''
|-
| class="usercell" | Used to set the <id> of the page control used to control this panel.
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><orientation>…</orientation></syntaxhighlight>
|- class="userrow"
| style="padding: 0.4em 1em;" | The orientation of the panel, defaults to <code>vertical</code>.
| class="usercell" | '''scrolltime'''
|-
| class="usercell" | 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.
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><pagecontrol>…</pagecontrol></syntaxhighlight>
|- class="userrow"
| style="padding: 0.4em 1em;" | Used to set the <code>id</code> of the page control used to control that panel.
| class="usercell" | '''itemlayout'''
|-
| class="usercell" | Specifies the layout of items in the list. Requires both width and height attributes set. The <itemlayout> then contains as many label and image controls as required. [[Container Item Layout|See here for more information.]]
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><scrolltime tween="" easing="">…</scrolltime></syntaxhighlight>
|- class="userrow"
| style="padding: 0.4em 1em;" | 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 '''[[Tweeners|tween methods]]'''.
| class="usercell" | '''focusedlayout'''
|-
| class="usercell" | Specifies the layout of items in the list that have focus. Requires both width and height attributes set. The <focusedlayout> then contains as many label and image controls as required. [[Container Item Layout|See here for more information.]]
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><itemlayout height="" width="">…</itemlayout></syntaxhighlight>
|- class="userrow"
| style="padding: 0.4em 1em;" | Specifies the '''[[Container Item Layout|container item layout]]''' for the list, and requires both the <code>width</code> and <code>height</code> attributes to be set. It will contain as many label and image controls as needed.
| class="usercell" | '''content'''
|-
| class="usercell" | 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. [[Static List Content|See here for more information]]
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><focusedlayout height="" width="">…</focusedlayout></syntaxhighlight>
|- class="userrow"
| style="padding: 0.4em 1em;" | Specifies the '''[[Container Item Layout|container item layout]]''' for items that have focus in the list, and requires both the <code>width</code> and <code>height</code> attributes to be set. It will contain as many label and image controls as needed.
| class="usercell" | '''preloaditems'''
|-
| class="usercell" | Used in association with the background image loader. [[Background Image Loader|See here for more information]]
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><content>…</content></syntaxhighlight>
| style="padding: 0.4em 1em;" | Used to set the '''[[Static List Content|static list content]]''' that the panel will contain, allowing the skinner to create a panel anywhere they want with a static set of content, as a useful counterpart to the <code>grouplist</code> control.
|-
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><preloaditems>…</preloaditems></syntaxhighlight>
| style="padding: 0.4em 1em;" | Used in association with the '''[[Archive:Background Image Loader|background image loader]]'''.
|-
! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" | <syntaxhighlight lang="xml" inline><autoscroll>…</autoscroll></syntaxhighlight>
| style="padding: 0.4em 1em;" | Used to make the container scroll automatically, accepts the boolean values of either <code>true</code> or <code>false</code>.
|}
|}
<section end="main content" />


[[category:Skin Development]]
[[Category:Skin development]]

Latest revision as of 01:57, 11 September 2022

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.

Example

<control type="panel" id="52">
	<left>190</left>
	<top>100</top>
	<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="150" width="120">
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
		</control>
		<control type="label">
			<left>0</left>
			<top>115</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
	</itemlayout>
	<focusedlayout height="150" width="120">
		<control type="image">
			<width>110</width>
			<height>110</height>
			<left>5</left>
			<top>5</top>
			<texture>folder-focus.png</texture>
			<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
		</control>
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
			<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
			<animation effect="slide" end="5,5" time="100">focus</animation>
		</control>
		<control type="label">
			<left>0</left>
			<top>120</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
	</focusedlayout>
</control>

Available tags

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

Available tags
Tag Description
<viewtype label="">…</viewtype> The type of view, valid values 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.po. This tag has no effect on the view itself, it is simply used by Kodi when switching skins to automatically select a view with a similar layout; skinners should try to set it to best describe the layout provided.
<orientation>…</orientation> The orientation of the panel, defaults to vertical.
<pagecontrol>…</pagecontrol> Used to set the id of the page control used to control that panel.
<scrolltime tween="" easing="">…</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 methods.
<itemlayout height="" width="">…</itemlayout> Specifies the container item layout for the list, and requires both the width and height attributes to be set. It will contain as many label and image controls as needed.
<focusedlayout height="" width="">…</focusedlayout> Specifies the container item layout for items that have focus in the list, and requires both the width and height attributes to be set. It will contain as many label and image controls as needed.
<content>…</content> Used to set the static list content that the panel will contain, allowing the skinner to create a panel anywhere they want with a static set of content, as a useful counterpart to the grouplist control.
<preloaditems>…</preloaditems> Used in association with the background image loader.
<autoscroll>…</autoscroll> Used to make the container scroll automatically, accepts the boolean values of either true or false.