skins-howto.txt

VLC Player Source Code

     - priority: priority of anchor (see the previous description).
       No default, must de defined!
     - range: Range of action of the anchor in pixels.
       Default is "10".

 - ImageControl, ButtonControl, CheckBoxControl, TextControl, SliderControl,
   PlaylistControl: The various visual controls that constitute a Window. They
   share some properties: 'x' and 'y' for the position, 'visible' for the
   initial state, 'id' for identifying them (only needed if you want to create
   an event acting on this particular control) and 'help' for a short
   description of the control that could be displayed in a special TextControl
   (see below). All the controls can also accept events, and you have the
   possibility to associate many events to a control at once, separing them
   with semicolons.

 - ImageControl: Creates a simple image. Useful for backgrounds.
     - image: this attribute must be set to an identifiant of a Bitmap tag.
     - onclick: the 'event' attribute can be used to associate an event to the
       image (the event is triggered by a click on the image).
       Typical use: an Event made with 'WINDOW_MOVE(window)' (where 'window' is
       the id of a Window) can be associated to an ImageControl of this
       Window. Hence the Window can be moved via the image...

 - ButtonControl: Creates a button.
     - up: identifiant of a Bitmap. Used for drawing the up state of the
       button.
     - down: identifiant of a Bitmap. Used for drawing the down state of the
       button.
     - disabled : identifiant of a Bitmap. Used for drawing the disabled state
       of the button.
     - onclick: event executed when clicking on the button.
       Default is "none".
     - onmouseover: event executed when the mouse cursor enters the button.
       Default is "none".
     - onmouseout: event executed when the mouse cursor leaves the button.
       Default is "none".
     - tooltiptext : used to display a tooltip.
       Default is "none" (no tooltip).

 - CheckBoxControl: Creates a checkbox, i.e. a button with 2 states
   (checked/unchecked). So you need 6 images for a full-featured checkbox: each
   state has a basic image, an image corresponding to a click not yet released,
   and an image for the disabled control. If you supply only the basic images,
   the other ones will be identical.
   Attributes:
     - img1: identifiant of a Bitmap. Used for drawing control in state 1.
     - clickimg1: identifiants of a bitmap. Used for drawing control when
       clicking on it in state 1.
       Default is the value of 'img1' attribute.
     - img2: identifiant of a Bitmap. Used for drawing control in state 2.
     - clickimg2: identifiant of a Bitmap. Used for drawing control when
       clicking on it in state 2.
       Default is the value of 'img2' attribute.
     - disabled1: identifiant of a Bitmap. Used for drawing control in state 1
       when disabling.
       Default is the value of 'img1' attribute.
     - disabled2: identifiant of a Bitmap. Used for drawing control in state 1
       when disabling.
       Default is the value of 'img2' attribute.
     - onclick1: event executed when clicking on the control in state 1.
       Default is "none".
     - onclick2: event executed when clicking on the control in state 2.
       Default is "none".
     - onmouseover1: event executed when the mouse cursor enters the button in
       state 1.
       Default is "none".
     - onmouseout1: event executed when the mouse cursor leaves the button in
       state 1.
       Default is "none".
     - onmouseover2: event executed when the mouse cursor enters the button in
       state 2.
       Default is "none".
     - onmouseout2: event executed when the mouse cursor leaves the button in
       state 2.
       Default is "none".

 - TextControl: Creates a text.
   Attributes:
     - font: the font to use, which must be one of the Font identifiants.
     - text: the text to display.
     - align: either 'left' or 'center' or 'right'.
       Default is "left".
     - scroll: if set to 'true', the text will scroll if it does not fit into
       the 'scrollspace'.
       Default is "true".
     - scrollspace: size in pixel between two occurrences of the text when
       scrolling.
       Default is "20".
     - display: this value is a bit special, it allows to have a text
       auto-updated by VLC. Possible values are 'time', 'left_time',
       'total_time', 'file_name' (for the current file name with its path),
       'title' (for the file name without the path) and 'help' (for a help
       about the controls that defined their 'help' attribute).
       You can specify several types by separating them with semicolons. To
       switch between then, just double click on the text.
       Useful to switch between 'time' and 'left_time'.
     - width: Width of the text in pixels. If set to "0", the width is
       automatically calculated to fit with the current text.
       Default is "0".

 - SliderControl: Creates a slider. The 'abs' and 'ord' attributes are needed
   for the Bezier curve that the slider will follow. 'up' and 'down' are the
   images of the slider. The 'tooltiptext' attribute works, and the slider will
   automatically append the percentage of the position.
   Attributes:
     - type: two 'types' of sliders are predefined: 'time' for a slider
       allowing to seek in the stream, and 'volume' for a volume slider.
       Default is "time".
     - up: identifiant of a Bitmap.
     - down: identifiant of a Bitmap.
     - abs: see SliderControl description and bezier curve description.
     - ord: see SliderControl description and bezier curve description.
     - tooltiptext: used to display a tooltip.
       Default is "none" (no tooltip).

 - PlaylistControl: Creates a playlist. This tag must contain a SliderControl
   tag (to allow scrolling in the playlist). If the playlist contains entries
   wider than the list width, an automatic tooltip will appear with
   the full name of the entry. The other attributes are rather easy to
   understand...
   Attributes:
     - width: width of the list in pixels. This is the whole width for file
       name, number of files in the playlist and info text.
       Default is "200".
     - infowidth: width of the info text in pixels.
       Default is "50".
     - font: the font to use, which must be one of the Font identifiants.
     - playfont: the font to use for current playing file, which must be one of
       the Font identifiants.
       Default is "none".
     - selcolor: color in "#RRGGBB" format of the selected files.
       Default is "#0000FF" (blue).
     - abs: see PlaylistControl description and bezier curve description.
     - ord: see PlaylistControl description and bezier curve description.



Compression
===========

Once your skin is finished, instead of keeping many bitmap files and the XML
file, you can compress them in a .tar.gz archive (Winzip and UmtimateZip can do
it perfectly, for example). Before doing so, don't forget to rename your XML
file into "theme.xml", or VLC won't be able to read it... Then rename your
compressed file with the .vlt extension and... that's all! VLC can load
directly skins with the .vlt extension.



Tools and advice
================

 - To generate easily Bezier curves, you can use the curve-maker. Basically,
   you add and remove points at will, and you can move them to see how the
   curve evolves. When you have reached the perfect curve, you just have to
   copy-paste the list of abscissas and ordinates into the 'abs' and 'ord'
   attributes of your SliderControl or PlaylistControl. The curve-maker also
   allows to load a bitmap, this could be useful if you want to follow a
   specific pattern of a slider, for example.

 - When you are creating your skin, you may want to see the VLC messages where
   some errors are logged. For this, open a dos window, go to the directory
   where VLC is installed, and type "vlc -I skin -v --extraintf logger". This
   should open VLC and a log window (what's more, the logs should be saved in a
   file called vlc-log.txt). The interesting lines are those with "skin
   interface"...

 - For the Bitmap tags, don't use absolute paths but relative paths (they are
   relative to the XML file directory), so that your skin can be reused by
   anybody without a particular file structure.

 - To fully use the possibilities given, you should look at how other skins are
   made, it's often very useful.


Good luck!