Skin Erstellung

Go Back German Content

Eigenen Skin erstellen
(Übersetzung aus dem Englischen von H. Jakovski)

Dieses Dokument soll eine kleine Einstiegshilfe in das Erstellen eigener Skins geben. Die erläuterten Grundlagen sollen Euch helfen einen Skin zu erstellen oder einen bestehenden an Eure Bedürfnisse anzupassen.

Ein Skin besteht immer aus mindestens den folgenden beiden Dateien:

• der_name_des_skins.bmp
  
• der_name_des_skins.xml
  

Beide Dateien werden in einer ZIP Datei eingepackt.

Wenn Ihr mehrere Versionen eines Skins, z.B. in unterschiedlichen Auflösungen, ablegen wollt so können diese auch in EINER Datei zusammengefasst werden.
Idealer Weise benennt Ihr Eure Skins so das aus dem Namen gleichzeitig die Auflösung hervorgeht.
Also z.B. 'Mein_Skin_1024x768.xml' und 'Mein_Skin_1680x1050.xml' dazu dann noch die beiden entsprechend benannten Bitmaps.

Die BMP Datei
Die .bmp Datei besteht aus allen Graphischen Elementen die in Eurem Skin verwendet werden.
Ihr könnt die Datei mit jedem beliebigen Malprogramm (z.B. dem kostenlosen Gimp) erstellen und bearbeiten.
Die Standardgröße eines Skins ist 1024x768 Pixel. Um weitere Elemente im Skin zu verwenden (z.B. farbige Buttons bei Betätigung) müssen diese unterhalb des entsprechenden Bildbereiches von 1024x768 Pixel eingefügt werden. In der Regel kopiert man einfach den kompletten Skin mit den andersfarbigen Buttons unterhalb des ersten. Die Datei ist dann also z.B. 2048x768 Pixel groß (2x1024).
Ihr könnt aber euch einfach unterhalb Eures Skins eine freie Fläche anlegen auf der Ihr die passenden andersfarbigen Elemente ablegt.
Die Gesamtfläche muss halt so groß sein das Ihr alle noch benötigten Elemente unterhalb des 'Screens' unterbringen könnt.

Die XML Datei
In der .xml Datei werden die Positionen aller Bildelemente Eures Skins angegeben. Die Positionen z.B. eines Buttons im Skin werden mit den entsprechenden XY-Koordinaten angegeben. Außerdem gibt es durch entsprechende Parameterangaben verschiedenste Möglichkeiten das Element zu konfigurieren. Zum bearbeiten der XML Datei eignet sich im einfachsten Fall ein Texteditor wie z.B. Notepad (Windows Startmenu / Programme / Zubehör / Editor).

Textverarbeitungsprogramme wie Word, OpenOffice oder andere sind NICHT geeignet.

Ich persönlich rate zu einem Editor der die Syntax des XML Files grob farblich Strukturiert und somit vermeidet Fehler zu machen. (http://www.pspad.de/)
(Standardmäßig öffnet Windows .xml Dateien mit dem Internet Explorer. Hier kann die Datei lediglich betrachtet, jedoch NICHT bearbeitet werden.

Die .xml Datei besteht aus einem sogenannten 'Root-Element' welches dann wiederum alle weiteren Elemente enthält.
Es gibt 10 verschiedene Typen von Elementen:

• button
  
• slider
  
• browser
  
• rhythm
  
• songpos
  
• scratch
  
• textzone
  
• visual
  
• dropzone
  
• grabzone
  
• pannel
  

Aktionen
Außerdem werden diverse VDJ-Script Aktionen (Actions) verarbeitet.


Elemente
Das Button Element
Die Syntax des Button Elements ist <button action="" rightclick="" dblclick="" pannel="">.
Folgende Werte können verwendet werden:

• action ist eine VDJScript Action. Diese wird beim Betätigen des Elements ausgeführt
  
• rightclick kann für das Rechts-Anklicken mit der Maus eine andere Action übergeben
  
• leftclick kann für das Links-Anklicken mit der Maus eine andere Action übergeben
  
• dblclick kann für das Doppelklicken mit der Maus eine andere Action übergeben
  
• pannel Setzt den Button nur für ein definiertes Pannel
  

Als sogenannte Kind-Elemente (Child Elements) für das Button-Element finden sich die Definitionen.
Die verfügbaren Definitionen sind:

• <size width="" height=""> : Setzt die Breite und Höhe des Buttons
  
• <pos x="" y=""> : Setzt die X/Y Position des Buttons (obere linke Ecke)
  
• <up x="" y=""> : Setzt die X/Y Position des Buttons (obere linke Ecke) wenn dieser NICHT betätigt ist
  
• <down x="" y=""> : Setzt die X/Y Position des Buttons (obere linke Ecke) wenn dieser betätigt ist
  
• <selected x="" y=""> : Setzt die X/Y Position des Buttons (obere linke Ecke) wenn dieser ausgewählt ist
  
• <over x="" y=""> : Setzt die X/Y Position des Buttons (obere linke Ecke) wenn die Maus darüber ist (Mouseover)
  
• <overselected x="" y=""> : Setzt die X/Y Position des Buttons (obere linke Ecke) wenn dieser ausgewählt ist und sich die Maus darüber befindet
  
• <downselected x="" y=""> : Setzt die X/Y Position des Buttons (obere linke Ecke) wenn dieser ausgewählt ist und mit der Maus angeklickt wird
  
• <clipmask x="" y=""> : Setzt die Koordinaten für die Maske die zum zeichnen des Buttons verwendet wird (s/w Grafik)
  
• <mousemask x="" y=""> : Setzt die Koordinaten für die Maske die zum zeichnen des Buttons verwendet wird (s/w Grafik) wenn sich die Maus darüber befindet (Mouseover)
  
• <mouserect x="" y="" width="" height=""> : Setzt eine einfache rechteckige Form als Maus-Maske (Bei nicht rechteckigen Buttons bitte mit den Masken arbeiten: clipmask/mousemask)
  
• <mousecircle x="" y="" r=""> : Setzt einen Runden Bereich als Mausmaske
  
• <tooltip> : Setzt den Tooltip für diesen Button (Hilfetext)
  
• <text format="" dx="" dy="" ...> : Schreibt einen Text innerhalb des Buittons (siehe auch <textzone>)
  

Mit Ausnahme für Größe und Position (size / position) sind alle anderen Definitionen optional.

Das Slider Element
Die Syntax des Slider Elements ist <slider action="" dblclick="" rightclick="" pannel="" orientation="" direction="" relative="">.
Folgende Werte können verwendet werden:

• action ist eine VDJScript Action die angibt was der Slider steuert
  
• rightclick kann für das Rechts-Anklicken mit der Maus eine andere Action übergeben
  
• leftclick kann für das Links-Anklicken mit der Maus eine andere Action übergeben
  
• dblclick kann für das Doppelklicken mit der Maus eine andere Action übergeben
  
• pannel Setzt den Slider nur für ein definiertes Pannel
  
• orientation : Mögliche Werte:
  
  • horizontal, für einen einfachen Horizontalen Slider
    
  • vertical, für einen einfachen Vertikalen Slider
    
  • circle, für einen Drehknopf Slider mit (links/rechtsanschlag)
    
  • round, für einen Drehknopf Slider (Endlosregler)
    
• direction (nur für horizontale und verticale Slider) : mögliche Werte: "up" (standard) oder "down"
  
• relative : wenn hier "yes" eingetragen wird bewegt der Slider den eingestellten Wert relativ zur aktuellen Position
  

Die verfügbaren Definitionen sind:

• <size width="" height=""> : Setzt die Breite und Höhe des Sliders
  
• <pos x="" y=""> : Setzt die X/Y Position des Sliders
  
• <up x="" y=""> : Setzt die X/Y Position des Sliders wenn der Slider nicht bewegt wird
  
• <selected x="" y=""> : Setzt die X/Y Position des Buttons wenn dieser betätigt ist
  
• <clipmask x="" y=""> : Setzt die Koordinaten für die Maske die zum zeichnen des Sliders verwendet wird (s/w Grafik)
  
• <mousemask x="" y=""> : Setzt die Koordinaten für die Maske die zum zeichnen des Sliders verwendet wird (s/w Grafik) wenn sich die Maus darüber befindet (Mouseover)
  
• <mouserect x="" y="" width="" height=""> : Setzt eine einfache rechteckige Form als Maus-Maske (Bei nicht rechteckigen Slidern bitte mit den Masken arbeiten: clipmask/mousemask)
  
• <mousecircle x="" y="" r=""> : Setzt einen Runden Bereich als Mausmaske
  
• <fader> (nur horizontale and verticale Slider) : Die Definition ist gleich wie beim <button> Element ohne eine Action, er agiert als Knopf für den Slider
  
• <circle x="" y="" anglemin="" anglemax="" sectsize="" direction=""> (nur Drehregler mit Anschlag) : Definiert die Anschläge und den Nullpunkt:
  
  • x : Mitte des Drehreglers
    
  • y : Mitte des Drehreglers
    
  • anglemin : Winkel (in Grad) für den Nullpunkt des Sliders
    
  • anglemax : Winkel (in Grad) für den maximal Wert des Sliders
    
  • sectsize : if not zero (default value), the slider will have a "fader" of sectsize width
    
  • direction : mögliche Werte: "cw" (standard - im Uhrzeigersinn) oder "ccw" (gegen den Uhrzeigersinn)
    
• <fader move="" sensibility=""> (nur bei runden Slidern) : The move possible values are "full", "horz", "vert", "v" or "circ".
  Die verfügbaren Definitionen sind:
  
  
  
  • <pos x="" y="" nb="" nbx="">> : give the coordinate of the graphics to use for the slider (depending on the slider value). If nbx is specified, the graphic is split on several rows
    
  • <over x="" y="" nb="" nbx="">> : give the coordinate of the graphics to use when the mouse is over the slider
    
  
  
  
  Das Browser Element
  Das Browser Element setzt den Bereich der für den Browser, die Effekte, Sampler und den Record Bereich benötigt wird.
  Im Skin darf nur EIN Browser Element sein, dieses MUSS allerdings vorhanden sein.
  
  Die Syntax des Browser Elements ist <browser>.
  Folgende Werte können verwendet werden:
  
  
  
  • <size width="" height=""> : Give the width and height of the browser window
    
  • <pos x="" y=""> : Give the position of the browser window on the screen
    
  • <text font="" size="" weight="" color="" over="" selected=""> : Give the main text's font, size and colors
    
  • <options font="" size="" weight="" color="" over="" selected=""> : Give the options text's font, size and colors
    
  • <widgets font="" size="" weight="" color="" facecolor="" lightcolor="" shadowcolor="" highlightcolor="" darkshadowcolor="" stripescolor="" trackcolor1="" trackcolor2=""> : Give the colors and font for the widgets (scrollbars, ...)
    
  • <colormatrix rr="" rg="" rb="" gr="" gg="" gb="" br="" bg="" bb=""> : Set a color transformation matrix that will be applied on the built-in graphics (icons, ...)
    
  
  
  
  Das Rhythmus Element
  Das <rythm> Element definiert die Position und Art wie die Wellenform dargestellt werden soll.
  
  Die Syntax des Rhythmus Elements ist <rhythm>.
  
  Die verfügbaren Definitionen sind:
  
  
  
  • <size width="" height=""> : Give the width and height of the rhythm window
    
  • <pos x="" y=""> : Give the position of the rhythm window on the screen
    
  • <up x="" y=""> : give the background graphic to be used
    
  • <chan1 x="" y=""> : give the graphic to be used when drawing the curve for the first desk
    
  • <chan2 x="" y=""> : give the graphic to be used when drawing the curve for the second desk
    
  • <both x="" y=""> : give the graphic to be used when drawing a point that belong to both curves
    
  • <color back="" chan1="" chan2="" both=""> : (optional) Give simple colors to the curves. The colors must be a key in the standard VGA palette. This can be faster on slower systems than to use the chan1, chan2 and both definitions (see below)
    
  • <grid1 width="" mainwidth=""> : Set up the CBG (computed beat grid) for the default channel. The <grid1> element has these sub-elements :
    [list]
  • <size width="" height=""> : Give the width and height of the CBG window
    
  • <pos x="" y=""> : Give the position of the CBG window on the screen
    
  • <up x="" y=""> : give the background graphic to be used
    
  • <down x="" y=""> : give the CBG graphic to be used
    
• <grid2 width="" mainwidth=""> : Same as <grid1>, but for the active channel
  

Das Song Positions Element
Dieses Element ist ein Slider der verwendet wird um die Songposition/Anzeige der Songstruktur zu steuern und die ersten 5 Cuepunkte zu verwalten.

Es können die selben Werte und Definitionen wie beim <slider> Element verwendet werden plus die folgenden:

• <down x="" y=""> : Give the graphic to use for portions of the song not played yet, and without any volume
  
• <volume x="" y=""> : Give the graphic to use for portions of the song not played yet, and with a maximum volume (the display will be a fade between down and volume)
  
• <selected x="" y=""> : Give the graphic to use for portions of the song already played, and without any volume
  
• <volumeselected x="" y=""> : Give the graphic to use for portions of the song already played, and with a maximum volume (the display will be a fade between selected and volumeselected)
  
• <cues> : Define the sprites to be used as CUE markers. Includes the following definitions :
  
  • <size width="" height=""> : Give the width and height of the cue sprite
    
  • <up x="" y=""> : give the cue sprite graphic
    
  • <down x="" y=""> : give the graphic to be used when the cue is pushed
    
  • <over x="" y=""> : give the graphic to be used when the mouse is over the cue
    
  • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the cue
    
  
  
  
  Das Scratch Element
  Eine Scratch Zone definiert einen Bereich in dem der User mit der Maus 'scratchen kann'. (In der Regel die Stilisierten Plattenspieler)
  
  Die Syntax des Button Elements ist <scratch chan="" factor="">.
  Folgende Werte können verwendet werden:
  
  
  
  • chan can take its value between "1", "2", "default" (default), or "active".
    
  • factor : (optional) multiply the mouse movement by factor/4096
    
  
  
  Die verfügbaren Definitionen sind:
  
  
  
  • <size width="" height=""> : Give the width and height of the scratch zone
    
  • <pos x="" y=""> : Give the position of the scratch zone on the screen
    
  • <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 scratch zone
    
  • <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
    
  • <center x="" y=""> : Give the center of the circular mouse movement
    
  
  
  
  Das Textzonen Element
  Die Syntax des Button Elements ist <textzone chan="" resetcounter="" pannel="">.
  Folgende Werte können verwendet werden:
  
  
  
  • chan can take its value between "1", "2", "default" (default), or "active".
    
  • resetcounter : if set to "true", the counter will be reset if this textzone is clicked
    
  • pannel can put the textzone into a specific pannel
    
  
  
  Die verfügbaren Definitionen sind:
  
  
  
  • <size width="" height=""> : Give the width and height of the textzone
    
  • <pos x="" y=""> : Give the position of the textzone on the screen
    
  • <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 textzone
    
  • <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
    
  • <text font="" weight="" size="" color="" align="" format=""> : Specify the text to be displayed with these properties:
    [list]
  • font : select the font to be used (default: arial)
    
  • weight : possible values: "normal" (default) or "bold"
    
  • size : give the font size (default: 12)
    
  • color : give the font color (default: white). The color can be written in numerical format (#0000FF) or with the color name ("blue")
    
  • align : possible values: "left", "right", "center" (or "middle")
    
  • format : this string defines what will be written (see the exact format below)
    
  • scroll : if set to "yes", the text will scroll if it can't fit in the box
    
• <text2 font="" weight="" size="" color="" align="" format=""> : Specify an alternate text to be displayed if the user click on the textzone.
  
• <text3>, <text4>, <text5> : Same as text2 (the display will cycle through the defined text each time the user click the textzone).
  

The format is a string that describes how the text will be displayed.
It can contain a few embedded commands:

• \\ : Gibt einmal das \ Zeichen aus
  
• \n : Gibt Linefeed aus
  
• \r : Gibt Carriage return aus
  
• \t : Gibt Tab aus
  
• \xx : Gibt das Ascii Zeichen xx aus
  
• %% : Gibt einmal % aus
  
• %yy : Springt zu Zeile yy
  
• %xx,yy : Springt zur xx,yy Position
  
• %title : Gibt den Songtitel aus
  
• %author : Gibt den Interpreten aus
  
• %comment : Gibt den Kommentar aus
  
• %fullhour : Gibt die Zeit aus im Format hh:mm:ss (Stunde:Minute:Sekunde)
  
• %hour : Gibt die Zeit aus im Format: hh:mm (Stunde:Minute)
  
• %hour12 : Gibt die Zeit im 12 Stunden Format aus (h:mm am/pm)
  
• %counter : display a counter
  
• %pitch : Gibt den Pitch Wert aus
  
• %time : Gibt die Länge des Songs aus (weitere Parameter siehe unten)
  
• %spent : Gibt die bereits gespielte Laufzeit eines Songs aus (weitere Parameter siehe unten)
  
• %left : Gibt die Restlaufzeit eines Songs aus (weitere Parameter siehe unten)
  
• %cueX : Gibt die Position des Xten Cuepunktes aus (weitere Parameter siehe unten)
  
• %tocueX : Gibt die Zeit bis zum Xten Cuepunkt aus (weitere Parameter siehe unten)
  
• %fromcueX : Gibt die Zeit aus seit dem Xten Cuepunkt (weitere Parameter siehe unten)
  
• %start : Gibt die Position des ersten Beats aus (weitere Parameter siehe unten)
  
• %end : Gibt die Position des letzten Beats aus (weitere Parameter siehe unten)
  
• %tostart : Gibt die Zeit bis zum ersten Beat aus (weitere Parameter siehe unten)
  
• %toend : Gibt die Zeit bis zum letzten Beat aus (weitere Parameter siehe unten)
  
• %fromstart : Gibt die Zeit aus seit dem ersten Beat (weitere Parameter siehe unten)
  
• %fromend : Gibt die Zeit aus die seit dem letzten Beat vergangen ist (weitere Parameter siehe unten)
  
• %bpm : Gibt die BPM des Songs aus (weitere Parameter siehe unten)
  
• %bpmex : Gibt die BPM des Songs aus (weitere Parameter siehe unten)
  
• %bpmexx : Gibt die BPM des Songs aus (weitere Parameter siehe unten)
  
• %level : Gibt den Level des Songs in dB aus (weitere Parameter siehe unten)
  
• %key : Gibt den Key des Songs aus
  
• %camelot : Gibt den Key des Songs aus (Numerisch)
  
• %keyoffset
  
• %cpu
  
• %status
  
• %maineffect
  
• %effectslotX
  
• %mainsample
  
• %videofx
  
• %videotransition
  
• %linkedvideo
  
• %loop
  
• %name
  
• %namecueX
  
• %pitchrange
  
• %djc_buttonX
  

Einige der % Kommandos können mit weiteren Parametern verwendet werden. Einfach dem gewünschten Schlüsselwort zwischen den % Zeichen und dem Namen angeben. z.B. %Btime:

• P : modify the value to reflect the pitch change
  
• L : use the local value instead of the global value (only used by %level)
  
• B : display the value as a number of beat instead of a time
  

Das Visual Element
A visual is a zone that changes its display to reflect various things.

Die Syntax des Button Elements ist <visual source="" factor="" type="" chan="" pannel="" orientation="" direction="">.
Folgende Werte können verwendet werden:

• source : possible values:
  
  • beat : The beat intensity
    
  • rotation : The angle of the disc (depends on the position and the RPM speed)
    
  • arm : The position of the turntable's arm (moves on PLAY and PAUSE)
    
  • volume : The volume (depends on the crossfader and the level values)
    
  • position : The position in the song
    
• factor : Optional factor to multiply (if positive) or divide (if negative) the source's value by
  
• type : possible values:
  
  • onoff : Display the up graphic if source>=2048, or the down graphic if source<2048
    
  • transparent : Fade smoothly between up and down graphics
    
  • linear : Display a portion from the down graphic then a portion from the up graphic
    
  • custom : Display a specific graphic depending on the source value
    
• chan : possible values: "1", "2", "default", "active" or "both" (default)
  
• pannel can put the visual into a specific pannel
  
• orientation : (defined for type="linear" only) possible values: "horizontal" or "vertical"
  
• direction : (defined for type="linear" only) possible values: "left", "right", "up" or "down"
  

Die verfügbaren Definitionen sind:

• <size width="" height=""> : Give the width and height of the visual
  
• <pos x="" y=""> : Give the position of the visual on the screen
  
• <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the visual
  
• <up x="" y=""> : (all types except "custom") Give the coordinate of the graphic to use when the visual is low
  
• <down x="" y=""> : (all types except "custom") Give the coordinate of the graphic to use when the visual is high
  
• <up x="" y="" nb="" nbx=""> : (type="custom" only) Give the coordinate of the graphics to use with the custom type (works like for a "round" slider)
  

Das Dropzone Element
A dropzone is a zone where a file could be dragged over in order to load it.

Die Syntax des Button Elements ist <dropzone chan="" pannel="">.
Folgende Werte können verwendet werden:

• chan : possible values: "1", "2", "active" (default) or "playlist"
  
• pannel can put the dropzone into a specific pannel
  

Die verfügbaren Definitionen sind:

• <size width="" height=""> : Give the width and height of the dropzone
  
• <pos x="" y=""> : Give the position of the dropzone on the screen
  
• <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 dropzone
  
• <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
  

Das Grabzone Element
A grabzone define a zone that can be used to move the VirtualDJ's window if it is not maximized.
If no grabzone is defined, any zone that is not a defined element act as a grabzone.

Die Syntax des Button Elements ist <grabzone>.
Folgende Werte können verwendet werden:

• <size width="" height=""> : Give the width and height of the grabzone
  
• <pos x="" y=""> : Give the position of the grabzone on the screen
  
• <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 grabzone
  
• <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
  

Das Pannel Element
A pannel is a zone that group together several other elements, in order to hide or show all of them at once.
Pannels are very usefull if you want to put several groups of elements on the same place, and switch from one group to another with a button or a shortcut.

Die Syntax des Button Elements ist <pannel visible="" id="" group="">.
Folgende Werte können verwendet werden:

• visible : "yes" to have it shown at the begining (when the skin is loaded), or "no" to have it hidded
  
• id : every element which has a pannel="" equal to this id will belong to this pannel
  
• group : only one pannel from a common group can be shown at a time (that means that when you show a pannel belonging to a group, all the other pannels from that group will be hidded)
  

Die verfügbaren Definitionen sind:

• <size width="" height=""> : Give the width and height of the pannel
  
• <pos x="" y=""> : Give the position of the pannel on the screen
  
• <down x="" y=""> : Give the coordinate of the graphic to use when the pannel is displayed
  
• <up x="" y=""> : Give the coordinate of the graphic to use to erase the pannel when it is hidded
  
• <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the pannel
  

Nützliche Programme
Skin Creator Tool im WIKI - Download
Skin Resizer Tool im WIKI - Download

Go Back German Content