Skin Creator

From Jeremie Leroy - XOJO Controls Wiki
Revision as of 16:24, 7 August 2015 by Admin (Talk | contribs) (1 revision imported)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Interface – Zones

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

[C][IMAGE1][/C]

The main interface is divided in four zones [List=1] [*]XML The XML code for the Skin will be displayed in this part [*]Picture This part displays the picture of the Skin. User can zoom in and out with the mouse-wheel. [*]Property List This part presents the list of properties available for each Skin element [*]Toolbar Most used commands (Open/Save file, Skin Elements) are displayed in the Toolbar. [/List]

XML

File:SkinCreator-XML.png 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 [IMAGE3]. This action is called “folding” and “unfolding” lines. And is available in the right-click menu actions.

[color=white]===Showing Skin element in the picture===[/color]

[C][IMAGE4][/C]

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.

[color=white]===Bookmarks===[/color] 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 : [List][*]bookmark/un-bookmark a line, [*]quickly go back to a bookmarked line [*]clear all bookmarks.[/List]

[color=white]===Other right-click menu options===[/color] Regular text options are available: [List][*]Cut [*]Copy [*]Paste [*]Erase [*]Select All[/List]

[color=white]===XML Options===[/color] 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 “”.

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 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. All settings are pretty much self explanatory.


[color=white]======[/color]