Skin Draws

Back to Skin SDK

Skin SDK: The <square> and <circle> elements

Availability: v8.3 onwards

As of VirtualDJ 2018, you can now easily draw graphics (squares, lines, circles etc) inside a skin, without adding them to the graphics file

  • color="" : Define the fill color. Can take HTML, RGB, ARGB or pre-defined colors (green, red, blue etc). For semi-transparent fill, you can use either ARGB/HTML e.g color="#60FF0000" or color="#FF0000" visibility="40%"
  • radius="" (optional) : (for <square>) Define a value in pixels, to create a rectangle with rounded corners.
  • border="" (optional) : Define the width of the border in pixels (0 for no border - default if not used).
  • border_color="" : Define the color of the border. Can take HTML, RGB, ARGB or pre-defined colors (green, red, blue etc).

  • <pos x="" y=""/> : Define the position (X, Y coordinates in pixels) for the element to be displayed inside the skin
  • <size width="" height=""/> : Define the width and height of the element. For <circle>, makes sense to have the same width and height, but you could also create ovals if differ.
  • <gradient/> : Add a <gradient> child to get gradient fill color instead of solid (as defined in color=""). The gradient can take the following parameters
    • type="horizontal|vertical|circular" : Define the gradient type
    • color1="" : Define the start color of the gradient (top color for vertical, left color for horizontal, middle color for circular)
    • color2="" : Define the end color of the gradient (bottom color for vertical, right color for horizontal, outer color for circular)
    If a <gradient> is defined, the color="" parameter will not be taken into account


A 200x100 square with rounded corners, yellow 2px border and a vertical gradient (red to blue) fill
<square border="2" border_color="yellow" radius="20" >
<pos x="400" y="5"/>
<size width="200" height="100"/>
<gradient type="vertical" color1="red" color2="blue"/>

A blue circle of 250 pixels with a blue 2px border width
<circle color="#0000FF" border="2" border_color="red" >
<pos x="30" y="30"/>
<size width="250" height="250"/>

A horizontal white line of 450 pixels (and 2 pixels height)
<square color="#FFFFFF" >
<pos x="30" y="30"/>
<size width="450" height="2"/>

Back to Skin SDK