VDJPedia

Skin Button

Back to Skin SDK
Skin SDK: The <button> element

The syntax of the button element is <button action="" leftclick="" middleclick="" rightclick="" dblclick="" query="" panel="" visibility="" os="">.

action is a VDJ Script action that will be performed when the button is pressed
leftclick can specify a different action if the button is clicked with the left mouse button
middleclick can specify a different action if the button is clicked with the middle mouse button
rightclick can specify a different action if the button is clicked with the right mouse button
dblclick can specify a different action if the button is double-clicked
query can specify a different action that will enable (if true) the <on> graphics
visibility define the % transparency of the graphics. VDJ script actions that return true or false to specify when the button will be visible or not. Tip: if you have lots of buttons with the same visibility, it is suggested and less cpu consuming to nest all buttons inside a panel with the same visibility (see Panel)
os : use os="mac" or os="pc" if you need to display a button only when VirtualDJ is running on Window or Mac (e.g. if you need to display the close/min/maximize buttons in different places depending on the Operating system). Do not include os="" if you want the buttons to be displayed on both platforms.
panel provide the name of the panel that the button is part of. Should be avoided. It is suggested to nest elements inside a <panel> (see Panel element)
Note : Except for action, all other definitions are optional

Then, as child elements of the <button> element, you find its definitions.
The available definitions of a button are:

<pos x="" y="" width="" height=""> : Give the (x,y) position, the width and the height that the button will have on the screen
<up x="" y=""> : Give the coordinate from the skin image to use when the button is normal. <off> is the same as <up>
<down x="" y=""> : Give the coordinate from the skin image to use when the button is pushed. <on> is the same as <down>
<selected x="" y=""> : Give the coordinate from the skin image to use when the button is selected
<over x="" y=""> : Give the coordinate from the skin image to use when the mouse is over the button
<overselected x="" y=""> : Give the coordinate from the skin image to use when the mouse is over the button and the button is selected
<downselected x="" y=""> : Give the coordinate from the skin image to use when the button is pushed and selected
<clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the button. Clipmask should be avoided and the elements need to be drawn with transparent background
<mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the button. Mousemask should be avoided and the elements need to be drawn with transparent background.
<mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
<mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask
<tooltip> : Set the tooltip for this button. Tooltips can have \n inside the text to define additional lines.
<text> : Set a text to be displayed inside the button (see <textzone>)
<textselected> : Set a text to be displayed inside the button when selected (see <textzone> for syntax)
<textdown> : Set a text to be displayed inside the button when pushed (see <textzone> for syntax)
<textover> : Set a text to be displayed inside the button when mouse is over (see <textzone> for syntax)
<icon x="" y="" width="" height="" dx="" dy="" downx="" downy="">: Overlay an image on the button
<icon sysicon="" width="" height="" dx="" dy="" downx="" downy="">: Overlay a system icon on the button (see the list at the bottom of this wiki page)

Except for <pos>, all the other definitions are optional
Relative to <pos> coordinates can be used with +/- for all the definitions. <pos> can have relative coordinates as well if nested inside a group or panel (see <group> and <panel>)

Example :

<button action="loop" rightclick="loop_select"  visibility="deck 1 leftdeck">
<Tooltip>Click to enable-disable the selected loop\nRight-click to select a loop length</Toolip>
<pos x="12" y="300" width="49" height="39"/>  
  <off x="+0" y="1130"/>
  <on x="+0" y="1130+50"/>
  <over x="62" y="1130+50"/>
  <down x="+0" y="1172"/>
  <text size="16" weight="bold" color="#e1e1e1" align="center" format="%loop"/>
</button>

Back to Skin SDK