VDJPedia
Skin SDK7
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
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>)
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
And its definitions are:
The <fader> element may contains these definitions:
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
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:
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
- <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
- <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
- <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
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:
- 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
The visual definitions are:
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
- <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)
- <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