MP3 Mix DJ MP3 software bpm music beat matching - AtomixMP3
MP3 mix DJ Software - AtomixMP3
[contact] [press] [team] [site map]
EnglishSpanish
[VirtualDJ 2]
[download] [features] [add-ons] [forum] [goodies] [support] [home]
[toc] [faq] [online manual] [developers] [ask a question]

Skin Creation Reference

This little documentation should help you understand how to create or modify a skin.

First, every skin is made of two files, named:


The BMP file

The .bmp file contains all the graphics needed in your skin.
You can use any bitmap editor (from Paint to Photoshop) to modify or create it.
The bitmap should have a width of 800, and a height of at least 600 (but usually more).
In the first 600 rows you'll find the background used for your skin.
The next rows are used to store additional graphics, like pushed or selected buttons.

The XML file

The .xml file describes each element of your skin.
For each element, it defines what it should be used for, where are the graphics used for its various states (in coordinates from the .bmp file), and various other things.
The xml file can be edited from a simple text editor (like notepad), but it's more likely that you will install a specific xml editor (by the way, by default, Windows will open a .xml file in internet explorer where you can read it but can't modify it).

The xml file is composed of a root element (AtomixSkin), which contains all the elements of your skin.
There are 7 different types of elements:


1 - the <button> element

The syntax of the button element is <button action="" chan="">.
chan can take its value between "1", "2" or "both" (default).
action can take its value between:

  • nothing : Useful to make a zone react to the mouse (with over for example) with no action
  • close : Close the software and return to Windows
  • minimize : Minimize the software to the taskbar
  • maximize : Switch to or from the fullscreen mode
  • play : Play the song on desk "chan"
  • pause : Pause the song on desk "chan"
  • stop : Stop the song on desk "chan"
  • magic : play and synchronize the song on desk "chan"
  • cue : Set the main cue point (memorize the actual position as the start of the song) on desk "chan"
  • select : Set the desk "chan" as the active desk
  • pitch_reset : Reset the pitch to 100% (slowly if pushed once, immediately if pushed twice) on desk "chan"
  • play_pause : Play the song on desk "chan" if it's paused, or pause it if it's playing
  • cue_stop : Cue the song on desk "chan" if it's paused, or stop it if it's playing
  • sync_pitch : Synchronize the pitch on desk "chan"
  • sync_level : Synchronize the level on desk "chan"
  • sync_beat : Synchronize the beat on desk "chan"
  • mix : Start an auto-mix
  • loop4th : Enter or exit a loop on quarter of a beat (from v2.1 only)
  • loop2th : Enter or exit a loop on half a beat (from v2.1 only)
  • loop1 : Enter or exit a loop on 1 beat (from v2.1 only)
  • loop2 : Enter or exit a loop on 2 beats (from v2.1 only)
  • loop4 : Enter or exit a loop on 4 beats (from v2.1 only)
  • loop8 : Enter or exit a loop on 8 beats (from v2.1 only)
  • effect1 : Activate the first effect (from v2.1 only)
  • effect2 : Activate the second effect (from v2.1 only)
  • effect3 : Activate the third effect (from v2.1 only)
  • eqreset : Reset bass, medium and high to 0db (from v2.1 only)
  • killbass : Kill bass (from v2.1 only)
  • killmedium : Kill medium (from v2.1 only)
  • killhigh : Kill high (from v2.1 only)
  • gotocue1 : Rewind to the cuepoint 1 (from v2.1 only)
  • gotocue2 : Rewind to the cuepoint 2 (from v2.1 only)
  • gotocue3 : Rewind to the cuepoint 3 (from v2.1 only)
  • gotocue4 : Rewind to the cuepoint 4 (from v2.1 only)
  • gotocue5 : Rewind to the cuepoint 5 (from v2.1 only)
  • setcue1 : Save the actual position as cuepoint 1 (from v2.1 only)
  • setcue2 : Save the actual position as cuepoint 2 (from v2.1 only)
  • setcue3 : Save the actual position as cuepoint 3 (from v2.1 only)
  • setcue4 : Save the actual position as cuepoint 4 (from v2.1 only)
  • setcue5 : Save the actual position as cuepoint 5 (from v2.1 only)
  • menu_files : Set the file page on the browser element
  • menu_search : Set the search page on the browser element
  • menu_samples : Set the samples page on the browser element
  • menu_effects : Set the effects page on the browser element
  • menu_record : Set the record page on the browser element
  • menu_config : Set the config page on the browser element

Then, as child elements of the <button> element, you find its definitions.
The available definitions of a button are:

  • <size width="" height=""> : Give the width and height of the button
  • <pos x="" y=""> : Give the position of the button on the screen
  • <up x="" y=""> : Give the coordinate of the graphic to use when the button is normal
  • <down x="" y=""> : Give the coordinate of the graphic to use when the button is pushed
  • <selected x="" y=""> : Give the coordinate of the graphic to use when the button is selected
  • <over x="" y=""> : Give the coordinate of the graphic to use when the mouse is over the button
  • <overselected x="" y=""> : Give the coordinate of the graphic to use when the mouse is over the button and the button is selected
  • <downselected x="" y=""> : Give the coordinate of the graphic to use when the button is pushed and selected
  • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the button
  • <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the button
  • <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
  • <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask
Except for size and pos, all the other definitions are optional

2 - the <slider> element

The syntax of the slider element is <slider action="" chan="" orientation="" dblclick="" rightclick="" direction="">.
The properties values are:

  • action : Possible values:
    • crossfader: no chan required for this one
    • pitch : set the pitch
    • level : set the level
    • bass : set the bass eq
    • medium : set the medium eq
    • high : set the high eq
    • gain : set the gain
    • song_pos : set (and show) the position in the song
    • preview : crossfade the headphone preview(from v2.1 only)
    • bassfader : crossfade only the bass(from v2.1 only)
    • mediumfader : crossfade only the medium(from v2.1 only)
    • highfader : crossfade only the high(from v2.1 only)
  • chan : Possible values: "1", "2" or "both"
  • orientation : Possible values:
    • horizontal, for a simple horizontal slider
    • vertical, for a simple vertical slider
    • circle, for a circular slider
    • round, for a knob-like button
  • dblclick : define the action to take when the user double click on the slider:
    • cut : Set the slider to zero
    • boost : Set the slider to full
    • reset : Set the slider to its default value
    • auto : Set the slider to a wise value (for a pitch or gain slider, it will match bpm or level)
  • rightclick : define the action to take when the user right-click on the slider:
    • bend : Set the actual value back when the mouse button is released
    • cut : Bend the slider to zero
    • boost : Bend the slider to full
    • reset : Set the slider to its default value
    • auto : Set the slider to a wise value (for a pitch or gain slider, it will match bpm or level)
  • direction (horizontal and vertical sliders only) : possible values: "up" (default) or "down"
And its definitions are:

3 - the <textzone> element

The syntax of the textzone element is <textzone chan="" geterrormessage="" resetcounter="">.
The properties values are:

  • chan : Can be set to "1" or "2" if chan specific information is displayed
  • geterrormessage : if set to "true", this textzone will display error messages if any
  • resetcounter : if set to "true", the counter will be reset if this textzone is clicked
The textzone definitions are:
  • <size width="" height=""> : Give the width and height of the textzone
  • <pos x="" y=""> : Give the position of the textzone on the screen
  • <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the textzone
  • <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
  • <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask
  • <text font="" weight="" size="" color="" align="" format=""> : Specify the text to be displayed with these properties:
    • font : select the font to be used (default: arial)
    • weight : possible values: "normal" (default) or "bold"
    • size : give the font size (default: 12)
    • color : give the font color (default: white). The color can be written in numerical format (#0000FF) or with the color name ("blue")
    • align : possible values: "left", "right", "center" (or "middle")
    • format : this string defines what will be written (see the exact format below)
  • <text2 font="" weight="" size="" color="" align="" format=""> : Specify an alternate text to be displayed if the user click on the textzone.
The format is a string that describes how the text will be displayed.
It can contain a few embedded commands:
  • \\ : print a single \ character
  • \n : print a line feed
  • \r : print a carriage return
  • \t : print a tab character
  • \xx : print the ascii character xx
  • %% : print a single % character
  • %yy : goto to the yy line
  • %xx,yy : goto to the xx,yy position
  • %title : print the song's title
  • %author : print the song's author
  • %fullhour : display the time in a hh:mm:ss format
  • %hour : display the time in a hh:mm format
  • %counter : display a counter
  • %pitch : print the pitch value
  • %time : print the length of the song (can use modifiers - see below)
  • %spent : print the spent time of the song (can use modifiers)
  • %left : print the left time of the song (can use modifiers)
  • %cue : print the time to the cue point (can use modifiers)
  • %first : print the time to the first beat (can use modifiers)
  • %end : print the time to the last beat (can use modifiers)
  • %bpm : print the bpm of the song (can use modifiers)
  • %level : print the song's level in dB (can use modifiers)
  • %comment : print the song's comment if any
Some of the % commands can be used with modifiers. Modifiers are capitalized letters you insert between the % and the command. You can use:
  • P : modify the value to reflect the pitch change
  • L : use the local value instead of the global value
  • B : display the value as a number of beat instead of a time

4 - the <dropzone> element

A dropzone is a zone where a file could be dragged over in order to load it.

The syntax of the dropzone element is <dropzone chan="">.
The properties values are:

  • chan : possible values: "1", "2", "active" (default) or "playlist"
The dropzone definitions are:
  • <size width="" height=""> : Give the width and height of the dropzone
  • <pos x="" y=""> : Give the position of the dropzone on the screen
  • <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the dropzone
  • <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
  • <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask

5 - the <beattap> element

A beattap is a zone that changes its display to reflect the rhythm in the music

The syntax of the beattap element is <beattap chan="" transparent="">.
The properties values are:

  • chan : possible values: "1", "2" or "both" (default)
  • transparent : If set to "true", the display is a smooth superposition of the up and down graphics. Else it's either one or the other.
The beattap definitions are:
  • <size width="" height=""> : Give the width and height of the beattap
  • <pos x="" y=""> : Give the position of the beattap on the screen
  • <up x="" y=""> : Give the coordinate of the graphic to use when the beattap is low
  • <down x="" y=""> : Give the coordinate of the graphic to use when the beattap is high
  • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the beattap

6 - the <rhythm> element

The rhythm element defines where and how the rhythm curves will be displayed.

The syntax of the rhythm element is <rhythm>.

The rhythm definitions are:

  • <size width="" height=""> : Give the width and height of the rhythm window
  • <pos x="" y=""> : Give the position of the rhythm window on the screen
  • <color back="" chan1="" chan2="" both=""> : Give simple colors to the curves. The colors must be a key in the standard VGA palette. This can be faster on slower systems than to use the chan1, chan2 and both definitions (see below)
  • <up x="" y=""> : give the background graphic to be used
  • <chan1 x="" y=""> : give the graphic to be used when drawing the curve for the first desk
  • <chan2 x="" y=""> : give the graphic to be used when drawing the curve for the second desk
  • <both x="" y=""> : give the graphic to be used when drawing a point that belong to both curves

7 - the <browser> element

The browser element sets the space that will be used to draw the windows (search, files, ...).
You can only have one browser element in a given skin file, but you do have to define one.

The syntax of the browser element is <browser>.

The browser definitions are:

  • <size width="" height=""> : Give the width and height of the browser window
  • <pos x="" y=""> : Give the position of the browser window on the screen
  • <text font="" size="" weight="" color="" over="" selected=""> : Give the main text's font, size and colors
  • <options font="" size="" weight="" color="" over="" selected=""> : Give the options text's font, size and colors
  • <widgets font="" size="" weight="" color="" facecolor="" lightcolor="" shadowcolor="" highlightcolor="" darkshadowcolor="" stripescolor="" trackcolor1="" trackcolor2=""> : Give the colors and font for the widgets (scrollbars, ...)
  • <colormatrix rr="" rg="" rb="" gr="" gg="" gb="" br="" bg="" bb=""> : Set a color transformation matrix that will be applied on the built-in graphics (icons, ...)

[contact] [press] [team] [site map]
[download] [features] [add-ons] [forum] [support] [home]
MP3 DJ Mix software DJ - AtomixMP3 - (c)2001
© copyright 2001 Atomix Productions
[disclaimer]