Thumbnail Panel

The thumbnail panel is used for creating grids of thumbnails in XBMC. You can choose the position, size, and look of the panel.

Example

<control>
      <description>My first thumbnail panel control</description>
      <type>thumbnailpanel</type>
      <id>1</id>
      <posx>80</posx>
      <posy>60</posy>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <imagefolderfocus>myfocustexture.png</imagefolderfocus>
      <imagefolder>mynormaltexture.png</imagefolder>
      <font>font13</font>
      <textcolor>FFFFFFFF</textcolor>
      <selectedcolor>FFFFFFFF</selectedcolor>
      <suffix> | </suffix>
      <thumbalign>center</thumbalign>
      <itemwidth>80</itemwidth>
      <itemheight>80</itemheight>
      <texturewidth>70</texturewidth>
      <textureheight>70</textureheight>
      <thumbposx>10</thumbposx>
      <thumbposy>10</thumbposy>
      <thumbwidth>60</thumbwidth>
      <thumbheight>60</thumbheight>
      <itemwidthbig>120</itemwidthbig>
      <itemheightbig>120</itemheightbig>
      <texturewidthbig>110</texturewidthbig>
      <textureheightbig>110</textureheightbig>
      <thumbposxbig>10</thumbposxbig>
      <thumbposybig>10</thumbposybig>
      <thumbwidthbig>100</thumbwidthbig>
      <thumbheightbig>100</thumbheightbig>
      <spinposx>220</spinposx>
      <spinposy>180</spinposy>
      <spinwidth>16</spinwidth>
      <spinheight>16</spinheight>
      <spincolor>FFFFFFFF</spincolor>
      <textureup>myuptexture.png</textureup>
      <textureupfocus>myuptexture.png</textureupfocus>
      <texturedown>myuptexture.png</texturedown>
      <texturedownfocus>myuptexture.png</texturedownfocus>
      <pulseonselect></pulseonselect>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <aspectratio>scale</aspectratio>
      <hidelabels>all</hidelabels>
</control>

Available Tags

Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

description	Only used to make things clear for the skinner. Not read by XBMC at all.
type	Should be thumbnailpanel for a thumbnail panel.
id	Specifies the control's id. The value this takes depends on the control type, and the window that you are using the control on. There are special control id's that must be present in each window. Any other controls that the skinner adds can be any id they like. As thumbnail panel contents are filled by XBMC, this needs to be the appropriate number for the window that the control resides in (eg 51 for the media windows).
posx	Specifies where the left edge of the panel should be drawn. This is offset from the window's coordinates (normally the left edge of the screen, or 0).
posy	Specifies where the top edge of the panel should be drawn. This is offset from the window's coordinates (normally the top edge of the screen, or 0).
width	Specifies the width of the panel. This determines how many items will fit horizontally in the panel.
height	Specifies the height of the lpanel. This determines how many items will fit vertically in the panel.
visible	Specifies a condition as to when this control will be visible. Can be true, false, or a condition. See here for more information. Defaults to true.
animation	Specifies the animation to be run when the control enters a particular state. See here for more information.
imagefolderfocus	Specifies the image file which should be displayed when a panel item has focus. You can use animated gif's, jpgs, pngs, or bmps. This should be the path to the image file from the media/ folder of your skin directory. XBMC will first look inside the compresses Textures.xpr file, and if not found, will look inside the media/ folder for the actual skin file. Compressing textures into Textures.xpr means far faster loading times.
imagefolder	Specifies the image file which should be displayed when a panel item does not have focus.
font	Font used for the items label. From fonts.xml. The label is rendered centered horizontally within the item, and aligned so that the top is aligned with the bottom of the focus texture.
textcolor	Color used for displaying the items label. In AARRGGBB hex format.
selectedcolor	Color used for displaying the items label when the item is selected. In AARRGGBB hex format.
shadowcolor	Specifies the color of the drop shadow on the text, in AARRGGBB format.
suffix	Seperator placed after a long item name when it scrolls.
thumbalign	Specifies how the thumb is aligned for each item. Default is none. Can be set to center.
itemwidth	Width of each item on the panel.
itemheight	Height of each item on the panel.
texturewidth	Width of the focus texture for each item. This is centered horizontally within the <itemwidth>.
textureheight	Height of the focus texture for each item. This is top aligned to the item's position.
thumbposx	Offset of the thumbnail image from the item's position. If <thumbalign> is center, then this should be 0.
thumbposy	Offset of the thumbnail image from the item's position. If <thumbalign> is center, then this should be 0.
thumbwidth	Width of the thumbnail image. This defines the maximum size of the thumbnail. It is rendered to fill as much space as possible, while maintaining its aspect ratio.
thumbheight	Height of the thumbnail image. This defines the maximum size of the thumbnail. It is rendered to fill as much space as possible, while maintaining its aspect ratio.
itemwidthbig	Width of each item on the panel when it is in Large mode.
itemheightbig	Height of each item on the panel when it is in Large mode.
texturewidthbig	Width of the focus texture for each item in Large mode. This is centered horizontally within the <itemwidthbig>.
textureheightbig	Height of the focus texture for each item in Large mode. This is top aligned to the item's position.
thumbposxbig	Offset of the thumbnail image from the item's position in Large mode. If <thumbalign> is center, then this should be 0.
thumbposybig	Offset of the thumbnail image from the item's position in Large mode. If <thumbalign> is center, then this should be 0.
thumbwidthbig	Width of the thumbnail image in Large mode. This defines the maximum size of the thumbnail. It is rendered to fill as much space as possible, while maintaining its aspect ratio.
thumbheightbig	Height of the thumbnail image in Large mode. This defines the maximum size of the thumbnail. It is rendered to fill as much space as possible, while maintaining its aspect ratio.
spinposx	The horizontal position of the spin control for multipage panels. This is offset from the top left of the list.
spinposy	The vertical position of the spin control for multipage panels. 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.
spincolor	The colour of the text used for this spin control. In AARRGGBB hex format.
textureup	The up button texture for the spin control.
textureupfocus	The up button texture for the spin control when it's focused.
texturedown	The down button texture for the spin control.
texturedownfocus	The down button texture for the spin control when it's focused.
pulseonselect	Specifies whether the button should pulse when it's selected. Defaults to true.
onup	Control id to move to when the user moves up off this control.
ondown	Control id to move to when the user moves down off this control.
onleft	Control id to move to when the user moves left off this control.
onright	Control id to move to when the user moves right off this control.
aspectratio	This specifies how the image will be drawn inside the box defined by <width> and <height>. When set to “keep” the images aspect ratio will be kept, and the image will be resized to fit inside the <width>,<height> box (with transparent bars if the ratios are not the same). When set to “stretch”, the image will be stretched to <width> by <height> pixels (it's aspect ratio will therefore be lost). When set to “scale” then the box will be resized so that it completely fills the <width>,<height> box and any portions of the image outside the box will be cropped off.
hidelabels	This specifies under which conditions the thumbpanel will hide the filename label. Values are “all” (hide all labels), “files” (hide only file labels – folders will still be shown), “folders” (hide only folder labels – files will still be shown), and “none” (show all labels). The default is “none”.