Element
element
An element can be used as container to group other elements or to draw colored squares on the interface.
example:
example:
<element width="100%" x="0" y="0" height="75" bgcolor="0xFF000000"> </element>
parameters applicable to all skin elements
| width / height (optional) |
The width / height of the element. width="75" Sets the width in pixels. width="100%" Sets the width as percentage. |
|---|---|
| x / y (optional) |
The x / y position of the element. x="75" Sets the x position in pixels. x="100%" Sets the x position as percentage. |
| margin (optional) |
The margin of the element in pixels. margin="10" Sets the margin of all sides at once. margin="0 5 15 10" Sets the margin of the sides individually. The order is: top right bottom left. |
| bgcolor (optional) |
The background color of the element. bgcolor="0x0000BB" Sets the color in RGB bgcolor="0x880000BB" Sets the color in ARGB (with alpha). |
Preloader
preloader
The preloader element shows the loading status of the skin.
It should always be the first element in the skin and cannot contain images or other element that should be loaded.
Inside the preloader there should be an element with id INDICATOR.
This element will be scaled to from 0% to 100% to indicate the loading progress.
example:
It should always be the first element in the skin and cannot contain images or other element that should be loaded.
Inside the preloader there should be an element with id INDICATOR.
This element will be scaled to from 0% to 100% to indicate the loading progress.
example:
<preloader bgcolor="0x000000" x="50%" y="50%" width="50%" height="5"> <element id="INDICATOR" bgcolor="0xFFFFFF" width="100%" height="100%" /> </preloader>
Image
image
Loads and displays a GIF, JPG or PNG image.
example:
example:
<image src="myimage.png" x="0" y="0" width="100%" height="75" />
image parameters
| src (required) |
The path to the image. |
|---|---|
| id (optional) |
The function of the image, possible id's are:
BUFFERING PLAYING PAUSED STOPPED ERROR ALBUM_ART LOADING_PLAYLIST ERROR_PLAYLIST The following id's are only available in a playlist_item. ALBUM_ART_PLAYLIST The following id's are only available in a visualization element. FFT SCOPE PEAK WAVE |
Bar
bar
A horizontal or vertical scalable image. A bar has a middle part that is scaled and two sides that remain unscaled.
example:
example (horizontal):
example:
<bar src="mybar.png" orientation="h" width="100%" />The image should define the 3 parts seperated by a line. This line must be 1 pixel and in color #FF00FF so the player can detect the parts.
example (horizontal):
parameters
| orientation (required) |
The orientation of the bar, h (horizontal) or v (vertical) |
|---|---|
| id (optional) |
The function of the bar, possible id's are:
The following id's are only available in slider. BACKGROUND HANDLE |
Animation
animation
Animated image.
example:
example:
example:
<animation src="myanimation.png" frames="5" speed="0.5" />The image should be a vertical image-strip that contains the animation frames.
example:
parameters
| frames (required) |
The total number of frames in the image-strip |
|---|---|
| speed (required) |
The speed of the animation. 0 = slow and 1 = fast |
| id (optional) |
The function of the animation, possible id's are:
BUFFERING PLAYING PAUSED STOPPED ERROR LOADING_PLAYLIST ERROR_PLAYLIST |
Button
button
Dispays a button
example (normal):
The normal button requires 3 frames and the toggle 6 frames.
example:
example (normal):
<button src="mybutton.png" id="NEXT" />example (toggle):
<button src="mybutton.png" toggle="true" id="PLAY_PAUSE" />The image should be a vertical image-strip that contains the different button states.
The normal button requires 3 frames and the toggle 6 frames.
example:
parameters
| toggle (optional) |
If set to true the button will behave as toggle button |
|---|---|
| id (optional) |
The function of the button, possible id's are:
BUFFERING PREV NEXT PLAY_PAUSE PLAY PAUSE STOP SHUFFLE REPEAT MUTE The following id's are only available in playlist_item. PLAY JSCALL |
Font
font
Loads a font that can be used in a textfield
example:
EP Player can use all characters that are included the textfield in the font file.
Please check out the example flash file (.fla) here: verdana.zip
The id of the font can later be assigned to a textfield. This way the textfield knows what font to use.
Fonts always need to be declared before textfields in the skin.xml file.
example:
<font src="verdana.swf" id="FONT1" />The font is a very simple swf file that has a font embedded.
EP Player can use all characters that are included the textfield in the font file.
Please check out the example flash file (.fla) here: verdana.zip
The id of the font can later be assigned to a textfield. This way the textfield knows what font to use.
Fonts always need to be declared before textfields in the skin.xml file.
parameters
| src (required) |
The font file |
|---|---|
| id (required) |
The id of the font |
Textfield
textfield
Shows a textfield. What is displayed in the textfield depends on the id or text parameters.
example:
example:
<textfield id="INFO" text="" font="FONT1" font_color="0xFF0000" font_size="28" />
parameters
| id (optional) |
The function of the textfield, possible id's are:
TIME The time of the current playing song. CUR_CREATORNAME The creator of the current playing song. CUR_SONGNAME The name of the current playing song. CUR_CREATORNAME_SONGNAME The creator and name of the current playing song. CUR_DURATION The duration of the song. The following id's are only available in playlist_item. DURATION The duration of the song. CREATORNAME The creator of the song. SONGNAME The name of the song. CREATORNAME_SONGNAME The creator and name of the song. |
|---|---|
| text (optional) |
The default text that is displayed on load. |
| font (required) |
The id of the font to be used in this textfield |
| font_color (optional) |
The color of the text |
| font_size (optional) |
The size of the text |
Scrollbox
scrollbox
Creates a scrollbox where you can place other elements in. You should add scrollbars to the scrollbox element yourself.
example:
example:
<scrollbox width="300" height="200" scroll_speed="10"> <!-- your elements here --> <scrollbar orientation="v" height="100%" width="10" x="100%"> <bar id="BACKGROUND" height="100%" src="scrollbar-y-bg.png" /> <bar id="HANDLE" src="scrollbar-y-handle.png" /> </scrollbar> </scrollbox>
parameters
| scroll_speed (required) |
The scroll speed (amount of pixels scrolled) when using the mouse wheel. For example, you can use this in a scrolling playlist to make steps of exactly one item. |
|---|
Scrollbar
scrollbar
Creates a scrollbar inside a scrollbox element.
The scrollbar exists out of two standard bar elements.
example:
example:
<scrollbox width="300" height="200" scroll_speed="10"> <!-- your elements here --> <scrollbar orientation="v" height="100%" width="10" x="100%"> <bar id="BACKGROUND" height="100%" src="scrollbar-y-bg.png" /> <bar id="HANDLE" src="scrollbar-y-handle.png" /> </scrollbar> </scrollbox>
parameters
| orientation (required) |
The orientation of the bar, h (horizontal) or v (vertical) |
|---|
Playlist
playlist
The container element for the playlist_item element.
example:
example:
<playlist> <!-- your elements here --> </playlist>
Playlist item
playlist_item
The playlist_item element is basically a template for a playlist item.
All items in the playlist will look like it is defined here.
example:
All items in the playlist will look like it is defined here.
example:
<playlist> <playlist_item width="100%" height="39"> <button id="PLAY" toggle="true" src="b-playlist.gif" width="100%" /> <textfield id="CREATORNAME_SONGNAME" width="100%" font="FONT1" /> </playlist_item> </playlist>
Visualization
visualization
The visualization element generates animated imagery based on the music that is playing.
There are 4 modes: FFT, SCOPE, PEAK and WAVE.
The images inside the the element contain the colors of each mode.
example:
There are 4 modes: FFT, SCOPE, PEAK and WAVE.
The images inside the the element contain the colors of each mode.
example:
<visualization width="300" height="200"> <image src="fft.gif" id="FFT" width="100%" height="100%" /> <image src="scope.gif" id="SCOPE" width="100%" height="100%" /> <image src="peak.gif" id="PEAK" width="100%" height="100%" /> <image src="wave.gif" id="WAVE" width="100%" height="100%" /> </visualization>
Slider
slider
Displays a slider. A slider can be used as volume control (VOLUME) or MP3 position control TRANSPORT.
In the slider element there are 3 elements, these elements together will form the slider element:
A background bar with id BACKGROUND.
A indicator bar with id INDICATOR.
A handle button element with id HANDLE.
example: (transport bar)
In the slider element there are 3 elements, these elements together will form the slider element:
A background bar with id BACKGROUND.
A indicator bar with id INDICATOR.
A handle button element with id HANDLE.
example: (transport bar)
<slider id="TRANSPORT" orientation="h" width="100%"> <bar id="BACKGROUND" src="background.gif" /> <bar id="INDICATOR" src="indicator.gif" /> <button id="HANDLE" src="handle.png" /> </slider>
slider parameters
| id (required) |
The function of the slider, possible id's are:
TRANSPORT VOLUME |
|---|---|
| orientation (required) |
The orientation of the bar, h (horizontal) or v (vertical) |