Forum: VirtualDJ Skins

About skins, skin development and communicate with other skin developers.
Topic: Skin Creator - Beta - Page: 1
djdadPRO InfinityDevelopment ManagerMember since 2005
Hi folks,

I have been working for months on a Skin Creator application, and even though it's not yet finished, i thought i should share with you the first Beta Version. Main reason was the frequent requests to tweak/edit the new Karaoke and Video skins of VirtualDJ, which with Skin Creator will be relatively easy.

SKIN CREATOR




Download installer from : https://www.virtualdj.com/plugins/index.html?addonid=80824

Will post further details as we go (and a manual will be offered at the end), but if you want to try a ready-made skin, the default Karaoke skin is implemented and available to load from File->Open (will lead you to the Skin Creator projects)
The Video skins will be implemented soon, among other features.

Almost every skin element is available to add/edit/modify from the top menu, and some pre-defined elements in the "smart" menu. This menu will be filled with more elements in next release, just added a few for now, to give you a guide on how to create your own (and save them for later use)

Mostly interested in feedback and usability, and of course of any bugs you may find.

FAQ (just one for now)
Q: Will there be a Mac version ?
A: In my plans but not anytime soon.

Let me know of any questions

geposted Mon 13 Aug 18 @ 10:23 pm
djdadPRO InfinityDevelopment ManagerMember since 2005
Starting with Element Properties.

Each time a skin element is selected (single one), the left side will offer its available properties.

  • Deck Type: By default (with the excpeption of Browser and VDJ Logo), elements will be assigned to Deck Type, meaning that it will automaticaly add 2 identical elements, one for Left Deck and another for Right Deck. A Deck type element allows you to move and resize only the Left deck one. The Right deck element will automatically get the same size and will be positioned automatically based on the Group Mirror/Clone type selection.
    If you want to create an element that will be offered for the Master Deck (such as Video Transitions, Master Video preview, Master FXs etc), set the type to "Master"
    If you want the element to apply to the default deck (e.g. for a Video skin you want to display the title/artist of the paying track), set it to "None"



  • Group type Each element is added to the default Group, and by default its set as Mirror. This means that Right Deck elements (for Deck type) will be automatically positioned on screen, so that at the end you will get a mirrored- look skin. If you intend to create a Clone-look skin, you can still change the type of the Group to Clone from the mid-top section.
    In most of the cases, you will want to create a mirror skin but some sections to be cloned, similar to the default skins of VirtualDJ, where the Play/Cue/Stop/Sync section is mirrored (for the skin), but clone inside the section. In this case, leave the default Group set to Mirror, then assign the elements of a section to another Group and set that to Clone.

  • Geometry This section holds geometry information, such as the X,Y coordinates (position) in side the skin, the width and height of the element, along with some additional ones depending on the element type, such as the Radius, Border size, angle of a knob etc.
    The values can be edited in order to place and resize an element ,and will also reflect your movements and resizes with mouse.



  • Colors This section offers the ability to change the colors of a skin element, such as the Background color, Border color, the fill oa knob, the ring of a jogwheel etc. In most cases, there will be tabs to offer all the available colors you may need to adjust to make your elements look the way you want them.



    You can choose a single color (Gradient type to None, Linear or Radial (for the ones that make sense). Note that you can also create semi-transparent elements, by setting the Alpha Value in the Color Dialog.

  • Text Some elements (such as buttons, textzones etc), offer a Text section to add Text and choose the Font and size. The color of the Text is offered in the Colors section



    Note : The Text will be ignored if an action is filled in the Action field. In most cases you will need one or the other. E.g. for a loop button, you want to have an action for the text (get_loop), while for a PFL button, you will need just a "PFL" Text.

  • Actions: Here is where you enter a valid VDJ script action, in other words what the skin element will do in the skin. In most of the elements, this will be the "Click" action, while others may have different names such as "source" etc. Right-click, double-click actions are also available for some.
    Visibility is of course optional and in most cases you will need to enter a vallid action that returns true/false, to determine if your element will be visible under some conditions. E.g. you may want a skin element to be offered when Automix is enabled, so visibility field will have to have the action automix
    The ? small button opens an Editor similar to the VDJ one but not working the same (will get there)



    Note: If you have several elements with the same visibility (conditions), makes sense to put them in a Panel with the same visibility instead of adding the same in all elements (will write about Panels later)

  • Icon: Buttons can have icons instead of Text (will add the ability to have both and position). Enable the option and click Select to choose one of the available ones. If you want to add your custom ones, make sure they are in Black&White format (same as the ones you will see in the Icons folder)
    Adjust its %size, choose their colors when button if Off/On/MouseOver/On&MouseOver




geposted Mon 13 Aug 18 @ 10:42 pm
djdadPRO InfinityDevelopment ManagerMember since 2005
Top Bar - Add Skin elements

The top bar with icon-buttons will provide you nearly all VDJ skin elements to add to your skin.



  • 1. Buttons (rectangular and round). Pretty much covered all of its properties in my previous post.

  • 2. Knobs & Faders: Add a knob or a fader to add elements to control Volume, EQ, crossfader, Fx Parameters, Filter etc. Offers Geometry, Colors, Actions and some additional parameters.



    Note: Enable the "From Middle" option to make the fader/knob to use half top/left and bottom/right On Colors (e.g. to make knobs like the default Equalizer and Filters) or the default Pitch fader




To be continued ....

geposted Mon 13 Aug 18 @ 10:42 pm
djdadPRO InfinityDevelopment ManagerMember since 2005
Basic functions

Use the top bar to add skin elements. Grab (click to select) and move them with mouse to the desired position. Use the bottom, right and bottom-right small colored rects to resize.
Select multiple elements (with mouse or CTRL+Click) to move all together.

Right-click menu:
Each element offers a right-click menu to ..
- Lock/Unlock an item. When an item is locked, you cant move it, and you can start selecting other elements when mouse starts from its position. Useful when you place a background rectangle (Shape) and want it to be locked while you work on elements that above it.
- Delete (permanent at this point... will be an option to undo in future release)
- Group (for multiple selection). When elements are grouped, you move them all together (same as if they were not grouped) but also offers the ability to resize them all together in proportional way.






.. to be continued...


geposted Mon 13 Aug 18 @ 11:21 pm
looks very nice thanks for your hard work

geposted Tue 14 Aug 18 @ 12:06 am
zanardPRO InfinityMember since 2003
How to import existing skins?
Very thanks!

geposted Tue 14 Aug 18 @ 6:40 am
Wow, this is looking great!

I want to incorporate the Venue Name for some Karaoke Gigs I do.

So, modifying the supplied Karaoke Skin, I've added a new Text block and wish to add the Venue Name to the Skin...

I can't see this as a tag anywhere (but I'm agreeable to missing it!)

Does anyone know how to access the VENUE NAME so it can be used in a Skin?

Ta!
Jason

geposted Wed 15 Aug 18 @ 5:46 pm
Hi,

make your own image as png, and select in karaoke options/ background /images ,

good luck

GK

geposted Wed 15 Aug 18 @ 7:52 pm
Thanks, but I'd rather the plain text - I do get asked for cover various venues and creating a new background is a PITA when this tag should be accessible from the Skin.

It may be an oversight on VDJ 2018 - the Venue Name is a new Feature so may yet be available as a tag but, if it is (and not yet documented) a bit of help would make this work.

geposted Wed 15 Aug 18 @ 9:05 pm
AdionPRO InfinityCTOMember since 2006
Would indeed make sense to have it accessible from vdj script, will be added

geposted Wed 15 Aug 18 @ 9:09 pm
Any way to add say 8 buttons at once?? Like for a hot cue page?

Also after I add so many buttons, it’ll crash. Any way to send you a crash report??

geposted Fri 17 Aug 18 @ 11:37 pm
zanardPRO InfinityMember since 2003
Good job djad.
When I choose an image for the background, and then export the skin, the image is not seen ..
Is it a mistake or am I wrong?
Thank you.
Zanard.

geposted Sun 19 Aug 18 @ 6:34 am
Anyway to upload a crash report or something like that??

It always crashes after adding so many buttons plus I have things wrong but I need it to quit crashing first.

Windows 8.1 ASUS machine i7

geposted Mon 20 Aug 18 @ 7:45 pm
need video tutorial

geposted Tue 21 Aug 18 @ 5:36 pm
Video showing what exactly??

geposted Tue 21 Aug 18 @ 7:00 pm
djtouchdan wrote :
Video showing what exactly??


Showing dummies like myself how to use it...
Like actually building a skin while explaining the process.
Cause lost soon as I open it.

geposted Tue 21 Aug 18 @ 10:06 pm
djdadPRO InfinityDevelopment ManagerMember since 2005
zanard wrote :
How to import existing skins?

At the moment, you can't. This is something that will be added in next major update


geposted Sun 26 Aug 18 @ 4:42 pm
djdadPRO InfinityDevelopment ManagerMember since 2005
the SOUND INSURGENT wrote :
Any way to add say 8 buttons at once?? Like for a hot cue page?
There will be something for pads in the "Smart" elements, in a future release.
for now, when you re done with a Pad/button, you can use the Clone function (CTRL+D) and then edit the properties that change.

the SOUND INSURGENT wrote :
Also after I add so many buttons, it’ll crash. Any way to send you a crash report??
Unfortunately, i get the same crash here, but cant reproduce at will. Its completely random and can happen even from the very first element. I tried to run in debug mode, but could not find the solution yet. It's in my top priorities at the moment.


geposted Sun 26 Aug 18 @ 4:45 pm
djdad wrote :
the SOUND INSURGENT wrote :
Any way to add say 8 buttons at once?? Like for a hot cue page?
There will be something for pads in the "Smart" elements, in a future release.
for now, when you re done with a Pad/button, you can use the Clone function (CTRL+D) and then edit the properties that change.

the SOUND INSURGENT wrote :
Also after I add so many buttons, it’ll crash. Any way to send you a crash report??
Unfortunately, i get the same crash here, but cant reproduce at will. Its completely random and can happen even from the very first element. I tried to run in debug mode, but could not find the solution yet. It's in my top priorities at the moment.



Ok cool, good info to know.

Can you tell me why my buttons are showing up with a “?” mark on them??

Example would be, I have my buttons for cue points and the say “1”,”2”,”3”, etc, etc.

When I load the skin up instead of a “1” there’s a “?” on button. It still functions correctly but just doesn’t show the hot cue number.

Any help would be awesome.

geposted Mon 27 Aug 18 @ 3:50 pm
djdadPRO InfinityDevelopment ManagerMember since 2005
The texts should be entered in the TEXT->Simple Text field (e.g. 1,2,3 etc - without quotes). If the TEXT->VDJ Action field is used then it will prefer the action and probably display ?? if incorrect.
If you still have troubles, save your project and email me the file

geposted Mon 27 Aug 18 @ 4:50 pm
Seite : [>] [>>]
49%