Creating a skin

To create a skin, simply create a new folder in the 'skins' folder.
This way you have a place to store all the images that are needed for this skin.



Now create a new xml file and name it 'skin.xml' and store this file in your folder.



Open this file in a text editor like notepad and copy the following 'empty skin code' in your xml file and save it.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<skin version="1.0.0">
    <layout>

     <!-- place your skin elements here -->

    </layout>
</skin>

You can now add your skin elements to this XML file.
To use this skin, change the skin parameter in your HTML file so it looks like this:

so.addVariable("skin", "skins/my_skin/skin.xml");


Skin elements

  • Image
  • Button
  • Link Button
  • Font
  • Display
  • Visualization
  • Playlist
  • Slider
  • Album Art
  • E-Phonic Icon

    Image
    Displays an image.

    <image src="myimage.png" x="0" y="0"></image>

    Parameters:
    src The location where the image (GIF JPG or PNG) is stored.
    x The x position of the image on the skin.
    y The y position of the image on the skin.

    Button
    Displays a button.

    <button id="PLAY" src="mybutton.png" x="116" y="82" frameH="42"></button>

    Parameters:
    src The location where the image (GIF JPG or PNG) is stored.
    x The x position of the image on the skin.
    y The y position of the image on the skin.
    id The function of the button.
    Possible functions are:
    PLAY  :  Start playing the MP3 file
    STOP  :  Stops playing the MP3 file
    PAUSE  :  Pauses the MP3 file
    NEXT  :  Plays the next MP3 file in the playlist
    PREV  :  Plays the previous MP3 file in the playlist
    REPEAT  :  Toggles the repeat playlist mode
    SHUFFLE  :  Toggles the shuffle playlist mode
    MUTE  :  Toggles mute
    frameH The height of one frame in the button image-strip.
    Button images work like an vertical image-strip with a frame for each button state.


    Link Button
    Displays a button that opens an URL when it is pressed.

    <linkbutton frameH="42" x="0" y="0" src="b_mywebsite.png" url="http://www.e-phonic.com/"></linkbutton>

    Parameters:
    src The location where the image (GIF JPG or PNG) is stored.
    x The x position of the image on the skin.
    y The y position of the image on the skin.
    url The URL that will be opened when the button is pressed.
    frameH The height of one frame in the button image-strip.
    Button images work like an vertical image-strip with a frame for each button state.

    Font
    Defines a bitmap font that can be used on a display.
    The image should contain mono-spaced characters.

    <font id="TEXT" src="font.png" charW="6" charH="8" chars="ABC123"></font>

    Parameters:
    src The location where the image (GIF JPG or PNG) is stored.
    id An unique identifier.
    This id can be passed to a display object so it knows what font to use.
    charW The width of one character in the image
    charH The height of one character in the image
    chars A list of characters in order as they appear in the image.

    Display
    Displays text.

    <display id="SONGINFO" width="166" height="8" x="88" y="58" font="TEXT" defaultText=""></display>

    id The function of the display.
    Possible functions are:
    SONGINFO : the player will use this display to show the song info.
    SONGTIME : the player will use this display to show the song time.
    The id parameter is optional. When it's left out, you can use a display to show your own text on the player.
    It will display the text you define in 'defaultText'.
    x The x position of the display on the skin.
    y The y position of the display on the skin.
    width The width of the display.
    height The height of the display.
    font The id of the font to use for this display.
    defaultText The text to show on the display.

    Visualization
    Shows a graphical representation of the audio that is played

    <visualization x="155" y="20" width="99" height="29" color="0xFF79D1FF" clickList="fft, scope, wave, peak">
        <fft src="fft.png" blur="0"></fft>
        <scope src="scope.png" blur="8"></scope>
        <wave src="wave.png" blur="0"></wave>
        <peak src="peak.png" blur="0"></peak>
    </visualization>

    Parameters for visualization:
    x The x position of the visualization on the skin.
    y The y position of the visualization on the skin.
    width The width of the visualization.
    height The height of the visualization.
    color ARGB color to use to draw the visualization (if no images are defined)
    clickList The order of the visualization-modes when clicked.
    You can also remove modes you don't want to display here.
    Possible modes are:
    fft  :  Shows the FFT spectrum of the audio
    scope  :  Shows a small part of the waveform of the audio
    wave  :  Draws the waveform of the audio as it plays
    peak  :  Shows the volume level of the audio.
    When no FTT data can be read from the mp3 file, the player will use this mode for visualization in stead.

    Parameters for fft, scope, wave, peak:
    src The location where the image (GIF JPG or PNG) is stored that will be used to draw the visualization mode with.
    Every drawn pixel will have the color of the pixel in the image that is on this x/y position.
    blur The amount of the blur effect (from 0 to 10).

    Playlist
    Shows the playlist of the player.

    <playlist x="7" y="156" width="255" height="50" font="TEXT">
        <button src="b_playlist.png" frameH="10" txtX="7" txtY="1" ></button>
    </playlist>

    Parameters for playlist:
    x The x position of the playlist on the skin.
    y The y position of the playlist on the skin.
    width The width of the playlist.
    height The height of the playlist.
    font The id of the font to use to display the song names.

    Parameters for button:
    src The location where the image (GIF JPG or PNG) is stored.
    frameH The height of one frame in the button image-strip.
    Button images work like an vertical image-strip with a frame for each button state.
    txtX The x position where the text should start on the button.
    txtY The y position where the text should start on the button.

    Slider
    Displays a slider.

    <slider id="PLAYLIST" x="248" y="153" orientation="vertical">
        <background src="scrollbar_bg.png"></background>
        <handle src="handle.png" frameH="12"></handle>
        <indicator src="scrollbar_indicator.png"></indicator>
    </slider>


  • The background node defines the background image of the slider.
  • The handle node defines the the draggable handle of the slider. The frameH property works the same as with a button element.
  • The indicator node defines the indicator image of the slider.
    This image is masked so it only shows the part from the start of the slider till the handle.

    Parameters for slider:
    x The x position of the image on the skin.
    y The y position of the image on the skin.
    id The function of the slider.
    Possible functions are:
    TRANSPORT  :  The transport bar
    VOLUME  :  The volume slider
    PLAYLIST  :  The playlist scrollbar
    orientation The orientation of the slider.
    Can be horizontal or vertical

    Album Art
    Displays the image for the song that is playing if specified in the playlist.xml

    <albumart x="12" y="11" width="68" height="68">
        <default src="albumart_default.png"></default>
        <loading src="albumart_loading.png"></loading>
        <error src="albumart_error.png"></error>
    </albumart>

    Parameters:
    x The x position of the album art on the skin.
    y The y position of the album art on the skin.
    width The width of the album art. The loaded images will be scaled to fit.
    height The height of the album art. The loaded images will be scaled to fit.

    The default node specifies the image that is displayed when a song does not have an Album Art image defined.
    The loading node specifies the image that is displayed when Album Art image is loading.
    The error node specifies the image that is displayed when Album Art image cannot be loaded.

    E-Phonic icon
    Displays the E-Phonic icon on the skin.
    This icon can only be removed when the player is registered.

    <ephonic_icon x="8" y="91"></ephonic_icon>

    Parameters:
    x The x position of the E-Phonic icon on the skin.
    y The y position of the E-Phonic icon on the skin.