Skin Button
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
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)
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>