Quick Sign In:  

 Skin SDK Dropzone

Back to Skin SDK

Skin SDK: The <dropzone> element

A dropzone is a zone where a file could be dragged over in order to load it.

The syntax of the dropzone element is <dropzone deck="" panel="" visibility="">.
The properties values are:
  • deck : possible values: "1", "2", etc. "left", "right", "active" (default) or "playlist"
  • panel can put the dropzone into a specific panel (optional). Best would be to avoid this and nest inside a <panel></panel> if you have several skin elements inside the same panel.
  • visibility : Use a VDJ script that returns true/false, to define in which cases the dropzone will be available (optional)
The dropzone definitions are:
  • <size width="" height=""> : Give the width and height of the dropzone
  • <pos x="" y=""> : Give the position of the dropzone on the screen
  • <mousemask x="" y=""> : (Optional) Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the dropzone
  • <mouserect x="" y="" width="" height=""> : (Optional) Set a simple rect zone as a mouse mask
  • <mousecircle x="" y="" r=""> : (Optional) Set a simple circle zone as a mouse mask
  • <over color="" border_size="" border="" shape="square|circle"/> : (Optional) Set the fill color, border color and border size of the drop area (introduced in VirtualDJ 2020). color="" and border="" can use default color names (such as blue, red, green etc), ARGB, RGB or HTML colors or even color shortcuts.

Example 1:
<dropzone deck="1">
<pos x="+0" y="+45"/>
<size width="700" height="143"/>
<over color="#40000000" border_size="2" border="#FF0000"/>

Example 2:
<define color="textcolor" value="#509BD4" deck="left"/>
<define color="textcolor" value="#D93636" deck="right"/>
<deck deck="right">
<panel visibility="var '@$dropcolor' 0">
<dropzone visibility="var '@$showmixer' 0">
<pos x="-6" y="+0" />
<size width="783" height="183"/>
<over color="transparent" border="textcolor" border_size="1" shape="square"/>
<dropzone visibility="var '@$showmixer' 1">
<pos x="-120+5" y="+0" />
<size width="783+109" height="183"/>
<over color="transparent" border="textcolor" border_size="1" shape="square"/>

Back to Skin SDK