Official Kodi Wiki - User contributions [en]

Internet video and audio streams

2014-12-23T20:38:35Z

WayneJohnston: Replaced XBMC with {{kodi}} template.

{{mininav|[[Video library]] {{l2| [[Music library]] }} }}
{{see also|Add-ons}}
<section begin="intro" />Various internet video and audio streams can be played back in {{kodi}} as if they were locally stored on your media center by using STRM files. As long as the format and streaming-method (network-protocol) is supported by {{kodi}}, stream can be added. These are basic text files that look like <name>.strm and contain a URL to the internet stream. STRM files can also be added to the [[video library]] and can have cover art, summaries, etc.

Some internet sites may have an add-on available that can also access these media streams, rather than having to manually create STRM files. See '''[[Add-ons]]''' for more information on how to find and install add-ons.<section end="intro" />

== Playing Internet Streams ==
There are two ways this can be done, either via a custom .STRM file or a standard [[playlists]] (.PLS or .M3U).

=== The .STRM file method: ===
Create a normal text-file and rename the '''.txt''' extension to '''.strm''' then open it up with a text-editor (like Notepad in Microsoft Windows) and input the the '''direct URL-link''' of the stream.
:This should look like:
'''<nowiki>http://host/path/stream</nowiki>'''
:or
'''<nowiki>mms://host/path/stream</nowiki>'''
:or
'''<nowiki>rtsp://host/path/stream</nowiki>'''
Other protocols are supported such as '''<nowiki>http://host/path/to/somefile.mp3.</nowiki>'''
Then save/copy the .strm file to somewhere where you can open it from {{kodi}}, (like on a SMB/SAMBA, XBMS or UPnP share, or just your local hard drive), like you would with any video/audio file. Open it using '''play''' in {{kodi}} under Videos (if it is a video stream) or Music (if it is an audio stream). If the video stream does not work then the URL-link could be wrong, or possibly the codec/format or the network-protocol it uses it not supported by {{kodi}}.

If you are creating a list of playlists (for example internal and external Shoutcast streams), save the pls or strm files into a directory accessible by {{kodi}} and add the directory as the source, '''not''' the files themselves.

=== The standard playlists (.PLS or .M3U) method: ===
Download a supported playlist (like .PLS or .M3U) file from the internet, (these playlist files can often be found on the website of the web-radio stations or TV web-casts websites). For example stream.pls or something else, (you can rename it to whatever you want but keep the same extension). Then save/copy the file to somewhere where you can open it from {{kodi}}, like you would with any video/audio file. You should be able to play the file in {{kodi}} by selecting it ether from Videos -> Files or from the Music "file mode".

If the video stream does not work then the URL-link could be wrong, or possible the codec/format or the network-protocol it uses it not supported by {{kodi}}. You can check and edit playlists with a normal text-editor (like Notepad in Microsoft Windows) and see what the URLs look like.

== Adding STRM files to the library ==
You can associate meta-data, such as cover art and summaries, to a .strm file just like normal entries in a library by using an [[NFO]] file, just as you would for a normal video file.
{{frodo updated}}

[[Category:Manual]]
[[Category:Video library]]
[[Category:Music library]]

Music playback

2014-12-23T20:09:41Z

WayneJohnston: Replaced XBMC with {{kodi}} template

[[File:Fullscreen music controls.png|right|500px]]
{{mininav| [[Music library]] {{l2| [[Settings]] }} }}
Music playback is done while in the main {{kodi}} GUI or the full screen Visualization. {{kodi}} will default to staying in the main GUI.

__TOC__
{{-}}
== On screen display (OSD) ==
[[File:Fullscreen music controls zoom.png|500px|right]]
{{see also|Keyboard controls}}
Music control can be done while in the main GUI or the fullscreen/visualization screen.

While in the fullscreen/visualization screen you can bring up the on-screen-display controls by pressing {{keypress|enter}} or {{keypress|M}}.
{|
| valign="top" width="50%"|
# Previous
# Rewind
# Play/Pause
# Stop
# Fast Forward
# Next
# Repeat
# Shuffle
# Scrub bar (touch/clickable)
| valign="top" width="50%"|
A. Lyrics 
B. Visualization selection 
C. Visualization settings 
D. Visualization pre-sets 
E. Record stream (no longer used) 
F. Star rating
|}
{{-}}

== Mini player controls ==
While in the GUI you are able to browse all of {{kodi}} and even look at pictures while playing music or videos. During GUI playback you can call up the ''Mini player controls'' at any time. In the default skin [[Confluence]], you can do this two ways:

=== Sidebar ===
[[File:Mini player sidebar-music.png|x400px|right]]
While the sidebar tab is present and while media is playing, bringing up the sidebar/blade menu by navigating to the left will reveal a small selection of player controls.
{{-}}

=== Window ===
[[File:Mini player window-music-cropped.png|500px|right]]
A pop-up window with mini player controls can be brought up in [[Confluence]] while media is playing. For a keyboard press {{keypress|M}} while music is playing in the background.
{{-}}

== Visualizations ==
[[File:Visualization.mymusic.jpg|right|500px]]
One of the most impressive features of My Music is its integrated support for visualizations, which are a way to make your music come to life on screen. {{kodi}} offers support for many visualizations and some of the following may be present in your installation:
* '''FishBMC'''
* '''Spectrum'''
* '''projectM'''
* '''Waveform'''
* '''MilkDrop'''

You can configure Visualization in one of two different ways: Through [[Settings/Music|music settings]] or through the [[#On screen display (OSD)|on screen display (OSD)]] while playing the Visualization.
{{-}}

== Internet video and audio streams ==
{{Main|Internet video and audio streams}}
{{#lst:Internet video and audio streams|intro}}
{{-}}

== Playlists ==
{{Main|Playlists}}
* {{big|'''[[Basic playlists]] -'''}} {{#lst:Basic playlists|intro}}

* {{big|'''[[Smart playlists]] -'''}} {{#lst:Smart playlists|intro}}

== UPnP ==
{{main|UPnP}}
{{#lst:UPnP|intro}}

== AirPlay ==
{{main|AirPlay}}
{{#lst:AirPlay|intro}}

[[Category:Manual]]
[[Category:Music library]]

Skin development introduction

2014-12-23T17:09:03Z

WayneJohnston: /* Helpful Commands */

{{mininav|[[Development]]|[[Add-on development]]|[[Skin development]]}}
{{Cleanup}}
XBMC is noted as having a very flexible and robust framework for its GUI, making theme-skinning and personal customization very accessible. Users can create their own skin (or modify an existing skin) and share it with others. "Confluence" is the official skin;

XBMC includes a new GUI library written from scratch. This library allows you to skin/change everything you see in XBMC, from the images, the sizes and positions of all controls, colours, fonts, and text, through to altering navigation and even adding new functionality. The skin system is quite complex, and this portion of the manual is dedicated to providing in depth information on how it all works, along with tips to make the experience a little more pleasant. 
A skin called “Confluence”, which can be found in the XBMC GIT repo, is included with XBMC; the skin was originally created by Jezz_X and is kept up-to-date by Team XBMC.
Any additional skins you create, or download must be placed in the '''addons''' sub-folder if you wish to have XBMC auto-detect the skin and allow you to load it from within the Appearance Settings. See [[Installing Skins]] for more. Currently, XBMC Frodo supports skin versions 4.0.0 and above; you will not be able to select and use a skin that is older than version 4.0.0 You may wish to start by having a look through the "'''[[XBMC Skinning Manual]]'''" and the "'''[[XBMC Skinning Tutorials]]"''' articles, and try modifying a window or two by adding a button, or altering the textures or layout.
 

== Anatomy of a Skin ==
The “Confluence” skin is a great starting point for designing your own skin; it contains many of the latest GIT features found in XBMC. If you want to make your own skin, start by copying the contents of the existing “Confluence” skin sub-folder into a new folder - for example, '''skin.name'''. You can then edit each of the various skin files as you become more familiar with the skinning system. 
Each skin folder must contain a '''addon.xml''' and this initial set of sub-folders:
; [[Addon.xml|skin.name/addon.xml]]
: This contains the information that XBMC uses to find the other files that XBMC requires to describe it's skin. It also contains credits information, and versioning information. 
; skin.name/fonts
: This sub-folder contains all fonts used by the skin. you can add/replace fonts here
; skin.name/media
: This sub-folder contains all the media files (.png/.gif/.jpg...)
; skin.name/sounds
: This sub-folder contains all the audio files (sounds.xml/.wav...)
; skin.name/colors
: This sub-folder contains xml files describing the colors (text/diffuse) used in the skin, to allow different color themes.; skin.name/media
; skin.name/_screenshots
: This sub-folder contains 5 to 10 1280x720 sized jpeg images, showcasing your skin
; skin.name/720p
: This is a resolution-specific folder. 
You can include multiple resolution-specific folders. The following recognized by XBMC:
; skin.name/PAL16x9
: This is a resolution-specific folder.
; skin.name/NTSC
: This is a resolution-specific folder.
; skin.name/NTSC16x9
: This is a resolution-specific folder.
; skin.name/720p
: This is a resolution-specific folder.
; skin.name/1080i
: This is a resolution-specific folder. 
XBMC can run in multiple resolutions, and thus can use different files for some resolutions (as there is a big difference between NTSC at 720x480 pixels and 1080i at 1920x1080 pixels!) You can review the order by which XBMC retrieves resolution information in the '''[[Skin.xml#How window xml files are found|How Window XML Files Are Found]]''' section. 
More advanced skins may also contain sub-folders for additional components required to make their skin work; for example:
; skin.name/backgrounds
: Often used to store large background images, that shouldn't be included in the media folder
; skin.name/themes
: Sometimes used to store additional textures in a different colour to create colour themes 
The goal is to keep your skin folder structure as cleanly organized as possible as it makes it easier to troubleshoot problems; this is becomes very important if you are working as part of a XBMC skin creation team.
 

== Skin Themes ==
All the basic media files for a skin should be compressed into the Textures.xbt file, and placed in the media/ folder. You can use the tool [[TexturePacker]] for this. All the images that make up the default skin theme should be in the Textures.xbt file.

In addition to this, XBMC allows other .xbt files in the media/ folder, each one representing a different theme for your skin. For instance,
you could tint all your main textures a red colour, and create a new theme package Red.xbt? – this gives users more choice in the look
of a particular skin. Note that only the textures change when you change themes – the layout stays the same. If the user has selected
a theme, then when a control requires a texture, XBMC will first look in the <themename>.xbt file for the texture. It will fall back to the Textures.xbt file if <themename>.xbt doesn't contain the image. This means that the theme .xbt files need only contain the changed textures – all other textures will fall-back to using Textures.xbt as usual.

When the user selects a theme, XBMC will automatically also select the themes default color set, based on the <themename>.xml file located in the colors/ folder. See below for more information.

A suggested method of creating a theme is as follows:

# Run TexturePacker.exe on the folder containing the default texture files, to generate Textures.xbt as you would normally do.
# Identify the textures you wish to have themed and copy them to a separate folder.
# Create a separate folder for each theme outside of your normal skin work area, and place the altered copies of each of the textures in them.
# Run TexturePacker.exe on each of the theme folders created in step 3 to create the themed .xbt files (note you can use the -output switch with TexturePacker.exe to name the theme appropriately).
# Place Textures.xbt and each of the theme .xbt files in the media/ folder of your skin. XBMC will automatically pick them up.
 

== Colour Themes ==
Different colour themes can be accomplished by placing a set of .xml files in the colors/ folder of the skin. [[Colour Themes|See here for more information.]]

== Fonts ==
XBMC allows you to customize which fonts are displayed onscreen in the User Interface. See the '''[[Fonts]]''' section for more information.
 

== Includes ==
The other special (and arguably the most important skinning file of all) is includes.xml. This is, as its title suggests, a place from which you can define the default look, size, and positioning of controls, to save you replicating many of the control's attributes throughout the window .xml files. For instance, you can setup the size, and textures used for a button control, thus allowing you to leave those details out in the rest of the skin files, unless ofcourse you want to override the default look or size etc. in a particular window. 
This is extremely valuable as it allows you to greatly simplify a lot of the work in building a skin. For one thing, it means that once you have include files setup, many of the default parameters for a different resolution can be done by just altering the parameters within the include file(s) for the different resolution. 
With the 2.1 skinning engine, you can infact have more than one include file - you can specify the file attribute when including from a different file, allowing you to have an include file dedicated to a particular set of attributes. 
The layout of an includes file is as follows.

<syntaxhighlight lang="XML" enclose="div">
<?xml version="1.0" encoding="UTF-8"?>
<includes>
<include name="whitetext">
<textcolor>ffffffff</textcolor>
</include>
<include file="listdefaults.xml" />
<default type="button">
<include>whitetext</include>
</default>
<constant name="leftedge">50</constant>
</includes>
</syntaxhighlight>

You'll notice in the above example that we have 4 different types of includes. The first <include> tag basically allows a substitution of the tags underneath it whenever it occurs. For instance, if in a window .xml file you have this:

<syntaxhighlight lang="XML" enclose="div">
<control type="togglebutton">
<include>whitetext</include>
... other tags go here
</control>
</syntaxhighlight>

Then it would substitute the <textcolor> tag for where the include tag is. You can have as many includes as you like, and as many tags can be inside an include - even complete controls, or complete control groups.

The second <include> tag in the example demonstrates how to include from a different file. As there is no include name specified, it will include the contents of the entire file at that point.

The <default> tag is similar to an include, except that it is used in every control of that type - even if you don't specify that the control is to use includes. Thus every buttoncontrol will have the whitetext include in it. Note that you can override this by specifying the <textcolor> tag in the buttoncontrol.

And finally, the <constant> tag allows you to define a numeric (floating point) constant by name for use in place of numeric values (<posx>, height="" etc.) would otherwise be used. This allows alignment of items using the same position values which can then easily be altered in one place.
 

== The Window XML Files ==
The other xml files each define the skin for a single window. They all have the same basic layout, allowing you to place different controls on the window, and define how navigation should operate. 
The list of all window .xml files and what they represent is be found in the '''[[Window IDs|Window ID's]]''' section. 
The important thing to remember is that each window has a unique identifying number (id). This is how XBMC identifies the window from within the source code. Furthermore, many of the controls within each window should have a unique id as well, unless they're just used as images or labels where navigation is unimportant and XBMC does not need to be able to identify them uniquely. The window id's are all listed in the [[Window IDs|window list]]. 
The structure of the window .xml files can be found in the '''[[Window Structure]]''' section.
 

== Controls ==
Controls are the substance of your skin. They define everything from buttons, to text labels, to visualization placement. The '''[[Controls]]''' section will explain each and every control in detail.
 

== Conditional Visibility ==
XBMC's skinning engine versatility is based apon the fact that the skinner can display and hide portions of the skin using a variety of conditional statements that can be combined to create very user friendly UI implementations. For further information of available variable and how they can be applied see the '''[[Conditional Visibility]]''' section.
 

== Animating Your Skin ==
The XBMC skinning engine supports animations of any control allowing them to rotate, slide, fade or any combination there-of. Combining animations with conditional statements ensure your skin will have stunning effects that appear as professional as a 1st party product. For further information, see the '''[[Animating Your Skin]]''' section.
 

== Skinning Tutorials ==
This '''[[Skinning Tutorials]]''' section is designed to help both people who are new to skinning XBMC get to grips with how the system works, as well as dealing with a few things that the old timers may find useful.

== Skinning Manual ==

This '''[[Skinning Manual]]''' section is designed to give quick overview of all current skin code available to help the developers using the full extend of the possibilities.

'''See [[:Category:Skin_Development]] for a list of information'''

== Helpful Commands ==
When writing Skins one often needs XBMC to reload the current Skin.
To avoid the tedious procedure of loading another Skin and reloading yours or even close and reopen XBMC in order to see changes, you can map a key to refreshing the skin. This is done by [[HOW-TO:Modify keyboard.xml|modifying keyboard.xml]].

'''Example'''

This example keyboard.xml maps F5 to reloading the Skin, F4 followed by F5 to showing the DebugGrid (Skin specific see e.g. Aeon) and F6 to showing a popup notification (DialogKaiToast.xml)

<syntaxhighlight lang="XML" enclose="div">
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<keymap>
<global>
<keyboard>
<F5>XBMC.ReloadSkin()</F5>
<F4>Skin.ToggleSetting(DebugGrid)</F4>
<F6>Notification(Testing 123,Hello world)</F6>
</keyboard>
</global>
</keymap>
</syntaxhighlight>

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

[[Category:Skin development]]
[[Category:Add-on development]]