summaryrefslogtreecommitdiffstats
path: root/DOCS/xml/en/skin.xml
diff options
context:
space:
mode:
Diffstat (limited to 'DOCS/xml/en/skin.xml')
-rw-r--r--DOCS/xml/en/skin.xml1094
1 files changed, 1094 insertions, 0 deletions
diff --git a/DOCS/xml/en/skin.xml b/DOCS/xml/en/skin.xml
new file mode 100644
index 0000000000..157052d427
--- /dev/null
+++ b/DOCS/xml/en/skin.xml
@@ -0,0 +1,1094 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<appendix id="skin">
+<title>MPlayer skin format</title>
+<para>
+The purpose of this document is to describe the MPlayer skin format.
+The information contained here might be wrong, for
+<orderedlist>
+<listitem><para>It is not me who wrote the GUI.</para></listitem>
+<listitem><para>The GUI is not finished.</para></listitem>
+<listitem><para>I might be wrong.</para></listitem>
+</orderedlist>
+So do not be surprised if something does not work as described here.
+</para>
+
+<para>Thanks to <emphasis>Zoltán Ponekker</emphasis> for his help.</para>
+
+<para><emphasis>András Mohari &lt;mayday@freemail.hu&gt;</emphasis></para>
+
+<sect1 id="skin-overview">
+<title>Overview</title>
+<para>
+It does not really have anything to do with the skin format, but you should
+know that MPlayer has <emphasis role="bold">no</emphasis> builtin skin, so
+<emphasis role="bold">at least one skin must be installed in order to be able
+to use the GUI.</emphasis>
+</para>
+
+<sect2 id="skin-overview-directories">
+<title>Directories</title>
+<para>
+The directories searched for skins are (in order):
+<orderedlist>
+<listitem><para>
+<filename class="directory">$(DATADIR)/Skin/</filename>
+</para></listitem>
+<listitem><para>
+<filename class="directory">$(PREFIX)/share/mplayer/Skin/</filename>
+</para></listitem>
+<listitem><para>
+<filename class="directory">~/.mplayer/Skin/</filename>
+</para></listitem>
+</orderedlist>
+</para>
+
+<para>
+Note that the first path may vary according to the way MPlayer was configured
+(see the <option>--prefix</option> and <option>--datadir</option> arguments of
+the <command>configure</command> script).
+</para>
+
+<para>
+Every skin is installed into its own directory under one of the directories
+listed above, for example:
+<screen>$(PREFIX)/share/mplayer/Skin/default/</screen>
+</para>
+</sect2>
+
+<sect2 id="skin-overview-formats">
+<title>Image formats</title>
+<para>Images must be truecolor (24 or 32 bpp) PNGs.</para>
+<para>
+In the main window and in the playbar (see below) you can use images with
+`transparency': Regions filled with the color #FF00FF (magenta) are fully
+transparent when viewed by MPlayer. This means that you can even have shaped
+windows if your X server has the XShape extension.
+</para>
+</sect2>
+
+<sect2 id="skin-overview-components">
+<title>Skin components</title>
+<para>
+Skins are quite free-format (unlike the fixed-format skins of Winamp/XMMS,
+for example), so it is up to you to create something great.
+</para>
+
+<para>
+Currently there are three windows to be decorated: the
+<link linkend="skin-file-main">main window</link>, the
+<link linkend="skin-file-subwindow">subwindow</link>, the
+<link linkend="skin-file-main">playbar</link>, and the
+<link linkend="skin-file-menu">skin menu</link> (which can be activated
+by a right click).
+
+<itemizedlist>
+<listitem><para>
+ The <emphasis role="bold">main window</emphasis> and/or the
+ <emphasis role="bold">playbar</emphasis> is where you can control MPlayer.
+ The background of the window is an image. Various items can (and must) be placed
+ in the window: <emphasis>buttons</emphasis>, <emphasis>potmeters</emphasis>
+ (sliders) and <emphasis>labels</emphasis>. For every item, you must specify its
+ position and size.
+</para><para>
+ A <emphasis role="bold">button</emphasis> has three states (pressed, released,
+ disabled), thus its image must be divided into three parts vertically. See the
+ <link linkend="skin-button">button</link> item for details.
+</para><para>
+ A <emphasis role="bold">potmeter</emphasis> (mainly used for the seek bar and
+ volume/balance control) can have any number of phases by dividing its image
+ into different parts below each other. See
+ <link linkend="skin-hpotmeter">hpotmeter</link> and
+ <link linkend="skin-potmeter">potmeter</link> for details.
+</para><para>
+ <emphasis role="bold">Labels</emphasis> are a bit special: The characters
+ needed to draw them are taken from an image file, and the characters in the
+ image are described by a <link linkend="skin-fonts">font description file</link>.
+ The latter is a plain text file which specifies the x,y position and size of
+ each character in the image (the image file and its font description file
+ form a font <emphasis>together</emphasis>). See <link linkend="skin-dlabel">dlabel</link>
+ and <link linkend="skin-slabel">slabel</link> for details.
+</para>
+<note><para>All images can have full transparency as described in the section about
+ <link linkend="skin-overview-formats">image formats</link>. If the X server
+ doesn't support the XShape extension, the parts marked transparent will be
+ black. If you'd like to use this feature, the width of the main window's
+ background image must be dividable by 8.
+</para></note>
+</listitem>
+
+<listitem><para>
+ The <emphasis role="bold">subwindow</emphasis> is where the movie appears. It
+ can display a specified image if there is no movie loaded (it is quite boring
+ to have an empty window :-)) <emphasis role="bold">Note:</emphasis> transparency
+ is <emphasis role="bold">not allowed</emphasis> here.
+</para></listitem>
+
+<listitem><para>
+ The <emphasis role="bold">skin menu</emphasis> is just a way to control MPlayer by
+ means of menu entries. Two images are required for the menu: one of them is
+ the base image that shows the menu in its normal state, the other one is used
+ to display the selected entries. When you pop up the menu, the first image is
+ shown. If you move the mouse over the menu entries, the currently selected
+ entry is copied from the second image over the menu entry below the mouse pointer
+ (the second image is never shown as a whole).
+</para><para>
+ A menu entry is defined by its position and size in the image (see the
+ section about the <link linkend="skin-file-menu">skin menu</link> for details).
+</para></listitem>
+</itemizedlist>
+</para>
+
+<para>
+ There is an important thing not mentioned yet: For buttons, potmeters and
+ menu entries to work, MPlayer must know what to do if they are clicked. This
+ is done by <link linkend="skin-gui">messages</link> (events). For these items
+ you must define the messages to be generated when they are clicked.
+</para>
+</sect2>
+
+<sect2 id="skin-files">
+<title>Files</title>
+<para>
+You need the following files to build a skin:
+<itemizedlist>
+<listitem><para>
+ The configuration file named <link linkend="skin-file">skin</link> tells
+ MPlayer how to put different parts of the skin together and what to do if
+ you click somewhere in the window.
+</para></listitem>
+<listitem><para>
+ The background image for the main window.
+</para></listitem>
+<listitem><para>
+ Images for the items in the main window (including one or more font
+ description files needed to draw labels).
+</para></listitem>
+<listitem><para>
+ The image to be displayed in the subwindow (optional).
+</para></listitem>
+<listitem><para>
+ Two images for the skin menu (they are needed only if you want to create
+ a menu).
+</para></listitem>
+</itemizedlist>
+ With the exception of the skin configuration file, you can name the other
+ files whatever you want (but note that font description files must have
+ a <filename>.fnt</filename> extension).
+</para>
+</sect2>
+</sect1>
+
+<sect1 id="skin-file">
+<title>The skin file</title>
+<para>
+As mentioned above, this is the skin configuration file. It is line oriented;
+comment lines start with a '<literal>;</literal>' character at the beginning
+of the line (only spaces and tabs are allowed before the '<literal>;</literal>').
+</para>
+
+<para>
+The file is made up of sections. Each section describes the skin for an
+application and has the following form:
+<programlisting>
+section = <replaceable>section name</replaceable>
+.
+.
+.
+end
+</programlisting>
+</para>
+
+<para>
+where <replaceable>window name</replaceable> can be one of these strings:
+<itemizedlist>
+<listitem><para><emphasis role="bold">main</emphasis> - for the main window</para></listitem>
+<listitem><para><emphasis role="bold">sub</emphasis> - for the subwindow</para></listitem>
+<listitem><para><emphasis role="bold">menu</emphasis> - for the skin menu</para></listitem>
+<listitem><para><emphasis role="bold">playbar</emphasis> - playbar</para></listitem>
+</itemizedlist>
+</para>
+
+<para>
+(The sub and menu blocks are optional - you do not need to create a menu or
+decorate the subwindow.)
+</para>
+
+<para>
+Within a window block, you can define each item for the window by a line in
+this form:
+<programlisting>item = parameter</programlisting>
+Where <literal>item</literal> is a string that identifies the type of the GUI
+item, <literal>parameter</literal> is a numeric or textual value (or a list of
+values separated by commas).
+</para>
+
+<para>
+Putting the above together, the whole file looks something like this:
+<programlisting>
+section = movieplayer
+ window = main
+ ; ... items for main window ...
+ end
+
+ window = sub
+ ; ... items for subwindow ...
+ end
+
+ window = menu
+ ; ... items for menu ...
+ end
+
+ window = playbar
+ ; ... items for playbar ...
+ end
+end
+</programlisting>
+</para>
+
+<para>
+The name of an image file must be given without leading directories - images
+are searched for in the <filename class="directory">Skin</filename> directory.
+You may (but you need not) specify the extension of the file. If the file does
+not exist, MPlayer tries to load the file
+<filename>&lt;filename&gt;.&lt;ext&gt;</filename>, where <literal>png</literal>
+and <literal>PNG</literal> are tried for <filename>&lt;ext&gt;</filename>
+(in this order). The first matching file will be used.
+</para>
+
+<para>
+Finally some words about positioning. The main window and the subwindow can
+be placed in the different corners of the screen by giving <literal>X</literal> and
+<literal>Y</literal> coordinates. <literal>0</literal> is top or left,
+<literal>-1</literal> is center and <literal>-2</literal> is right or bottom, as
+shown in this illustration:
+</para>
+<informalfigure>
+<screen>
+(0, 0)----(-1, 0)----(-2, 0)
+ | | |
+ | | |
+(0,-1)----(-1,-1)----(-2,-1)
+ | | |
+ | | |
+(0,-2)----(-1,-2)----(-2,-2)
+</screen>
+</informalfigure>
+
+<para>
+Here is an example to make this clear. Suppose that you have an image called
+<filename>main.png</filename> that you use for the main window:
+<programlisting>base = main, -1, -1</programlisting>
+MPlayer tries to load <filename>main</filename>, <filename>main.png</filename>,
+<filename>main.PNG</filename> files.
+</para>
+
+
+<sect2 id="skin-file-main">
+<title>Main window and playbar</title>
+<para>
+Below is the list of entries that can be used in the
+'<literal>window = main</literal>' .&nbsp;.&nbsp;. '<literal>end</literal>',
+and the '<literal>window = playbar</literal>' .&nbsp;.&nbsp;. '<literal>end</literal>'
+blocks.
+</para>
+
+<variablelist>
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-main-base"/>base = image, X, Y
+ </literal></term>
+ <listitem><para>
+Lets you specify the background image to be used for the main window.
+The window will appear at the given <literal>X,Y</literal> position on
+the screen The window will have the size of the image.
+ </para>
+ <note><para>These coordinates do not currently work for the display window.</para></note>
+ <warning><para>Transparent regions in the image (colored #FF00FF) appear black
+ on X servers without the XShape extension. The image's width must be dividable
+ by 8.</para></warning>
+ </listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-button"/>button = image, X, Y, width, height, message
+ </literal></term>
+ <listitem><para>
+Place a button of <literal>width</literal> * <literal>height</literal> size at
+position <literal>X,Y</literal>. The specified <literal>message</literal> is
+generated when the button is clicked. The image given by <literal>image</literal>
+must have three parts below each other (according to the possible states of the
+button), like this:
+</para>
+<informalfigure>
+<screen>
++------------+
+| pressed |
++------------+
+| released |
++------------+
+| disabled |
++------------+
+</screen>
+</informalfigure>
+ </listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-decoration"/>decoration = enable|disable
+ </literal></term>
+ <listitem><para>
+Enable or disable window manager decoration of the main window. Default is
+<emphasis role="bold">disable</emphasis>.
+ </para>
+ <note><para>This doesn't work for the display window, there is no need to.</para></note>
+ </listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-hpotmeter"/>hpotmeter = button, bwidth, bheight, phases, numphases, default, X, Y, width, height, message
+ </literal></term>
+ <listitem><para>
+
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-vpotmeter"/>vpotmeter = button, bwidth, bheight, phases, numphases, default, X, Y, width, height, message
+ </literal></term>
+ <listitem><para>
+Place a horizontal (hpotmeter) or vertical (vpotmeter) potmeter of
+<literal>width</literal> * <literal>height</literal> size at position
+<literal>X,Y</literal>. The image can be divided into different parts for the
+different phases of the potmeter (for example, you can have a pot for volume
+control that turns from green to red while its value changes from the minimum
+to the maximum.). <literal>hpotmeter</literal> can have a button that can be
+dragged horizontally. The parameters are:
+ </para>
+ <itemizedlist>
+ <listitem><para><literal>button</literal> - the image to be used for the
+ button (must have three parts below each other, like in case of
+ <link linkend="skin-button">button</link>)
+ </para></listitem>
+ <listitem><para><literal>bwidth</literal>,<literal>bheight</literal> - size
+ of the button
+ </para></listitem>
+ <listitem><para><literal>phases</literal> - the image to be used for the
+ different phases of the hpotmeter. A special value of <literal>NULL</literal>
+ can be used if you want no such image. The image must be divided into
+ <literal>numphasesparts</literal> vertically like this:
+ </para>
+<informalfigure>
+<screen>
++------------+
+| phase #1 |
++------------+
+| phase #2 |
++------------+
+ ...
++------------+
+| phase #n |
++------------+
+</screen>
+</informalfigure>
+ </listitem>
+ <listitem><para><literal>numphases</literal> - number of phases stored in the
+ <literal>phases</literal> image
+ </para></listitem>
+ <listitem><para><literal>default</literal> - default value for hpotmeter
+ (in the range <literal>0</literal> to <literal>100</literal>)
+ </para></listitem>
+ <listitem><para><literal>X</literal>,<literal>Y</literal> - position for the hpotmeter
+ </para></listitem>
+ <listitem><para><literal>width</literal>,<literal>height</literal> - width and height
+ of the <literal>hpotmeter</literal>
+ </para></listitem>
+ <listitem><para><literal>message</literal> - the message to be generated when the
+ value of <literal>hpotmeter</literal> is changed
+ </para></listitem>
+ </itemizedlist>
+
+ </listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-potmeter"/>potmeter = phases, numphases, default, X, Y, width, height, message
+ </literal></term>
+ <listitem><para>
+A <literal>hpotmeter</literal> without a button. (I guess it is meant to be
+turned around, but it reacts to horizontal dragging only.) For the description
+of the parameters see <link linkend="skin-hpotmeter">hpotmeter</link>.
+<literal>phases</literal> can be <literal>NULL</literal>, but it is quite useless,
+since you cannot see where the <literal>potmeter</literal> is set.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-font"/>font = fontfile, fontid
+ </literal></term>
+ <listitem><para>
+Defines a font. <literal>fontfile</literal> is the name of a font description file
+with a <filename>.fnt</filename> extension (do not specify the extension here).
+fontid is used to refer to the font (see <link linkend="skin-dlabel">dlabel</link>
+and <link linkend="skin-slabel">slabel</link>). Up to 25 fonts can be defined.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-slabel"/>slabel = X, Y, fontid, &quot;text&quot;
+ </literal></term>
+ <listitem><para>
+Place a static label at the position <literal>X,Y</literal>. <literal>text</literal>
+is displayed using the font identified by <literal>fontid</literal>. The text is
+just a raw string (<literal>$x</literal> variables do not work) that must be enclosed
+between double quotes (but the &quot; character cannot be part of the text). The
+label is displayed using the font identified by <literal>fontid</literal>.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-dlabel"/>dlabel = X, Y, length, align, fontid, &quot;text&quot;
+ </literal></term>
+ <listitem>
+<para>
+Place a dynamic label at the position <literal>X,Y</literal>. The label is called
+dynamic because its text is refreshed periodically. The maximum length of the
+label is given by <literal>length</literal> (its height is the height of a
+character). If the text to be displayed is wider than that, it will be scrolled,
+otherwise it is aligned within the specified space by the value of the
+<literal>align</literal> parameter: <literal>0</literal> is for right,
+<literal>1</literal> is for center, <literal>2</literal> is for left.
+</para>
+<para>
+The text to be displayed is given by <literal>text</literal>: It must be written
+between double quotes (but the quot; character cannot be part of the text). The
+label is displayed using the font identified by <literal>fontid</literal>. You
+can use the following variables in the text:
+</para>
+
+<informaltable>
+<tgroup cols="2">
+<thead>
+ <row><entry>Variable</entry><entry>Meaning</entry></row>
+</thead>
+<tbody>
+<row>
+<entry>$1</entry>
+<entry>play time in <emphasis>hh:mm:ss</emphasis> format</entry>
+</row>
+<row>
+<entry>$2</entry>
+<entry>play time in <emphasis>mmmm:ss</emphasis> format</entry>
+</row>
+<row>
+<entry>$3</entry>
+<entry>play time in <emphasis>hh</emphasis> format (hours)</entry>
+</row>
+<row>
+<entry>$4</entry>
+<entry>play time in <emphasis>mm</emphasis> format (minutes)</entry>
+</row>
+<row>
+<entry>$5</entry>
+<entry>play time in <emphasis>ss</emphasis> format (seconds)</entry>
+</row>
+<row>
+<entry>$6</entry>
+<entry>movie length in <emphasis>hh:mm:ss</emphasis> format</entry>
+</row>
+<row>
+<entry>$7</entry>
+<entry>movie length in <emphasis>mmmm:ss</emphasis> format</entry>
+</row>
+<row>
+<entry>$8</entry>
+<entry>play time in <emphasis>h:mm:ss</emphasis> format</entry>
+</row>
+<row>
+<entry>$v</entry>
+<entry>volume in <emphasis>xxx.xx</emphasis>% format</entry>
+</row>
+<row>
+<entry>$V</entry>
+<entry>volume in <emphasis>xxx.xx</emphasis> format</entry>
+</row>
+<row>
+<entry>$b</entry>
+<entry>balance in <emphasis>xxx.xx</emphasis>% format</entry>
+</row>
+<row>
+<entry>$B</entry>
+<entry>balance in <emphasis>xxx.xx</emphasis> format</entry>
+</row>
+<row>
+<entry>$$</entry>
+<entry>the $ character</entry>
+</row>
+<row>
+<entry>$a</entry>
+<entry>a character according to the audio type (none: <literal>n</literal>,
+mono: <literal>m</literal>, stereo: <literal>t</literal>)</entry>
+</row>
+<row>
+<entry>$t</entry>
+<entry>track number (in playlist)</entry>
+</row>
+<row>
+<entry>$o</entry>
+<entry>filename</entry>
+</row>
+<row>
+<entry>$f</entry>
+<entry>filename in lower case</entry>
+</row>
+<row>
+<entry>$F</entry>
+<entry>filename in upper case</entry>
+</row>
+<row>
+<entry>$T</entry>
+<entry>a character according to the stream type (file: <literal>f</literal>,
+Video CD: <literal>v</literal>, DVD: <literal>d</literal>, URL: <literal>u</literal>)</entry>
+</row>
+<row>
+<entry>$p</entry>
+<entry>the <keycap>p</keycap> character (if a movie is playing and the font has
+the <keycap>p</keycap> character)</entry>
+</row>
+<row>
+<entry>$s</entry>
+<entry>the <keycap>s</keycap> character (if the movie is stopped and the font has
+the <keycap>s</keycap> character)</entry>
+</row>
+<row>
+<entry>$e</entry>
+<entry>the <keycap>e</keycap> character (if playback is paused and the font has
+the <keycap>e</keycap> character)</entry>
+</row>
+<row>
+<entry>$x</entry>
+<entry>movie width</entry>
+</row>
+<row>
+<entry>$y</entry>
+<entry>movie height</entry>
+</row>
+<row>
+<entry>$C</entry>
+<entry>name of the codec used</entry>
+</row>
+
+</tbody>
+</tgroup>
+</informaltable>
+</listitem>
+
+</varlistentry>
+</variablelist>
+
+<note><para>
+The <literal>$a, $T, $p, $s</literal> and <literal>$e</literal>
+variables all return characters that should be displayed as special symbols (for
+example, <keycap>e</keycap> is for the pause symbol that usually looks something
+like ||). You should have a font for normal characters and a different font for
+symbols. See the section about <link linkend="skin-fonts-symbols">symbols</link>
+for more information.
+</para></note>
+</sect2>
+
+<sect2 id="skin-file-subwindow">
+<title>Subwindow</title>
+<para>
+The following entries can be used in the
+'<literal>window = sub</literal>' . . . '<literal>end</literal>' block.
+</para>
+
+<variablelist>
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-sub-base"/>base = image, X, Y, width, height
+ </literal></term>
+ <listitem><para>
+The image to be displayed in the window. The window will appear at the given
+<literal>X,Y</literal> position on the screen (<literal>0,0</literal> is the
+top left corner). You can specify <literal>-1</literal> for center and <literal>-2</literal>
+for right (<literal>X</literal>) and bottom (<literal>Y</literal>). The window
+will be as large as the image. <literal>width</literal> and <literal>height</literal>
+denote the size of the window; they are optional (if they are missing, the
+window is the same size as the image).
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-background"/>background = R, G, B
+ </literal></term>
+ <listitem><para>
+Lets you set the background color. It is useful if the image is smaller than
+the window. <literal>R</literal>, <literal>G</literal> and <literal>B</literal>
+specifies the red, green and blue component of the color (each of them is a
+decimal number from 0 to 255).
+ </para></listitem>
+</varlistentry>
+</variablelist>
+</sect2>
+
+<sect2 id="skin-file-menu">
+<title>Skin menu</title>
+<para>
+As mentioned earlier, the menu is displayed using two images. Normal menu
+entries are taken from the image specified by the <literal>base</literal> item,
+while the currently selected entry is taken from the image specified by the
+<literal>selected</literal> item. You must define the position and size of each
+menu entry through the menu item.
+</para>
+
+<para>
+The following entries can be used in the
+'<literal>window = menu</literal>'. . .'<literal>end</literal>' block.
+</para>
+
+<variablelist>
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-menu-base"/>base = image
+ </literal></term>
+ <listitem><para>
+The image for normal menu entries.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-selected"/>selected = image
+ </literal></term>
+ <listitem><para>
+The image showing the menu with all entries selected.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><literal>
+ <anchor id="skin-menu"/>menu = X, Y, width, height, message
+ </literal></term>
+ <listitem><para>
+Defines the <literal>X,Y</literal> position and the size of a menu entry in
+the image. <literal>message</literal> is the message to be generated when the
+mouse button is released over the entry.
+ </para></listitem>
+</varlistentry>
+</variablelist>
+</sect2>
+</sect1>
+
+<sect1 id="skin-fonts">
+<title>Fonts</title>
+<para>
+As mentioned in the section about the parts of a skin, a font is defined by an
+image and a description file. You can place the characters anywhere in the image,
+but make sure that their position and size is given in the description file
+exactly.
+</para>
+
+<para>
+The font description file (with <filename>.fnt</filename> extension) can have
+comment lines starting with '<literal>;</literal>'. The file must have a line
+in the form
+<anchor id="skin-font-image"/>
+<programlisting>image = <replaceable>image</replaceable></programlisting>
+Where <literal><replaceable>image</replaceable></literal> is the name of the
+image file to be used for the font (you do not have to specify the extension).
+<anchor id="skin-font-char"/>
+<programlisting>&quot;char&quot; = X, Y, width, height</programlisting>
+Here <literal>X</literal> and <literal>Y</literal> specify the position of the
+<literal>char</literal> character in the image (<literal>0,0</literal> is the
+upper left corner). <literal>width</literal> and <literal>height</literal> are
+the dimensions of the character in pixels.
+</para>
+
+<para>
+This example defines the A, B, C characters using <filename>font.png</filename>.
+<programlisting>
+; Can be &quot;font&quot; instead of &quot;font.png&quot;.
+image = font.png
+
+; Three characters are enough for demonstration purposes :-)
+&quot;A&quot; = 0,0, 7,13
+&quot;B&quot; = 7,0, 7,13
+&quot;C&quot; = 14,0, 7,13
+</programlisting>
+</para>
+
+<sect2 id="skin-fonts-symbols">
+<title>Symbols</title>
+<para>
+Some characters have special meanings when returned by some of the variables
+used in <link linkend="skin-dlabel">dlabel</link>. These characters are meant
+to be shown as symbols so that things like a nice DVD logo can be displayed
+instead of the character '<literal>d</literal>' for a DVD stream.
+</para>
+<para>
+The following table lists all the characters that can be used to display
+symbols (and thus require a different font).
+</para>
+
+<informaltable>
+<tgroup cols="2">
+<thead>
+ <row><entry>Character</entry><entry>Symbol</entry></row>
+</thead>
+<tbody>
+<row><entry><keycap>p</keycap></entry><entry>play</entry></row>
+<row><entry><keycap>s</keycap></entry><entry>stop</entry></row>
+<row><entry><keycap>e</keycap></entry><entry>pause</entry></row>
+<row><entry><keycap>n</keycap></entry><entry>no sound</entry></row>
+<row><entry><keycap>m</keycap></entry><entry>mono sound</entry></row>
+<row><entry><keycap>t</keycap></entry><entry>stereo sound</entry></row>
+<row><entry><keycap>f</keycap></entry><entry>stream is a file</entry></row>
+<row><entry><keycap>v</keycap></entry><entry>stream is a Video CD</entry></row>
+<row><entry><keycap>d</keycap></entry><entry>stream is a DVD</entry></row>
+<row><entry><keycap>u</keycap></entry><entry>stream is a URL</entry></row>
+</tbody>
+</tgroup>
+</informaltable>
+</sect2>
+</sect1>
+
+<sect1 id="skin-gui">
+<title>GUI messages</title>
+<para>
+These are the messages that can be generated by buttons, potmeters and
+menu entries.
+</para>
+<note><para>
+Some of the messages might not work as expected (or not work at all).
+As you know, the GUI is under development.
+</para></note>
+
+<variablelist>
+<title>Playback control:</title>
+<varlistentry>
+ <term><emphasis role="bold">evNext</emphasis></term>
+ <listitem><para>
+Jump to next track in the playlist.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evPause</emphasis></term>
+ <listitem><para>
+Forms a switch together with <literal>evPlaySwitchToPause</literal>. They can
+be used to have a common play/pause button. Both messages should be assigned to
+buttons displayed at the very same position in the window. This message pauses
+playing and the image for the <literal>evPlaySwitchToPause</literal> button is
+displayed (to indicate that the button can be pressed to continue playing).
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evPlay</emphasis></term>
+ <listitem><para>
+Start playing.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evPlaySwitchToPause</emphasis></term>
+ <listitem><para>
+The opposite of <literal>evPauseSwitchToPlay</literal>. This message starts
+playing and the image for the <literal>evPauseSwitchToPlay</literal> button
+is displayed (to indicate that the button can be pressed to pause playing).
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evPrev</emphasis></term>
+ <listitem><para>
+Jump to previous track in the playlist.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evStop</emphasis></term>
+ <listitem><para>
+Stop playing.
+ </para></listitem>
+</varlistentry>
+</variablelist>
+
+<variablelist>
+<title>Seeking:</title>
+<varlistentry>
+ <term><emphasis role="bold">evBackward10sec</emphasis></term>
+ <listitem><para>
+Seek backward 10 seconds.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evBackward1min</emphasis></term>
+ <listitem><para>
+Seek backward 1 minute.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evBackward10min</emphasis></term>
+ <listitem><para>
+Seek backward 10 minutes.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evForward10sec</emphasis></term>
+ <listitem><para>
+Seek forward 10 seconds.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evForward1min</emphasis></term>
+ <listitem><para>
+Seek forward 1 minute.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evForward10min</emphasis></term>
+ <listitem><para>
+Seek forward 10 minutes.
+ </para></listitem>
+</varlistentry>
+
+<varlistentry>
+ <term><emphasis role="bold">evSetMoviePosition</emphasis></term>
+ <listitem><para>
+Seek to position (can be used by a potmeter; the
+relative value (0-100%) of the potmeter is used).
+ </para></listitem>
+</varlistentry>
+</variablelist>
+
+<variablelist>
+<title>Video control:</title>
+<varlistentry>
+ <term><emphasis role="bold">evDoubleSize</emphasis></term>
+ <listitem><para>
+Set the movie window to double size.
+ </para></listitem>
+</varlistentry>
+<varlistentry>
+ <term><emphasis role="bold">evFullScreen</emphasis></term>
+ <listitem><para>
+Switch fullscreen mode on/off.
+ </para></listitem>
+</varlistentry>
+<varlistentry>
+ <term><emphasis role="bold">evNormalSize</emphasis></term>