skins-howto.txt
上传用户:kjfoods
上传日期:2020-07-06
资源大小:29949k
文件大小:16k
源码类别:

midi

开发平台:

Unix_Linux

  1. Note: This document is short and highly incomplete. If you want to write a new,
  2. decent one, it will be more than welcome!
  3. Basic principles
  4. ================
  5. A skin (or theme, the two words have almost the same meaning) for VLC is made
  6. of many BMP files (Windows Bitmap format) containing all the images needed, and
  7. of an XML file describing how these images should be displayed, what happens
  8. when the user clicks on a button, etc.
  9. Those of you who have already done skins for other softwares shouldn't have too
  10. many difficulties to understand how all this works.
  11. Bezier curves
  12. =============
  13. One cool thing with VLC sliders is that they are not necessarily rectilinear,
  14. but they can follow any Bezier curve. So if you want to have a slider moving
  15. on a half-circle, or even doing a loop, you can !
  16. This is not the place to explain how these curves work, the only thing to know
  17. is that a Bezier curve can be caracterised by a set of points. Once you have
  18. them (thanks to the graphical utility presented at the end of this file, for
  19. example), you just need to enter the list of abscissas in the 'abs' attribute
  20. and the list of ordinates (in the same order...) in the 'ord' attribute. The
  21. separator is the coma. Example: abs="2,45,88" ord="50,120,50"
  22. Bezier curves are used for the SliderControl and the PlaylistControl tags.
  23. The bitmaps
  24. ===========
  25. Basically, you need one bitmap file by state of control. For example, with a
  26. image control you'll need 1 image, with a button 2 images (or 3 if you provide
  27. the disabled state). A slider will also need 2, one for the static part and
  28. another for the mobile part. Of course, the same bitmap file can be used for
  29. many controls, provided you want to display the same image!
  30. The bitmap format doesn't allow a transparent color, but in the XML file you
  31. can specify a color that will be considered as transparent wherever it appears
  32. in the bitmap file.
  33. The XML file
  34. ============
  35. XML is a markup language, like HTML. It won't be explained here any further,
  36. please use Google if you don't know what is XML. You'll see, it's rather easy
  37. to understand.
  38. The XML file used for the VLC skins follows a predefined DTD. You can find this
  39. DTD in VLC CVS, and its reading is strongly advised, since it contains most of
  40. the default values used for the parameters. A skin that doesn't follow the DTD
  41. with which VLC was compiled won't be loaded by VLC (and it might even crash
  42. it...).
  43. For a better comprehension of what follows, you should have a look at the DTD
  44. (in modules/gui/skin/parser/dkin.dtd) and/or at an example of valid xml skin
  45. (such as modules/gui/skin/skins/default/theme.xml).
  46. OK, let's go for an enumeration of the different tags and theor attributes :
  47.  - Theme: The main tag.
  48.    Attributes:
  49.      - magnet: allows to select the range of action (in pixels) of magnetism
  50.        with border of screen : that is to say when the distance between the
  51.        border of the screen and a window is less than this value, the window
  52.        will stick to the border. 0 means no magnetism.
  53.        Default is "9".
  54.  - ThemeInfo: You can enter here some information about you (but this
  55.    information is currently unused by VLC...)
  56.    Attributes :
  57.      - name: not yet supported.
  58.      - author: not yet supported.
  59.      - email: not yet supported.
  60.      - webpage: not yet supported.
  61.  - Bitmap: Associates a bitmap file with a name (=identifiant) that will be
  62.    used by the various controls. Obviously, you need one Bitmap tag for each
  63.    bitmap file you have.
  64.    Attributes:
  65.      - id: this is the name of the bitmap that will be used with controls
  66.        (2 bitmaps shouldn't have the same name).
  67.      - alphacolor: this is the transparency color of the bitmap. It must be
  68.        indicated with the following format: "#RRGGBB" (where RR stands for the
  69.        hexadecimal value of the red component, GG for the green one, and BB for
  70.        the blue one).
  71.      - file: this attribute is used to indicate the path and name of the bitmap
  72.        file used. This path can be absolute (but you should avoid it as often as
  73.        possible), or relative to the path of the xml file.
  74.  - Event: An action that will be associated to a control later.
  75.    Attributes :
  76.      - id: this is the name of the event that will be used with controls.
  77.        (2 events shouldn't have the same name).
  78.      - event: see events-howto.txt
  79.      - key: this is the shortcut key associated with the event. This means that
  80.        the event will be executed when hitting the correspounding key. It must
  81.        be indicated with the following format : "MOD+L" where "MOD" is the
  82.        modifier key ("CTRL" or "ALT") and "L" is the letter in uppercase
  83.        ("MOD+" is optionnal).
  84.        Default is "none".
  85.  - Font: Declares a font to be used in a TextControl or PlaylistControl.
  86.    Attributes :
  87.       - id: this is the name of the font that will be used with controls.
  88.         Default is "default". (2 fonts shouldn't have the same name).
  89.       - font: this is the name of the font
  90.         Default is "arial".
  91.       - size: this is the size of the font in points (pt).
  92.         Default is "12".
  93.       - color: this is the color of the font with the following format,
  94.         "#RRGGBB" (see Bitmap).
  95.         Default is "#000000" (black).
  96.       - weight: this is the weight of the font. It must be between 0 and 1000
  97.         Default is "400" (normal weight). Fewer is thinner...
  98.       - italic: sets if the font must be in italic format.
  99.         Default is "false".
  100.       - underline: sets if the font must be underlined.
  101.         Default is "false".
  102.  - Window: A window that will appear on screen.
  103.       - id: this is the name of the window (it will be only used for events
  104.         but it is important: 2 windows shouldn't have the same name).
  105.       - visible: sets if the window should appear or not at the launch of VLC.
  106.         Default is "true".
  107.       - x: sets the left position of the window.
  108.         Default is "0".
  109.       - y: sets the top position of the window.
  110.         Default is "0".
  111.       - fadetime: sets the time in milliseconds of the hide/show fading
  112.         transition.
  113.         Default is "500".
  114.       - alpha: sets the transparency of the window. It must be between 1 and
  115.         255. 1 is nearly total transaprency and should be avoided. 255 is total
  116.         opacity.
  117.         Default is "255". You should use high values.
  118.       - movealpha: sets the transparency of the window when the window is
  119.         moving. Same range as alpha.
  120.         Default is "255".
  121.       - dragdrop: sets if drag and drop of media files is allowed in this
  122.         window.
  123.         Default is "true".
  124.       - playondrop: sets if a drop file is played directly (true) or only
  125.         enqueud (false). This has no effect if dragdrop is set to "false".
  126.         Default is "true".
  127.  - ControlGroup: Adds an offset to the elements it contains. A ControlGroup is
  128.    only supposed to ease the job of the skin designer, who can adjust the
  129.    position of a group of controls without modifying all the coordinates, but
  130.    you can ignore it if you want (only one ControlGroup is necessary, just
  131.    inside Window). ControlGroup tags can be nested.
  132.    Attributes :
  133.      - x: try and guess.
  134.        Default is "0".
  135.      - y: what do you think ?
  136.        Default is "0".
  137.  - Anchor: Creates a "magnetic point" in the current Window. If an anchor of
  138.    another Window enters in the range of action of this anchor, the 2 anchors
  139.    will automatically be on the same place, and the windows are "sticked". Each
  140.    anchor has a priority ('priority' attribute), and the anchor with the
  141.    highest priority is the winner, which means that when moving its Window all
  142.    the other anchored Windows will move too. To break the effect of 2 linked
  143.    anchors, you need to move the Window whose anchor has the lower priority.
  144.    Attributes :
  145.      - x: is it really necessary to explain ?
  146.        Default is "0".
  147.      - y: ...
  148.        Default is "0".
  149.      - priority: priority of anchor (see the previous description).
  150.        No default, must de defined!
  151.      - range: Range of action of the anchor in pixels.
  152.        Default is "10".
  153.  - ImageControl, ButtonControl, CheckBoxControl, TextControl, SliderControl,
  154.    PlaylistControl: The various visual controls that constitute a Window. They
  155.    share some properties: 'x' and 'y' for the position, 'visible' for the
  156.    initial state, 'id' for identifying them (only needed if you want to create
  157.    an event acting on this particular control) and 'help' for a short
  158.    description of the control that could be displayed in a special TextControl
  159.    (see below). All the controls can also accept events, and you have the
  160.    possibility to associate many events to a control at once, separing them
  161.    with semicolons.
  162.  - ImageControl: Creates a simple image. Useful for backgrounds.
  163.      - image: this attribute must be set to an identifiant of a Bitmap tag.
  164.      - onclick: the 'event' attribute can be used to associate an event to the
  165.        image (the event is triggered by a click on the image).
  166.        Typical use: an Event made with 'WINDOW_MOVE(window)' (where 'window' is
  167.        the id of a Window) can be associated to an ImageControl of this
  168.        Window. Hence the Window can be moved via the image...
  169.  - ButtonControl: Creates a button.
  170.      - up: identifiant of a Bitmap. Used for drawing the up state of the
  171.        button.
  172.      - down: identifiant of a Bitmap. Used for drawing the down state of the
  173.        button.
  174.      - disabled : identifiant of a Bitmap. Used for drawing the disabled state
  175.        of the button.
  176.      - onclick: event executed when clicking on the button.
  177.        Default is "none".
  178.      - onmouseover: event executed when the mouse cursor enters the button.
  179.        Default is "none".
  180.      - onmouseout: event executed when the mouse cursor leaves the button.
  181.        Default is "none".
  182.      - tooltiptext : used to display a tooltip.
  183.        Default is "none" (no tooltip).
  184.  - CheckBoxControl: Creates a checkbox, i.e. a button with 2 states
  185.    (checked/unchecked). So you need 6 images for a full-featured checkbox: each
  186.    state has a basic image, an image corresponding to a click not yet released,
  187.    and an image for the disabled control. If you supply only the basic images,
  188.    the other ones will be identical.
  189.    Attributes:
  190.      - img1: identifiant of a Bitmap. Used for drawing control in state 1.
  191.      - clickimg1: identifiants of a bitmap. Used for drawing control when
  192.        clicking on it in state 1.
  193.        Default is the value of 'img1' attribute.
  194.      - img2: identifiant of a Bitmap. Used for drawing control in state 2.
  195.      - clickimg2: identifiant of a Bitmap. Used for drawing control when
  196.        clicking on it in state 2.
  197.        Default is the value of 'img2' attribute.
  198.      - disabled1: identifiant of a Bitmap. Used for drawing control in state 1
  199.        when disabling.
  200.        Default is the value of 'img1' attribute.
  201.      - disabled2: identifiant of a Bitmap. Used for drawing control in state 1
  202.        when disabling.
  203.        Default is the value of 'img2' attribute.
  204.      - onclick1: event executed when clicking on the control in state 1.
  205.        Default is "none".
  206.      - onclick2: event executed when clicking on the control in state 2.
  207.        Default is "none".
  208.      - onmouseover1: event executed when the mouse cursor enters the button in
  209.        state 1.
  210.        Default is "none".
  211.      - onmouseout1: event executed when the mouse cursor leaves the button in
  212.        state 1.
  213.        Default is "none".
  214.      - onmouseover2: event executed when the mouse cursor enters the button in
  215.        state 2.
  216.        Default is "none".
  217.      - onmouseout2: event executed when the mouse cursor leaves the button in
  218.        state 2.
  219.        Default is "none".
  220.  - TextControl: Creates a text.
  221.    Attributes:
  222.      - font: the font to use, which must be one of the Font identifiants.
  223.      - text: the text to display.
  224.      - align: either 'left' or 'center' or 'right'.
  225.        Default is "left".
  226.      - scroll: if set to 'true', the text will scroll if it does not fit into
  227.        the 'scrollspace'.
  228.        Default is "true".
  229.      - scrollspace: size in pixel between two occurrences of the text when
  230.        scrolling.
  231.        Default is "20".
  232.      - display: this value is a bit special, it allows to have a text
  233.        auto-updated by VLC. Possible values are 'time', 'left_time',
  234.        'total_time', 'file_name' (for the current file name with its path),
  235.        'title' (for the file name without the path) and 'help' (for a help
  236.        about the controls that defined their 'help' attribute).
  237.        You can specify several types by separating them with semicolons. To
  238.        switch between then, just double click on the text.
  239.        Useful to switch between 'time' and 'left_time'.
  240.      - width: Width of the text in pixels. If set to "0", the width is
  241.        automatically calculated to fit with the current text.
  242.        Default is "0".
  243.  - SliderControl: Creates a slider. The 'abs' and 'ord' attributes are needed
  244.    for the Bezier curve that the slider will follow. 'up' and 'down' are the
  245.    images of the slider. The 'tooltiptext' attribute works, and the slider will
  246.    automatically append the percentage of the position.
  247.    Attributes:
  248.      - type: two 'types' of sliders are predefined: 'time' for a slider
  249.        allowing to seek in the stream, and 'volume' for a volume slider.
  250.        Default is "time".
  251.      - up: identifiant of a Bitmap.
  252.      - down: identifiant of a Bitmap.
  253.      - abs: see SliderControl description and bezier curve description.
  254.      - ord: see SliderControl description and bezier curve description.
  255.      - tooltiptext: used to display a tooltip.
  256.        Default is "none" (no tooltip).
  257.  - PlaylistControl: Creates a playlist. This tag must contain a SliderControl
  258.    tag (to allow scrolling in the playlist). If the playlist contains entries
  259.    wider than the list width, an automatic tooltip will appear with
  260.    the full name of the entry. The other attributes are rather easy to
  261.    understand...
  262.    Attributes:
  263.      - width: width of the list in pixels. This is the whole width for file
  264.        name, number of files in the playlist and info text.
  265.        Default is "200".
  266.      - infowidth: width of the info text in pixels.
  267.        Default is "50".
  268.      - font: the font to use, which must be one of the Font identifiants.
  269.      - playfont: the font to use for current playing file, which must be one of
  270.        the Font identifiants.
  271.        Default is "none".
  272.      - selcolor: color in "#RRGGBB" format of the selected files.
  273.        Default is "#0000FF" (blue).
  274.      - abs: see PlaylistControl description and bezier curve description.
  275.      - ord: see PlaylistControl description and bezier curve description.
  276. Compression
  277. ===========
  278. Once your skin is finished, instead of keeping many bitmap files and the XML
  279. file, you can compress them in a .tar.gz archive (Winzip and UmtimateZip can do
  280. it perfectly, for example). Before doing so, don't forget to rename your XML
  281. file into "theme.xml", or VLC won't be able to read it... Then rename your
  282. compressed file with the .vlt extension and... that's all! VLC can load
  283. directly skins with the .vlt extension.
  284. Tools and advice
  285. ================
  286.  - To generate easily Bezier curves, you can use the curve-maker. Basically,
  287.    you add and remove points at will, and you can move them to see how the
  288.    curve evolves. When you have reached the perfect curve, you just have to
  289.    copy-paste the list of abscissas and ordinates into the 'abs' and 'ord'
  290.    attributes of your SliderControl or PlaylistControl. The curve-maker also
  291.    allows to load a bitmap, this could be useful if you want to follow a
  292.    specific pattern of a slider, for example.
  293.  - When you are creating your skin, you may want to see the VLC messages where
  294.    some errors are logged. For this, open a dos window, go to the directory
  295.    where VLC is installed, and type "vlc -I skin -v --extraintf logger". This
  296.    should open VLC and a log window (what's more, the logs should be saved in a
  297.    file called vlc-log.txt). The interesting lines are those with "skin
  298.    interface"...
  299.  - For the Bitmap tags, don't use absolute paths but relative paths (they are
  300.    relative to the XML file directory), so that your skin can be reused by
  301.    anybody without a particular file structure.
  302.  - To fully use the possibilities given, you should look at how other skins are
  303.    made, it's often very useful.
  304. Good luck!