VirtualDJ - VDJPedia - Skin Button

Skin Button

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

The <button> element is used to display clickable buttons, with the ability to define and style its graphics for all states along with icon and/or text overlays.

Syntax: <button action="" leftclick="" middleclick="" rightclick="" dblclick="" query="" deck="" panel="" visibility="" os="">.

Inherited Attributes :
visibility="" os="" panel="" deck=""
See Global Element Attributes

Other Attributes :

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

Note : Except for action, all other attributes are optional

Children:

<tooltip> : Set the tooltip for this button. Tooltips can have \n inside the text to define additional lines.
<pos x="" y=""/> : Give the (x,y) position that the button will have on the screen. Read further details in Skin Element Position
<size width="" height=""/> : Give the width and the height of the button.

Define the graphics:
There are 2 ways to define the graphics of a button :

a) Pointing to a part of the skin image:
<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
```
<button action="loop">
	<pos x="125" y="220"/>
	<size width="70" height="44"/>
	<up x="120" y="1890" />
	<overx="120" y="1890+100" />
	<down x="120" y="1890+200" />
	<selected x="120" y="1890+300" />
</button>
```
b) Draw the button with code (vector graphics) as...
<up shape="" color="" border="" border_size="" radius="" gradient="" color2=""/>
(and same for <down>, <selected>, <over> etc, with the following attributes :
[list]
shape="circle|square" Define the shape of the button. Default (if not defined is square)
color="" : Define the fill color of the button. See Color Definitions
border="" : Define the color of the border. See Color Definitions
border_size="" : Define the thickness of the border (in pixels)
radius="" : Define the radius of all the button's corners to create rounded corner buttons.
gradient="horizontal|vertical|circular" : Define if the button will be filled with one of the available gradients. If not defined, the button will be filled with the solid color as defined in the color="" attribute .
color2="" : If a gradient is defined above, use this property to define its end color (start color will be the color="" attribute ).

<button action="loop">
	<pos x="125" y="220"/>
	<size width="70" height="44"/>
	<up radius="6" border_size="2" border="black" color="#2F3034" />
	<over radius="6" border_size="2" border="black" color="#2C3B47" />
	<down radius="6" border_size="2" border="black" color="#1287E0"/>
	<selected radius="6" border_size="2" border="black" color="#1287E0"/>
</button>

Drawing and mouse masks:

<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

Overlay Texts:

<text> : Set a text to be displayed inside the button (see <text> in <textzone> for syntax)

<textselected> : Set a text to be displayed inside the button when selected (see <text> in <textzone> for syntax)

<textdown> : Set a text to be displayed inside the button when pushed (see <text> in <textzone> for syntax)

<textover> : Set a text to be displayed inside the button when mouse is over (see <text> in <textzone> for syntax)

Note: Usually, the various text children have the same font, align and text/format/action parameters and it's just the color of the text that varies between those off/on/down/over states. In this case, you can just have a <text> child and use color="" colordown="" coloover="" etc to define the color of the text.

<button action="play_pause">
	<tooltip>Line 1\nLine2</tooltip>
	<pos x="+250" y="+20"/>
	<size width="170" height="70"/>
	<off color="gray" border_size="1" border="gray"/>
	<on color="#202020" border_size="1" border="white"/>
	<over color="#505050" border_size="1" border="white"/>
	<text fontsize="15" color="gray" colorover="white" colordown="yellow" colorselected="red" weight="bold" align="center" text="PLAY"/>
</button>

Overlay Icons: You can add/overlay an icon to your button, either by pointing to a part of the skin image or use internal icons.

<icon x="" y="" width="" height="" dx="" dy="" downx="" downy="">: Overlay an image on the button by defining its x, y position and size (width, height). Use dx="" and/or dy="" to create an offset (e.g. dx="+10" will position the icon 10 pixels to the right. Use downx="" downy="" to position the icon differently when the button is down (selected/pressed).

[*]<icon sysicon="" width="" height="" dx="" dy="" downx="" downy="">: Overlay a system/internal icon on the button. Use dx="" and/or dy="" to create an offset (horizontal or vertical margin). Use downx="" downy="" to position the icon differently when the button is down (selected/pressed).

The available sysicon names are: context_menu, play_button, stop_button, sampler_mode, add_favoritefolder, add_virtualfolder, add_filterfolder, goto_last_folder, grid_view, view_options 'showmusic', view_options 'showvideo', view_options 'showkaraoke', show_splitpanel 'info', show_splitpanel 'sideview', show_splitpanel 'effects', font_size -, font_size +, sideview 'automix', sideview 'sidelist', sideview 'sampler', sideview 'karaoke', sideview 'clone', sideview ", sampler_bank -1, sampler_bank +1, sampler_bank ', sideview_triggerpad, karaoke, automix, effect_dock_gui, effect_show_gui, search, play, play_pause, play_button, stop, pause, stop_button, browser_zoom, maximize, minimize, close, settings. See further details in Default Icons

Different colors can be used for icons by using : coloroff="" colorselected="" colordown="" etc

<button action="play_pause">
....
.....
	<icon sysicon="play_button" color="#404040" colorover="#808080" colordown="green" colorselected="green" width="24" height="24" />
</button>

... or with a custom drawn icon (from image)

<button action="play_pause">
....
.....
	<icon x="453" y="301" width="11" height="10" coloroff="textdark" colorover="textbright" colordown="white" colorselected="white"/>
</button>

Different image icons can be overlayed for <up>, <down>, <over> button status..


<button action="" ...>
	.....
	......
	<icon x="261" y="279" width="14" height="15"> <!-- Icon graphics for up -->
		<over x="261" y="299" width="14" height="15"/>  <!-- Icon graphics for over -->
		<selected x="261" y="299" width="14" height="15"/>  <!-- Icon graphics for selected/on -->
	</icon>
</button>

[/list]
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