Image Control - Revision history

Hitcher: /* Available tags and attributes */

2025-07-18T15:18:57Z

Available tags and attributes

@@ Line 70: / Line 70: @@
 |  '''diffusefilter'''
 |  Equivalent of '''imagefilter''' for the diffuse texture.
 |}

Hitcher: /* Available tags and attributes */

2025-07-18T15:14:55Z

Available tags and attributes

← Older revision		Revision as of 15:14, 18 July 2025
Line 60:		Line 60:
	\|-		\|-
	\| '''fadetime'''		\| '''fadetime'''
	\| This specifies a crossfade time that will be used whenever the underlying <texture> 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.		\| This specifies a crossfade time that will be used whenever the underlying '''<texture>''' 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'''		\| '''background'''
	\| For images inside a container, you can specify background="true" to load the textures in a background worker thread.		\| For images inside a container, you can specify background="true" to load the textures in a background worker thread.
			\|-
			\| '''imagefilter'''
			\| This can take two values: '''linear''' or '''nearest'''. Linear scaling is the default, and smoothly blurs between pixels. Nearest neighbor scaling will apply a pixelated effect to the image.
			\|-
			\| '''diffusefilter'''
			\| Equivalent of '''imagefilter''' for the diffuse texture.
	\|}		\|}

Hitcher: /* Image Size and Type Restrictions */

2025-07-18T15:12:22Z

Image Size and Type Restrictions

← Older revision		Revision as of 15:12, 18 July 2025
Line 26:		Line 26:

	=== Image Size and Type Restrictions ===		=== Image Size and Type Restrictions ===
	For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:		For the '''<texture>''' tags, and for all '''<texture>''' tags in other controls, there is a small set of rules that you should follow if at all possible:


	=== Size ===		=== Size ===

Hitcher: /* Example */

2025-07-18T15:11:58Z

Example

← Older revision		Revision as of 15:11, 18 July 2025
Line 8:		Line 8:
	<control type="image" id="1">		<control type="image" id="1">
	<description>My first image control</description>		<description>My first image control</description>
	<~~left~~>80</~~left~~>		<posx>80</posx>
	<~~top~~>60</~~top~~>		<posy>60</posy>
	<width>250</width>		<width>250</width>
	<height>200</height>		<height>200</height>
Line 16:		Line 16:
	<fadetime>200</fadetime>		<fadetime>200</fadetime>
	<texture border="5" flipy="true" flipx="false">mytexture.png</texture>		<texture border="5" flipy="true" flipx="false">mytexture.png</texture>
	<bordertexture border="5~~" infill="false~~">mybordertexture.png</bordertexture>		<bordertexture border="5">mybordertexture.png</bordertexture>
	<bordersize>5</bordersize>		<bordersize>5</bordersize>
			<texture>$INFO[MusicPlayer.Cover]</texture>
	<aspectratio>keep</aspectratio>		<aspectratio>keep</aspectratio>
			<imagefilter>linear</imagefilter>
			<diffusefilter>linear</diffusefilter>
	</control>		</control>
	</syntaxhighlight>		</syntaxhighlight>

Sarbes: /* Available tags and attributes */

2022-06-06T14:54:03Z

Available tags and attributes

← Older revision		Revision as of 14:54, 6 June 2022
Line 49:		Line 49:
	\|-		\|-
	\| '''bordertexture'''		\| '''bordertexture'''
	\| Specifies the image file which should be displayed as a border around the image. Use the <code><bordersize></code> to specify the size of the border. The <code><width></code>,<code><height></code> box specifies the size of the image plus border.		\| Specifies the image file which should be displayed as a border around the image. Use the <code><bordersize></code> to specify the size of the border. The <code><width></code>,<code><height></code> box specifies the size of the image plus border. Set the argument <code>infill="false"</code> to hint to the GUI that the inner portion of the border doesn't have to be rendered.
	\|-		\|-
	\| '''bordersize'''		\| '''bordersize'''
Line 63:		Line 63:
	\| For images inside a container, you can specify background="true" to load the textures in a background worker thread.		\| For images inside a container, you can specify background="true" to load the textures in a background worker thread.
	\|}		\|}


	=== Texture Loading ===		=== Texture Loading ===

Sarbes: /* Example */

2022-06-06T14:51:11Z

Example

← Older revision		Revision as of 14:51, 6 June 2022
Line 16:		Line 16:
	<fadetime>200</fadetime>		<fadetime>200</fadetime>
	<texture border="5" flipy="true" flipx="false">mytexture.png</texture>		<texture border="5" flipy="true" flipx="false">mytexture.png</texture>
	<bordertexture border="5">mybordertexture.png</bordertexture>		<bordertexture border="5" infill="false">mybordertexture.png</bordertexture>
	<bordersize>5</bordersize>		<bordersize>5</bordersize>
	<aspectratio>keep</aspectratio>		<aspectratio>keep</aspectratio>

Ronie at 01:12, 10 January 2021

2021-01-10T01:12:16Z

← Older revision		Revision as of 01:12, 10 January 2021
Line 4:		Line 4:


	= Example =		=== Example ===
	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
	<control type="image" id="1">		<control type="image" id="1">
Line 22:		Line 22:
	</syntaxhighlight>		</syntaxhighlight>

	= Image Size and Type Restrictions =		=== Image Size and Type Restrictions ===
	For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:		For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:


	= Size =		=== 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.		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.


	= Formats =		=== 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.		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.

Line 36:		Line 36:


	= Available tags and attributes =		=== Available tags and attributes ===
	In addition to the [[Default Control Tags\|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\|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.

Line 65:		Line 65:


	= Texture Loading =		=== Texture Loading ===
	== Normal texture loading ==		==== Normal texture loading ====
	The only textures loaded by Kodi are the ones currently visible. Nothing displays on the screen until all the images have been loaded in memory, this can result in "jerky" scrolling through panel containers. As you scroll down, Kodi will delay the scrolling animation until all of the images in the next row are loaded.		The only textures loaded by Kodi are the ones currently visible. Nothing displays on the screen until all the images have been loaded in memory, this can result in "jerky" scrolling through panel containers. As you scroll down, Kodi will delay the scrolling animation until all of the images in the next row are loaded.

	== Background loading ==		==== Background loading ====
	Images are loaded one at a time in a background worker thread and are shown as soon as xbmc processes them. Has the benefit that images can be loaded into memory before they're visible, resulting in smoother scrolling and transitions.		Images are loaded one at a time in a background worker thread and are shown as soon as xbmc processes them. Has the benefit that images can be loaded into memory before they're visible, resulting in smoother scrolling and transitions.

	== Preloading ==		==== Preloading ====
	Used to automatically load the next items (or rows/columns in the case of a panel) while scrolling. Currently limited to 2.		Used to automatically load the next items (or rows/columns in the case of a panel) while scrolling. Currently limited to 2.

Ronie at 11:56, 29 August 2020

2020-08-29T11:56:11Z

@@ Line 2: / Line 2: @@
 <section begin="main content" />
 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.
@@ Line 73: / Line 63: @@
 |  For images inside a container, you can specify background="true" to load the textures in a background worker thread.
 |}
 <section end="main content" />

Davu at 08:00, 29 August 2020

2020-08-29T08:00:52Z

← Older revision		Revision as of 08:00, 29 August 2020
Line 71:		Line 71:
	\|-		\|-
	\| '''background'''		\| '''background'''
	\| For images inside a container, you can specify background="true" to load the textures in a background worker thread. ~~[[Background Image Loader\|See here for additional information about background loading.]]~~		\| For images inside a container, you can specify background="true" to load the textures in a background worker thread.
	\|}		\|}

Karellen at 07:57, 29 August 2020

2020-08-29T07:57:48Z

← Older revision		Revision as of 07:57, 29 August 2020
Line 1:		Line 1:
			{{mininav\| [[Skinning]] }}
	<section begin="main content" />		<section begin="main content" />
	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.		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.
	=== ~~Example~~ ===
			= Texture Loading =
			== Normal texture loading ==
			The only textures loaded by Kodi are the ones currently visible. Nothing displays on the screen until all the images have been loaded in memory, this can result in "jerky" scrolling through panel containers. As you scroll down, Kodi will delay the scrolling animation until all of the images in the next row are loaded.

			== Background loading ==
			Images are loaded one at a time in a background worker thread and are shown as soon as xbmc processes them. Has the benefit that images can be loaded into memory before they're visible, resulting in smoother scrolling and transitions.

			== Preloading ==
			Used to automatically load the next items (or rows/columns in the case of a panel) while scrolling. Currently limited to 2.


			= Example =
	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
	<control type="image" id="1">		<control type="image" id="1">
Line 19:		Line 32:
	</syntaxhighlight>		</syntaxhighlight>

	=== Image Size and Type Restrictions ===		= Image Size and Type Restrictions =
	For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:		For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:
	~~===~~= Size ~~===~~=

			= 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.		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.

	~~===~~= Formats ~~===~~=
			= 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.		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.		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.

	=== Available tags and attributes ===
			= Available tags and attributes =
	In addition to the [[Default Control Tags\|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\|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.

Line 59:		Line 76:
	<section end="main content" />		<section end="main content" />

	~~== See also ==~~
	~~'''Development:'''~~
	* [[Add-on development]]
	* [[Skinning]]

	[[Category:Skin development]]		[[Category:Skin development]]