Skin Creator - User Guide
Transcript of Skin Creator - User Guide
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.