DJ FORMAT
[html]<ul><li><a href="#Resizer">Go to Resizer Section</a><li><a href="#sdk">Go to SDK Section</a><p>Hello
First of all, always remember you don't need to be a genius to begin to skin.
Choose your favorite skin in the skin download section. Take an easy skin, with less buttons or functions in order to make sure you understand the way it works.
<b>OK Unzip the skin file.</b>
Unzip directly in the skin folder this way the skin will appear in VDJ with it's filename only (easier to rapidly check the results of the modifications). This way you won't need to rezip and move files these operations take many mouse clicks and time.
<b>Open the BMP file</b>
When Paint appears, make sure you can see the status line or click on the view menu then check for the status bar.
<b>Status Bar in PaintShop Pro.</b>
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rtg.jpg">
The .bmp file contains all the graphics needed in your skin. You can use any bitmap editor (from Paint to Photoshop) to modify or create it. The bitmap will usually have a width of 1024, and a height of more than 768. In the first 768 rows you'll find the background used for your skin. The next rows are used to store additional graphics, like pushed or selected buttons.
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rt113g.jpg">
OK. Let's move your mouse around in the pic, and see in the status bar (right) the coordinates of the point you focus. You can focus very precisely when zooming on a part of the pic. Try to draw a selection box : the status line tells you the width and the height of the box. Okay now you can find the line 768 (depending on the skin resolution) in the pic. Below this limit, the skin user won't see anything. Look around, you can see there are all the highlighted and animated stuff, lightening visual parts, moving sliders and so on.
===================================================
<b>Open the XML file</b>
For xml editing you can use <a href="http://www.philo.de/xmledit">Open XML Editor (free)</a>
What is it? The xml script will tell to VDJ all the skin's picture informations, such as the position of the different buttons, where the highighted buttons are, where the browser will be, and so on. WOW there are MANY numbers here! These are the coordinates you saw in paint. You will use paint to get the pos and width of the buttons, then report them in the xml file, and again, and again in order to get the skin working. All the objects in the skin have name coordinates and even some special fields that you have to know. This is very important, the more you learn about the skin engine, the better the skin is. To help you to learn the different elements, Atomix Production wrote a skin development knowledge base <a href="http://www.virtualdj.com/support/developers/skin.html"></a> Learn all the page and you'll become a skillful skinner! It can sound like a joke but it's true.
OK, Take one button, let's say play. Go to paint and try to move the play button to another location. Save the file, but don't quit paint. Now go to the script and find the line named button action="play_stutter".
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rt111g.jpg">
Change the button's ordinates according to the Paint status bar. Save it all and test the skin in Virtual DJ to verify your work.
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rt112g.jpg">
You'll see that verifying is a hard part of the job (I verify maybe each minute the work, except for very long processes. Just modifying a skin will let you know how hard the work is, and how long the process can be. It's not that hard just reporting thousands of numbers into a text file.
<b>Creating an entire new skin</b>
Creating a skin is not that hard, in practice but on the other hand it requieres specific skills. The hard work won't come from the xml script but from the picture part. It will take a long time to elaborate a great bmp file with all buttons (activated or not), with all the features of VDJ. To be beautiful even a small animation part can take hours! Even days! You will have to 'imagine' all the parts of the skin and 'manage' the space allowed. Be consciousness about those things.
<b>What does a skin need in order to go in VDJ?</b>
</p><ul><li>Must have the 'skin' header & footer <li>Must have the VDJ logo.</li></ul>
At this point your skin is valuable for VDJ. The following parts are needed to navigate :
<ul type="square"><li>A 'browser' element <li>Minimize, maximize, close buttons <li>A 'settings' button (NOT NEEDED TO GET STARTED, BUT NEEDED TO CHANGE THE SKIN AGAIN!)</li></ul>
<b>In order to have your skin published</b><ul type="circle"><li>It must the VirtualDJ Logo not an image on the bitmap. <li>The Xml version must refer to 3 or above otherwise it will not be published. <li>Reference to VirtualDJ website must be found somewhere on the Bitmap. <li>There must <strong>NOT</strong> be any personal email address or web links in either the XML or BMP (you may include your name though)</li></ul>
Feel free to drop me a line with anything I can assist you with. My MSN details are in <a href="http://www.virtualdj.com/blog/DJ%20FORMAT/">my blog</a>, or you can <a href="http://www.virtualdj.com/pm/write.html?dst=3183">PM me here.</a>
==================================================================
<a name="Resizer"></a><b>VDJ Skin - How to Resize VDJ Skins</b>
So what does it do? It resizes your VirtualDJ skins.
<a href="http://www.virtualdj.com/addons/download.html?addon_id=1826">Download VDJSkinResizer Here</a>
<a href="http://www.virtualdj.com/forums/50241/Skins/VDJ_Skin_Resizer_v2_4.html">Go To VDJSkinResizer Thread</a>
Here is a little tutorial with default options to resize a VDJ Skin File.
After, you can experiment yourself the advanced options to enhance the result.
At the end of the file you can find some other infos that may be useful to tweak the software.
<ul><li>Unzip a skin</li></ul><ol> <li>Take a zip skin file (by default they are in C:\Program Files\VirtualDJ\Skins). <li>Uncompress it (open the folder in windows explorer, copy the files and paste them in the skins folder. <li>Open VDJ Skin Resizer. Click on the OK button on the Message Box.</li></ol><ul><li>Resize the XML config file</li></ul><ol><li>In Input File, enter the path of the xml file extracted from the zip. You can do it by clicking on the "..." button to find the file. <li>After opened the xml file, it should automatically fill the Input Size. If this is not the case, open the XML file with Notepad or another text editor, and look at the very first line, there should be "width" and "height" values. You must then enter them in the Input Size boxes (first for width, second for height). <li>Now enter the desired Output Size (it should automatically fill with your desktop resolution). Like before, first box is for width, and second for height. <li>Enter the desired Output File, for this you can click the "..." button, the program will then automatically propose a filename based on the Input File, but with "-resized-WIDTHxHEIGHT", so you don't have to type anything.</li></ol><ul><li>Resize the Image skin file</li></ul><ol><li>Now click on the "Image" pannel at the upper part of the window to show the Image resize parameters. <li>In Input File, enter the path of the image file extracted from the zip. You can do it by clicking on the "..." button to find the file. The Input Size fields will automatically be filled by the size of the input image, but if this is not a valid image then it won't show anything. But you still can try to resize the image. <li>The Output Size should be automatically refreshed proportionally to the size of the input image. Now you can enter the desired size.
Tip: You should try to put the same width as for the XML file, to have the same size.
<li>Now enter the desired Output File. You can click on the "..." button, and the program will automatically propose you a filename based on the input image name.</li></ol> Tip: Try to put the same name as for the XML file, but changing the ".xml" extension to ".bmp", else the final skin won't work.
<ul><li>Run the job</li></ul><ol><li>Now go to "Execute" pannel, and click the button named "Let's go!". <li>Wait until the process is finished</li></ol>
If you have done all the steps carefully, you shouldn't get any error. If this is not the case, then redo the tutorial since the beginning, including unzipping skin file.
<ul><li>Preparing the skin for VirtualDJ</li></ul><ol><li>If the resize process is finished, you can then close VDJSkinResizer. <li>Now, you can compress the skin (windows compression) or test it uncompressed. <li>Make sure the finished files are in the VirtualDJ skins folder (by default: C:Program FilesVirtualDJSkins).</li></ol><ul><li>Load the new skin in VirtualDJ</li></ul><ol><li>Launch VirtualDJ <li>Click on the "Config", "Set" or "?" button to access VirtualDJ Options. Usually this button is on the upper-right, middle-right, or at the bottom-left, but it can be at another place if you use a different skin than default one. <li>Go in Skin pannel. <li>Select your skin in the list. The name should be either: "YourZipName:YourSkinName" or "YourSkinName" (for uncompressed)</li></ol> <p align="left">If everything worked as expected, the skin should be loaded and ready to be used.
Enjoy ! =)
Final Note: You can note that some pixels and animations may be mis-aligned. You can correct these problems manually.
<p>============================================================================================================== <p align="center"><a name="SDK"></a> <a style="FONT-SIZE: 36pt; BORDER-BOTTOM: 3px double" >Developer SDK <sub>(With Updated Entries)</sub></a> <p>This little documentation should help you understand how to create or modify a skin.
<p>First, every skin is made of two files, named: <ul> <li><a href="#bmp">the_name_of_your_skin.bmp</a> <li><a href="#xml">the_name_of_your_skin.xml</a> </li></ul><p>
</p> <h2><a name="bmp">The BMP file</h2> <p>The .bmp file contains all the graphics needed in your skin.
You can use any bitmap editor (from Paint to Photoshop) to modify or create it.
The bitmap will usually have a width of 1024, and a height of more than 768.
In the first 768 rows you'll find the background used for your skin.
The next rows are used to store additional graphics, like pushed or selected buttons.
<h2><a name="xml">The XML file</h2><p> The .xml file describes each element of your skin.
For each element, it defines what it should be used for, where are the graphics used for its various states (in coordinates from the .bmp file),
and various other things.
The xml file can be edited from a simple text editor (like notepad), but it's more likely that you will install a specific xml editor
(by the way, by default, Windows will open a .xml file in internet explorer where you can read it but can't modify it).
<p>The xml file is composed of a root element (<i>Skin</i>), which contains all the elements of your skin.
There are 10 different types of elements: <ul> <li><a href="#button">button</a> <li><a href="#slider">slider</a> <li><a href="#browser">browser</a> <li><a href="#rhythm">rhythm</a> <li><a href="#songpos">songpos</a> <li><a href="#scratch">scratch</a> <li><a href="#textzone">textzone</a> <li><a href="#visual">visual</a> <li><a href="#dropzone">dropzone</a> <li><a href="#grabzone">grabzone</a> <li><a href="#pannel">pannel</a> </li></ul><p>
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><a name="action"></a><font size="6" ;>The Actions</font>
<b>Here is the list of the valid actions</b> <p></p></blockquote><ul type="square"><li>nothing : Useful to make a zone react to the mouse (with over for example) with no action <li>close : Close the software and return to Windows <li>minimize : Minimize the software to the taskbar <li>maximize : Switch to or from the fullscreen mode <li>play : Play the song on desk "chan" <li>play_n_loop : Start a loop on the first beats of the song (or exit the loop the second time). <li>pause : Pause the song on desk "chan" <li>stop : Stop the song on desk "chan" <li>sync : play and synchronize the song on desk "chan" <li>play_pause : Play the song on desk "chan" if it's paused, or pause it if it's playing <li>cue_stop : Cue the song on desk "chan" if it's paused, or stop it if it's playing <li>beatlock : Engage or disable the BeatLock <li>mix : Start an auto-mix <li>select : Set the desk "chan" as the active desk <li>master_volume : Set the windows' soundcard volume <li>headphone_volume : Set the volume of the headphones if any <li>headphone_mix : Set the proportion of the active desk you can hear in the headphone in addition to the working desk <li>mic_volume : Set the volume of the microphone if it's enabled on your soundcard <li>pitch : Set the pitch of the desk <li>pitch_reset : Smoothly reset the pitch to 100% <li>pitch_bend : Add a value to the pitch without changing the display and the pitch slider <li>crossfader : Set the crossfader value <li>level : Set the level value <li>gain : Set the gain value <li>bass : Set the bass equalizer value <li>kill_bass : Remove all bass from the song <li>bassfader : Crossfade only the bass <li>medium : Set the medium equalizer value <li>kill_medium : Remove all medium from the song <li>mediumfader : Crossfade only the mediums <li>high : Set the high equalizer value <li>kill_high : Remove all high from the song <li>highfader : Crossfade only the highs <li>eq_reset : Reset bass, medium and high to 0db <li>menu : Change to the "value"th menu page <li>settings : Open the settings configuration pannel <li>effect : Activate the "value"th effect <li>sample : Play the "value"th sample <li>loop : Enter or exit a loop of "value" beats length <li>shift_loop : Shift the loop from "value" beats <li>loop_in : Set the entry point of a manual loop, or change the entry point if relative <li>loop_in : Set the exit point of a manual loop, or change the exit point if relative <li>loop_length : Set the length of a manual loop <li>set_cue : Save the actual position in the "value"th cue point <li>goto_cue : Go to the "value"th cue point <li>song_pos : Set the playing position to "value" <li>scratch : Scratch the song from "value" samples (must be relative) <li>hold : Hold the disc <li>nudge : Nudge the song from "value" samples (same as scratch, but without beatlock effect) <li>skip_beat : Skip "value" beats in the song <li>zoom : Zoom the rhythm window <li>seek : Quickly move into the song <li>edit_bpm : Open the "fix rhythm" window <li>adjust_cbg : Manually adjust the CBG (obsolete, use edit_bpm instead) <li>adjust_cbg4 : Manually adjust the 4/4 pattern of the CBG (obsolete, use edit_bpm instead) <li>goto_mixpoint : Go to an automix point (obsolete, use edit_bpm instead) <li>set_mixpoint : Set an automix point (obsolete, use edit_bpm instead) <li>edit_comment : Open the "edit comment" window <li>pannel : switch the pannel "value" and all its sub-components <li>show_pannel : show the pannel "value" and all its sub-components <li>hide_pannel : hide the pannel "value" and all its sub-components <li>reset_xp10 : recalibrate the touch-sensitive device of the xp10 <li>lock_pannel : Lock or unlock a sidepannel in the browser (directories or playlist) <li>favorite_folder : Set the current folder as favorite folder <li>scan_hd : Scan the hard drive for audio files <li>scan_cd : Scan a CD and add it in the search database <li>delete_cd : Delete a CD from the search database <li>automix : Enable or Disable the automatic playlist mixing <li>randomize : Randomize the playlist <li>onlynew : Remove all already-played songs from the playlist <li>repeat_playlist : Enable or Disable the repeat mode of the playlist <li>load_playlist : Load a playlist <li>save_playlist : Save a playlist <li>search : Go to the search page, and set the focus to the search box <li>record : Start or stop the recording <li>record_cut : Cut the recording to the next file or track <li>load_effect : Load an effect <li>load_sample : Load a sample</li></ul> <blockquote dir="ltr" style="MARGIN-RIGHT: 0px"> <p>
<font size="6">The Values</font>
<b>Here is the list of the valid value:</b></p></blockquote><ul><li>"reset" : Bring a value back to its default <li>"auto" : Set the matching value (for example, action="pitch" value="auto" set the pitch to match the other desk's BPM) <li>"cut" : Like value="0" <li>"boost" : Like value="4096" <li>+xx : Increment the value by xx <li>-xx : Decrement the value by xx <li>xx : Set the value to xx. If the value is for a slider action, it ranges from 0 (min) to 4096 (max) <li>"temporary" : Do this action only while the button or key is pressed, and reverse to the old value after</li></ul></li></ul> <p> </p> <p> </p><h2><a name="button">The <i>"button"</i> element</h2><p>The syntax of the button element is <i><button action="" chan="" value="" rightclick="" dblclick="" leftclick="" pannel=""></i>.
<ul> <li><i>action</i> is an <a href="#action">action</a> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>.
<li><i>value</i> specify a <a href="#value">value</a> that is action dependent <li><i>rightclick</i> can specify a different <a href="#value">value</a> if the button is clicked with the right mouse button <li><i>leftclick</i> can specify a different <a href="#value">value</a> if the button is clicked with the left mouse button <li><i>dblclick</i> can specify a different <a href="#value">value</a> if the button is double-clicked <li><i>pannel</i> can put the button into a specific <a href="#pannel">pannel</a> </li></ul><p>Then, as child elements of the <i>"button"</i> element, you find its definitions.
The available definitions of a button are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the button <li><i><pos x="" y=""></i> : Give the position of the button on the screen <li><i><up x="" y=""></i> : Give the coordinate of the graphic to use when the button is normal <li><i><down x="" y=""></i> : Give the coordinate of the graphic to use when the button is pushed <li><i><selected x="" y=""></i> : Give the coordinate of the graphic to use when the button is selected <li><i><over x="" y=""></i> : Give the coordinate of the graphic to use when the mouse is over the button <li><i><overselected x="" y=""></i> : Give the coordinate of the graphic to use when the mouse is over the button and the button is selected <li><i><downselected x="" y=""></i> : Give the coordinate of the graphic to use when the button is pushed and selected <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the button <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the button <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask </li></ul> <p>Except for <i>size</i> and <i>pos</i>, all the other definitions are optional
</p><h2><a name="slider">The <i><slider></i> element</h2><p>The syntax of the slider element is <i><slider action="" chan="" value="" dblclick="" rightclick="" leftclick="" pannel="" orientation="" direction="" relative=""></i>.
The properties values are: <ul> <li><i>action</i> is an <a href="#action">action</a> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>. <li><i>value</i> specify a <a href="#value">value</a> that is action dependent (usually you won't define a numeric value since the slider's position will define it,
but you can use the <i>"temporary"</i> value for example) <li><i>rightclick</i> can specify a different <a href="#value">value</a> if the slider is clicked with the right mouse button <li><i>leftclick</i> can specify a different <a href="#value">value</a> if the slider is clicked with the left mouse button <li><i>dblclick</i> can specify a different <a href="#value">value</a> if the slider is double-clicked <li><i>pannel</i> can put the slider into a specific <a href="#pannel">pannel</a>
<li><i>orientation</i> : Possible values: <ul> <li><i>horizontal</i>, for a simple horizontal slider <li><i>vertical</i>, for a simple vertical slider <li><i>circle</i>, for a circular slider <li><i>round</i>, for a knob-like button</li></ul> <li><i>direction</i> (<i>horizontal</i> and <i>vertical</i> sliders only) : possible values: <i>"up"</i> (default) or <i>"down"</i> <li><i>relative</i> : if set to "<i>yes</i>", the slider will move its associated value relatively </li></ul> <p> And its definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the slider <li><i><pos x="" y=""></i> : Give the position of the slider on the screen <li><i><up x="" y=""></i> : Give the coordinate of the graphic to use when the slider is normal <li><i><selected x="" y=""></i> : Give the coordinate of the graphic to use when the slider is selected <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the slider <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the slider <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask <li><i><fader></i> (<i>horizontal</i> and <i>vertical</i> sliders only) : The definition is the same as a <a href="#button"><i>"button"</i></a> element without an action, and it will act as a fader for the slider <li><i><circle x="" y="" anglemin="" anglemax="" sectsize="" direction=""></i> (<i>circle</i> sliders only) : define the circular slider geometry with these properties: <ul> <li>x<i></i> : center of the circle <li>y<i></i> : center of the circle <li>anglemin<i></i> : angle (in degree) for the zero position of the slider <li>anglemax<i></i> : angle (in degree) for the maximum position of the slider <li>sectsize<i></i> : if not zero (default value), the slider will have a "fader" of <i>sectsize</i> width <li>direction<i></i> : possible values: <i>"cw"</i> (default) or <i>"ccw"</i></li></ul> <li><i><fader move="" sensibility=""></i> (<i>round</i> sliders only) : The <i>move</i> possible values are <i>"full"</i>, <i>"horz"</i>, <i>"vert"</i>, <i>"v"</i> or <i>"circ"</i>.
The <i><fader></i> element may contains these definitions: <ul> <li><i><pos x="" y="" nb="" nbx="">></i> : give the coordinate of the graphics to use for the slider (depending on the slider value).
If <i>nbx</i> is specified, the graphic is split on several rows <li><i><over x="" y="" nb="" nbx="">></i> : give the coordinate of the graphics to use when the mouse is over the slider</li></ul></li></ul> <p>
</p><h2><a name="browser">The <i><browser></i> element</h2><p>The browser element sets the space that will be used to draw the windows (search, files, ...).
You can only have one browser element in a given skin file, but you do have to define one. <p>The syntax of the browser element is <i><browser></i>.
The browser definitions are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the browser window <li><i><pos x="" y=""></i> : Give the position of the browser window on the screen <li><i><text font="" size="" weight="" color="" over="" selected=""></i> : Give the main text's font, size and colors <li><i><options font="" size="" weight="" color="" over="" selected=""></i> : Give the options text's font, size and colors <li><i><widgets font="" size="" weight="" color="" facecolor="" lightcolor="" shadowcolor="" highlightcolor="" darkshadowcolor= ""< BR> stripescolor="" trackcolor1="" trackcolor2=""></i> : Give the colors and font for the widgets (scrollbars, ...) <li><i><colormatrix rr="" rg="" rb="" gr="" gg="" gb="" br="" bg="" bb=""></i> :
Set a color transformation matrix that will be applied on the built-in graphics (icons, ...)</li></ul> <p>
</p><h2><a name="rhythm">The <i><rhythm></i> element</h2><p>The rhythm element defines where and how the rhythm curves will be displayed. <p>The syntax of the rhythm element is <i><rhythm></i>.
The rhythm definitions are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the rhythm window <li><i><pos x="" y=""></i> : Give the position of the rhythm window on the screen <li><i><up x="" y=""></i> : give the background graphic to be used <li><i><chan1 x="" y=""></i> : give the graphic to be used when drawing the curve for the first desk <li><i><chan2 x="" y=""></i> : give the graphic to be used when drawing the curve for the second desk <li><i><both x="" y=""></i> : give the graphic to be used when drawing a point that belong to both curves <li><i><color back="" chan1="" chan2="" both=""></i> : (optional) Give simple colors to the curves. The colors must be a key in the standard VGA palette.
This can be faster on slower systems than to use the <i>chan1</i>, <i>chan2</i> and <i>both</i> definitions (see below) <li><i><grid1 width="" mainwidth=""></i> : Set up the CBG (computed beat grid) for the default channel. The <i><grid1></i> element has these sub-elements : <ul> <li><i><size width="" height=""></i> : Give the width and height of the CBG window <li><i><pos x="" y=""></i> : Give the position of the CBG window on the screen <li><i><up x="" y=""></i> : give the background graphic to be used <li><i><down x="" y=""></i> : give the CBG graphic to be used</li></ul> <li><i><grid2 width="" mainwidth=""></i> : Same as <i><grid1></i>, but for the active channel</li></ul><p></p> <p>
</p><h2><a name="songpos">The <i><songpos></i> element</h2><p>The songpos is a special slider that is used to display and set the song position, display the song's structure, display and set the first five cue points.
<p>It has all the properties and definitions of a <a href="#slider"><i><slider></i></a>, plus those: <ul> <li><i><down x="" y=""></i> : Give the graphic to use for portions of the song not played yet, and without any volume <li><i><volume x="" y=""></i> : Give the graphic to use for portions of the song not played yet, and with a maximum volume
(the display will be a fade between down and volume) <li><i><selected x="" y=""></i> : Give the graphic to use for portions of the song already played, and without any volume <li><i><volumeselected x="" y=""></i> : Give the graphic to use for portions of the song already played, and with a maximum volume
(the display will be a fade between selected and volumeselected) <li><i><cues></i> : Define the sprites to be used as CUE markers. Includes the following definitions : <ul> <li><i><size width="" height=""></i> : Give the width and height of the cue sprite <li><i><up x="" y=""></i> : give the cue sprite graphic <li><i><down x="" y=""></i> : give the graphic to be used when the cue is pushed <li><i><over x="" y=""></i> : give the graphic to be used when the mouse is over the cue <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the cue</li></ul></li></ul><p></p> <p>
</p><h2><a name="scratch">The <i><scratch></i> element</h2><p>A scratch zone defines a zone where the user can scratch using the mouse. <p>The syntax of the scratch element is <i><scratch chan="" factor=""></i>.
The properties values are: <ul> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>. <li><i>factor</i> : (optional) multiply the mouse movement by factor/4096</li></ul> <p> The scratch definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the scratch zone <li><i><pos x="" y=""></i> : Give the position of the scratch zone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the scratch zone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask <li><i><center x="" y=""></i> : Give the center of the circular mouse movement</li></ul><p></p> <p>
</p><h2><a name="textzone">The <i><textzone></i> element</h2><p>The syntax of the textzone element is <i><textzone chan="" resetcounter="" pannel=""></i>.
The properties values are: <ul> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>. <li><i>resetcounter</i> : if set to <i>"true"</i>, the counter will be reset if this textzone is clicked <li><i>pannel</i> can put the textzone into a specific <a href="#pannel">pannel</a> </li></ul> <p> The textzone definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the textzone <li><i><pos x="" y=""></i> : Give the position of the textzone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the textzone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask <li><i><text font="" weight="" size="" color="" align="" format=""></i> : Specify the text to be displayed with these properties: <ul> <li><i>font</i> : select the font to be used (default: arial) <li><i>weight</i> : possible values: <i>"normal"</i> (default) or <i>"bold"</i> <li><i>size</i> : give the font size (default: 12) <li><i>color</i> : give the font color (default: white). The color can be written in numerical format (#0000FF) or with the color name ("blue") <li><i>align</i> : possible values: <i>"left"</i>, <i>"right"</i>, <i>"center"</i> (or <i>"middle"</i>) <li><i>format</i> : this string defines what will be written (see the exact format below) <li><i>scroll</i> : if set to <i>"yes"</i>, the text will scroll if it can't fit in the box</li></ul> <li><i><text2 font="" weight="" size="" color="" align="" format=""></i> : Specify an alternate text to be displayed if the user click on the textzone. <li><i><text3></i>, <i><text4></i>, <i><text5></i> : Same as text2 (the display will cycle through the defined text each time the user click the textzone). </li></ul> <p>The format is a string that describes how the text will be displayed.
It can contain a few embedded commands:</p><ul> <li><i>\\</i> : print a single \ character <li><i>\n</i> : print a line feed <li><i>\r</i> : print a carriage return <li><i>\t</i> : print a tab character <li><i>\xx</i> : print the ascii character xx <li><i>%%</i> : print a single % character <li><i>%yy</i> : goto to the yy line <li><i>%xx,yy</i> : goto to the xx,yy position <li><i>%title</i> : print the song's title <li><i>%author</i> : print the song's author <li><i>%fullhour</i> : display the time in a hh:mm:ss format <li><i>%hour</i> : display the time in a hh:mm format <li><i>%counter</i> : display a counter <li><i>%pitch </i>: print the pitch value <li><i>%time</i> : print the length of the song (can use modifiers - see below) <li><i>%spent</i> : print the spent time of the song (can use modifiers) <li><i>%left</i> : print the left time of the song (can use modifiers) <li><i>%cueX</i> : print the time position of the Xth cue point (can use modifiers) <li><i>%tocueX</i> : print the time to the Xth cue point (can use modifiers) <li><i>%fromcueX</i> : print the time elapsed from the Xth cue point (can use modifiers) <li><i>%start</i> : print the time position of the first beat (can use modifiers) <li><i>%end</i> : print the time position of the last beat (can use modifiers) <li><i>%tostart</i> : print the time to the first beat (can use modifiers) <li><i>%toend</i> : print the time to the last beat (can use modifiers) <li><i>%fromstart</i> : print the time elapsed from the first beat (can use modifiers) <li><i>%fromend</i> : print the time elapsed from the last beat (can use modifiers) <li><i>%bpm</i> : print the bpm of the song (can use modifiers) <li><i>%level</i> : print the song's level in dB (can use modifiers) <li><i>%comment</i> : print the song's comment if any</li></ul> <p>Some of the % commands can be used with modifiers. Modifiers are capitalized letters you insert between the % and the command. You can use:</p><ul> <li><i>P</i> : modify the value to reflect the pitch change <li><i>L</i> : use the local value instead of the global value (only used by <i>%level</i>) <li><i>B</i> : display the value as a number of beat instead of a time</li></ul> <p>
</p><h2><a name="visual">The <i><visual></i> element</h2><p>A visual is a zone that changes its display to reflect various things. <p>The syntax of the visual element is <i><visual source="" factor="" type="" chan="" pannel="" orientation="" direction=""></i>.
The properties values are: <ul> <li><i>source</i> : possible values: <ul> <li><i>"beat"</i> : The beat intensity <li><i>"rotation"</i> : The angle of the disc (depends on the position and the RPM speed) <li><i>"arm"</i> : The position of the turntable's arm (moves on PLAY and PAUSE) <li><i>"volume"</i> : The volume (depends on the crossfader and the level values) <li><i>"position"</i> : The position in the song</li></ul> <li><i>factor</i> : Optional factor to multiply (if positive) or divide (if negative) the source's value by <li><i>type</i> : possible values: <ul> <li><i>"onoff"</i> : Display the up graphic if source>=2048, or the down graphic if source<2048 <li><i>"transparent"</i> : Fade smoothly between up and down graphics <li><i>"linear"</i> : Display a portion from the down graphic then a portion from the up graphic <li><i>"custom"</i> : Display a specific graphic depending on the source value</li></ul> <li><i>chan</i> : possible values: <i>"1"</i>, <i>"2"</i>, <i>"default"</i>, <i>"active"</i> or <i>"both"</i> (default) <li><i>pannel</i> can put the visual into a specific <a href="#pannel">pannel</a> <li><i>orientation</i> : (defined for type="linear" only) possible values: <i>"horizontal"</i> or <i>"vertical"</i> <li><i>direction</i> : (defined for type="linear" only) possible values: <i>"left"</i>, <i>"right"</i>, <i>"up"</i> or <i>"down"</i></li></ul> <p> The visual definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the visual <li><i><pos x="" y=""></i> : Give the position of the visual on the screen <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the visual <li><i><up x="" y=""></i> : (all types except "custom") Give the coordinate of the graphic to use when the visual is low <li><i><down x="" y=""></i> : (all types except "custom") Give the coordinate of the graphic to use when the visual is high <li><i><up x="" y="" nb="" nbx=""></i> : (type="custom" only) Give the coordinate of the graphics to use with the custom type (works like for a "round" slider) </li></ul> <p>
</p><h2><a name="dropzone">The <i><dropzone></i> element</h2><p>A dropzone is a zone where a file could be dragged over in order to load it. <p>The syntax of the dropzone element is <i><dropzone chan="" pannel=""></i>.
The properties values are: <ul> <li><i>chan</i> : possible values: <i>"1"</i>, <i>"2"</i>, <i>"active"</i> (default) or <i>"playlist"</i> <li><i>pannel</i> can put the dropzone into a specific <a href="#pannel">pannel</a> </li></ul> <p> The dropzone definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the dropzone <li><i><pos x="" y=""></i> : Give the position of the dropzone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the dropzone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask </li></ul> <p>
</p><h2><a name="grabzone">The <i><grabzone></i> element</h2><p>A grabzone define a zone that can be used to move the VirtualDJ's window if it is not maximized.
If no grabzone is defined, any zone that is not a defined element act as a grabzone. <p>The syntax of the grabzone element is <i><grabzone></i>.
The grabzone definitions are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the grabzone <li><i><pos x="" y=""></i> : Give the position of the grabzone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the grabzone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask </li></ul> <p>
</p><h2><a name="pannel">The <i><pannel></i> element</h2><p>A pannel is a zone that group together several other elements, in order to hide or show all of them at once.
Pannels are very usefull if you want to put several groups of elements on the same place, and switch from one group to another with a button or a shortcut. <p>The syntax of the pannel element is <i><pannel visible="" id="" group=""></i>.
The properties values are: <ul> <li><i>visible</i> : <i>"yes"</i> to have it shown at the begining (when the skin is loaded), <i>"no"</i> to have it hidden,
<em>"timecode"</em> to have it available in timecode mode only, or <em>"DJConsole"</em> to only have it react to Hercules DJ Console buttons <li><i>id</i> : every element which has a <i>pannel=""</i> equal to this <i>id</i> will belong to this pannel <li><i>group</i> : only one pannel from a common group can be shown at a time (that means that when you show a pannel belonging to a group,
all the other pannels from that group will be hidden) </li></ul> <p> The pannel definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the pannel <li><i><pos x="" y=""></i> : Give the position of the pannel on the screen <li><i><down x="" y=""></i> : Give the coordinate of the graphic to use when the pannel is displayed <li><i><up x="" y=""></i> : Give the coordinate of the graphic to use to erase the pannel when it is hidded <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the pannel </li></ul><p></p></a></font>Enjoy! Skining VDJ.
<a href="http://www.virtualdj.com/pm/write.html?dst=3183"><img src="http://www.virtualdj.com/images/pm.gif" border="0">DJ Format</a>
<a href="http://www.virtualdj.com/pm/write.html?dst=614579"><img src="http://www.virtualdj.com/images/pm.gif" border="0">DJ Mykel</a>
<a href="http://www.virtualdj.com/pm/write.html?dst=34882"><img src="http://www.virtualdj.com/images/pm.gif" border="0">DJ-In-Norway</a>
[/html]
First of all, always remember you don't need to be a genius to begin to skin.
Choose your favorite skin in the skin download section. Take an easy skin, with less buttons or functions in order to make sure you understand the way it works.
<b>OK Unzip the skin file.</b>
Unzip directly in the skin folder this way the skin will appear in VDJ with it's filename only (easier to rapidly check the results of the modifications). This way you won't need to rezip and move files these operations take many mouse clicks and time.
<b>Open the BMP file</b>
When Paint appears, make sure you can see the status line or click on the view menu then check for the status bar.
<b>Status Bar in PaintShop Pro.</b>
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rtg.jpg">
The .bmp file contains all the graphics needed in your skin. You can use any bitmap editor (from Paint to Photoshop) to modify or create it. The bitmap will usually have a width of 1024, and a height of more than 768. In the first 768 rows you'll find the background used for your skin. The next rows are used to store additional graphics, like pushed or selected buttons.
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rt113g.jpg">
OK. Let's move your mouse around in the pic, and see in the status bar (right) the coordinates of the point you focus. You can focus very precisely when zooming on a part of the pic. Try to draw a selection box : the status line tells you the width and the height of the box. Okay now you can find the line 768 (depending on the skin resolution) in the pic. Below this limit, the skin user won't see anything. Look around, you can see there are all the highlighted and animated stuff, lightening visual parts, moving sliders and so on.
===================================================
<b>Open the XML file</b>
For xml editing you can use <a href="http://www.philo.de/xmledit">Open XML Editor (free)</a>
What is it? The xml script will tell to VDJ all the skin's picture informations, such as the position of the different buttons, where the highighted buttons are, where the browser will be, and so on. WOW there are MANY numbers here! These are the coordinates you saw in paint. You will use paint to get the pos and width of the buttons, then report them in the xml file, and again, and again in order to get the skin working. All the objects in the skin have name coordinates and even some special fields that you have to know. This is very important, the more you learn about the skin engine, the better the skin is. To help you to learn the different elements, Atomix Production wrote a skin development knowledge base <a href="http://www.virtualdj.com/support/developers/skin.html"></a> Learn all the page and you'll become a skillful skinner! It can sound like a joke but it's true.
OK, Take one button, let's say play. Go to paint and try to move the play button to another location. Save the file, but don't quit paint. Now go to the script and find the line named button action="play_stutter".
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rt111g.jpg">
Change the button's ordinates according to the Paint status bar. Save it all and test the skin in Virtual DJ to verify your work.
<img src="http://i60.photobucket.com/albums/h18/djformat/Image2rt112g.jpg">
You'll see that verifying is a hard part of the job (I verify maybe each minute the work, except for very long processes. Just modifying a skin will let you know how hard the work is, and how long the process can be. It's not that hard just reporting thousands of numbers into a text file.
<b>Creating an entire new skin</b>
Creating a skin is not that hard, in practice but on the other hand it requieres specific skills. The hard work won't come from the xml script but from the picture part. It will take a long time to elaborate a great bmp file with all buttons (activated or not), with all the features of VDJ. To be beautiful even a small animation part can take hours! Even days! You will have to 'imagine' all the parts of the skin and 'manage' the space allowed. Be consciousness about those things.
<b>What does a skin need in order to go in VDJ?</b>
</p><ul><li>Must have the 'skin' header & footer <li>Must have the VDJ logo.</li></ul>
At this point your skin is valuable for VDJ. The following parts are needed to navigate :
<ul type="square"><li>A 'browser' element <li>Minimize, maximize, close buttons <li>A 'settings' button (NOT NEEDED TO GET STARTED, BUT NEEDED TO CHANGE THE SKIN AGAIN!)</li></ul>
<b>In order to have your skin published</b><ul type="circle"><li>It must the VirtualDJ Logo not an image on the bitmap. <li>The Xml version must refer to 3 or above otherwise it will not be published. <li>Reference to VirtualDJ website must be found somewhere on the Bitmap. <li>There must <strong>NOT</strong> be any personal email address or web links in either the XML or BMP (you may include your name though)</li></ul>
Feel free to drop me a line with anything I can assist you with. My MSN details are in <a href="http://www.virtualdj.com/blog/DJ%20FORMAT/">my blog</a>, or you can <a href="http://www.virtualdj.com/pm/write.html?dst=3183">PM me here.</a>
==================================================================
<a name="Resizer"></a><b>VDJ Skin - How to Resize VDJ Skins</b>
So what does it do? It resizes your VirtualDJ skins.
<a href="http://www.virtualdj.com/addons/download.html?addon_id=1826">Download VDJSkinResizer Here</a>
<a href="http://www.virtualdj.com/forums/50241/Skins/VDJ_Skin_Resizer_v2_4.html">Go To VDJSkinResizer Thread</a>
Here is a little tutorial with default options to resize a VDJ Skin File.
After, you can experiment yourself the advanced options to enhance the result.
At the end of the file you can find some other infos that may be useful to tweak the software.
<ul><li>Unzip a skin</li></ul><ol> <li>Take a zip skin file (by default they are in C:\Program Files\VirtualDJ\Skins). <li>Uncompress it (open the folder in windows explorer, copy the files and paste them in the skins folder. <li>Open VDJ Skin Resizer. Click on the OK button on the Message Box.</li></ol><ul><li>Resize the XML config file</li></ul><ol><li>In Input File, enter the path of the xml file extracted from the zip. You can do it by clicking on the "..." button to find the file. <li>After opened the xml file, it should automatically fill the Input Size. If this is not the case, open the XML file with Notepad or another text editor, and look at the very first line, there should be "width" and "height" values. You must then enter them in the Input Size boxes (first for width, second for height). <li>Now enter the desired Output Size (it should automatically fill with your desktop resolution). Like before, first box is for width, and second for height. <li>Enter the desired Output File, for this you can click the "..." button, the program will then automatically propose a filename based on the Input File, but with "-resized-WIDTHxHEIGHT", so you don't have to type anything.</li></ol><ul><li>Resize the Image skin file</li></ul><ol><li>Now click on the "Image" pannel at the upper part of the window to show the Image resize parameters. <li>In Input File, enter the path of the image file extracted from the zip. You can do it by clicking on the "..." button to find the file. The Input Size fields will automatically be filled by the size of the input image, but if this is not a valid image then it won't show anything. But you still can try to resize the image. <li>The Output Size should be automatically refreshed proportionally to the size of the input image. Now you can enter the desired size.
Tip: You should try to put the same width as for the XML file, to have the same size.
<li>Now enter the desired Output File. You can click on the "..." button, and the program will automatically propose you a filename based on the input image name.</li></ol> Tip: Try to put the same name as for the XML file, but changing the ".xml" extension to ".bmp", else the final skin won't work.
<ul><li>Run the job</li></ul><ol><li>Now go to "Execute" pannel, and click the button named "Let's go!". <li>Wait until the process is finished</li></ol>
If you have done all the steps carefully, you shouldn't get any error. If this is not the case, then redo the tutorial since the beginning, including unzipping skin file.
<ul><li>Preparing the skin for VirtualDJ</li></ul><ol><li>If the resize process is finished, you can then close VDJSkinResizer. <li>Now, you can compress the skin (windows compression) or test it uncompressed. <li>Make sure the finished files are in the VirtualDJ skins folder (by default: C:Program FilesVirtualDJSkins).</li></ol><ul><li>Load the new skin in VirtualDJ</li></ul><ol><li>Launch VirtualDJ <li>Click on the "Config", "Set" or "?" button to access VirtualDJ Options. Usually this button is on the upper-right, middle-right, or at the bottom-left, but it can be at another place if you use a different skin than default one. <li>Go in Skin pannel. <li>Select your skin in the list. The name should be either: "YourZipName:YourSkinName" or "YourSkinName" (for uncompressed)</li></ol> <p align="left">If everything worked as expected, the skin should be loaded and ready to be used.
Enjoy ! =)
Final Note: You can note that some pixels and animations may be mis-aligned. You can correct these problems manually.
<p>============================================================================================================== <p align="center"><a name="SDK"></a> <a style="FONT-SIZE: 36pt; BORDER-BOTTOM: 3px double" >Developer SDK <sub>(With Updated Entries)</sub></a> <p>This little documentation should help you understand how to create or modify a skin.
<p>First, every skin is made of two files, named: <ul> <li><a href="#bmp">the_name_of_your_skin.bmp</a> <li><a href="#xml">the_name_of_your_skin.xml</a> </li></ul><p>
</p> <h2><a name="bmp">The BMP file</h2> <p>The .bmp file contains all the graphics needed in your skin.
You can use any bitmap editor (from Paint to Photoshop) to modify or create it.
The bitmap will usually have a width of 1024, and a height of more than 768.
In the first 768 rows you'll find the background used for your skin.
The next rows are used to store additional graphics, like pushed or selected buttons.
<h2><a name="xml">The XML file</h2><p> The .xml file describes each element of your skin.
For each element, it defines what it should be used for, where are the graphics used for its various states (in coordinates from the .bmp file),
and various other things.
The xml file can be edited from a simple text editor (like notepad), but it's more likely that you will install a specific xml editor
(by the way, by default, Windows will open a .xml file in internet explorer where you can read it but can't modify it).
<p>The xml file is composed of a root element (<i>Skin</i>), which contains all the elements of your skin.
There are 10 different types of elements: <ul> <li><a href="#button">button</a> <li><a href="#slider">slider</a> <li><a href="#browser">browser</a> <li><a href="#rhythm">rhythm</a> <li><a href="#songpos">songpos</a> <li><a href="#scratch">scratch</a> <li><a href="#textzone">textzone</a> <li><a href="#visual">visual</a> <li><a href="#dropzone">dropzone</a> <li><a href="#grabzone">grabzone</a> <li><a href="#pannel">pannel</a> </li></ul><p>
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><a name="action"></a><font size="6" ;>The Actions</font>
<b>Here is the list of the valid actions</b> <p></p></blockquote><ul type="square"><li>nothing : Useful to make a zone react to the mouse (with over for example) with no action <li>close : Close the software and return to Windows <li>minimize : Minimize the software to the taskbar <li>maximize : Switch to or from the fullscreen mode <li>play : Play the song on desk "chan" <li>play_n_loop : Start a loop on the first beats of the song (or exit the loop the second time). <li>pause : Pause the song on desk "chan" <li>stop : Stop the song on desk "chan" <li>sync : play and synchronize the song on desk "chan" <li>play_pause : Play the song on desk "chan" if it's paused, or pause it if it's playing <li>cue_stop : Cue the song on desk "chan" if it's paused, or stop it if it's playing <li>beatlock : Engage or disable the BeatLock <li>mix : Start an auto-mix <li>select : Set the desk "chan" as the active desk <li>master_volume : Set the windows' soundcard volume <li>headphone_volume : Set the volume of the headphones if any <li>headphone_mix : Set the proportion of the active desk you can hear in the headphone in addition to the working desk <li>mic_volume : Set the volume of the microphone if it's enabled on your soundcard <li>pitch : Set the pitch of the desk <li>pitch_reset : Smoothly reset the pitch to 100% <li>pitch_bend : Add a value to the pitch without changing the display and the pitch slider <li>crossfader : Set the crossfader value <li>level : Set the level value <li>gain : Set the gain value <li>bass : Set the bass equalizer value <li>kill_bass : Remove all bass from the song <li>bassfader : Crossfade only the bass <li>medium : Set the medium equalizer value <li>kill_medium : Remove all medium from the song <li>mediumfader : Crossfade only the mediums <li>high : Set the high equalizer value <li>kill_high : Remove all high from the song <li>highfader : Crossfade only the highs <li>eq_reset : Reset bass, medium and high to 0db <li>menu : Change to the "value"th menu page <li>settings : Open the settings configuration pannel <li>effect : Activate the "value"th effect <li>sample : Play the "value"th sample <li>loop : Enter or exit a loop of "value" beats length <li>shift_loop : Shift the loop from "value" beats <li>loop_in : Set the entry point of a manual loop, or change the entry point if relative <li>loop_in : Set the exit point of a manual loop, or change the exit point if relative <li>loop_length : Set the length of a manual loop <li>set_cue : Save the actual position in the "value"th cue point <li>goto_cue : Go to the "value"th cue point <li>song_pos : Set the playing position to "value" <li>scratch : Scratch the song from "value" samples (must be relative) <li>hold : Hold the disc <li>nudge : Nudge the song from "value" samples (same as scratch, but without beatlock effect) <li>skip_beat : Skip "value" beats in the song <li>zoom : Zoom the rhythm window <li>seek : Quickly move into the song <li>edit_bpm : Open the "fix rhythm" window <li>adjust_cbg : Manually adjust the CBG (obsolete, use edit_bpm instead) <li>adjust_cbg4 : Manually adjust the 4/4 pattern of the CBG (obsolete, use edit_bpm instead) <li>goto_mixpoint : Go to an automix point (obsolete, use edit_bpm instead) <li>set_mixpoint : Set an automix point (obsolete, use edit_bpm instead) <li>edit_comment : Open the "edit comment" window <li>pannel : switch the pannel "value" and all its sub-components <li>show_pannel : show the pannel "value" and all its sub-components <li>hide_pannel : hide the pannel "value" and all its sub-components <li>reset_xp10 : recalibrate the touch-sensitive device of the xp10 <li>lock_pannel : Lock or unlock a sidepannel in the browser (directories or playlist) <li>favorite_folder : Set the current folder as favorite folder <li>scan_hd : Scan the hard drive for audio files <li>scan_cd : Scan a CD and add it in the search database <li>delete_cd : Delete a CD from the search database <li>automix : Enable or Disable the automatic playlist mixing <li>randomize : Randomize the playlist <li>onlynew : Remove all already-played songs from the playlist <li>repeat_playlist : Enable or Disable the repeat mode of the playlist <li>load_playlist : Load a playlist <li>save_playlist : Save a playlist <li>search : Go to the search page, and set the focus to the search box <li>record : Start or stop the recording <li>record_cut : Cut the recording to the next file or track <li>load_effect : Load an effect <li>load_sample : Load a sample</li></ul> <blockquote dir="ltr" style="MARGIN-RIGHT: 0px"> <p>
<font size="6">The Values</font>
<b>Here is the list of the valid value:</b></p></blockquote><ul><li>"reset" : Bring a value back to its default <li>"auto" : Set the matching value (for example, action="pitch" value="auto" set the pitch to match the other desk's BPM) <li>"cut" : Like value="0" <li>"boost" : Like value="4096" <li>+xx : Increment the value by xx <li>-xx : Decrement the value by xx <li>xx : Set the value to xx. If the value is for a slider action, it ranges from 0 (min) to 4096 (max) <li>"temporary" : Do this action only while the button or key is pressed, and reverse to the old value after</li></ul></li></ul> <p> </p> <p> </p><h2><a name="button">The <i>"button"</i> element</h2><p>The syntax of the button element is <i><button action="" chan="" value="" rightclick="" dblclick="" leftclick="" pannel=""></i>.
<ul> <li><i>action</i> is an <a href="#action">action</a> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>.
<li><i>value</i> specify a <a href="#value">value</a> that is action dependent <li><i>rightclick</i> can specify a different <a href="#value">value</a> if the button is clicked with the right mouse button <li><i>leftclick</i> can specify a different <a href="#value">value</a> if the button is clicked with the left mouse button <li><i>dblclick</i> can specify a different <a href="#value">value</a> if the button is double-clicked <li><i>pannel</i> can put the button into a specific <a href="#pannel">pannel</a> </li></ul><p>Then, as child elements of the <i>"button"</i> element, you find its definitions.
The available definitions of a button are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the button <li><i><pos x="" y=""></i> : Give the position of the button on the screen <li><i><up x="" y=""></i> : Give the coordinate of the graphic to use when the button is normal <li><i><down x="" y=""></i> : Give the coordinate of the graphic to use when the button is pushed <li><i><selected x="" y=""></i> : Give the coordinate of the graphic to use when the button is selected <li><i><over x="" y=""></i> : Give the coordinate of the graphic to use when the mouse is over the button <li><i><overselected x="" y=""></i> : Give the coordinate of the graphic to use when the mouse is over the button and the button is selected <li><i><downselected x="" y=""></i> : Give the coordinate of the graphic to use when the button is pushed and selected <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the button <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the button <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask </li></ul> <p>Except for <i>size</i> and <i>pos</i>, all the other definitions are optional
</p><h2><a name="slider">The <i><slider></i> element</h2><p>The syntax of the slider element is <i><slider action="" chan="" value="" dblclick="" rightclick="" leftclick="" pannel="" orientation="" direction="" relative=""></i>.
The properties values are: <ul> <li><i>action</i> is an <a href="#action">action</a> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>. <li><i>value</i> specify a <a href="#value">value</a> that is action dependent (usually you won't define a numeric value since the slider's position will define it,
but you can use the <i>"temporary"</i> value for example) <li><i>rightclick</i> can specify a different <a href="#value">value</a> if the slider is clicked with the right mouse button <li><i>leftclick</i> can specify a different <a href="#value">value</a> if the slider is clicked with the left mouse button <li><i>dblclick</i> can specify a different <a href="#value">value</a> if the slider is double-clicked <li><i>pannel</i> can put the slider into a specific <a href="#pannel">pannel</a>
<li><i>orientation</i> : Possible values: <ul> <li><i>horizontal</i>, for a simple horizontal slider <li><i>vertical</i>, for a simple vertical slider <li><i>circle</i>, for a circular slider <li><i>round</i>, for a knob-like button</li></ul> <li><i>direction</i> (<i>horizontal</i> and <i>vertical</i> sliders only) : possible values: <i>"up"</i> (default) or <i>"down"</i> <li><i>relative</i> : if set to "<i>yes</i>", the slider will move its associated value relatively </li></ul> <p> And its definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the slider <li><i><pos x="" y=""></i> : Give the position of the slider on the screen <li><i><up x="" y=""></i> : Give the coordinate of the graphic to use when the slider is normal <li><i><selected x="" y=""></i> : Give the coordinate of the graphic to use when the slider is selected <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the slider <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the slider <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask <li><i><fader></i> (<i>horizontal</i> and <i>vertical</i> sliders only) : The definition is the same as a <a href="#button"><i>"button"</i></a> element without an action, and it will act as a fader for the slider <li><i><circle x="" y="" anglemin="" anglemax="" sectsize="" direction=""></i> (<i>circle</i> sliders only) : define the circular slider geometry with these properties: <ul> <li>x<i></i> : center of the circle <li>y<i></i> : center of the circle <li>anglemin<i></i> : angle (in degree) for the zero position of the slider <li>anglemax<i></i> : angle (in degree) for the maximum position of the slider <li>sectsize<i></i> : if not zero (default value), the slider will have a "fader" of <i>sectsize</i> width <li>direction<i></i> : possible values: <i>"cw"</i> (default) or <i>"ccw"</i></li></ul> <li><i><fader move="" sensibility=""></i> (<i>round</i> sliders only) : The <i>move</i> possible values are <i>"full"</i>, <i>"horz"</i>, <i>"vert"</i>, <i>"v"</i> or <i>"circ"</i>.
The <i><fader></i> element may contains these definitions: <ul> <li><i><pos x="" y="" nb="" nbx="">></i> : give the coordinate of the graphics to use for the slider (depending on the slider value).
If <i>nbx</i> is specified, the graphic is split on several rows <li><i><over x="" y="" nb="" nbx="">></i> : give the coordinate of the graphics to use when the mouse is over the slider</li></ul></li></ul> <p>
</p><h2><a name="browser">The <i><browser></i> element</h2><p>The browser element sets the space that will be used to draw the windows (search, files, ...).
You can only have one browser element in a given skin file, but you do have to define one. <p>The syntax of the browser element is <i><browser></i>.
The browser definitions are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the browser window <li><i><pos x="" y=""></i> : Give the position of the browser window on the screen <li><i><text font="" size="" weight="" color="" over="" selected=""></i> : Give the main text's font, size and colors <li><i><options font="" size="" weight="" color="" over="" selected=""></i> : Give the options text's font, size and colors <li><i><widgets font="" size="" weight="" color="" facecolor="" lightcolor="" shadowcolor="" highlightcolor="" darkshadowcolor= ""< BR> stripescolor="" trackcolor1="" trackcolor2=""></i> : Give the colors and font for the widgets (scrollbars, ...) <li><i><colormatrix rr="" rg="" rb="" gr="" gg="" gb="" br="" bg="" bb=""></i> :
Set a color transformation matrix that will be applied on the built-in graphics (icons, ...)</li></ul> <p>
</p><h2><a name="rhythm">The <i><rhythm></i> element</h2><p>The rhythm element defines where and how the rhythm curves will be displayed. <p>The syntax of the rhythm element is <i><rhythm></i>.
The rhythm definitions are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the rhythm window <li><i><pos x="" y=""></i> : Give the position of the rhythm window on the screen <li><i><up x="" y=""></i> : give the background graphic to be used <li><i><chan1 x="" y=""></i> : give the graphic to be used when drawing the curve for the first desk <li><i><chan2 x="" y=""></i> : give the graphic to be used when drawing the curve for the second desk <li><i><both x="" y=""></i> : give the graphic to be used when drawing a point that belong to both curves <li><i><color back="" chan1="" chan2="" both=""></i> : (optional) Give simple colors to the curves. The colors must be a key in the standard VGA palette.
This can be faster on slower systems than to use the <i>chan1</i>, <i>chan2</i> and <i>both</i> definitions (see below) <li><i><grid1 width="" mainwidth=""></i> : Set up the CBG (computed beat grid) for the default channel. The <i><grid1></i> element has these sub-elements : <ul> <li><i><size width="" height=""></i> : Give the width and height of the CBG window <li><i><pos x="" y=""></i> : Give the position of the CBG window on the screen <li><i><up x="" y=""></i> : give the background graphic to be used <li><i><down x="" y=""></i> : give the CBG graphic to be used</li></ul> <li><i><grid2 width="" mainwidth=""></i> : Same as <i><grid1></i>, but for the active channel</li></ul><p></p> <p>
</p><h2><a name="songpos">The <i><songpos></i> element</h2><p>The songpos is a special slider that is used to display and set the song position, display the song's structure, display and set the first five cue points.
<p>It has all the properties and definitions of a <a href="#slider"><i><slider></i></a>, plus those: <ul> <li><i><down x="" y=""></i> : Give the graphic to use for portions of the song not played yet, and without any volume <li><i><volume x="" y=""></i> : Give the graphic to use for portions of the song not played yet, and with a maximum volume
(the display will be a fade between down and volume) <li><i><selected x="" y=""></i> : Give the graphic to use for portions of the song already played, and without any volume <li><i><volumeselected x="" y=""></i> : Give the graphic to use for portions of the song already played, and with a maximum volume
(the display will be a fade between selected and volumeselected) <li><i><cues></i> : Define the sprites to be used as CUE markers. Includes the following definitions : <ul> <li><i><size width="" height=""></i> : Give the width and height of the cue sprite <li><i><up x="" y=""></i> : give the cue sprite graphic <li><i><down x="" y=""></i> : give the graphic to be used when the cue is pushed <li><i><over x="" y=""></i> : give the graphic to be used when the mouse is over the cue <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the cue</li></ul></li></ul><p></p> <p>
</p><h2><a name="scratch">The <i><scratch></i> element</h2><p>A scratch zone defines a zone where the user can scratch using the mouse. <p>The syntax of the scratch element is <i><scratch chan="" factor=""></i>.
The properties values are: <ul> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>. <li><i>factor</i> : (optional) multiply the mouse movement by factor/4096</li></ul> <p> The scratch definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the scratch zone <li><i><pos x="" y=""></i> : Give the position of the scratch zone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the scratch zone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask <li><i><center x="" y=""></i> : Give the center of the circular mouse movement</li></ul><p></p> <p>
</p><h2><a name="textzone">The <i><textzone></i> element</h2><p>The syntax of the textzone element is <i><textzone chan="" resetcounter="" pannel=""></i>.
The properties values are: <ul> <li><i>chan</i> can take its value between <i>"1"</i>, <i>"2"</i>, <i>"default"</i> (default), or <i>"active"</i>. <li><i>resetcounter</i> : if set to <i>"true"</i>, the counter will be reset if this textzone is clicked <li><i>pannel</i> can put the textzone into a specific <a href="#pannel">pannel</a> </li></ul> <p> The textzone definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the textzone <li><i><pos x="" y=""></i> : Give the position of the textzone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the textzone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask <li><i><text font="" weight="" size="" color="" align="" format=""></i> : Specify the text to be displayed with these properties: <ul> <li><i>font</i> : select the font to be used (default: arial) <li><i>weight</i> : possible values: <i>"normal"</i> (default) or <i>"bold"</i> <li><i>size</i> : give the font size (default: 12) <li><i>color</i> : give the font color (default: white). The color can be written in numerical format (#0000FF) or with the color name ("blue") <li><i>align</i> : possible values: <i>"left"</i>, <i>"right"</i>, <i>"center"</i> (or <i>"middle"</i>) <li><i>format</i> : this string defines what will be written (see the exact format below) <li><i>scroll</i> : if set to <i>"yes"</i>, the text will scroll if it can't fit in the box</li></ul> <li><i><text2 font="" weight="" size="" color="" align="" format=""></i> : Specify an alternate text to be displayed if the user click on the textzone. <li><i><text3></i>, <i><text4></i>, <i><text5></i> : Same as text2 (the display will cycle through the defined text each time the user click the textzone). </li></ul> <p>The format is a string that describes how the text will be displayed.
It can contain a few embedded commands:</p><ul> <li><i>\\</i> : print a single \ character <li><i>\n</i> : print a line feed <li><i>\r</i> : print a carriage return <li><i>\t</i> : print a tab character <li><i>\xx</i> : print the ascii character xx <li><i>%%</i> : print a single % character <li><i>%yy</i> : goto to the yy line <li><i>%xx,yy</i> : goto to the xx,yy position <li><i>%title</i> : print the song's title <li><i>%author</i> : print the song's author <li><i>%fullhour</i> : display the time in a hh:mm:ss format <li><i>%hour</i> : display the time in a hh:mm format <li><i>%counter</i> : display a counter <li><i>%pitch </i>: print the pitch value <li><i>%time</i> : print the length of the song (can use modifiers - see below) <li><i>%spent</i> : print the spent time of the song (can use modifiers) <li><i>%left</i> : print the left time of the song (can use modifiers) <li><i>%cueX</i> : print the time position of the Xth cue point (can use modifiers) <li><i>%tocueX</i> : print the time to the Xth cue point (can use modifiers) <li><i>%fromcueX</i> : print the time elapsed from the Xth cue point (can use modifiers) <li><i>%start</i> : print the time position of the first beat (can use modifiers) <li><i>%end</i> : print the time position of the last beat (can use modifiers) <li><i>%tostart</i> : print the time to the first beat (can use modifiers) <li><i>%toend</i> : print the time to the last beat (can use modifiers) <li><i>%fromstart</i> : print the time elapsed from the first beat (can use modifiers) <li><i>%fromend</i> : print the time elapsed from the last beat (can use modifiers) <li><i>%bpm</i> : print the bpm of the song (can use modifiers) <li><i>%level</i> : print the song's level in dB (can use modifiers) <li><i>%comment</i> : print the song's comment if any</li></ul> <p>Some of the % commands can be used with modifiers. Modifiers are capitalized letters you insert between the % and the command. You can use:</p><ul> <li><i>P</i> : modify the value to reflect the pitch change <li><i>L</i> : use the local value instead of the global value (only used by <i>%level</i>) <li><i>B</i> : display the value as a number of beat instead of a time</li></ul> <p>
</p><h2><a name="visual">The <i><visual></i> element</h2><p>A visual is a zone that changes its display to reflect various things. <p>The syntax of the visual element is <i><visual source="" factor="" type="" chan="" pannel="" orientation="" direction=""></i>.
The properties values are: <ul> <li><i>source</i> : possible values: <ul> <li><i>"beat"</i> : The beat intensity <li><i>"rotation"</i> : The angle of the disc (depends on the position and the RPM speed) <li><i>"arm"</i> : The position of the turntable's arm (moves on PLAY and PAUSE) <li><i>"volume"</i> : The volume (depends on the crossfader and the level values) <li><i>"position"</i> : The position in the song</li></ul> <li><i>factor</i> : Optional factor to multiply (if positive) or divide (if negative) the source's value by <li><i>type</i> : possible values: <ul> <li><i>"onoff"</i> : Display the up graphic if source>=2048, or the down graphic if source<2048 <li><i>"transparent"</i> : Fade smoothly between up and down graphics <li><i>"linear"</i> : Display a portion from the down graphic then a portion from the up graphic <li><i>"custom"</i> : Display a specific graphic depending on the source value</li></ul> <li><i>chan</i> : possible values: <i>"1"</i>, <i>"2"</i>, <i>"default"</i>, <i>"active"</i> or <i>"both"</i> (default) <li><i>pannel</i> can put the visual into a specific <a href="#pannel">pannel</a> <li><i>orientation</i> : (defined for type="linear" only) possible values: <i>"horizontal"</i> or <i>"vertical"</i> <li><i>direction</i> : (defined for type="linear" only) possible values: <i>"left"</i>, <i>"right"</i>, <i>"up"</i> or <i>"down"</i></li></ul> <p> The visual definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the visual <li><i><pos x="" y=""></i> : Give the position of the visual on the screen <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the visual <li><i><up x="" y=""></i> : (all types except "custom") Give the coordinate of the graphic to use when the visual is low <li><i><down x="" y=""></i> : (all types except "custom") Give the coordinate of the graphic to use when the visual is high <li><i><up x="" y="" nb="" nbx=""></i> : (type="custom" only) Give the coordinate of the graphics to use with the custom type (works like for a "round" slider) </li></ul> <p>
</p><h2><a name="dropzone">The <i><dropzone></i> element</h2><p>A dropzone is a zone where a file could be dragged over in order to load it. <p>The syntax of the dropzone element is <i><dropzone chan="" pannel=""></i>.
The properties values are: <ul> <li><i>chan</i> : possible values: <i>"1"</i>, <i>"2"</i>, <i>"active"</i> (default) or <i>"playlist"</i> <li><i>pannel</i> can put the dropzone into a specific <a href="#pannel">pannel</a> </li></ul> <p> The dropzone definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the dropzone <li><i><pos x="" y=""></i> : Give the position of the dropzone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the dropzone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask </li></ul> <p>
</p><h2><a name="grabzone">The <i><grabzone></i> element</h2><p>A grabzone define a zone that can be used to move the VirtualDJ's window if it is not maximized.
If no grabzone is defined, any zone that is not a defined element act as a grabzone. <p>The syntax of the grabzone element is <i><grabzone></i>.
The grabzone definitions are: <ul> <li><i><size width="" height=""></i> : Give the width and height of the grabzone <li><i><pos x="" y=""></i> : Give the position of the grabzone on the screen <li><i><mousemask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the grabzone <li><i><mouserect x="" y="" width="" height=""></i> : Set a simple rect zone as a mouse mask <li><i><mousecircle x="" y="" r=""></i> : Set a simple circle zone as a mouse mask </li></ul> <p>
</p><h2><a name="pannel">The <i><pannel></i> element</h2><p>A pannel is a zone that group together several other elements, in order to hide or show all of them at once.
Pannels are very usefull if you want to put several groups of elements on the same place, and switch from one group to another with a button or a shortcut. <p>The syntax of the pannel element is <i><pannel visible="" id="" group=""></i>.
The properties values are: <ul> <li><i>visible</i> : <i>"yes"</i> to have it shown at the begining (when the skin is loaded), <i>"no"</i> to have it hidden,
<em>"timecode"</em> to have it available in timecode mode only, or <em>"DJConsole"</em> to only have it react to Hercules DJ Console buttons <li><i>id</i> : every element which has a <i>pannel=""</i> equal to this <i>id</i> will belong to this pannel <li><i>group</i> : only one pannel from a common group can be shown at a time (that means that when you show a pannel belonging to a group,
all the other pannels from that group will be hidden) </li></ul> <p> The pannel definitions are:</p><ul> <li><i><size width="" height=""></i> : Give the width and height of the pannel <li><i><pos x="" y=""></i> : Give the position of the pannel on the screen <li><i><down x="" y=""></i> : Give the coordinate of the graphic to use when the pannel is displayed <li><i><up x="" y=""></i> : Give the coordinate of the graphic to use to erase the pannel when it is hidded <li><i><clipmask x="" y=""></i> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the pannel </li></ul><p></p></a></font>Enjoy! Skining VDJ.
<a href="http://www.virtualdj.com/pm/write.html?dst=3183"><img src="http://www.virtualdj.com/images/pm.gif" border="0">DJ Format</a>
<a href="http://www.virtualdj.com/pm/write.html?dst=614579"><img src="http://www.virtualdj.com/images/pm.gif" border="0">DJ Mykel</a>
<a href="http://www.virtualdj.com/pm/write.html?dst=34882"><img src="http://www.virtualdj.com/images/pm.gif" border="0">DJ-In-Norway</a>
[/html]
Posted Thu 29 Mar 07 @ 5:14 pm