VirtualDJ - Skin Builder (2024)

SKIN BUILDER
Skin Builder is an easy way to create your own custom skin by simply choosing the parts you wish to see, reposition, resize and come up with a skin that matches 100% to your needs.
There is no need to be expert in graphics or master VDJ Script. Skin Builder is here to make your life easier.

Previous versions of Skin Builder were just offering the opportunity to design your skin, but was too heavy for real use. Due to the large amount of offered modules, your creations were kept at home. But now Skin Builder v3 is compatible with the new Skin Builder Extractor application to help you extract your creation to a super light skin and finally use your skin live.

How to use :

• Download and install Skin Builder v3 from http://www.virtualdj.com/plugins/index.html?addonid=80488
  
• Open VirtualDJ 8, goto Settings->INTERFACE tab and select Skin Builder v3 skin.
  
• When Skin Builder is loaded, click on the MENU button at the top-right to reveal the Modules Selection Menu.
  
  Menu button
  Modules Selection Menu
• Select any of the available Modules from the DECK, MIXER, GLOBAL or OTHER tab
  
• The module will appear on your screen. By default all modules will initially appear at the top-left part of your screen.
  
• Grab and position the module
  
• Place your mouse at the bottom-right (until you get the resize arrow) and resize the module.
  

  Most of the modules keep their aspect ration (proportional resize). The additional vertical space - in case you resize differently - will be filled with a gray background.

  

  Note : The gray background color of the modules, along with the light-gray frame when you hover the module, and the background of the Skin Builder itself (grid, logo etc), will not be extracted to the final skin.

Auto-fill Modules for Deck B
You are done with the most parts of your new skin, Left Deck is almost finished and you realize that making Deck B looking exactly the same and symmetric with Deck A will be a nightmare. Skin Builder offers the ability to choose between the Manual (the nightmare ;) ) and the Auto-Fill mode (selected by default). Simply leave the Module B button disabled (off). Skin Builder Extractor will take care of that.

All you need to choose is how the Decks and the Mixer modules will be placed to the other side of your screen. Choose between Clone and Mirror modes.

GROUPS
Modules are assigned to the Deck Group (mostly the ones from the DECK tab), the Mixer Group (mostly the ones from the MIXER tab) and the ones that have a G (Global) button don't belong to any Group.
But you also have the ability to assign a module to nested Group (under Deck or Mixer). The Module will then take a horizontal (for Deck modules) or a vertical (for Mixer modules) thin line to help you quickly identifying the Group that each module is assigned to.
Modules that are not assigned to any nested Group will not get that line.
There are 4 available nested Groups for each Deck and Mixer Groups.

Why do i need Groups ?
The Deck and Mixer default Groups are used to select how the Deck B Modules will be placed. But you may need to have the Deck mirrored but you also may need to have a group of modules like all the Effects, cloned.
From the GROUPS tab, you can choose which auto-fill pattern (mirror or clone) each group and nested group will be followed.

LIVE MODE
By default Skin Builder will launch in Design mode. In this mode you can easily drag and move the modules from any part and the buttons and faders you see on the screen will not trigger any VDJ action. But if you want to test and see if it does the job for you, you can click on the LIVE button at the top-right of your screen. In LIVE mode, you will not be able to move or resize the modules and all buttons, faders etc will be triggering the assigned VDJ actions.

DROPZONES
With the Skin Builder, you will not be able to load a track with mouse drag n drop (you can still use right-click ->Load in the Browser). You will not be able to drag n drop tracks in the extracted skin either, unless you define the Dropzone for each deck.
Select the Dropzone module from the OTHERS tab, resize and position the module so that it covers the area that you need to work as a dropzone.

Notes :
- The graphics of this module will not be extracted to your skin. However, you will be able to optionally define a color and a border (by default transparent) later with the Extractor.
- The Dropzone follows the same mirror/clone rules as the other modules.
Tip : Leave the Dropzone last in your project, or you can temporary hide and reveal later.

DRAWZONES
Draw zones are just graphical modules without any VDJ functionality. 4 different draw zones are available to help you coloring the background of your skin. E.g. you may want your skin to have a dark/black background but your decks area to have a lighter one. You will be able to select their background and border colors later from the Extractor.

SAVE
Your Skin Builder project is automatically saved in the settings file of VirtualDJ when closed. But if you need to save your project without closing VirtualDJ, you may use the SAVE button at the top-right of your screen.
You will of course have the opportunity to save your Projects to an additional Skin Builder Project file later with the Extractor

SKIN BUILDER EXTRACTOR

You are done with your skin design, and really anxious to see your creation exported as a new VirtualDJ skin. It's time to use the Skin Builder Extractor

How to use :

• Download and install Skin Builder Extractor (will be called as SBE in short) from http://www.virtualdj.com/plugins/index.html?addonid=80489
  
• Make sure VirtualDJ is closed or you have saved your project with the SAVE button.
  
• Open SBE (from ProgramFiles->Skin Builder Extractor folder - sbe.exe)
  
  
• Provide a name for your skin
  
• Select the color for the skin background
  
• Optionally provide a color for background and border for the Dropzones. If no color is provided, the Dropzones will not be drawn (transparent - default)
  
• If you have chosen any Draw Zones in your skin project, you can define their background and border colors.
  
• Optionally, you may change the default Icons of VirtualDJ with the alternative ones (found in several custom skins)
  
• Finally, click on the Create Skin button to start the extracting process. May take several seconds depending on the amount of Modules you have used
  
• That's it ! YOUR skin is created and you can choose that from VirtualDJ Settings->INTERFACE tab
  
  

Notes :
- Skin Builder v3 skin can be used/loaded on both Windows and Mac computers. However the Skin Builder Extractor is Windows platfrom only. A Mac version is in my to-do list, but won't come soon.
Keep in mind that skins created and extracted using a Windows computer, can be used on both platforms, like any other VirtualDJ skin.

Known issue : You will have to resize the modules, even slightly, in order to be registered and loaded properly from VirtualDJ, next time you open it. That's the only current bug of the whole project.

Managing Skin Builder projects.

• Saving your current SB Project to a file.
  As mentioned above, the modules you have used, along with their positions and size are stored in the Settings file of VirtualDJ, However, it is advised to save to an additional SBE Project file (saved in Documents/SBE/Projects folder) to make sure no other skin with "windows" will mess your creation (VDJ uses the same setting to store window's info from all skins)
• Updating project
  Select a saved project from the drop-down list and choose Save. This will update the Project with the current project (from VirtualDJ settings)
• Loading project
  Select a saved project from the drop-down list and choose Load. This will update VirtualDJ Settings with the selected project. Just make sure VirtualDJ is closed or else your project will not be loaded properly.
• Deleting a project.
  Select a saved project from the drop-down list and choose Delete. This will delete the selected Project. Will not modify/edit/delete VirtualDJ current settings of course, just the project file.
  
  

As per the License Agreement (you may read that in the Installer), you are not permitted to share/upload/sell skins made with Skin Builder. It is meant to be used for personal purposes. However you are free to show your creations by posting screenshots in any VirtualDJ forum or anywhere over the Internet.

The current modules library is providing almost everything you may need, but still a few may be missing, so feel free to ask any module/combination you think it should be included.

Have fun !

Nice job Babis. I had used a much earlier beta and the release has a lot of refinements.

gj

what ever background i choose it completely covers the skin, I cant see anything else.

And i cant load a song, even if i put a drop zone. I also need to understand where to put the dropzone....

Do the background first, or hide the other placed elements and then place the background then unhide the elements.

Drop zone is like, drag a track inside this space (assagned to deck 1) and a track will load on deck 1, place it last.

Im speaking on when you make a skin with the extractor.

I did doesnt matter where i place it it sit in the foreground and i cant drop anything...

Skin builder is not a skin to play and mix live. It's an aid to help you create a skin As wrote in my first post , you can't drag n drop , not even with the drop zones . Use right click on browser to load a track and test in Live mode.
Define the drop zone Hide it again to make the final adjustments and reveal again when you re ready to close VDJ and use the extractor

the black background in extractor black out the whole skin....as well as any other color i choose...

sent

Updated Skin Builder Extractor with an Installer that provides the ability to add a Desktop icon for the application.

@Djratedxxx919 Your Settings file indicate that the Modules were placed passed your primary screen (which i believe its 1400x900 ? ). Therefore, the Extractor creates a 1440x900 skin but all the elements are positioned passed the screen width, so you get a black skin.
Keep also in mind that all the Dropzones and the Draw Zones are drawn before any other skin element/module and even if you see those on top of all others, those will be extracted below all of them when the skin is extracted.
But as above, your issue is probably with your secondary screen.

this is a simple build I dont think im beyond any borders but i still get this

OK I ll try to explain the best way i can. As per the settings file you sent me, the skinPositions setting which holds the x,y coordinates and the width,height of each window looks like this..
<skinPosition>1468,8,1080,787|1500,323,800,600|1447,67,536,176|2207,73,547,162|||||1446,246,292,39|2198,247,295,39|||||||1736,238,102,45|2494,242,113,44|1738,200,101,39|2497,202,95,32|1852,330,77,30||||||||1440,69,549,55|2197,67,557,53|1485,538,641,110||1440,32,263,61|2203,35,257,59|1701,29,87,47|2456,34,82,44|||1789,32,81,44|2536,31,71,41|||1834,200,282,47|2595,197,285,40|1620,353,261,37|2573,491,261,37|||||1834,235,285,55|2609,237,272,48|||||||||||||||||||||||||||||||||2054,36,27,31|2819,34,24,26|||||||||||1673,422,44,27||2011,37,45,26|2750,32,48,33|1868,33,98,34|2606,34,108,33|||||1966,33,52,34|2709,35,46,31|||||||||1452,361,51,54||||||||||||||1968,37,143,85||1986,62,128,79|2755,58,127,78|2077,32,37,36|2843,36,37,36|1440,201,298,52|2199,196,296,61|||2113,77,52,210|2157,79,44,206|2113,29,45,52|2159,29,45,53|||1980,372,51,54|2401,448,51,54|||||1497,356,71,375|||||||||||||1440,123,680,82|2194,120,684,78|1440,284,1440,616|||||2069,0,185,35||||2043,0,31,31|2253,0,31,31</skinPosition>
The first number of each |a,b,c,d| portion indicates the X coordinate of each module. All modules have X > 1440. Which means that, you probably have a screen 1440x900, and you have placed all the modules to the secondary screen.
What Skin Builder Extractor does is to ..
- Read the size of your primary screen.
- Creates a skin with the same dimensions as your primary screen
- Reads the positions and sizes from the setting and places the elements accordingly.

Now, for some reason, you have selected to open VirtualDJ to the secondary screen - that's what the first a,b,c,d portion (1468,8,1080,787) of the setting is showing.- and VDJ is correctly registering the X positions since the 0,0 point is the left-top pixel of the primary screen.

I am not sure if i can do something about it. I could probably "guess" from the 1st portion that indicates the position of the main screen, but that would be hard, since there is no "safe" criteria here.

The best would be to swap your screens, or try to open VDJ to the "other" screen and see that it works fine from there.

so basically design the skin on the number 1 monitor. also open vdj on the number one monitor. What if i disable monitor 2 while i design the skin, would that help.

Yes

well finally....i like it, might tweak it over time but this all i need well if you could add the bar counter to the progressive wave.....

Glad you sorted out. ;)

Updates and additions will come soon, I have several in my list already. Added yours too.
.

cool, those grid functions would be nice to call up in the progressive wave also...but yeah im happy now

Any chance you could build/include another waveform option from FOCUS video oriented skin called: Default Wave - Up/Down in the UI and updownstack (I think) in the XML code? or even allow you to change the waveform via UI options like FOCUS skin does?

Thanks!