1

VirtualDJ Skin Creator Version 2.0

2

Interface – Zones When opening the software, you first get a splashscreen and then the following window:

The main interface is divided in four zones

1. XML The XML code for the Skin will be displayed in this part

2. Picture This part displays the picture of the Skin. User can zoom in and out with the mouse-wheel.

3. Property List This part presents the list of properties available for each Skin element

4. Toolbar Most used commands (Open/Save file, Skin Elements) are displayed in the Toolbar.

1 3 2

4

3

XML

The XML display offers standard syntax

coloring.

An XML element starts with the

character “<” and ends with the

characters “/>”

Skins for Virtual DJ™ are made of one

picture file and one XML file that

describes how the Skin must react and

the positions of each element.

You can hide an element when it is

completed by using the element block

arrows .

This action is called “folding” and

“unfolding” lines. And is available in the

right-click menu actions.

Auto-Complete When directly writing to the XML, you might see three dots appear after the

caret. Press TAB to display the auto-complete list. You can then use the

UP/DOWN arrows or the mouse to select the word you were writing.

Showing Skin element in the picture In order to show the position of an element on the picture, and to load the properties in the Property

List, select the entire

block of text of an

element.

If you need to

show another

position instead

of the default

position (such as

“over”, “down”, “clipmask”), select the skin element and then right-click in the XML zone.

All element positions will be available in the right-click menu.

4

Bookmarks If you are often going back to a Skin element or you wrote a comment on a line and need to access it

quickly, you can bookmark a line.

The easiest way to bookmark a line is to click on the left of the line numbers (the blue

zone in the picture). You will then get a red arrow next to the bookmarked line (line 407 is

bookmarked).

To un-bookmark a line, click again.

You can access all bookmark options in the right-click menu.

Available options :

bookmark/un-bookmark

a line,

quickly go back to a

bookmarked line

clear all bookmarks.

Other right-click menu options Regular text options are available:

Cut

Copy

Paste

Erase

Select All

XML options In the Menu, there are several options available for

the XML.

Comment (only available for v6 skins): comments the

selected text using regular xml comment tags “<!--“

and “-->”.

Indent Selection : indents the selected text, adding

whitespace inside an element in order to improve its

readability.

Make Default XML (only available when the XML is

empty) : opens a dialog box asking for various skin

options in order to create a default XML.

5

Convert Skin to v6 (this feature is still in beta testing): Virtual DJ™ version 6 skin engine was changed

to be more powerful. If you want to use the new “scratchwave” skin element and use multiple

commands on one button in an existing Skin, you will first need to convert the skin to the v6

standard.

Skin Graphic is Relative :

Clone Elements : If your skin has the exact same display for the left and right deck, you can use the

Clone Elements window to move a whole lot of XML code around the skin, by changing the X and Y

position.

Picture Highlighter: This is a revolutionary feature that highlights the Skin picture, using the

coordinates of each element in XML. When you finished coding a Skin, using this feature will show if

you have forgotten to code an element, or if the elements for one deck aren’t positioned the same

on the other deck.

Skin Statistics: provides global information

about the Skin: size, version, number of

elements…

XML View Settings: opens the Settings window

on the XML tab where you can customize the

look and feel of the XML.

Dirty lines are displayed by a pink border on the

left. Dirty lines are lines that were edited or

added since last save.

All other settings are pretty much self

explanatory.

6

Picture The Skin picture is displayed in a scrollable, zoomable and selectable area.

Creating a selection When a Skin element in the XML is selected, the position of the

element will be shown on the picture, using a blue (or pink) rectangle.

You can also create a rectangle by clicking in the picture and dragging

the mouse.

If you need to edit the size or position of the selection rectangle, click

on one of the borders and then drag, or click in the middle and drag to change the position.

Keyboard shortcuts are also available to edit the selection rectangle:

Arrow keys: change the position by 1 pixel

CTRL + Arrow keys: change the size by 1 pixel

SHIFT + one of previous actions: change by 8 pixels instead of 1.

Zooming and centering If your mouse has a middle-button wheel, you can use it to zoom in and

out. The zoom will be centered on the position of the mouse.

You can also use PAGE.UP and PAGE.DOWN buttons on your keyboard or

the Zoom buttons at the top left of the window. If a selection is active in the

picture, the zoom will be centered on the selection.

If you scrolled around the picture and want to center on the selection, press the SPACE bar.

Picture information Under the Skin picture display,

some numbers are displayed.

The first set of numbers (X:Y) is

the position of the mouse in the picture. The 0:0 position is the top left pixel of the picture.

The second set of numbers is displayed when there is an active selection in the picture.

250,380: left and top position of the selection rectangle.

288,402: right and bottom position of the selection rectangle.

W and H: Width and Height of the selection.

W/H: Width/Height ratio.

7

Right-Click menu options The available options vary

on if a picture is loaded or

not, and if there is a

selection.

Insert Element: inserts the

selected XML element in

the XML code. This will

write the xml code for all

properties selected in the

Property List and the current selected size and position in the picture.

Replace Element: if you selected an XML element to edit its position or properties in the property

list, double-click in the selection or right-click→”Replace Element” to update the information in the

XML.

Insert Size and Position: inserts the current selected size and position of the picture in the XML code. This option will write <size> and <pos> XML nodes.

Insert Size: writes the current selected size in the XML.

Insert Position: writes the current selected top-left position in the XML.

Reload Picture: if you are working on the picture at the same time as on the XML, and you have just

made a modification on the picture, use this option to refresh the picture by loading it back from the

original file.

Open Picture: displays an open picture dialog to select a .bmp file.

Selection options Click on “Selection” in the menu to access the

selection options.

Previous Selection: The Skin Creator Tool saves the last 10 selections you made in the picture zone. Use this option if you erase the selection by

mistake or need to recall a previous selection.

Next Selection: Same as “Previous Selection” but

for going forward in the selection history.

Hide Selection / Show Selection: Hides or shows the selection

Change Selection Color: Changes the selection color from blue to pink.

Copy Selection: copies the current selection in order to paste it elsewhere.

Paste Selection: pastes the last copied selection in the center of the current view.

8

Picture display options To access these options, in the menu, click on

“Option” → “Settings”.

Inver MouseWheel Axis: some graphing software don’t use the same mouse-wheel behavior for zooming in and out. If you aren’t used to the default behavior (scroll

up for zoom out, scroll down for zoom in), you can

invert the axis.

Use more Zoom values: by default, the Skin picture can be zoom from 25% to 1600%. This option changes the zoom values from 10% to

3200%

Show Selection Text: display in the selection rectangle, the name of the selected XML element. Use the “Position” option to change the position of

the text in the selection rectangle.

9

Property List The Property List displays the list of properties and

attributes of each XML element.

It displays the size and position of the current selection in

the Picture display.

Some cells can be edited by writing into them, some only

display a list of pre-defined values available for that

property.

Properties in red are required for the element to be

displayed properly in VirtualDJ’s Skin engine.

When a question mark button is displayed in a blue

background line, this means it is a helper. It will usually

display information on the “action” value.

A dropdown triangle means that the property has pre-

defined values.

Click this button in color properties to display the

default “select a color” dialog window.

Some properties (like Action, RightClick, Font…)

have an auto-complete feature (similar to the

XML auto-complete feature). Use the UP and

DOWN arrows of the keyboard to select an item

in the list (or the Mouse-Wheel) and then press

TAB to auto-complete.

10

ToolBar

The ToolBar offers easy access to all commonly used features of the software.

Open XML/Project and Open Picture won’t be displayed if a Skin is already opened in the software.

Similarly, Reload Picture will only be displayed if a picture was loaded.

And Save will only be displayed if there is unsaved data in the XML.

The order of buttons can be re-arranged by clicking on a

button and dragging it quickly.

Right-click the ToolBar to access the display options or

customize the order and visibility of each button.