Skinning

You can change the appearance add / remove functionality of EP Player by editing the skin images and XML file.

Listed below are the elements available in the skinning language:

  • element
  • preloader
  • image
  • bar
  • animation
  • button
  • font
  • textfield
  • scrollbox
  • scrollbar
  • playlist
  • playlist_item
  • visualization
  • slider


    Element

    element
    An element can be used as container to group other elements or to draw colored squares on the interface.

    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:

    <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:

    <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:

    <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:

    <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):

    <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:

    <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:

    <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:

    <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:

    <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:

    <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:

    <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:

    <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)

    <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)