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