Quick Sign In:  

Forum: VirtualDJ Skins

Topic: Simplified Skin for Kids
t0manPRO InfinityMember since 2020
Hello!

I have been thinking about whether it's possible to create a very simple skin with just basic selected elements, to be eventually used by a kid.
I am not a coder, so the only help might be chatGPT, but I believe here is still a better place to ask for even some initial advice.

I guess it's doable, seeing such a real controller alike looking skins, to make just a simple thing as well. But how could I start with that?

Cheers!
 

Posted Sat 16 Dec 23 @ 12:10 am
locoDogPRO InfinityModeratorMember since 2013
Don't bother with gpt, unless you know the subject, you'll be chasing errors you probably won't be able to spot.

You start here, and understanding the basics of html would help
https://www.virtualdj.com/wiki/SkinSDK8.html

change some colours, move some stuff, resize some stuff, understand how to make stuff conditionally visible, add some buttons, then get to grips with plaveholders.

default:starter is as entry level as it gets, it could be made simpler but I think anything simpler would be outgrown very quickly.
 

Posted Sat 16 Dec 23 @ 3:38 am
t0manPRO InfinityMember since 2020
Thank you for your response.
Yeah it seems like in this case chatGPT might not be very helpful. It would need to be specifically trained on VDJ documentation + vision functionality to be able to understand what I actually mean.

So, as you said, getting to basics seems the only way and it's gonna be pretty challenging ;)

default:starter is waaay too complicated when it comes to what I'd like to achieve.

I went through the documentation quickly to have just general understanding.

Can I presume, that the good way would be to draw the design first, adding comments with exact coordinates at every element, so that I can then "describe" it in the code? Like just literally starting with only boxes and circles, that I can then also tag as specific buttons.

Or better to use one of defaults skin and try to erase all what I don't want to have in the design, while also deleting it in the code?

Would you recommend such an approach or I am thinking wrong?


EDIT: I have just found the skin builder :D
 

Posted Sat 16 Dec 23 @ 12:21 pm
locoDogPRO InfinityModeratorMember since 2013
I'm not really a good skinner, I do edits and add stuff. I've done a few full new skins for private users.

What I do is first get a picture from the user in made in paint for a rough idea, I then blank the whole skin excluding the top bar and I use
<square> elements of different colours to work out how the layout will look, figure out spacing.

even the best plans worked out mathematically need stuff nudging one way or another so the trick there is using groups where it makes sense to.

The real key is getting the initial stuff right, "the skin is 1920 pxl wide, I want the mixer to be X pxl wide, that leaves me Y pxl for 2 decks" then adding/shaving of a pixel here or there so the placements work out to integer numbers and not "92.75 pixels" because you'll be chasing that .75 thru the whole sriting process

plus being handy with keyboard shortcuts help, both vdj [to reload the skin, get to settings, do stuff that is no longer accessible from a blank gui] and with notepad++ to comment out lines, save quickly, alt+tab to switch programs.


I wouldn't even try starting from scratch if default:starter looks daunting, make a copy of default and experiment, if it messes up, try fix it, if you can't fix it, just start experimenting again with a new copy.

Like learning anything from the raw basics, you don't learn the whole thing, you learn lots of small things then you start putting all the small things together [that seemed really basic when you start] and then you can start asking good questions and don't need all the entry level stuff explaining to you.
 

Posted Sat 16 Dec 23 @ 1:02 pm
t0manPRO InfinityMember since 2020
That is really great answer and I genuily thank you!

I played with the builder a bit but it will be much more satisfying to build it according to the plan like you said. And actually easier after getting that practice and knowledge.

Indeed I come back here with more detailed questions if needed but for now you have definitely helped me a lot with your advice!
 

Posted Sat 16 Dec 23 @ 2:37 pm
To be honest: I don't recommend to start by editing a skin if you want to learn how to do make skins.

I recommend to start from blank. Just create the "hello world" of skins:

A skin that VirtualDJ can read/load, and has two buttons on it:
1) Open settings
2) Close

Then you can try adding something more. Like a backround fill with a color of your choise.
For adding new/extra things (while being able to learn) I would both consult the WiKi (Skin SDK) and an existing skin.

The reason I would not advise to start by editing a skin is because of how complex things can be and if you don't know what they stand for it gets overwhelming quite soon.

For instance you can use math functions and relative/absolute coordinates for all the elements.
Decoding a "math function" at the same time you're trying to understand how to move things around makes it harder than it needs to be. On top of that you can have placeholders as well which add even more complexity and confusion.

Like learning a language, it's better to start by learning simple "words" and "syntax" and then moving on to more complex stuff.
If you try to read a university thesis document in a foreign language you just started to study, then most likely you'll give up.
However if you study step by step going up, it should not be very hard to read and understand it after some time.

For me, editing has its place when something is "almost" as you want it to be and you just need to change it to suit your needs. You're not interested in learning the skin language, and you just want to have your job done. In this case, editing (where a smaller and specific set of instructions is required) makes sense.
 

Posted Tue 19 Dec 23 @ 9:34 am
I understand both points of view, but if I had to choose I would side with locodog as that's the way I started.

If you have an existing skin as your reference it's easy to compare the various XML codes to what that code does with the GUI on the screen. I learned HTML the same way when the WWW was new.

DJDad's skin builder is also worth a look.
 

Posted Tue 19 Dec 23 @ 7:08 pm