VDJPedia



 SkinDevGR

Κώδικας κατασκευής Skin (SDK)

Με αυτό τον οδηγό επιχειρούμε να κατανοήσουμε ότι αφορά την δημιουργία και την μετατροπή κάποιου skin.

Καταρχήν κάθε skin αποτελείται από δύο αρχεία με το ίδιο όνομα (ένα xml και ένα bmp) :
  • το_όνομα_του_σκιν.bmp
  • το_όνομα_του_σκιν.xml

To αρχείο BMP

Το .bmp αρχείο περιέχει όλα τα γραφικά που χρειάζεται ένα skin.
Μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα γραφικών (από το Paint μέχρι το Photoshop) για να δημιουργήσετε ή να επεξεργαστείτε αυτό το αρχείο.
Το αρχείο αυτό θα έχει πλάτος τόσα pixels όαα και η ανάλυση την οποία επιθυμείτε να κατασκευάσετε., και ύψος τουλάχιστον όσα pixels έχει η ανάλυσή σας. Δλδ αν θέλετε να φτιάξετε ένα skin για οθόνη με αναλυση 1366Χ768 το bmp αρχείο σας θα πρέπει να έχει μέγεθος τουλάχιστον 1366Χ768.
Στις πρώτες πχ. 768 γραμμές από pixels συνήθως βρίσκονται τα γραφικά του φόντου (της α' οθόνης).
Στις επόμενες γραμμές pixels παραθέτουμε τα γραφικά που αφορούν τα κουμπιά όταν αυτά πατηθούν ή είναι επιλεγμένα.

Σημείωση : Εκτός από BMP, μπορείτε να χρησιμοποιήσετε και format όπως JPG και PNG, όμως προτιμείστε τα BMP γιατί έχουν καλύτερη απόδοση ποιότητας και καλύτερο αποτέλεσμα μετά την συμπίεση σε zip.

Το αρχείο XML

Το αρχείο .xml περιγράφει όλα τα στοιχεία από τα οποία αποτελείται ένα skin.
Για κάθε στοιχείο, ο χρήστης ορίζει τον σκοπό της λειτουργίας του, και τις συντεταγμένες του bmp αρχείου που αφορούν τις διάφορες καταστάσεις του, αλλά και διάφορα άλλα ακόμα που θα εξηγηθούν παρακάτω.
Το αρχείο xml μπορεί να δημιουργηθεί και να επεξεργαστεί με έναν από κειμενογράφο όπως το Σημειωματάριο, αλλά στην πορεία θα καταλάβετε ότι θα ήταν χρήσιμο να χρησιμοποιήσετε κάποιο εξειδικευμένο πρόγραμμα επεργασίας αρχείων xml.
(να σημειώσουμε, ότι εξ'ορισμού τα Windows ανοίγουν τα αρχεία .xml με τον Ιnternet explorer, όπου μπορείτε να τα διαβάσετε, αλλά όχι και να τα επεξεργαστείτε).

Ενα xml αρχείο αποτελείται από ενα βασικό κομμάτι-στοιχείο που ονομάζεται <Skin>, και το οποίο περιέχει όλα τα υπόλοιπα στοιχεία του skin.
Τα βασικά στοιχεία ενός skin είναι :
  • logo
  • button
  • slider
  • browser
  • rhythm
  • rhythmzone (Since VirtualDJ v7)
  • songpos
  • scratch
  • scratchwave (Since VirtualDJ v6)
  • textzone
  • visual
  • dropzone
  • grabzone
  • panel


Το στοιχείο <logo>

Το στοιχείο αυτό προσθέτει αυτόματα στο skin σας το λογότυπο του VirtualDJ, και είναι απαραίτητο στοιχείο για την λειτουργία του σκιν. Η σύνταξή του είναι ..<logo>.

Οι προσδιορισμοί του στοιχείου logo είναι :
  • <pos x="" y=""/> : προσδιορίζει την θέση (με συντεταγμένες) του logo στην οθόνη
  • <size width="" height=""/> : προσδιορίζει το πλάτος και το ύψος του.


Το στοιχείο <button>

Με το στοιχείο αυτό ορίζουμε όλες τις λειτουργίες του skin που αφορούν κουμπιά. Η σύνταξη του στοιχείου είναι <button action="" rightclick="" dblclick="" pannel="">, όπου..
  • actionείναι μία εντολή VDJ Script που θσ εκτελεσθεί όταν επιλεχθεί το κουμπί.
  • rightclick ορίζει διαφορετική ενέργεια αν κάνουμε δεξί κλικ πάνω στο κουμπί
  • leftclick ορίζει διαφορετική ενέργεια αν κάνουμε αριστερό κλικ πάνω στο κουμπί
  • dblclick ορίζει διαφορετική ενέργεια αν κάνουμε διπλό κλικ πάνω στο κουμπί
  • pannel εντάσει το κουμπί σε κάποιο pannel
Για το στοιχείο <button> μπορείτε επίσης να ορίσετε τα παρακάτω συνοδευτικά στοιχεία.
Οι διαθέσιμοι ορισμοί για ένα κουμπί ειναι :
  • <size width="" height=""> : Ορίζετε το πλάτος και το ύψος του κουμπιού (σε pixels)
  • <pos x="" y=""> : Ορίζετε την θέση (πάνω αριστερή γωνία) του κουμπιού στην οθόνη (σε pixels)
  • <up x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν όταν το κουμπί είναι σε κανονική κατάσταση.
  • <down x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν για όσο το κουμπί είναι πατημένο
  • <selected x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν όταν το κουμπί είναι επιλεγμένο
  • <over x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν όταν το ποντίκι είναι πάνω από το κουμπί.
  • <overselected x="" y=""> : Ορίζετε τις συντεταγμένες που θα χρησιμοποιηθούν όταν το ποντίκι είναι πάνω από το κουμπί και είναι αυτό επιλεγμένο
  • <downselected x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν όταν το κουμπί πατηθεί και είναι ήδη επιλεγμένο
  • <clipmask x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα σε μορφή B&W (μαύρο&ασπρο) που θα χρησιμοποιηθούν για την μορφοποίηση του κουμπιού (πχ για σχήμα διαφορετικό από ορθογώνιο)
  • <mousemask x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα σε μορφή B&W που θα χρησιμοποιηθούν σαν μάσκα για να συμπεριφερθεί το ποντίκι ανάλογα εαν είναι πάνω από το κουμπί
  • <mouserect x="" y="" width="" height=""> : Ορίζετε ένα απλό ορθογώνιο που θα λειτουργήσει σαν mouse mask
  • <mousecircle x="" y="" r=""> : Ορίζετε έναν απλό κύκλο που θα λειτουργήσει σαν mouse mask
  • <tooltip> : Γράφετε το κείμενο (πχ.οδηγίες) που εμφανίζετε όταν το ποντίκι είναι πάνω από το κουμπί
  • <text format="" dx="" dy="" ...> : Ορίζετε το κείμενο που θα γραφτεί μέσα στο κουμπί (βλ. <textzone>)
Εκτός από το size και το pos, όλοι οι υπόλοιποι ορισμοί είναι προαιρετικοί


Το στοιχείο <slider>

Η σύνταξη του στοιχείου slider είναι <slider action="" dblclick="" rightclick="" pannel="" orientation="" direction="" relative="">.
Οι διαθέσιμοι ορισμοί είναι :
  • action είναι μία ενέργεια VDJ Script που θα εκτελεστεί όταν το slider πατηθεί
  • rightclick ορίζει μια διαφορετική ενέργεια όταν το slider επιλεχθεί με δεξί κλικ
  • leftclick ορίζει μια διαφορετική ενέργεια όταν το slider επιλεχθεί με αριστερό κλικ
  • dblclick ορίζει μια διαφορετική ενέργεια αν το slider επιλεχθεί με διπλό κλικ
  • pannel εντάσει το slider σε συγκεκριμένο panel
  • orientation : Πιθανές τιμές:
    • horizontal, για οριζόντιο slider
    • vertical, για κάθετο slider
    • circle, για κυκλικό slider
    • round, για κυκλικό slider που συμπεριφέρεται σαν κουμπί
  • direction (Μόνο για οριζόντια και κάθετα sliders) : πιθανές τιμές: "up" (εξ ορισμού) ή "down"
  • relative : αν ορισθεί σαν "yes", το slider θα κινείται με σχετκές τιμές
Οι διαθέσιμοι ορισμοί ενός slider είναι :
  • <size width="" height=""> : Ορίζετε το πλάτος και το ύψος του slider (σε pixels)
  • <pos x="" y=""> : Ορίζετε την θέση (πάνω αριστερή γωνία) του slider στην οθόνη (σε pixels)
  • <up x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν όταν το slider είναι σε κανονική κατάσταση
  • <selected x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν όταν το slider είναι επιλεγμένο
  • <clipmask x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα σε μορφή B&W (μαύρο&ασπρο) που θα χρησιμοποιηθούν για την μορφοποίηση του slider (πχ για σχήμα διαφορετικό από ορθογώνιο)
  • <mousemask x="" y=""> : Ορίζετε τις συντεταγμένες στο γράφημα σε μορφή B&W που θα χρησιμοποιηθούν σαν μάσκα για να συμπεριφερθεί το ποντίκι ανάλογα εαν είναι πάνω από το slider
  • <mouserect x="" y="" width="" height=""> : Ορίζετε ένα απλό ορθογώνιο που θα λειτουργήσει σαν mouse mask
  • <mousecircle x="" y="" r=""> : Ορίζετε έναν απλό κύκλο που θα λειτουργήσει σαν mouse mask
  • <fader> (Μόνο για οριζόντια και κάθετα sliders) : Ο ορισμός είναι παρόμοιος με αυτό ενός στοιχείου<button> χωρίς κάποια ενέργεια και παίζει το ρόλο ενός επιλογέα (fader) για το slider
  • <circle x="" y="" anglemin="" anglemax="" sectsize="" direction=""> Για (circle sliders μόνο) : ορίζει τη γεωμετρία ενός κυκλικού slider με τις ακόλουθες παραμέτρους:
    • x : η συντεταγμένη x του κέντρου του κύκλου
    • y : η συντεταγμένη y του κέντρου του κύκλου
    • anglemin : η γωνία (σε μοίρες) για το μηδέν του slider (ελάχιστη τιμή)
    • anglemax : η γωνία (σε μοίρες) για την μέγιστη τιμή του slider
    • sectsize : εάν δεν είναι μηδέν (τιμη εξ\'ορισμού) το slider θα έχει "fader" ένα κομμάτι (τομέα) πλάτους όσου και η τιμή.
    • direction : πιθανές τιμές: "cw" (default) ή "ccw"
  • <fader move="" sensibility=""> Για (round sliders μόνο) : Οι πιθανές τιμές για το move είναι "full", "horz", "vert", "v" ή "circ".
    Το στοιχείο <fader> μπορεί να περιέχει τους παρακάτω ορισμούς:
    • <pos x="" y="" nb="" nbx=""> : ορίζει τις συντεταγμένες στο γράφημα που θα χρησιμοποιηθούν για το slider (ανάλογα με την μορφή του slider). Εαν ορισθεί το nbx το γράφημα χωρίζεται σε περισσότερες γραμμές
    • <over x="" y="" nb="" nbx=""> : ορίζει τις συντεταγμένες του γραφήματος που θα χρησιμοποιηθούν όταν το ποντίκι είναι πάνω από το slider

Το στοιχείο <browser>

Το στοιχείο browser ορίζει τον χώρο που θα χρησιμοποιηθεί για την εμφάνιση των στοιχείων της βιβλιοθήκης, (search, files, ...).
Για εκδόσεις του VirtualDJ προγενέστρες από την 7, μπορείτε να έχετε μόνο ένα στοιχείο browser στο αρχείο του skin, αλλά ταυτόχρονα θα πρέπει και οπωσδήποτε να το ορίσετε.
Με την έκδοση VirtualDJ 7, μπορείτε να ορίσετε περισσότερα στοιχεία browser σε ένα skin, αλλά μόνο ένας browser μπορεί να εμφανιστεί κάθε φορά.

Η σύνταξη του στοιχείου browser είναι <browser pannel="">.

Οι διαθέσιμοι ορισμοί για το στοιχείο browser είναι :
  • <size width="" height=""> : Ορίζει το πλάτος και το ύψος της περιοχής του browser (σε pixels)
  • <pos x="" y=""> : Ορίζει τις συντεταγμένες στο γράφημα της περιοχής του browser στην οθόνη (πάνω αριστερή γωνία)
  • <text font="" size="" weight="" color="" over="" selected="" stripes="" unfocused=""> : Ορίζει την γραμματοσειρά , το μέγεθος των γραμμάτων και τα χρώματα. Stripes είναι το χρώμα με το οποίο χρωματίζεται το φόντο των ζυγών γραμμών. Unfocused (προστέθηκε στην έκδοση 7) αλλάζει το χρώμα των γραμμάτων στα κομμάτια του browser που δεν έχουν τον έλεγχο. Εξ'ορισμού έχει τιμή 75% από το αρχικό επιλεγμένο χρώμα.
  • <options font="" size="" weight="" color="" over="" selected=""> : Ορίζει την γραμματοσειρα, το μέγεθος και το χρώμα των options
  • <widgets font="" size="" weight="" color="" facecolor="" lightcolor="" shadowcolor="" highlightcolor="" darkshadowcolor="" stripescolor="" trackcolor1="" trackcolor2=""> : Ορίζει τα χρώματα, τη γραμματοσειρά και το μέγεθος των επικεφαλίδων του browser

-Σελίδα 1-

>>>Συνέχεια στην επόμενη σελίδα
Επιστροφή στην αρχική σελίδα GR Wiki