1

Skin Resizer Tool

Version 1.2

This Tool is meant to resize and create skins for the software VirtualDJ. VirtualDJ is a registered

trademark of Atomix Productions.

You can access this User Guide at any time, by selecting “User Guide” in the question mark (?) menu

at the top of the Skin Resizer Tool.

Table of Contents Window Organisation .............................................................................................................................. 2

Resizing a Skin ......................................................................................................................................... 3

1) Input XML .................................................................................................................................... 4

2) Output XML ................................................................................................................................. 4

3) Resizing options ........................................................................................................................... 4

Licensed Version ...................................................................................................................................... 5

How to become a Licensed User ......................................................................................................... 5

Donate Window............................................................................................................................... 6

Licensed version features .................................................................................................................... 6

Sending me an email ....................................................................................................................... 6

Licensed version options ................................................................................................................. 7

Licensed menu ................................................................................................................................. 8

Part of XML ............................................................................................................................................ 10

Translation ......................................................................................................................................... 10

Mirror ................................................................................................................................................ 11

About Window ...................................................................................................................................... 12

Skin Compatibility list ............................................................................................................................ 13

2

Window Organization At the opening of the application, you get a window like this:

The main window has two tabs, Resize Skin and Part of XML :

3

Resizing a Skin This part is designed for all users who want to resize a skin. If you aren’t a skin developer, the other

tab, Part of XML, won’t be any use to you.

This tab is divided into 3 zones:

1. Input XML

2. Output XML

3. Resizing options

1

3

2

4

1) Input XML This part is used to specify the input XML file. Either you enter manually with the keyboard the path

to the file, or you click on this button , to select the input file. If the skin you want to resize is

zipped (.zip file extension), you will need to unzip it before using the Skin XML Tool.

Only files with .xml extension will be shown.

Once you have selected an appropriate file, the Input XML GroupBox should look like this:

Input Size of the skin calculated

automatically.

Display format of the skin.

Click on this button to open the XML

File in default program.

I recommend using NotePad++ to edit XML files.

2) Output XML This part lets the user specify an output XML file and location. Skin Resizer Tool will automatically

rename the file using its original name and change the filename to show the output size (if already

chosen) or adding the suffix “_resized”. You are free to change the default output filename, this is

only a suggestion.

Once you have selected an appropriate output file, the Output XML GroupBox should look like this:

Width output. Must be equal or

greater than 800.

Height output. Must be equal or

greater than 600.

Tip: If you want the skin to keep the same proportions while resizing, write the Width output, and

then click on the “x” on the right. This will calculate the Height output for you.

3) Resizing options These options let the user decide what to do when

resizing.

You can resize only the XML, only the Picture, or both at the same time.

Another set of options are available. These options are available for Licensed Users. Please read next

page to learn more about being a Licensed User.

When everything is ready to be performed, click on the button .

Note: Even though there isn’t any button to load the graphics file (usually .bmp), if you selected

Resize picture, the tool will automatically get the graphics that have the same name as the “.xml” file.

5

If the graphics file doesn’t have the same name, then a window opens, asking the user for the

graphics.

Note 2: Due to some limitations of the compiler I used, this tool only handles “.bmp” files for the

graphics. If the skin you are resizing has graphics in another format, you can use your favorite

graphics program (or Microsoft Paint) to open and save the graphics in bitmap (.bmp) format.

When all resizing is finished (this shouldn’t take more than 20 seconds), the folder where the new

files are saved is automatically opened.

Select both the .xml and .bmp file and then zip them together. Now you can use the new resized skin

on VirtualDJ.

You might get some windows popping up saying an error has occurred. Please write on the forum or

send me a PM to explain the problem. (Press F2 button when the App is open to have links for both

PM and forum).

Licensed Version Licensed users get access to a lot of other features, and also get free updates for all new features.

How to become a Licensed User If you want to become a licensed user, you will need to donate a small fee, and you will receive a

license file in return.

Two buttons let you open the donate window:

Click on the Licensed menu item,

and then on “Buy Licensed

Version”

At the closing of the tool,

this window will show up.

(This window doesn’t show

for licensed users).

Click on “Buy Licensed

Version” to open the

donate window.

6

Donate Window

This window has three buttons.

The first, on the right is to donate

using Dollar currency.

Second button is to donate using

Euro currency.

Third button is to open a new page

to write in your license number.

When you click on one of the Paypal donate buttons, an internet page will be opened. Once the

payement process is completed, do not forget to click on the button that says: “continue shopping”.

You will be asked to download a file. This is the licensed file specially created for you after you

donated.

Save that file on the desktop of your computer.

Back to the Resizer Tool, you will have a button to open the license file.

If you followed each step correctly, you are now a registered user.

Licensed version features

Sending me an email

If you have a problem with this tool, or you want to ask me for a new feature, click on “?” in the

menu and then “Contact Me”.

7

Licensed version options

Several options are available in the licensed version.

1. Add borders

This option lets you resize the skin to the size of your screen by adding borders around the skin.

When ticking “Add Borders”, a colored square will appear, letting you choose the color of the

surrounding border. You can also choose a color by writing its html code.

An example of this option is available in the skin package available here.

All skins are compatible with this option.

→

2. Browser Resize

This long waited option lets you resize the skin by increasing or decreasing the size of the browser.

(Minimal height for the Browser is fixed at 245 pixels).

Usually, this option is to resize a skin from 1280x800 to

1280x1024.

An example of this option is available in the skin package

available here.

Some skins aren’t compatible with this option. Most of DJ

Format’s Skins will be reworked if they aren’t compatible with

this feature.

8

3. Browser Options

When ticking this option, you will be able to open the “Browser options Window”.

This window has many options.

You can change the browser’s background, using a color or a picture.

The picture can be resized to fit the browser size, the picture can be tiled if it is smaller than the

browser zone, or you can change the position of the picture.

The browser options let you change the text color in the browser, its size and font. Next version of

the tool will have an option to put the text in bold.

4. More Options

As for the browser options, you need to tick this

feature to open the “More Options Window.

These options let you choose some of the skin’s

options.

“Do not change logo size” will stop the logo from

being resized.

“Do not change font size” will stop all font sizes

from being resized.

“Change Font Size” let’s you change all font sizes in the skin, except the browser. 50% will divide font size by two. 200% will double the font size. If you want to make the skin look nicer on Mac,

select 80%.

“Change Gain sensibility”, let’s you change the sensibility of all gain knobs in the skin. The usual value

is 100. This value doesn’t let you choose each gain value. If you change the gain sensibility to 750, all

different gain values will be available.

Some other options aren’t enabled. These options will come in a next version.

“Split Waveform”, this option will change the waveform display, to split channel 1 and channel 2.

“Redraw Custom Visuals” will be an experimental option to make some of the “moving” elements in

the skin look better. This option will be very difficult to use, unfortunately.

Licensed menu

At the top of the Skin Resizer Tool, there is a “Licensed”

menu.

If you are a skin creator and you would like to check for

an “error on line 0” problem at the opening of the skin

9

by VirtualDJ, use this option.

“Reload last created skin”, will put the last resized skin as the input skin. This lets you do multiple

resize on a single skin.

Tip: You want to resize VirtualDJ’s FullVideo skin to fit your screen that has a resolution of

1280x1024.

First, open the “FullVideo” skin. Choose an output size of 1280 and click on the “x” beside 1280. Tick

“Resize XML” and “Resize Picture”.

The skin will first be resized to 1280x960.

When the resizing is finished, click on “Reload last created skin”. Now choose an output size of

1280x1024. Tick “Browser Resize”.

The skin will now fit your screen, and you will have more space for the browser.

“Settings” lets you change two simple settings of the tool.

10

Part of XML As this part is for skin developers only, there will be no guide provided for this section while the Skin

XML Tool is still in Beta.

This part is designed for skin developers only. This tab is similar to the Resizing tab as it is divided in 3

zones.

At the top, there is an Input edit-field. You can paste some bits of XML code there that will be used

by the tool.

In the middle, this is the output edit-field. You can’t paste anything in there as it isn’t editable. If you

need to copy the text that appears in this edit-field, just click anywhere in it, and the text is copied to

the clipboard, ready to be pasted anywhere else.

The options for this tab mainly do two basic things.

Translation This is used to translate the coordinates of an element (button, text zone, visual element, or slider).

Example:

On VirtualDJ’s default skins, on each side of the skin there

are these buttons for loops. Each button is horizontally

separated by 22 pixels.

Select the Translation option, and then put “22” in front of the X value for translation, and leave 0 for

Y translation.

Paste the code for the “¼ loop” button in the input XML edit-field and then click on “Do the job”

button and you will get your code with the correct X value position for the “½ loop” button.

Click on the Output edit-field, which will automatically copy the output to clipboard. And use the

code in your skin.

Note: you will need to change the action of the button to make it act as a ½ loop.

To get the code of the next loop button (loop on 1 beat), paste the code for the “½ loop” in input,

and click again on “Do the job”.

Repeat these operations until you got all the code from button ¼ to button 16.

Now you will need the same buttons and actions for the second channel. This is where the “change

chan number” option is useful.

11

Paste all the code from button ¼ to button 16, in the input edit-field.

Measure the distance between button “1 beat loop” on channel 1 to the same button on channel 2.

On FullVideo skin, this distance is 734. Put 734 in front of X translation field, and click on “Do the

job”.

Now copy paste the output code, and you got your code for channel 2, in less than 20 seconds!

Mirror Mirror option is quite similar to Translation option. The difference is that here, the user needs to give

the skin’s width.

Mirror example:

This time, we will focus on the center part of the

FullVideo skin.

There are two gain knobs, two Vu-meters, and two

video preview screens.

As the main video screen is unique it doesn’t need to

be mirrored.

Paste the code of chanel 1 gain knob, vu-meter and video preview screen in the input XML edit-field.

VirtualDJ’s FullVideo screen has a width of 1024. Write in 1024 in front of “Skin width”. Click on

“Change chan number”, as you want to get the code for the 2nd channel.

When you click on “Do the job”, the tool calculates the position of the elements according to the

skin’s width.

Now you can use the output code in your skin, and nothing needs to be changed to it.This is a great

time saver.

If you have any ideas of new functions to add to this tab, or even to the tool itself, feel free to post

on the forum topic.

12

About Window If you press F1 keyboard button, or in the menu: ? -> About, you will get the About window.

This window shows information about the tool, such as version information, copyright and contact

information.

13

Skin Compatibility list Before releasing this tool, I tested several skins to prevent most bugs and make the resized skins work as good as possible.

I tested some very basic skins, advanced skins, most used skins, and best rated skins.

Skin name Size Resized size

Simple resize

Problems? Solution? Browser resize Adding Borders

VirtualDJ Basic 1024x768 1280x800 Good Turntable: slight graphic glitch Perfect Perfect

VirtualDJ Internal Mixer 1024x768 Good Turntable: slight graphic glitch Perfect Perfect

Compact 0.99 1440x900 1280x800 Good Slight graphic glitches Not tested Not tested

Titanium Max 1024x768 1280x800 Problems Mask problems Redraw masks Ok (need to redraw browser)

Perfect

MIX Station SV 04 v4.2 1280x800 1024x640 Good Slight graphic glitches Perfect Not tested

CDJ100S 5th(1024*768) 1024x768 1280x800 Good Turntable: slight graphic glitch Redraw turntable Impossible (browser is in a pannel)

Perfect

CDJ200S 1024x768 1280x800 Good Turntable: slight graphic glitch Redraw turntable Perfect Perfect

Skin VDJ4 adapted for VDJ3 V2.0 1024x768 1280x800 Good Turntable: slight graphic glitch Not tested Not tested

Mist MFI EN v1.0 1280x1024 1024x819 Good Perfect Perfect

DAC3 V4.3 1280x800 1440x900 Very Good Perfect Perfect

Mix Lab V3.0 1280x800 1440x900 Good Round faders, turntable: slight graphic glitch, buttons etc

Perfect Perfect

Numark Cue Basic 1024x768 1280x960 Very Good Perfect Perfect

Numark Cue FullVideo 1024x768 1280x800 Good Circular rotation leaves trace Use a mask for the rotation Perfect Perfect

Cue RMX v1.6 1280x800 1440x900 Good CBG alignment in center of screen not showing properly

Redraw CBG graphic Perfect Perfect

Pioneer CDJ-700S by RE (1024x768) v2.1

1024x768 1280x800 Very good Impossible (browser is in a pannel)

Perfect