VDJPedia



 Skin SDK7

Wiki HOME

Skin Developer SDK - Version 7


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

First, every skin is made of two files, named:
  • the_name_of_your_skin.bmp
  • the_name_of_your_skin.xml

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 will usually have a width of 1024, and a height of more than 768.
In the first 768 rows you'll find the background used for your skin.
The next rows are used to store additional graphics, like pushed or selected buttons.

Note: JPG and PNG files can also be used, but BMP offers better quality than JPG and better compressibility than PNG.

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 (Skin), which contains all the elements of your skin.
The main elements you will use are:
  • logo
  • button
  • slider
  • browser
  • rhythm
  • rhythmzone (Since VirtualDJ v7)
  • songpos
  • scratch
  • scratchwave (Since VirtualDJ v6)
  • textzone
  • visual
  • dropzone
  • grabzone
  • pannel


Note: Although the "pannel" parameter isn't shown in each element's syntax, all elements can be placed in a pannel.

The <logo> element

The syntax of the logo element is <logo>.

The logo definitions are:
  • <pos x="" y=""/> : Give the position of the logo on the screen
  • <size width="" height=""/> : Give the width and height of the logo


The <button> element

The syntax of the button element is <button action="" rightclick="" dblclick="" pannel="">.
  • action is a VDJScript action that will be performed when the button is pressed
  • rightclick can specify a different value if the button is clicked with the right mouse button
  • leftclick can specify a different value if the button is clicked with the left mouse button
  • dblclick can specify a different value if the button is double-clicked
  • pannel can put the button into a specific pannel
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
  • <tooltip> : Set the tooltip for this button
  • <text format="" dx="" dy="" ...> : Set a text to be drawn inside the button (see <textzone>)
Except for size and pos, all the other definitions are optional


The <slider> element

The syntax of the slider element is <slider action="" dblclick="" rightclick="" pannel="" orientation="" direction="" relative="">.
The properties values are:
  • action is a VDJScript action that will be performed when the button is pressed
  • rightclick can specify a different value if the slider is clicked with the right mouse button
  • leftclick can specify a different value if the slider is clicked with the left mouse button
  • dblclick can specify a different value if the slider is double-clicked
  • pannel can put the slider into a specific pannel
  • 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
  • direction (horizontal and vertical sliders only) : possible values: "up" (default) or "down"
  • relative : if set to "yes", the slider will move its associated value relatively
And its definitions are:
  • <size width="" height=""> : Give the width and height of the slider
  • <pos x="" y=""> : Give the position of the slider on the screen
  • <up x="" y=""> : Give the coordinate of the graphic to use when the slider is normal
  • <selected x="" y=""> : Give the coordinate of the graphic to use when the slider is selected
  • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the slider
  • <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 slider
  • <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
  • <fader> (horizontal and vertical sliders only) : The definition is the same as a <button> element without an action, and it will act as a fader for the slider
  • <circle x="" y="" anglemin="" anglemax="" sectsize="" direction=""> (circle sliders only) : define the circular slider geometry with these properties:
    • x : center of the circle
    • y : center of the circle
    • anglemin : angle (in degree) for the zero position of the slider
    • anglemax : angle (in degree) for the maximum position of the slider
    • sectsize : if not zero (default value), the slider will have a "fader" of sectsize width
    • direction : possible values: "cw" (default) or "ccw"
  • <fader move="" sensibility=""> (round sliders only) : The move possible values are "full", "horz", "vert", "v" or "circ".
    The <fader> element may contains these definitions:
    • <pos x="" y="" nb="" nbx=""> : give the coordinate of the graphics to use for the slider (depending on the slider value). If nbx is specified, the graphic is split on several rows
    • <over x="" y="" nb="" nbx=""> : give the coordinate of the graphics to use when the mouse is over the slider

The <browser> element

The browser element sets the space that will be used to draw the windows (search, files, ...).
Prior to VirtualDJ 7, you can only have one browser element in a given skin file, but you do have to define one.
Since VirtualDJ 7, several browser elements can be defined in different pannels of a skin, but only one browser at a time can be displayed.

The syntax of the browser element is <browser pannel="">.

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="" stripes="" unfocused=""> : Give the main text's font, size and colors. Stripes is to color the background of every two rows. Unfocused (introduced in v7) changes the text color of the browser parts that don't have the focus, by default 75% of the normal color.
  • <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, ...)

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
  • <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
  • <color back="" chan1="" chan2="" both=""> : (optional) 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)
  • <grid1 width="" mainwidth=""> : Set up the CBG (computed beat grid) for the default channel. The <grid1> element has these sub-elements :
    • <size width="" height=""> : Give the width and height of the CBG window
    • <pos x="" y=""> : give the position of the CBG window on the screen
    • <up x="" y=""> : give the background graphic to be used
    • <down x="" y=""> : give the CBG graphic to be used
  • <grid2 width="" mainwidth=""> : Same as <grid1>, but for the active channel

The <rhythmzone> element

New in VirtualDJ v7.
The rhythmzone element defines where and how the rhythm curves will be displayed. It is much easier and has a lot more options than the rhythm element.

The syntax of the rhythmzone element is <rhythmzone mirror="" upsidedown="">.

The rhythmzone 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
  • <up x="" y=""> : give the background graphic to be used
  • <mask x="" y=""> : give the position of the grayscale mask that is used to display the rhythmzone
  • <colors chanX="" chanX_left="" chanX_right="" chanX_active=""> : give the color in HTML format to be used for each channel, X is the number of the channel. There should be as many chanX parameters as waves you want to display. "black" and "#000000" waves are ignored.
  • <rhythm y="" height=""> : give the vertical position and height of the waves.
  • <grid height="" width="" mainwidth=""> : Set up the CBG (computed beat grid) for the all channels. The <grid> element has these sub-elements :
    • <pos y1="" y2="" yX=""> : give the vertical position of all grids
  • <cue y="" height=""> : give the vertical position and height of the cue marker. The <cue> element has these sub-elements :
    • <mask x="" y"" width="" height=""> : give the position and size of the cue mask
    • <text dx="" dy="" color="" ...> : set the position and color of the cue text (see <textzone>)

The <songpos> element

The songpos is a special slider that is used to display and set the song position, display the song's structure, display and set the first five cue points.

The syntax of the songpos element is <songpos deck="" orientation="" waveform="">
  • deck is the deck number the element will apply to
  • 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
It has all the properties and definitions of a <slider>, plus those:
  • <down x="" y=""> : Give the graphic to use for portions of the song not played yet, and without any volume
  • <volume x="" y=""> : Give the graphic to use for portions of the song not played yet, and with a maximum volume (the display will be a fade between down and volume)
  • <selected x="" y=""> : Give the graphic to use for portions of the song already played, and without any volume
  • <volumeselected x="" y=""> : Give the graphic to use for portions of the song already played, and with a maximum volume (the display will be a fade between selected and volumeselected)
  • <upselected x="" y=""> : Give the graphic to use for background of the played part
  • <cues> : Define the sprites to be used as CUE markers. Includes the following definitions :
    • <size width="" height=""> : Give the width and height of the cue sprite
    • <up x="" y=""> : give the cue sprite graphic
    • <down x="" y=""> : give the graphic to be used when the cue is pushed
    • <over x="" y=""> : give the graphic to be used when the mouse is over the cue
    • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the cue

The <scratch> element

A scratch zone defines a zone where the user can scratch using the mouse.

The syntax of the scratch element is <scratch deck="" factor="">.
The properties values are:
  • deck can take its value between "1", "2", "left", "right", "default" (default), or "active".
  • factor : (optional) multiply the mouse movement by factor/4096
The scratch definitions are:
  • <size width="" height=""> : Give the width and height of the scratch zone
  • <pos x="" y=""> : Give the position of the scratch zone 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 scratch zone
  • <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
  • <center x="" y=""> : Give the center of the circular mouse movement

The <textzone> element

The syntax of the textzone element is <textzone deck="" resetcounter="" pannel="">.
The properties values are:
  • chan can take its value between "1", "2", "left", "right", "default" (default), or "active".
  • resetcounter : if set to "true", the counter will be reset if this textzone is clicked
  • pannel can put the textzone into a specific pannel
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)
    • scroll : if set to "yes", the text will scroll if it can't fit in the box
  • <text2 font="" weight="" size="" color="" align="" format=""> : Specify an alternate text to be displayed if the user clicks on the textzone.
  • <text3>, <text4>, <text5> : Same as text2 (the display will cycle through the defined text each time the user clicks the textzone).
The format is a string that describes how the text will be displayed.
You can either use a VDJScript action with backward single quotes `` for example format="`get sample_slot_name X`" which displays the name of the sample in slot X, or you can use one of the special textzone commands:
  • \\: print a single \ character
  • \n : print a line feed
  • \r : print a carriage return
  • \t : print a tab character
  • \x : 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
  • %comment : print the song's comment if any
  • %fullhour : display the time in a hh:mm:ss format
  • %hour : display the time in a hh:mm format
  • %hour12 : display the time in a h:mm am/pm 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)
  • %cueX : print the time position of the Xth cue point (can use modifiers)
  • %tocueX : print the time to the Xth cue point (can use modifiers)
  • %fromcueX : print the time elapsed from the Xth cue point (can use modifiers)
  • %start : print the time position of the first beat (can use modifiers)
  • %end : print the time position of the last beat (can use modifiers)
  • %tostart : print the time to the first beat (can use modifiers)
  • %toend : print the time to the last beat (can use modifiers)
  • %fromstart : print the time elapsed from the first beat (can use modifiers)
  • %fromend : print the time elapsed from the last beat (can use modifiers)
  • %bpm : print the bpm of the song (can use modifiers)
  • %bpmex : print the bpm of the song (can use modifiers)
  • %bpmexx : print the bpm of the song (can use modifiers)
  • %level : print the song's level in dB (can use modifiers)
  • %key : print the song's key
  • %camelot : print the song's key (numeric)
  • %keyoffset
  • %cpu
  • %status
  • %maineffect
  • %effectslotX
  • %mainsample
  • %videofx
  • %videotransition
  • %linkedvideo
  • %loop
  • %name
  • %namecueX
  • %pitchrange
  • %djc_buttonX

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 (only used by %level)
  • B : display the value as a number of beat instead of a time

The <visual> element

A visual is a zone that changes its display to reflect various things.

The syntax of the visual element is <visual source="" factor="" type="" deck="" pannel="" orientation="" direction="">.
The properties values are:
  • source : possible values:
    • "beat" : The beat intensity
    • "rotation" : The angle of the disc (depends on the position and the RPM speed)
    • "arm" : The position of the turntable's arm (moves on PLAY and PAUSE)
    • "volume" : The volume (depends on the crossfader and the level values)
    • "position" : The position in the song
    • Any of the "get ..." VDJScript commands that return a numeric value
  • factor : Optional factor to multiply (if positive) or divide (if negative) the source's value by
  • type : possible values:
    • "onoff" : Display the up graphic if source>=2048, or the down graphic if source<2048
    • "transparent" : Fade smoothly between up and down graphics
    • "linear" : Display a portion from the down graphic then a portion from the up graphic
    • "custom" : Display a specific graphic depending on the source value
  • deck : possible values: "1", "2", "default", "active" or "both" (default)
  • pannel can put the visual into a specific pannel
  • orientation : (defined for type="linear" only) possible values: "horizontal" or "vertical"
  • direction : (defined for type="linear" only) possible values: "left", "right", "up" or "down"
The visual definitions are:
  • <size width="" height=""> : Give the width and height of the visual
  • <pos x="" y=""> : Give the position of the visual on the screen
  • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the visual
  • <up x="" y=""> : (all types except "custom") Give the coordinate of the graphic to use when the visual is low
  • <down x="" y=""> : (all types except "custom") Give the coordinate of the graphic to use when the visual is high
  • <up x="" y="" nb="" nbx=""> : (type="custom" only) Give the coordinate of the graphics to use with the custom type (works like for a "round" slider)

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 deck="" pannel="">.
The properties values are:
  • deck : possible values: "1", "2", "active" (default) or "playlist"
  • pannel can put the dropzone into a specific pannel
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

The <grabzone> element

A grabzone defines a zone that can be used to move the VirtualDJ's window if it is not maximized.
If no grabzone is defined, any zone that is not a defined element acts as a grabzone.

The syntax of the grabzone element is <grabzone>.
The grabzone definitions are:
  • <size width="" height=""> : Give the width and height of the grabzone
  • <pos x="" y=""> : Give the position of the grabzone 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 grabzone
  • <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

The <pannel> element

A pannel is a zone that groups together several other elements, in order to hide or show all of them at once.
Pannels are very usefull if you want to put several groups of elements on the same place, and switch from one group to another with a button or a shortcut.

The syntax of the pannel element is <pannel visible="" id="" group="">.
The properties values are:
  • visible : "yes" to have it shown at the begining (when the skin is loaded), or "no" to have it hidded
    Since VirtualDJ v7, VDJScript can be used to set the visibility of a pannel
  • id : every element which has a pannel="" equal to this id will belong to this pannel
  • group : only one pannel from a common group can be shown at a time (that means that when you show a pannel belonging to a group, all the other pannels from that group will be hidden)
The pannel definitions are:
  • <size width="" height=""> : Give the width and height of the pannel
  • <pos x="" y=""> : Give the position of the pannel on the screen
  • <down x="" y=""> : Give the coordinate of the graphic to use when the pannel is displayed
  • <up x="" y=""> : Give the coordinate of the graphic to use to erase the pannel when it is hidded
  • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the pannel


Back to Developer page

Wiki HOME