VirtualDJ Skin Creator

Version 2.0

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.

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.

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.

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 arent 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.

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.

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-clickReplace 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. 7

Picture display options

To access these options, in the menu, click on Option Settings. Inver MouseWheel Axis: some graphing software dont use the same mouse-wheel behavior for zooming in and out. If you arent 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.

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 VirtualDJs 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 predefined 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.

ToolBar

The ToolBar offers easy access to all commonly used features of the software. Open XML/Project and Open Picture wont 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.

10