1982
|
1 <html>
|
|
2 <head>
|
|
3 <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
|
|
4 <title>MPlayer skin format</title>
|
|
5 <style type="text/css">
|
|
6 em.note {color: green}
|
|
7 em.warn {color: red}
|
|
8 </style>
|
|
9 </head>
|
|
10
|
|
11 <body bgcolor=white text=black>
|
|
12
|
|
13 <h1 align="center">MPlayer skin format</h1>
|
|
14
|
|
15 <hr>
|
|
16
|
|
17 <h2>Contents</h2>
|
|
18
|
|
19 <ul type=disc>
|
|
20 <li><a href="#intro">1 Introduction</a></li>
|
|
21 <li><a href="#overview">2 Overview</a></li>
|
|
22 <ul type=circle>
|
|
23 <li><a href="#dirs">2.1 Directories</a></li>
|
|
24 <li><a href="#images">2.2 Images</a></li>
|
|
25 <li><a href="#parts">2.3 Parts of a skin</a></li>
|
|
26 <li><a href="#files">2.4 Files</a></li>
|
|
27 </ul>
|
|
28 <li><a href="#skin">3 The <code>skin</code> file</a></li>
|
|
29 <ul type=circle>
|
|
30 <li><a href="#mainwin">3.1 Main window</a></li>
|
|
31 <li><a href="#subwindow">3.2 Subwindow</a></li>
|
|
32 <li><a href="#skinmenu">3.3 Skin menu</a></li>
|
|
33 </ul>
|
|
34 <li><a href="#fonts">4 Fonts</a></li>
|
|
35 <ul type=circle>
|
|
36 <li><a href="#symbols">4.1 Symbols</a></li>
|
|
37 </ul>
|
|
38 <li><a href="#guimsg">Appendix A: GUI messages</a></li>
|
|
39 </ul>
|
|
40
|
|
41 <hr>
|
|
42
|
|
43 <div align=center>
|
|
44 Last modified: Sep 10, 2001
|
|
45 </div>
|
|
46
|
|
47 <hr>
|
|
48
|
|
49 <h2><a name="intro">1 Introduction</a></h2>
|
|
50
|
|
51 The purpose of this document is to describe the MPlayer skin format.
|
|
52 The information contained here might be wrong, for <em>a)</em> it is not me
|
|
53 who wrote the GUI, <em>b)</em> the GUI is not finished, <em>c)</em> I might
|
|
54 be wrong. So do not be surprised if something does not work as described here.
|
|
55
|
|
56 <p>
|
|
57 Thanks to <em>Zoltán Ponekker</em> for his help.
|
|
58
|
|
59 <p>
|
|
60 <em>András Mohari <mayday@freemail.hu></em>
|
|
61
|
|
62
|
|
63 <h2><a name="overview">2 Overview</a></h2>
|
|
64
|
|
65 It does not really have anything to do with the skin format, but you should
|
|
66 know that <em>MPlayer has <b>no</b> builtin skin, so <b>at least one skin
|
|
67 must be installed in order to be able to use the GUI.</b></em>
|
|
68
|
|
69
|
|
70 <h3><a name="dirs">2.1 Directories</a></h3>
|
|
71
|
|
72 The directories searched for skins are (in order):
|
|
73 <pre>
|
|
74 /usr/local/share/mplayer/Skin/
|
|
75 ~/.mplayer/Skin/
|
|
76 </pre>
|
|
77
|
|
78 <p>
|
|
79 Note that the first path may vary according to the way MPlayer was configured
|
|
80 (see the <code>--datadir</code> argument of the <code>configure</code>
|
|
81 script).
|
|
82
|
|
83 <p>
|
|
84 Every skin is installed into its own directory under one of the directories
|
|
85 listed above, for example:
|
|
86 <pre>
|
|
87 /usr/local/share/mplayer/Skin/default/
|
|
88 </pre>
|
|
89
|
|
90
|
|
91 <h3><a name="images">2.2 Image formats</a></h3>
|
|
92
|
|
93 Images must be truecolor (24 or 32 bpp) and can be in
|
|
94 BMP, PNG and TGA format (note that TGA images must be uncompressed).
|
|
95 <em>The preferred format is PNG as it compresses very well.</em>
|
|
96
|
|
97 <p>
|
|
98 In the main window (see below) you can use images with `transparency':
|
|
99 regions filled with the color #FF00FF (<font color="#FF00FF">magenta</font>)
|
|
100 are fully transparent when viewed by MPlayer. This means that you can even
|
|
101 have shaped windows if your X server has the XShape extension.
|
|
102
|
|
103
|
|
104 <h3><a name="parts">2.3 Parts of a skin</a></h3>
|
|
105
|
|
106 Skins are quite free-format (unlike the fixed-format skins of
|
|
107 Winamp/XMMS, for example), so it is up to you to create something great.
|
|
108
|
|
109 <p>
|
|
110 Currently there are three windows to be decorated: the
|
|
111 <a href="#mainwin">main window</a>, the <a href="#subwindow">subwindow</a> and
|
|
112 the <a href="#skinmenu">skin menu</a> (which can be activated by a right
|
|
113 click).
|
|
114
|
|
115 <ul>
|
|
116 <li>
|
|
117 The <b>main window</b> is where you can control MPlayer. The background of
|
|
118 the window is an image. Various items can (and must) be
|
|
119 placed in the window: <em>buttons</em>, <em>potmeters</em> (sliders, if
|
|
120 you like it better) and <em>labels</em>. For every item, you must
|
|
121 specify its position and size.
|
|
122
|
|
123 <p>
|
|
124 A <b>button</b> has three states (pressed, released,
|
|
125 disabled), so its image must be divided into three parts vertically.
|
|
126 See the <a href="#main.button">button</a> item for details.
|
|
127 <p>
|
|
128 A <b>potmeter</b> (mainly used for the seek bar and volume/balance
|
|
129 control) can have any number of phases by dividing its image into different
|
|
130 parts below each other.
|
|
131 See <a href="#main.hpotmeter">hpotmeter</a> and
|
|
132 <a href="#main.potmeter">potmeter</a> for details.
|
|
133
|
|
134 <p>
|
|
135 <b>Labels</b> are a bit special: the characters needed to draw them are taken
|
|
136 from an image file, and the characters in the image are described
|
|
137 by a <a href="#fonts">font description file</a>.
|
|
138 The latter is a plain text file which specifies
|
|
139 the x,y position and size of each character in the image. (So the
|
|
140 image file and its font description file form a font <em>together</em>.)
|
|
141 See <a href="#main.dlabel">dlabel</a> and <a href="#main.slabel">slabel</a>
|
|
142 for details.
|
|
143
|
|
144 <p>
|
|
145 <em class=note>
|
|
146 <b>Note:</b> all images can have full transparency as described in the
|
|
147 section about <a href="#images">image formats</a>.
|
|
148 </em>
|
|
149 </li>
|
|
150
|
|
151 <li>
|
|
152 The <b>subwindow</b> is where the movie appears. It can display a specified
|
|
153 image if there is no movie loaded (it is quite boring to have an empty
|
|
154 window :-))
|
|
155 <em class=note><b>Note:</b> transparency
|
|
156 is <b>not allowed</b> here.</em>
|
|
157 </li>
|
|
158
|
|
159 <li>
|
|
160 The <b>skin menu</b> is just a way to control MPlayer by means of
|
|
161 menu entries. Two images are required for the menu: one of them is the base
|
|
162 image that shows the menu in its normal state, the other one is used to
|
|
163 display the selected entries. When you pop up the menu, the first image is
|
|
164 shown. If you move the mouse over the menu entries, the currently selected
|
|
165 entry is copied from the second image over the menu entry below the mouse
|
|
166 pointer. (So the second image is never shown in whole.)
|
|
167 <p>
|
|
168 A menu entry is defined by its position and size in the image (see the
|
|
169 section about the <a href="#skinmenu">skin menu</a> for details).
|
|
170 </li>
|
|
171 </ul>
|
|
172
|
|
173 <p>
|
|
174 There is an important thing not mentioned yet: for buttons, potmeters and
|
|
175 menu entries to work, MPlayer must know what to do if they are clicked.
|
|
176 This is done by <a href="#guimsg">messages</a> (events). For these items
|
|
177 you must define the messages to be genereated when they are clicked.
|
|
178
|
|
179 <h3><a name="files">2.4 Files</a></h3>
|
|
180
|
|
181 You need the following files to build a skin.
|
|
182 <ul>
|
|
183 <li>
|
|
184 The configuration file named <a href="#skin">skin</a> tells MPlayer how
|
|
185 to put different parts of the skin together and what to do if you click
|
|
186 somewhere in the window.
|
|
187 </li>
|
|
188 <li>The background image for the main window.</li>
|
|
189 <li>Images for the items in the main window (including one or more font
|
|
190 description files needed to draw labels).</li>
|
|
191 <li>The image to be displayed in the subwindow (optional).</li>
|
|
192 <li>Two images for the skin menu (they are needed only if you want to create
|
|
193 a menu).
|
|
194 </ul>
|
|
195
|
|
196 With the exception of the skin configuration file, you can name the other
|
|
197 files whatever you want (but note that font description files must have
|
|
198 .fnt extension).
|
|
199
|
|
200
|
|
201 <h2><a name="skin">3 The <code><b>skin</b></code> file</a></h2>
|
|
202
|
|
203 <p>
|
|
204 As mentioned above, this is the skin configuration file.
|
|
205 It is line oriented; comment lines start with a '<code>;</code>' character
|
|
206 at the beginning of the line (only spaces and tabs are allowed before the
|
|
207 '<code>;</code>').
|
|
208
|
|
209 <p>
|
|
210 The file is made up of sections. Each section describes the skin for an
|
|
211 application and has the following form:
|
|
212 <table border=1 width="100%"><tr bgcolor=silver><td><pre>
|
|
213 section = <i>section name</i>
|
|
214 .
|
|
215 .
|
|
216 .
|
|
217 end
|
|
218 </pre></td></tr></table>
|
|
219
|
|
220 <p>
|
|
221 Currently there is only one application, so you need only one section:
|
|
222 its name is <b>movieplayer</b>.
|
|
223
|
|
224 <p>
|
|
225 Within this section each window is described by a block in the following form:
|
|
226 <table border=1 width="100%"><tr bgcolor=silver><td><pre>
|
|
227 window = <i>window name</i>
|
|
228 .
|
|
229 .
|
|
230 .
|
|
231 end
|
|
232 </pre></tr></td></table>
|
|
233 where <i>window name</i> can be one of these strings:
|
|
234 <ul>
|
|
235 <li><b>main</b> - for the main window</li>
|
|
236 <li><b>sub</b> - for the subwindow</li>
|
|
237 <li><b>menu</b> - for the skin menu</li>
|
|
238 </ul>
|
|
239
|
|
240 <p>
|
|
241 (The sub and menu block is optional---you do not need to create a menu or
|
|
242 to decorate the subwindow.)
|
|
243
|
|
244 <p>
|
|
245 Within a window block, you can define each item for the window
|
|
246 by a line in this form:
|
|
247
|
|
248 <blockquote>
|
|
249 <pre>
|
|
250 item = parameter
|
|
251 </pre>
|
|
252 </blockquote>
|
|
253
|
|
254 <p>
|
|
255 where <i>item</i> is a string that identifies the type of the GUI item,
|
|
256 <i>parameter</i> is a numeric or textual value (or a list of values
|
|
257 separated by commas).
|
|
258 </p>
|
|
259
|
|
260 <p>
|
|
261 Putting the above together, the whole file looks something like this:
|
|
262
|
|
263 <p>
|
|
264 <table border=1 width="100%"><tr bgcolor=silver><td><pre>
|
|
265 section = movieplayer
|
|
266 window = main
|
|
267 ; ... items for main window ...
|
|
268 end
|
|
269
|
|
270 window = sub
|
|
271 ; ... items for subwindow ...
|
|
272 end
|
|
273
|
|
274 window = menu
|
|
275 ; ... items for skin menu ...
|
|
276 end
|
|
277 end
|
|
278 </pre></tr></td></table>
|
|
279
|
|
280 <p>
|
|
281 Finally some words about specifying images for the various items.
|
|
282 <br>
|
|
283 The name of an image file must be given without leading directories---
|
|
284 images are searched in the directory of the skins. You may (but you need not)
|
|
285 specify the file's extension. If the file doesn't exist, MPlayer tries to
|
|
286 load the file <i><filename>.<ext></i>, where <i>tga</i>,
|
|
287 <i>TGA</i>, <i>bmp</i>, <i>BMP</i>, <i>png</i> and <i>PNG</i> is tried
|
|
288 for <i><ext></i> (in this order). The first matching file will be used.
|
|
289
|
|
290 <p>
|
|
291
|
|
292 <table border=1 cellpadding=5 width="100%"><tr bgcolor="#ffffcc"><td>
|
|
293 Here is an example to make this clear. Suppose that you have an image called
|
|
294 <i>main.png</i> that you use for the main window:
|
|
295 <blockquote>
|
|
296 <pre>
|
|
297 base = main, -1, -1
|
|
298 </pre>
|
|
299 </blockquote>
|
|
300
|
|
301 MPlayer tries to load <i>main</i>, <i>main.tga</i>, <i>main.TGA</i>,
|
|
302 <i>main.bmp</i> etc, so <i>main.png</i> will be found.
|
|
303 <br>
|
|
304 If (by accident) you wrote
|
|
305 <blockquote>
|
|
306 <pre>
|
|
307 base = main.bmp, -1, -1
|
|
308 </pre>
|
|
309 </blockquote>
|
|
310 then <i>main.bmp</i>, <i>main.bmp.tga</i>, <i>main.bmp.TGA</i>,
|
|
311 <i>main.bmp.bmp</i> would be searched and MPlayer would finally give up
|
|
312 because there is no <i>main.bmp</i> in the directory, but <i>main.png</i>.
|
|
313 </td></tr></table>
|
|
314
|
|
315
|
|
316 <h3><a name="mainwin">3.1 Main window</a></h3>
|
|
317
|
|
318 Below you can see the list of items that can be used in the
|
|
319 '<code>window = main</code>' . . . '<code>end</code>' block.
|
|
320
|
|
321 <dl>
|
|
322 <dt><a name="main.base">
|
|
323 <b>base = <i>image, x, y</i></b>
|
|
324 </a></dt>
|
|
325 <dd>
|
|
326 Lets you specify the background image to be used for the main window.
|
|
327 The window will appear at the given <i>x</i>,<i>y</i> position
|
|
328 on the screen (0,0 is the top left corner). You can specify -1 for center
|
|
329 and -2 for right (x) and bottom (y). The window will be as large as the image.
|
|
330 <p>
|
|
331 <em class=warn>
|
|
332 <b>Warning:</b> transparent regions in the image (colored #FF00FF) appear
|
|
333 black on X servers without the XShape extension.
|
|
334 </em>
|
|
335 </dd>
|
|
336 </dl>
|
|
337
|
|
338 <dl>
|
|
339 <dt><a name="main.button">
|
|
340 <b>button = <i>image, x, y, width, height, message</i></b></a></dt>
|
|
341 <dd>
|
|
342 Place a button of <i>width</i> * <i>height</i> size at the
|
|
343 <i>x</i>,<i>y</i> position. The specified message is generated when
|
|
344 the button is clicked.
|
|
345 The image given by <i>image</i> must have three parts below each other
|
|
346 (according to the possible states of the button), like this:
|
|
347 <div align=center><table><tr><td><pre><small>
|
|
348 +------------+
|
|
349 | pressed |
|
|
350 +------------+
|
|
351 | released |
|
|
352 +------------+
|
|
353 | disabled |
|
|
354 +------------+
|
|
355 </small></pre></td></tr></table></div>
|
|
356 </dd>
|
|
357 </dl>
|
|
358
|
|
359 <dl>
|
|
360 <dt><a name="main.decoration">
|
|
361 <b>decoration = enable|disable</b>
|
|
362 </a></dt>
|
|
363 <dd>
|
|
364 Enable or disable window manager decoration of the main window. Default
|
|
365 is <b>disable</b>.
|
|
366 </dd>
|
|
367 </dl>
|
|
368
|
|
369 <dl>
|
|
370 <dt>
|
|
371 <a name="main.hpotmeter">
|
|
372 <b>
|
|
373 hpotmeter = <i>butt, bw,bh, phases, numphases, default, x, y, w, h, msg</i>
|
|
374 </b>
|
|
375 </a>
|
|
376 </dt>
|
|
377 <dd>
|
|
378 Place a horizontal potmeter of <i>w</i> * <i>h</i> size at the
|
|
379 <i>x</i>,<i>y</i> position. The image can be divided into
|
|
380 different parts for the different phases of the potmeter (for example,
|
|
381 you can have a pot for volume control that turns from green to red
|
|
382 while its value changes from the minimum to the maximum.)
|
|
383 hpotmeter can have a button that can be dragged horizontally.
|
|
384 The parameters are:
|
|
385 <ul>
|
|
386 <li><i>butt</i> - the image to be used for the button
|
|
387 (must have three parts below each other, like in case of
|
|
388 <a href="#main.button">button</a>)</li>
|
|
389 <li><i>bw</i>, <i>bh</i> - size of the button</li>
|
|
390 <li><i>phases</i> - The image to be used for the different phases of the
|
|
391 hpotmeter. The image must be divided into <i>numphases</i> parts vertically
|
|
392 (see below). A special value of <kbd>NULL</kbd> can be used if you want
|
|
393 no such image.
|
|
394 </li>
|
|
395 <li><i>numphases</i> - number of phases stored in the <i>phases</i>
|
|
396 image</li>
|
|
397 <li><i>default</i> - default value for hpotmeter (in the range 0 to
|
|
398 100)</li>
|
|
399 <li><i>x</i>, <i>y</i> - position for the hpotmeter</li>
|
|
400 <li><i>w</i>, <i>h</i> - width and height of the hpotmeter</li>
|
|
401 <li><i>msg</i> - the message to be generated when the value of hpotmeter
|
|
402 is changed</li>
|
|
403 </ul>
|
|
404 The image used for the different phases must look something like this:
|
|
405 <div align=center><table border=0><tr><td><pre><small>
|
|
406 +------------+
|
|
407 | phase #1 |
|
|
408 +------------+
|
|
409 | phase #2 |
|
|
410 +------------+
|
|
411 ...
|
|
412 +------------+
|
|
413 | phase #n |
|
|
414 +------------+
|
|
415 </small></pre></td></tr></table></div>
|
|
416 <em class=note>
|
|
417 <b>Note:</b> there will be a vpotmeter item too, but is it not implemented
|
|
418 yet.
|
|
419 </em>
|
|
420 </dd>
|
|
421 </dl>
|
|
422
|
|
423 <dl>
|
|
424 <dt><a name="main.potmeter">
|
|
425 <b>potmeter = <i>phases, numphases, default, x, y, w, h, msg</i></b>
|
|
426 </a></dt>
|
|
427 <dd>
|
|
428 A potmeter without a button. (I guess it is ment to be turned round,
|
|
429 but it reacts to horizontal dragging only.)
|
|
430 For the description of the parameters see
|
|
431 <a href="#main.hpotmeter">hpotmeter</a>. <i>phases</i> can be
|
|
432 <code>NULL</code>, but its quite useless, since you can not see where
|
|
433 the potmeter is set.
|
|
434 </dd>
|
|
435 </dl>
|
|
436
|
|
437 <dl>
|
|
438 <dt><a name="main.font">
|
|
439 <b>font = <i>fontfile, fontid</i></b>
|
|
440 </a></dt>
|
|
441 <dd>
|
|
442 Defines a font. <i>fontfile</i> is the name of a font description file
|
|
443 with <code>.fnt</code> extension (<b>no need</b> to specify the extension
|
|
444 here).
|
|
445 <i>fontid</i> is used to refer to the font
|
|
446 (see <a href="#main.dlabel">dlabel</a> and <a href="#main.slabel">slabel</a>).
|
|
447 Up to 25 fonts can be defined.
|
|
448 </dd>
|
|
449 </dl>
|
|
450
|
|
451 <dl>
|
|
452 <dt><a name="main.dlabel">
|
|
453 <b>dlabel = <i>x, y, length, align, fontid, "text"</i></b>
|
|
454 </a></dt>
|
|
455 <dd>
|
|
456 Place a dynamic label at the <i>x</i>,<i>y</i> position. The label is called
|
|
457 dynamic because its text is refreshed periodically.
|
|
458 The maximum length of the label is given by <i>length</i> (its height is the
|
|
459 height of a character).
|
|
460 If the text to be displayed is wider than that, then it will be
|
|
461 scrolled, otherwise it is aligned within the specified space by the value
|
|
462 of the <i>align</i> parameter: 0 is for right, 1 is for center,
|
|
463 2 is for left.
|
|
464 <br>
|
|
465 The text to be displayed is given by <i>text</i>: it must be written between
|
|
466 double quotes (<code>"</code>) (but the <code>"</code> cannot be part of the
|
|
467 text). The label is displayed using the font identified by <i>fontid</i>.
|
|
468 You can use the following variables in the text.
|
|
469
|
|
470 <div align=center>
|
|
471 <table valign=top border=1>
|
|
472 <tr align=center><th>Variable</th><th align=left>Meaning</th></tr>
|
|
473 <tr><td align=center><kbd>$1</kbd></td>
|
|
474 <td>play time in <em>hh:mm:ss</em> format</td></tr>
|
|
475 <tr><td align=center><kbd>$2</kbd></td>
|
|
476 <td>play time in <em>mmmm:ss</em> format</td></tr>
|
|
477 <tr><td align=center><kbd>$3</kbd></td>
|
|
478 <td>play time in <em>hh</em> format (hours)</td></tr>
|
|
479 <tr><td align=center><kbd>$4</kbd></td>
|
|
480 <td>play time in <em>mm</em> format (minutes)</td></tr>
|
|
481 <tr><td align=center><kbd>$5</kbd></td>
|
|
482 <td>play time in <em>ss</em> format (seconds)</td></tr>
|
|
483 <tr><td align=center><kbd>$6</kbd></td>
|
|
484 <td>movie's length in <em>hh:mm:ss</em> format</td></tr>
|
|
485 <tr><td align=center><kbd>$7</kbd></td>
|
|
486 <td>movie's length in <em>mmmm:ss</em> format</td></tr>
|
|
487 <tr><td align=center><kbd>$8</kbd></td>
|
|
488 <td>play time in <em>h:mm:ss</em> format</td></tr>
|
|
489 <tr><td align=center><kbd>$v</kbd></td>
|
|
490 <td>volume in <em>xxx.xx%</em> format</td></tr>
|
|
491 <tr><td align=center><kbd>$V</kbd></td>
|
|
492 <td>volume in <em>xxx.x</em> format</td></tr>
|
|
493 <tr><td align=center><kbd>$b</kbd></td>
|
|
494 <td>balance in <em>xxx.xx%</em> format</td></tr>
|
|
495 <tr><td align=center><kbd>$B</kbd></td>
|
|
496 <td>balance in <em>xxx.x</em> format</td></tr>
|
|
497 <tr><td align=center><kbd>$$</kbd></td>
|
|
498 <td>the <kbd>$</kbd> character</td></tr>
|
|
499 <tr><td align=center><kbd>$a</kbd></td>
|
|
500 <td>a character according to the audio type (none: <code>n</code>,
|
|
501 mono: <code>m</code>, stereo: <code>t</code>)</td></tr>
|
|
502 <tr><td align=center><kbd>$t</kbd></td>
|
|
503 <td>track number (in playlist)</td></tr>
|
|
504 <tr><td align=center><kbd>$o</kbd></td>
|
|
505 <td>filename</td></tr>
|
|
506 <tr><td align=center><kbd>$f</kbd></td>
|
|
507 <td>filename in lower case</td></tr>
|
|
508 <tr><td align=center><kbd>$F</kbd></td>
|
|
509 <td>filename in upper case</td></tr>
|
|
510 <tr><td align=center><kbd>$T</kbd></td>
|
|
511 <td>a character according to the stream type (file: <code>f</code>,
|
|
512 video CD: <code>v</code>, DVD: <code>d</code>, URL: <code>u</code>)
|
|
513 </td></tr>
|
|
514 <tr><td align=center><kbd>$p</kbd></td>
|
|
515 <td>the "p" character (if a movie is playing and the font has the "p"
|
|
516 character)
|
|
517 </td></tr>
|
|
518 <tr><td align=center><kbd>$s</kbd></td>
|
|
519 <td>the "s" character (if the movie is stopped and the font has the "s"
|
|
520 character)
|
|
521 </td></tr>
|
|
522 <tr><td align=center><kbd>$e</kbd></td>
|
|
523 <td>the "e" character (if playback is paused and the font has the "e"
|
|
524 character)
|
|
525 </td></tr>
|
|
526 </table></div>
|
|
527 <p>
|
|
528 <b>Note:</b> The <kbd>$a</kbd>, <kbd>$T</kbd>, <kbd>$p</kbd>, <kbd>$s</kbd>
|
|
529 and <kbd>$e</kbd> variables all return characters that should be displayed
|
|
530 as special symbols (for example, "e" is for the pause symbol that usually
|
|
531 looks something like <code>||</code>). You should have a font for normal
|
|
532 characters and a different font for symbols.
|
|
533 See the section about <a href="#symbols">symbols</a> for more information.
|
|
534 </dd>
|
|
535 </dl>
|
|
536
|
|
537 <dl>
|
|
538 <dt><a name="main.slabel">
|
|
539 <b>slabel = <i>x, y, fontid, text</i></b>
|
|
540 </a></dt>
|
|
541 <dd>
|
|
542 Place a static label at the <i>x</i>,<i>y</i> position.
|
|
543 <i>text</i> is displayed using the font identified by <i>fontid</i>.
|
|
544 The text is just a raw string ($x variables do not work) that must be enclosed
|
|
545 between double quotes (the <code>"</code> cannot be part of the text).
|
|
546 The label is displayed using the font identified by <i>fontid</i>.
|
|
547 </dd>
|
|
548 </dl>
|
|
549
|
|
550
|
|
551 <h3><a name="subwindow">3.2 Subwindow</a></h3>
|
|
552
|
|
553 The following items can be used in the
|
|
554 '<code>window = sub</code>' . . . '<code>end</code>' block.
|
|
555
|
|
556 <dl>
|
|
557 <dt><a name="sub.base">
|
|
558 <b>base = <i>image, x, y, width, height</i></b>
|
|
559 </a></dt>
|
|
560 <dd>
|
|
561 The image to be displayed in the window.
|
|
562 The window will appear at the given <i>x</i>,<i>y</i> position
|
|
563 on the screen (0,0 is the top left corner). You can specify -1 for center
|
|
564 and -2 for right (x) and bottom (y). The window will be as large as the image.
|
|
565 <i>width</i> and <i>height</i> gives the size of the window; they are
|
|
566 optional (if they are missing, the window is the same size as the image).
|
|
567 </dd>
|
|
568 </dl>
|
|
569
|
|
570 <dl>
|
|
571 <dt><a name="sub.background">
|
|
572 <b>background = <i>r, g, b</i></b>
|
|
573 </a></dt>
|
|
574 <dd>
|
|
575 Lets you set the background color. It is useful if the image is smaller than
|
|
576 the window.
|
|
577 <i>r</i>, <i>g</i> and <i>b</i> specifies the red, green and blue
|
|
578 component of the color (each of them is a decimal number from 0 to 255).
|
|
579 </dd>
|
|
580 </dl>
|
|
581
|
|
582
|
|
583 <h3><a name="skinmenu">3.3 Skin menu</a></h3>
|
|
584
|
|
585 As mentioned earlier, the menu is displayed using two images.
|
|
586 Normal menu entries are taken from the image specified by the <i>base</i>
|
|
587 item, while the currently selected entry is taken from the image specified
|
|
588 by the <i>selected</i> item.
|
|
589 You must define the position and size of each menu entry by the <i>menu</i>
|
|
590 item.
|
|
591
|
|
592 <p>
|
|
593 These are the items that can be used in the '<code>window = menu</code>'
|
|
594 . . . '<code>end</code>' block.
|
|
595
|
|
596 <dl>
|
|
597 <dt><a name="menu.base">
|
|
598 <b>base = <i>image</i></b>
|
|
599 </a></dt>
|
|
600 <dd>
|
|
601 The image for normal menu entries.
|
|
602 </dl>
|
|
603 </dd>
|
|
604
|
|
605 <dl>
|
|
606 <dt><a name="menu.selected">
|
|
607 <b>selected = <i>image</i></b>
|
|
608 </a></dt>
|
|
609 <dd>
|
|
610 The image showing the menu with all entries selected.
|
|
611 </dd>
|
|
612 </dl>
|
|
613
|
|
614 <dl>
|
|
615 <dt><a name="menu.menu">
|
|
616 <b>menu = <i>x, y, width, height, message</i></b>
|
|
617 </a></dt>
|
|
618 <dd>
|
|
619 Defines the <i>x</i>,<i>y</i> position and the size of a menu entry in
|
|
620 the images. <i>message</i> is the message to be generated when
|
|
621 the mouse button is released over the entry.
|
|
622 </dd>
|
|
623 </dl>
|
|
624
|
|
625
|
|
626 <h2><a name="fonts">4 Fonts</a></h2>
|
|
627
|
|
628 As mentioned in the section about the parts of a skin, a font is defined
|
|
629 by an image and a description
|
|
630 file. You can place the characters anywhere in the image, but make sure that
|
|
631 their position and size is given in the description file exactly.
|
|
632
|
|
633 <p>
|
|
634 The font description file (with .fnt extension) can have comment
|
|
635 lines starting with '<code>;</code>'.
|
|
636 The file must have a line in the form
|
|
637 <blockquote>
|
|
638 <pre>
|
|
639 image = <i>image</i>
|
|
640 </pre>
|
|
641 </blockquote>
|
|
642
|
|
643 <p>
|
|
644 where <i>image</i> is the name of the image file to be used for
|
|
645 the font (you do not have to specify the extension).
|
|
646 The above line is followed by character definition lines of the form:
|
|
647
|
|
648 <blockquote>
|
|
649 <pre>
|
|
650 "<i>char</i>" = <i>x, y, w, h</i>
|
|
651 </pre>
|
|
652 </blockquote>
|
|
653
|
|
654 <p>
|
|
655 Here <i>x</i> and <i>y</i> specifies the position of the
|
|
656 <i>char</i> character in the image (0,0 is the upper left corner).
|
|
657 <i>w</i> and <i>h</i> is the width and height of the character
|
|
658 (in pixels, of course).
|
|
659
|
|
660 <p>
|
|
661 Here is an example that defines the A, B, C characters using font.png.
|
|
662 <table width="100%" border=1><tr bgcolor=silver><td><pre>
|
|
663 ; can be "font" instead of "font.png"
|
|
664 image = font.png
|
|
665
|
|
666 ; Three characters are enough for demonstration only. :-)
|
|
667 "A" = 0,0, 7,13
|
|
668 "B" = 7,0, 7,13
|
|
669 "C" = 14,0, 7,13
|
|
670 </pre></td></tr></table>
|
|
671
|
|
672
|
|
673 <h3><a name="symbols">4.1 Symbols</a></h3>
|
|
674
|
|
675 Some characters have special meanings when returned by some of the variables
|
|
676 used in
|
|
677 <a href="#main.dlabel">dlabel</a>; these characters are meant to be
|
|
678 displayed as symbols. (For example, in case of a DVD stream, you could display
|
|
679 a nice DVD logo instead of the character 'd'.)
|
|
680
|
|
681 <p>
|
|
682 The following table lists all the characters that can be used to display
|
|
683 symbols (and thus require a different font).
|
|
684
|
|
685 <div align=center>
|
|
686 <table>
|
|
687 <tr><th align=center>Character</th><th align=left>Symbol</th></tr>
|
|
688 <tr><td align=center><kbd>p</kbd></td>
|
|
689 <td align=left>play</td></tr>
|
|
690 <tr><td align=center><kbd>s</kbd></td>
|
|
691 <td align=left>stop</td></tr>
|
|
692 <tr><td align=center><kbd>e</kbd></td>
|
|
693 <td align=left>pause</td></tr>
|
|
694 <tr><td align=center><kbd>n</kbd></td>
|
|
695 <td align=left>no sound</td></tr>
|
|
696 <tr><td align=center><kbd>m</kbd></td>
|
|
697 <td align=left>mono sound</td></tr>
|
|
698 <tr><td align=center><kbd>t</kbd></td>
|
|
699 <td align=left>stereo sound</td></tr>
|
|
700 <tr><td align=center><kbd>f</kbd></td>
|
|
701 <td align=left>stream is a file</td></tr>
|
|
702 <tr><td align=center><kbd>v</kbd></td>
|
|
703 <td align=left>stream is a video CD</td></tr>
|
|
704 <tr><td align=center><kbd>d</kbd></td>
|
|
705 <td align=left>stream is a DVD</td></tr>
|
|
706 <tr><td align=center><kbd>u</kbd></td>
|
|
707 <td align=left>stream is a URL</td></tr>
|
|
708 </table>
|
|
709 </div>
|
|
710
|
|
711 <p>
|
|
712 <b>Note:</b> currently only 'p', 's', 'e', 'n', 'm' and 't' is used.
|
|
713 </p>
|
|
714
|
|
715 <h2><a name="guimsg">Appendix A: GUI messages</a></h2>
|
|
716
|
|
717 These are the messages that can be generated by buttons, potmeters and
|
|
718 menu entries.
|
|
719
|
|
720 <p>
|
|
721 <em class=note>
|
|
722 <b>Note:</b> some of the messages might not work as expected (or not
|
|
723 work at all). As you know, the GUI is under development.</em>
|
|
724
|
|
725 <p>
|
|
726 <i>Playback control:</i>
|
|
727 <blockquote>
|
|
728 <dl>
|
|
729 <dt><b>evNext</b>
|
|
730 <dd>Jump to next track in the playlist.
|
|
731
|
|
732 <dt><b>evPause</b>
|
|
733 <dd>Pause playing.
|
|
734
|
|
735 <dt><b>evPauseSwitchToPlay</b>
|
|
736 <dd>Forms a switch together with <i>evPlaySwitchToPause</i>. They can be
|
|
737 used to have a common play/pause button. Both messages should be assigned
|
|
738 to buttons displayed at the very same position in the window. This
|
|
739 message pauses playing and the image for the <i>evPlaySwitchToPause</i> button
|
|
740 is displayed (to indicate that the button can be pressed to continue playing).
|
|
741
|
|
742 <dt><b>evPlay</b>
|
|
743 <dd>Start playing.
|
|
744
|
|
745 <dt><b>evPlaySwitchToPause</b>
|
|
746 <dd>The opposite of <i>evPauseSwitchToPlay</i>. This message starts playing
|
|
747 and the image for the <i>evPauseSwitchToPlay</i> button is displayed (to
|
|
748 indicate that the button can be pressed to pause playing).
|
|
749
|
|
750 <dt><b>evPrev</b>
|
|
751 <dd>Jump to previous track in the playlist.
|
|
752
|
|
753 <dt><b>evStop</b>
|
|
754 <dd>Stop playing.
|
|
755 </dl>
|
|
756 </blockquote>
|
|
757
|
|
758 <p>
|
|
759 <i>Seeking in the stream:</i>
|
|
760 <blockquote>
|
|
761 <dl>
|
|
762 <dt><b>evBackward10sec</b>
|
|
763 <dt><b>evBackward1min</b>
|
|
764 <dt><b>evBackward10min</b>
|
|
765 <dd>Seek backward 10 seconds / 1 minute / 10 minutes.
|
|
766
|
|
767 <dt><b>evForward10sec</b>
|
|
768 <dt><b>evForward1min</b>
|
|
769 <dt><b>evForward10min</b>
|
|
770 <dd>Seek forward 10 seconds / 1 minute / 10 minutes.
|
|
771
|
|
772 <dt><b>evSetMoviePosition</b>
|
|
773 <dd>Seek to position (can be used by a potmeter; the relative
|
|
774 value (0-100%) of the potmeter is used).
|
|
775 </dl>
|
|
776 </blockquote>
|
|
777
|
|
778 <p>
|
|
779 <i>Video control:</i>
|
|
780 <blockquote>
|
|
781 <dl>
|
|
782 <dt><b>evDoubleSize</b>
|
|
783 <dd>Set the movie window to double size.
|
|
784
|
|
785 <dt><b>evFullScreen</b>
|
|
786 <dd>Switch fullscreen mode on/off.
|
|
787
|
|
788 <dt><b>evNormalSize</b>
|
|
789 <dd>Set the movie window to its normal size.
|
|
790 </dl>
|
|
791 </blockquote>
|
|
792
|
|
793 <p>
|
|
794 <i>Audio control:</i>
|
|
795 <blockquote>
|
|
796 <dl>
|
|
797 <dt><b>evDecAudioBufDelay</b>
|
|
798 <dd>Decrease audio buffer delay.
|
|
799
|
|
800 <dt><b>evDecBalance</b>
|
|
801 <dd>Decrease balance.
|
|
802
|
|
803 <dt><b>evDecVolume</b>
|
|
804 <dd>Decrease volume.
|
|
805
|
|
806 <dt><b>evIncAudioBufDelay</b>
|
|
807 <dd>Increase audio buffer delay.
|
|
808
|
|
809 <dt><b>evIncBalance</b>
|
|
810 <dd>Increase balance.
|
|
811
|
|
812 <dt><b>evIncVolume</b>
|
|
813 <dd>Increase volume.
|
|
814
|
|
815 <dt><b>evMute</b>
|
|
816 <dd>Mute/unmute the sound.
|
|
817
|
|
818 <dt><b>evSetBalance</b>
|
|
819 <dd>Set balance (can be used by a potmeter; the relative
|
|
820 value (0-100%) of the potmeter is used).
|
|
821
|
|
822 <dt><b>evSetVolume</b>
|
|
823 <dd>Set volume (can be used by a potmeter; the relative
|
|
824 value (0-100%) of the potmeter is used).
|
|
825 </dl>
|
|
826 </blockquote>
|
|
827
|
|
828 <p>
|
|
829 <i>Miscellaneous:</i>
|
|
830 <blockquote>
|
|
831 <dl>
|
|
832 <dt><b>evAbout</b>
|
|
833 <dd>Open the about window.
|
|
834
|
|
835 <dt><b>evEqualeaser</b>
|
|
836 <dd>Turn the equalizer on/off.
|
|
837
|
|
838 <dt><b>evExit</b>
|
|
839 <dd>Quit from the program.
|
|
840
|
|
841 <dt><b>evIconify</b>
|
|
842 <dd>Iconify the window.
|
|
843
|
|
844 <dt><b>evLoad</b>
|
|
845 <dd>Load a file (by opening a file browser window, where you can choose a
|
|
846 file).
|
|
847
|
|
848 <dt><b>evLoadPlay</b>
|
|
849 <dd>Does the same as <i>evLoad</i>, but it automatically starts
|
|
850 playing after the file is loaded.
|
|
851
|
|
852 <dt><b>evNone</b>
|
|
853 <dd>Empty message, it has no effect. (Except maybe in CVS versions. :-))
|
|
854
|
|
855 <dt><b>evPlayList</b>
|
|
856 <dd>Open/close the playlist window.
|
|
857
|
|
858 <dt><b>evPreferences</b>
|
|
859 <dd>Open the preferences window.
|
|
860
|
|
861 <dt><b>evSkinBrowser</b>
|
|
862 <dd>Open the skin browser window.
|
|
863 </dl>
|
|
864 </blockquote>
|
|
865
|
|
866 </body>
|
|
867 </html>
|