HowTo create your own skin
-2004
+2004-2006
the VideoLAN project
@@ -41,6 +41,7 @@ website.
+ VLCSkinXMLBezier
@@ -65,24 +66,6 @@ difficulty to understand how VLC skins work.
-
-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 Bezier curves work (see http://astronomy.swin.edu.au/~pbourke/curves/bezier/ for a nice introduction), the main thing to know is that a Bezier curve can be characterized by a set of points. Once you have them (thanks to the CurveMaker utility for example), you just need to enter the list of points in the points attribute. Here is an example with 3 points: points="(2,50),(45,120),(88,50)".
-
-Bezier curves can be used with the Slider and Anchor tags:
-
-
- For sliders, it defines the curve followed by the cursor of the slider. This curve is of course invisible, so if you want a visible background for your Slider you need to provide it yourself using the Image tag.
- For anchors, the use of Bezier curves is more anecdotic. Its purpose is to have non-ponctual anchor, the whole curve becoming the anchor. In this case, a ponctual anchor (and only a ponctual one) can be attracted by any point of the curve, if it is in its range of action. In fact, you can consider the curve as an easy way to define at once many anchors that share the same properties (except their position, of course :)).
-
-
-The coordinates are relative to the upper-left corner of the control (i.e. to its x and y attributes).
-
-
-
The bitmaps
@@ -101,663 +84,763 @@ difficulty to understand how VLC skins work.
XML is a markup language, like HTML. It won't be explained here any further, please use Google if you don't know what XML is. You'll see, it is rather easy to understand.
-The XML file used for the VLC skins follows a predefined DTD. You can find this DTD in VLC SVN, and its reading is strongly advised, since it contains the default values used for the parameters. A skin that does not follow the DTD with which VLC was compiled won't be loaded by VLC (and it might even crash it...).
+The XML file used for the VLC skins follows a predefined DTD. You can find this DTD in VLC Git, and its reading is strongly advised, since it contains the default values used for the parameters. A skin that does not follow the DTD with which VLC was compiled won't be loaded by VLC (and it might even crash it...).For a better undestanding of what follows, you should have a look at the DTD and/or at an example of valid XML skin.OK, let's go for an enumeration of the different tags and their attributes:
-
+ThemeMain tag, for global attributes
-
+ versionVersion of the DTD used when making the skin, such as "2.0" (you can find the version in the DTD itself). This number might be used in the future to provide a better backward compatibility with older skins.Required.
-
-
+
+ tooltipfontIdentifiant of a Font or BitmapFont, used for the tooltips (beware that any character not present in a BitmapFont will be printed as a space, so will be invisible). The default value uses a font provided with VLC, so you don't need to provide it with your skin.Default value: defaultfont
-
-
+
+ magnetAllows to select the range of action (in pixels) of magnetism with borders of the screen: when the distance between the border of the screen and an anchor of a window is less than this value, the window will stick to the border. 0 disables magnetism with the screen borders.Default value: 15
-
-
+
+ alphaSets the alpha transparency of the windows. The value must be between 1 (nearly total transparency) and 255 (total opacity). Low values should be avoided.This only works if transparency is not disabled in the preferences of the skins2 module.Default value: 255
-
-
+
+ movealphaSets the alpha transparency of the windows when they are moving. Same range as alpha.This only works if transparency is not disabled in the preferences of the skins2 module.Default value: 255
-
-
+
+
-
+ThemeInfoYou can enter here some information about you (but this information is currently unused by VLC...)
-
+ nameSkin name. Not supported yet.Implied.
-
-
+
+ authorAuthor of the skin. Not supported yet.Implied.
-
-
+
+ emailEmail of the author. Not supported yet.Implied.
-
-
+
+ webpageWeb page in relation with the skin. Not supported yet.Default value: http://www.videolan.org/vlc/
-
-
+
+
-
+BitmapAssociates a bitmap file (usually in PNG format) with an identifiant (=name) that will be used by the various controls. Obviously, you need one Bitmap tag for each bitmap file you have.
-
+ idIdentifiant of the bitmap that will be used with controls. Two bitmaps cannot have the same id.Required.
-
-
+
+ fileIndicates the path and name of the bitmap file used. This path can be absolute (but you should definitely avoid it), or relative to the path of the XML file.Required.
-
-
+
+ alphacolorTransparency 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.If your PNG file specifies a transparency mask, it will be taken into account too.Default value: #000000
-
-
+
+ nbframesThis attribute is needed to define animated bitmaps; it is the number of frames (images) contained in your animation. All the different frames are just images laid vertically in the bitmap. Animated GIFs are not supported at the moment. (since VLC 0.8.5)Default value: 1
-
-
+
+ fpsOnly used in animated bitmaps; it is the number of frames (images) per seconds of the animation. (since VLC 0.8.5)Default value: 0
-
+
-
+
-
+SubBitmapDeclares a portion of bitmap, that will be used with controls in the same way as a regular Bitmap. A SubBitmap tag can only be placed inside a Bitmap tag, and references implicitly the same file. SubBitmaps are very convenient when a file contains images for several controls. (This tag was not available before VLC 0.8.5).
-
+ idIdentifiant of the portion of bitmap that will be used with controls. It must be unique in the whole skin.Required.
-
-
+
+ xHorizontal offset of the sub-bitmap (in pixels), relative to the "parent" bitmap.Required.
-
-
+
+ yVertical offset of the sub-bitmap (in pixels), relative to the "parent" bitmap.Required.
-
-
+
+ widthWidth of the sub-bitmap, in pixels.Required.
-
-
+
+ heightHeight of the SubBitmap, in pixels.Required.
-
-
+
+ nbframesSame as in Bitmap tag.Default value: 1
-
-
+
+ fpsSame as in Bitmap tag.
-
+
-
+
-
+FontDeclares a font to be used in a Text or Playtree.
-
+ idIdentifiant of the font that will be used with controls.Required.
-
-
+
+ fileThis is the file containing a TrueType font.Required.
-
-
+
+ sizeThis is the size of the font, in points.Default value: 12
-
-
+
+
-
+BitmapFont
-
+ idIdentifiant of the font that will be used with controls.Required.
-
-
+
+ fileThis is the file containing a bitmap font, à la Winamp.Required.
-
-
+
+ typeType of font, one of "digits" or "text".Default value: digits
-
-
+
+
-
+WindowA window that will appear on screen.
-
+ idName of the window (it may be used for actions). Two windows cannot have the same id.Default value: none
-
-
+
+ visibleIndicates whether the window should appear when VLC is started. Since VLC remembers the skin windows position and visibility, this attribute will only be used the first time the skin is started.Default value: true
-
-
+
+ xInitial left position of the window.Default value: 0
-
-
+
+ yInitial top position of the window.Default value: 0
-
-
+
+ dragdropIndicates whether drag and drop of media files is allowed on this window.Default value: true
-
-
+
+ playondropIndicates whether a dropped file is played directly (true) or only enqueued (false). This attribute has no effect if dragdrop is set to "false".Default value: true
-
-
+
+
-
+LayoutA layout is one aspect of a window, i.e. a set of controls and anchors. A window can have many layouts, but only one will be visible at any time.
-
+
+ id
+ Name of the layout (it may be used for actions). Two layouts cannot have the same id.
+ Default value: none
+
+ width
- Width of the layout. this value is required since VLC is not (yet?) able to calculate it using the sizes and positions of the controls.
+ Initial width of the layout. This value is required since VLC is not (yet?) able to calculate it using the sizes and positions of the controls.Required.
-
-
+
+ height
- Height of the layout. this value is required since VLC is not (yet?) able to calculate it using the sizes and positions of the controls.
+ Initial height of the layout. This value is required since VLC is not (yet?) able to calculate it using the sizes and positions of the controls.Required.
-
-
+
+ minwidthMinimum width of the layout. This value is only used when resizing the layout. If this value is set to "-1", the initial width (as specified by the width attribute) will be used as minimum width.Default value: -1
-
-
+
+ maxwidthMaximum width of the layout. This value is only used when resizing the layout. If this value is set to "-1", the initial width (as specified by the width attribute) will be used as maximum width.Default value: -1
-
-
+
+ minheightMinimum height of the layout. This value is only used when resizing the layout. If this value is set to "-1", the initial height (as specified by the height attribute) will be used as minimum height.Default value: -1
-
-
+
+ maxheightMaximum height of the layout. This value is only used when resizing the layout. If this value is set to "-1", the initial height (as specified by the height attribute) will be used as maximum height.Default value: -1
-
-
+
+
-
+Group
- Adds an offset to the elements it contains. A Group 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 Group is necessary, inside the Window tag). Group tags can be nested.
-
+ Add an offset to the elements it contains. A Group 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 Group is necessary, inside the Layout tag). Group tags can be nested. Note that Group elements are deprecated, since Panel elements are more powerful.
+ x
- Try and guess.
+ Horizontal offset, relative to the container box (see the Layout model for more details).Default value: 0
-
-
+
+ y
- What do you think?
+ Vertical offset, relative to the container box (see the Layout model for more details).Default value: 0
-
-
+
+
-
+
+ Panel
+ A Panel can be seen as an enhanced Group. It also adds an offset to the elements it contains, but in addition it becomes their reference for the lefttop, rightbottom, xkeepratio and ykeepratio attributes. Panel tags can be nested. Since VLC 0.9.0.
+ See the common attributes.
+
+ x
+ Same as the x attribute of the common attributes.
+
+
+ y
+ Same as the y attribute of the common attributes.
+
+
+ width
+ Initial width of this container box (see the Layout model for more details).
+ Required.
+
+
+ height
+ Initial height of this container box (see the Layout model for more details).
+ Required.
+
+
+ lefttop
+ Same as the lefttop attribute of the common attributes.
+
+
+ rightbottom
+ Same as the rightbottom attribute of the common attributes.
+
+
+ xkeepratio
+ Same as the xkeepratio attribute of the common attributes.
+
+
+ ykeepratio
+ Same as the ykeepratio attribute of the common attributes.
+
+
+
+AnchorCreate a "magnetic point" (or curve) 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 anchored windows, you need to move the window whose anchor has the lower priority.
-
+ x
- Is it really necessary to explain ?
+ Is it really necessary to explain?Default value: 0
-
-
+
+ y...Default value: 0
-
-
+
+
+ lefttop
+ Indicate to which corner of the Layout the top-left-hand corner of this anchor is attached, in case of resizing. Possible values are 'lefttop', 'leftbottom', 'righttop' and 'rightbottom'. Available since VLC 0.8.6.
+ Note that there is no "rightbottom" attribute for the anchors (contrarily to normal controls), because an anchor is not resizable (even when the anchor is not ponctual and follows a Bezier curve).
+ Default value: lefttop
+
+ priorityPriority of anchor (see the previous description).Required.
-
-
+
+ pointsPoints defining the Bezier curve followed by the anchor.You don't need to change this parameter if all you want is a ponctual anchor.Default value: (0,0)
-
-
+
+ range
- Range of action of the anchor, in pixels. Default is "10".
+ Range of action of the anchor, in pixels.Default value: 10
-
-
+
+
-
- Attributes common to all the controls
- The following attributes are common to all the controls (Image, Button, Checkbox, Text, Slider, RadialSlider, Playtree, Video)
-
+
+ Common attributes
+ The following attributes are common to all the controls (Image, Button, Checkbox, Text, Slider, RadialSlider, Playlist, Playtree, Video)
+ idIdentifiant of the control. Currently unused.Default value: none
-
-
+
+ visibleSee Boolean expressions.Default value: true
-
-
+
+ x
- Horizontal offset of the control, relative to the parent tag (usually Group or Layout).
+ Horizontal offset of the control, relative to the container box (see the Layout model) or to the parent Group.Default value: 0
-
-
+
+ y
- Vertical offset of the control, relative to the parent tag (usually Group or Layout).
+ Vertical offset of the control, relative to the container box (see the Layout model) or to the parent Group.Default value: 0
-
-
+
+ lefttop
- Indicate to which corner of the Layout the top-left-hand corner of this control is attached, in case of resizing. Possible values are 'lefttop', 'leftbottom', 'righttop' and 'rightbottom'.
+ Indicate to which corner of the container box the top-left-hand corner of this control is attached, in case of resizing. Possible values are 'lefttop', 'leftbottom', 'righttop' and 'rightbottom'. See the Layout model for more details.Default value: lefttop
-
-
+
+ rightbottom
- Indicate to which corner of the Layout the bottom-right-hand corner of this control is attached, in case of resizing.
+ Indicate to which corner of the container box the bottom-right-hand corner of this control is attached, in case of resizing. See the Layout model for more details.Default value: lefttop
-
-
+
+
+ xkeepratio
+ When set to true, the behaviour of the horizontal resizing is changed. Instead of taking into account the lefttop and rightbottom attributes to determine how the control will be moved/resized, only its initial position inside the container box matters. For example, if initially the space to the left of the control is twice as big as the one to its right, this will stay the same during any horizontal resizing. The width of the control stays constant.
+ This attribute can be particularly useful to keep a control centered in the container box, without resizing it (to resize it, you would rather use the lefttop/rightbottom attributes). See the Layout model for more details. Available since VLC 0.8.6.
+ Default value: false
+
+
+ ykeepratio
+ When set to true, the behaviour of the vertical resizing is changed. Instead of taking into account the lefttop and rightbottom attributes to determine how the control will be moved/resized, only its initial position inside the Layout matters. For example, if initially the space to the top of the control is twice as big as the one to its bottom, this will stay the same during any vertical resizing. The height of the control stays constant.
+ This attribute can be particularly useful to keep a control centered in the container box, without resizing it (to resize it, you would rather use the lefttop/rightbottom attributes). See the Layout model for more details. Available since VLC 0.8.6.
+ Default value: false
+
+ helpHelp text for the current control. The variable '$H' will be expanded to this value when the mouse hovers the current control (see Text variables).Default value:
-
-
+
+
-
+ImageCreate a simple image. Particularly useful for backgrounds.See the Common attributes.
-
+ imageIdentifiant of a Bitmap.Required.
-
-
+
+ resizeSince VLC 0.8.2. Specify the behaviour of the image when it is resized. Possible values are 'mosaic' (the image is repeated as many times as necessary to reach the wanted dimensions) and 'scale' (the image is actually rescaled). Beware that the 'scale' behaviour is much slower than the 'mosaic' one, so make sure to use it only when it's really needed.Default value: mosaic.
-
-
+
+ actionAction triggered by a click on the control. Possible values are 'move', to move the window, 'resizeE', to resize horizontally, 'resizeS' to resize vertically, and 'resizeSE' to resize both horizontally and vertically. Mnemonics: S, E and SE stand for South, East, and South-East. The 'resizeS' and 'resizeE' actions are available since VLC 0.8.5 only.Default value: none
-
-
+
+ action2Action triggered by a double-click on the control. See Actions for a list of possible actions. (Since VLC 0.8.5).Default value: none
-
-
+
+
-
+ButtonCreate a button.See the common attributes.
-
+ upIdentifiant of a Bitmap, used when the button is up.Required.
-
-
+
+ downIdentifiant of a Bitmap, used when the button is down.Default value: none
-
-
+
+ overIdentifiant of a Bitmap, used when the mouse is over the button.Default value: none
-
-
+
+ actionAction executed when the button is clicked. See Actions for a list of possible actions.Default value: none
-
-
+
+
+ tooltiptext
+ Tooltip associated with the button. See also Text variables.
+ Default value:
+
+
-
+CheckboxCreate 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 ('up' state), an image for the control being hovered by the mouse ('over' state) and an image corresponding to a click not yet released ('down' state). If you supply only the basic images, the other ones will be identical.See the common attributes.
-
+ up1Identifiant of a Bitmap, used when the checkbox is up in the first state.Required.
-
-
+
+ down1Identifiant of a Bitmap, used when the checkbox is down in the first state.Default value: none
-
-
+
+ over1Identifiant of a Bitmap, used when the mouse is over the checkbox in the first state.Default value: none
-
-
+
+ up2Identifiant of a Bitmap, used when the checkbox is up in the second state.Required.
-
-
+
+ down2Identifiant of a Bitmap, used when the checkbox is down in the second state.Default value: none
-
-
+
+ over2Identifiant of a Bitmap, used when the mouse is over the checkbox in the second state.Default value: none
-
-
+
+ stateBoolean expression specifying the state of the checkbox: if the expression resolves to 'false', the first state will be used, and if it resolves to 'true' the second state will be used. Example for a checkbox showing/hiding a window whose id is "playlist_window": state="playlist_window.isVisible" (or state="not playlist_window.isVisible", depending on the states you chose).Required.
-
-
+
+ action1Action executed when the checkbox is clicked (state 1 to state 2). See Actions for a list of possible actions.Default value: none
-
-
+
+ action2Action executed when the checkbox is clicked (state 2 to state 1). See Actions for a list of possible actions.Default value: none
-
-
+
+ tooltiptext1Tooltip associated with the checkbox in state 1. See also Text variables.Default value:
-
-
+
+ tooltiptext2Tooltip associated with the checkbox in state 2. See also Text variables.Default value:
-
-
+
+
-
+TextControl to display some text.See the common attributes.
-
+ fontIdentifiant of a Font or BitmapFont (beware that any character not present in the BitmapFont will be printed as a space, so will be invisible).Required.
-
-
+
+ textText to display. See also Text variables.Default value:
-
-
+
+ colorColor of the text, using the #RRGGBB format.Default value: #000000
-
-
+
+ widthWidth of the text in pixels. If set to "0", the width is automatically calculated to fit with the current text.Default value: 0
-
-
+
+ alignmentAlignment of the text inside the control. Possible values are 'left', 'center' and 'right'. The 'width' and 'center' alignments are computed using the width of the control (as given by the width attribute). Available since VLC 0.8.5.Default value: left
-
-
+
+ scrollingScrolling behaviour of the text (only when it doesn't fit in the width of the control). Possible values are 'auto', 'manual' and 'none'. If this attribute is set to 'auto', the text automatically starts scrolling. The user can drag the text, and click on it to start/stop the scrolling. If this attribute is set to 'manual', the text only scrolls when dragged by the user. If this attribute is set to 'none', no scrolling is possible at all. Available since VLC 0.8.5.Default value: auto
-
-
+
+
-
+Slider
- Create a slider.
+ Create a slider. This element can be used alone, or can contain a SliderBackground element.See the common attributes.
-
+ upIdentifiant of a Bitmap, used when the slider cursor is up.Required.
-
-
+
+ downIdentifiant of a Bitmap, used when the slider cursor is down.Default value: none
-
-
+
+ overIdentifiant of a Bitmap, used when the mouse is over the slider cursor.Default value: none
-
-
+
+ pointsPoints defining the Bezier curve followed by the slider cursor.Default value: none
-
-
+
+ thicknessThickness of the slider curve. This attribute is used to determine whether the mouse is over the slider (hence whether a mouse click will have an effect on the cursor position).Default value: 10
-
-
+
+ valueVariable controlled by the slider. This must be a percentage variable, e.g "volume" or "time" (only exception: the Slider defined inside the Playtree tag does not need to set this attribute).Default value: none
-
-
+
+ tooltiptextTooltip associated with the slider. See also Text variables.Default value:
-
-
+
+
+
+
+
+ SliderBackground
+ Set of background images associated to a slider (it must be a sub-element of a Slider). The displayed image depends on the value of the corresponding slider; if the SliderBackground contains n images, the image #m will be displayed, where m = n * (slider value). A SliderBackground actually contains a single image, which is divided into a grid to build all the sub-images. All the sub-images of the grid have the same size, and can be separated by unused pixel lines or rows if needed (this is called "padding").
+ See the common attributes.
+
+ image
+ Identifiant of a Bitmap; image containing the sub-images used to draw the background of the slider.
+ Required.
+
+
+ nbhoriz
+ Number of sub-images in the horizontal direction.
+ Default value: 1
+
+
+ nbvert
+ Number of sub-images in the vertical direction.
+ Default value: 1
+
+
+ padhoriz
+ Horizontal padding: number of unused pixel rows between two sub-images.
+ Default value: 0
+
+
+ padvert
+ Vertical padding: number of unused pixel lines between two sub-images.
+ Default value: 0
+
+
-
+RadialSliderCreate a circular slider from a list of images with the different possible positions.See the common attributes.
-
+ sequenceIdentifiant of a Bitmap containing the list of images of the different positions of the slider, concatenated vertically.Required.
-
-
+
+ nbimagesNumber of elementary images contained in the sequence.Required.
-
-
+
+ minangleMinimum angle of the rotation, corresponding to 0%.Default value: 0
-
-
+
+ maxangleMaximum angle of the rotation, corresponding to 100%.Default value: 360
-
-
+
+ valueVariable controlled by the slider. This must be a percentage variable, e.g "volume" or "time".Default value: none
-
-
+
+ tooltiptextTooltip associated with the slider. See also Text variables.Default value:
-
-
+
+
-
+VideoControl containing a video. This allows skinable video outputs!
- this control is still under development and its behaviour may change a lot in the future.
-
+ This control is still under development and its behaviour may change a lot in the future.
+ widthInitial width of the control, in pixels.Default value: 0
-
-
+
+ heightInitial height of the control, in pixels.Default value: 0
-
-
+
+ autoresizeIndicate whether the layout should be automatically resized to fit the dimensions of the played video.Default value: true
-
-
+
+
-
+PlaylistThis tag used to create a playlist. This tag is deprecated, you should now use Playtree
-
+
-
+PlaytreeCreate a playlist. This tag must contain a Slider tag (to allow scrolling in the playlist).See the common attributes.
-
+ widthWidth of the playlist, in pixels. If playlist items are wider, the end of the name will be replaced with '...'.Default value: 0
-
-
+
+ heightHeight of the playlist, in pixels.Default value: 0
-
-
+
+ fontIdentifiant of a Font tag.Required.
-
-
+
+ varType of playlist. Currently, only "playlist" is recognized, so don't bother with this attribute :)Default value: playlist
-
-
+
+ bgimageIdentifiant of a Bitmap, used as the background image. When no bitmap is specified, the background will be filled using the bgcolor1 and bgcolor2 attributes.Default value: none
-
-
+
+ fgcolorForeground color of the playlist items.Default value: #000000
-
-
+
+ playcolorForeground color of the item currently played.Default value: #FF0000
-
-
+
+ selcolorBackground color of selected items.Default value: #0000FF
-
-
+
+ bgcolor1Background color for odd playlist items. This attribute is ignored if the bgimage one is used.Default value: #FFFFFF
-
-
+
+ bgcolor2Background color for even playlist items. This attribute is ignored if the bgimage one is used.Default value: #FFFFFF
-
-
+
+ flatBoolean to indicate whether the playlist should use the tree structure or be completely "flat" (only show the leafs of the tree).A flat playtree will work like old-style playlists.Default value: false
-
-
+
+ itemimageIdentifiant of a Bitmap shown to the left of a leaf (playlist item).
-
-
+
+ openimageIdentifiant of a Bitmap shown to the left of a node, when it is expanded.
-
-
+
+ closedimageIdentifiant of a Bitmap shown to the left of a node, when it is retracted.
-
-
+
+
@@ -798,7 +881,7 @@ difficulty to understand how VLC skins work.
dialogs.fileInfo(): Show the "File Info" dialog box.
- dialogs.playlist(): Show the "standard" (not skinned) playlist dialog.
+ dialogs.playlist(): Show the "standard" (not skinned) playlist dialog (since VLC 0.8.6).
dialogs.streamingWizard(): Show the "Streaming Wizard" dialog box (new after VLC 0.8.2).
@@ -807,13 +890,13 @@ difficulty to understand how VLC skins work.dialogs.popup(): Show the full popup menu, (already available with a right-click on a Image control).
- dialogs.audioPopup(): Show the audio settings popup menu (since VLC 0.8.5).
+ dialogs.audioPopup(): Show the audio settings popup menu (since VLC 0.8.6).
- dialogs.videoPopup(): Show the video settings popup menu (since VLC 0.8.5).
+ dialogs.videoPopup(): Show the video settings popup menu (since VLC 0.8.6).
- dialogs.miscPopup(): Show a popup menu containing playback control and general options (since VLC 0.8.5).
+ dialogs.miscPopup(): Show a popup menu containing playback control and general options (since VLC 0.8.6).
equalizer.enable(): Enable the equalizer audio filter (since VLC 0.8.5).
@@ -909,7 +992,7 @@ difficulty to understand how VLC skins work.dvd.nextChapter(): Go to the next chapter of the DVD (since VLC 0.8.5).
- dvd.previousTitle(): Go to the previous chapter of the DVD (since VLC 0.8.5).
+ dvd.previousChapter(): Go to the previous chapter of the DVD (since VLC 0.8.5).
dvd.rootMenu(): Go to the root menu of the DVD (since VLC 0.8.5).
@@ -921,7 +1004,13 @@ difficulty to understand how VLC skins work.WindowID.hide(): Hide the Window whose id attribute is 'WindowID'.
- WindowID.setLayout(LayoutID): Change the layout of the Window whose id attribute is 'WindowID', using the Layout whose id attribute is 'LayoutID'.
+ WindowID.maximize(): Maximize the Window whose id attribute is 'WindowID'. Since VLC 0.9.0.
+
+
+ WindowID.unmaximize(): Unmaximize the Window whose id attribute is 'WindowID'. Since VLC 0.9.0.
+
+
+ WindowID.setLayout(LayoutID): Change the layout of the Window whose id attribute is 'WindowID', using the Layout whose id attribute is 'LayoutID'.
@@ -1023,7 +1112,13 @@ difficulty to understand how VLC skins work.
dvd.isActive: True when a DVD is currently playing. This variable can be used to display buttons associated to the dvd.* actions only when needed (since VLC 0.8.5).
- window_name.isVisible: True when the window whose id is "window_name" is visible, false otherwise.
+ WindowID.isMaximized: True when the window whose id is "WindowID" is maximized, false otherwise (since VLC 0.9.0).
+
+
+ WindowID.isVisible: True when the window whose id is "WindowID" is visible, false otherwise.
+
+
+ LayoutID.isVisible: True when the layout whose id is "LayoutID" is the active layout in its window (even if the window is hidden), false otherwise (since VLC 0.8.6).
@@ -1056,6 +1151,38 @@ difficulty to understand how VLC skins work.
+
+Layout model
+
+Placing the controls on a window is easy, using their x and y attributes, but these positions become insufficient for a resizable window. Some controls (or groups of controls) should stay centered in the window, others should follow the right side of the window, others should change their size automatically, etc... To handle these various behaviours, the layout model followed by the skins engine is a model based on nested boxes.
+
+There are 2 kinds of boxes:
+
+
+
+ simple boxes: These boxes cannot contain other boxes. All the visible controls are simple boxes: Image, Button, Checkbox, Text, Slider, RadialSlider, Playlist, Playtree, Video.
+
+
+ container boxes: These boxes can contain other boxes. Only two XML tags create container boxes: Panel and Layout. The Layout tag is necessarily the top-level box for the current layout, and cannot be contained, but Panel elements can be contained.
+
+
+
+A box inside a container box always defines how it should react when its container box is resized. Two different mechanisms are provided: corners anchoring (useful when resizing of the inner box is wanted, for example) and constant ratio (mainly useful to keep the inner box centered inside its parent):
+
+
+ corners anchoring: The top-left-hand corner (TL) and the bottom-right-hand corner (BR) of the inner box are "tied" to corners of the container box (TL, TR, BL or BR). When any resizing occurs, tied corners move together, which can move or resize the inner box. For example, if the TL corner of the inner box is tied to the TL corner of the container (let's write it TL/TL), and if the BR corner of the inner box is also tied to the TL corner of the container box (BR/TL), the inner box will not be resized, and will always stay at the same place (this is the default behaviour). If we have TL/TL and TL/BL, the inner box is resized vertically when its container is resized. If we have TL/TR and BR/TR, the inner box moves with the TR corner of its container. We could even define TL/BR and BR/TL, in which case increasing the size of the container box would shrink the size of the inner box... until it disappears completely!
+
+ This mechanism is controlled by the lefttop and rightbottom attributes of the controls.
+
+
+ constant ratio: When a box doesn't fill completely its container box, there is space on the top, bottom, left and right of the inner box. It is possible to force the ratio between the space on the top and the space on the bottom (or the one on the left and the one on the right) to be constant. Any resizing of the container box will then move the inner box accordingly, and the size of the inner box will never change (it overrides the corners anchoring mechanism). The horizontal and vertical ratios being independent, it is for example possible to keep only the horizontal ratio constant, in which case the inner box can still resize vertically (depending on its attributes for the corners anchoring, of course).
+
+ This mechanism is controlled by the xkeepratio and ykeepratio attributes of the controls.
+
+
+
+
+
@@ -1078,6 +1205,24 @@ difficulty to understand how VLC skins work.
+
+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 Bezier curves work (see http://astronomy.swin.edu.au/~pbourke/curves/bezier/ for a nice introduction), the main thing to know is that a Bezier curve can be characterized by a set of points. Once you have them (thanks to the CurveMaker utility for example), you just need to enter the list of points in the points attribute. Here is an example with 3 points: points="(2,50),(45,120),(88,50)".
+
+Bezier curves can be used with the Slider and Anchor tags:
+
+
+ For sliders, it defines the curve followed by the cursor of the slider. This curve is of course invisible, so if you want a visible background for your Slider you need to provide it yourself using a SliderBackground or Image tag.
+ For anchors, the use of Bezier curves is more anecdotic. Its purpose is to have non-ponctual anchor, the whole curve becoming the anchor. In this case, a ponctual anchor (and only a ponctual one) can be attracted by any point of the curve, if it is in its range of action. In fact, you can consider the curve as an easy way to define at once many anchors that share the same properties (except their position, of course :)).
+
+
+The coordinates are relative to the upper-left corner of the control (i.e. to its x and y attributes).
+
+
+
Tools and advice
@@ -1085,7 +1230,7 @@ difficulty to understand how VLC skins work.
Generating Bezier curves
-To generate easily Bezier curves, you can use the curve-maker (sorry, this is for Windows users only). 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 to form the points attribute of your Slider or Playlist. The curve-maker also allows to load a .bmp file, this could be useful if you want to follow a specific pattern of a slider, for example.
+To generate easily Bezier curves, you can use the CurveMaker utility (sorry, this is for Windows users only). 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 to form the points attribute of your Slider or Anchor. The curve-maker also allows to load a .bmp file, this could be useful if you want to follow a specific pattern of a slider, for example.
This tool was made for the first version of the skins and has not been modified since then. This explains why it does not use PNG files and why it does not generate directly the value of the points attribute.
@@ -1106,26 +1251,17 @@ VLC is able to give warnings and error messages about a loaded skin if it finds
Relative paths
-
-
-For the Bitmap tags, do not 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.
-
+ For the Bitmap tags, do not 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.Get inspiration
-
-
-In order to use plainly the possibilities given, you should look at how existing skins are made, it may give you ideas for your own skins...
-
+ In order to use plainly the possibilities given, you should look at how existing skins are made, it may give you ideas for your own skins... You can also consult on the wiki a list of features usually expected from a skin. Submit your skin!
-
-
-Once your skin is finished, you can share it with other people. The easiest way is probably to send it by email to vlc -at- videolan -dot- org, so that we can put it on the website with the other ones.
-
+ Once your skin is finished, you can share it with other people. The easiest way is probably to send it by email to vlc -at- videolan -dot- org, so that we can put it on the website with the other ones. You can also post it in the skins forum. Feel free to ask for support there if you have any problems...