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