skins-howto.txt

VLC Player Source Code

Note: This document is short and highly incomplete. If you want to write a new,
decent one, it will be more than welcome!



Basic principles
================

A skin (or theme, the two words have almost the same meaning) for VLC is made
of many BMP files (Windows Bitmap format) containing all the images needed, and
of an XML file describing how these images should be displayed, what happens
when the user clicks on a button, etc.

Those of you who have already done skins for other softwares shouldn't have too
many difficulties to understand how all this works.



Bezier curves
=============

One cool thing with VLC sliders is that they are not necessarily rectilinear,
but they can follow any Bezier curve. So if you want to have a slider moving
on a half-circle, or even doing a loop, you can !

This is not the place to explain how these curves work, the only thing to know
is that a Bezier curve can be caracterised by a set of points. Once you have
them (thanks to the graphical utility presented at the end of this file, for
example), you just need to enter the list of abscissas in the 'abs' attribute
and the list of ordinates (in the same order...) in the 'ord' attribute. The
separator is the coma. Example: abs="2,45,88" ord="50,120,50"

Bezier curves are used for the SliderControl and the PlaylistControl tags.



The bitmaps
===========

Basically, you need one bitmap file by state of control. For example, with a
image control you'll need 1 image, with a button 2 images (or 3 if you provide
the disabled state). A slider will also need 2, one for the static part and
another for the mobile part. Of course, the same bitmap file can be used for
many controls, provided you want to display the same image!

The bitmap format doesn't allow a transparent color, but in the XML file you
can specify a color that will be considered as transparent wherever it appears
in the bitmap file.



The XML file
============

XML is a markup language, like HTML. It won't be explained here any further,
please use Google if you don't know what is XML. You'll see, it's rather easy
to understand.

The XML file used for the VLC skins follows a predefined DTD. You can find this
DTD in VLC CVS, and its reading is strongly advised, since it contains most of
the default values used for the parameters. A skin that doesn't follow the DTD
with which VLC was compiled won't be loaded by VLC (and it might even crash
it...).

For a better comprehension of what follows, you should have a look at the DTD
(in modules/gui/skin/parser/dkin.dtd) and/or at an example of valid xml skin
(such as modules/gui/skin/skins/default/theme.xml).

OK, let's go for an enumeration of the different tags and theor attributes :

 - Theme: The main tag.
   Attributes:
     - magnet: allows to select the range of action (in pixels) of magnetism
       with border of screen : that is to say when the distance between the
       border of the screen and a window is less than this value, the window
       will stick to the border. 0 means no magnetism.
       Default is "9".

 - ThemeInfo: You can enter here some information about you (but this
   information is currently unused by VLC...)
   Attributes :
     - name: not yet supported.
     - author: not yet supported.
     - email: not yet supported.
     - webpage: not yet supported.

 - Bitmap: Associates a bitmap file with a name (=identifiant) that will be
   used by the various controls. Obviously, you need one Bitmap tag for each
   bitmap file you have.
   Attributes:
     - id: this is the name of the bitmap that will be used with controls
       (2 bitmaps shouldn't have the same name).
     - alphacolor: this is the transparency color of the bitmap. It must be
       indicated with the following format: "#RRGGBB" (where RR stands for the
       hexadecimal value of the red component, GG for the green one, and BB for
       the blue one).
     - file: this attribute is used to indicate the path and name of the bitmap
       file used. This path can be absolute (but you should avoid it as often as
       possible), or relative to the path of the xml file.

 - Event: An action that will be associated to a control later.
   Attributes :
     - id: this is the name of the event that will be used with controls.
       (2 events shouldn't have the same name).
     - event: see events-howto.txt
     - key: this is the shortcut key associated with the event. This means that
       the event will be executed when hitting the correspounding key. It must
       be indicated with the following format : "MOD+L" where "MOD" is the
       modifier key ("CTRL" or "ALT") and "L" is the letter in uppercase
       ("MOD+" is optionnal).
       Default is "none".

 - Font: Declares a font to be used in a TextControl or PlaylistControl.
   Attributes :
      - id: this is the name of the font that will be used with controls.
        Default is "default". (2 fonts shouldn't have the same name).
      - font: this is the name of the font
        Default is "arial".
      - size: this is the size of the font in points (pt).
        Default is "12".
      - color: this is the color of the font with the following format,
        "#RRGGBB" (see Bitmap).
        Default is "#000000" (black).
      - weight: this is the weight of the font. It must be between 0 and 1000
        Default is "400" (normal weight). Fewer is thinner...
      - italic: sets if the font must be in italic format.
        Default is "false".
      - underline: sets if the font must be underlined.
        Default is "false".

 - Window: A window that will appear on screen.
      - id: this is the name of the window (it will be only used for events
        but it is important: 2 windows shouldn't have the same name).
      - visible: sets if the window should appear or not at the launch of VLC.
        Default is "true".
      - x: sets the left position of the window.
        Default is "0".
      - y: sets the top position of the window.
        Default is "0".
      - fadetime: sets the time in milliseconds of the hide/show fading
        transition.
        Default is "500".
      - alpha: sets the transparency of the window. It must be between 1 and
        255. 1 is nearly total transaprency and should be avoided. 255 is total
        opacity.
        Default is "255". You should use high values.
      - movealpha: sets the transparency of the window when the window is
        moving. Same range as alpha.
        Default is "255".
      - dragdrop: sets if drag and drop of media files is allowed in this
        window.
        Default is "true".
      - playondrop: sets if a drop file is played directly (true) or only
        enqueud (false). This has no effect if dragdrop is set to "false".
        Default is "true".

 - ControlGroup: Adds an offset to the elements it contains. A ControlGroup is
   only supposed to ease the job of the skin designer, who can adjust the
   position of a group of controls without modifying all the coordinates, but
   you can ignore it if you want (only one ControlGroup is necessary, just
   inside Window). ControlGroup tags can be nested.
   Attributes :
     - x: try and guess.
       Default is "0".
     - y: what do you think ?
       Default is "0".

 - Anchor: Creates a "magnetic point" in the current Window. If an anchor of
   another Window enters in the range of action of this anchor, the 2 anchors
   will automatically be on the same place, and the windows are "sticked". Each
   anchor has a priority ('priority' attribute), and the anchor with the
   highest priority is the winner, which means that when moving its Window all
   the other anchored Windows will move too. To break the effect of 2 linked
   anchors, you need to move the Window whose anchor has the lower priority.
   Attributes :
     - x: is it really necessary to explain ?
       Default is "0".
     - y: ...
       Default is "0".