Quick Sign In:  

Forum: VirtualDJ Skins

Topic: well the other skin is dead, but this was born as a result... - Page: 2

This part of topic is old and might contain outdated or incorrect information

Take a look on my Ghost OSD skin. Yoy will see that on the 1920X1080 version I had to create a "panel index" to help me going through the entire skin. On the other versions of this skin panel names are self explanatory.... :P
 

Posted Tue 22 May 12 @ 2:08 am
dammit! I hit it again and only have 450 pannels and not much name space to lose unless I change them to numbers :-(

maybe i can use something like 111 eg.

deck 1, pannel type 1, pannel variation 1

at least it's only three characters, cause my pannel names already look like ghost osd eg.

"D1_s_p"

it means deck 1, songpos pannel, pink

or even "1Sp"

good news is I have 4 decks working like the drapht pictures just need the 4 channel mixer to work, but not sure if i'll be able to fit video... then mapping the 500 or so buttons and 200 odd sliders, luckly though there are only 6 effect knobs & 3 effect buttons that need individual mapping, but hopefully i'll be able to map out at least 20 effects for the most usefull parameters... I think I might have been a little excessive on the color pannels but it's a cool feature although the aim was to provide something that could be mapped and modified, can't see that happening now that names are in code LOL

 

Posted Tue 22 May 12 @ 5:48 am
Maybe you can use a different approach here (depending on what you're trying to achieve):

Use different BMP (or XML) files for different color schemes. This is something I did on CDS4 skin. I created 2 or 3 different color schemes using the same BMP file but different XML code. Actually the "code" itself is the same among the variations. It's the coordinates of some graphics that differ.
If you want you can keep the same XML code for all your schemes and just create two or three different BMP files with different colors on your elements.

"Paneling" and "subpaneling" is a good way to provide users with options, but the more options you want to incorporate, the messier the code gets, plus you get very easily out of control...

PS: As I said previously take a look on the 1920x1080 resolution, You will see that the best way to have many panels is to use LETTERS!
Each "letter" on your panels name (each position on it's string) can give you 10 possible panels if you use numbers, or 26 if you use letters!

Also keep in mind that "A" is different from "A1" and this is also different from "A01" :)

So, 111 is actually 10X10X10 = 1000 possible names
AAA is 26X26X26 = 17576 possible names!
 

Posted Tue 22 May 12 @ 6:43 am
I just had a look at your panneling, that is the approach I will use... I don't really want to make different color schemes as that's boring, and I want this skin to show almost anything is possible in vdj to trakor fanboys...

but it's still managable as it's mostly cutting pasting and find and rename the x & y co-ordinates so its pretty easy after you have one element complete, but I wish the skin creator would stop crashing, I have pretty well given up on it now accept for placement and really only using notepad to modify anything. Do you know of any free xml editors that allow you to batch color text with something like 'find and rename'?

also in regard to watchdog do you think it would be possible to change 'WD_BPM_LRSYNC' so if the deck is the same bpm as the master the variable is true eg

deck 1 get_beatdiff 50% ? deck 1 set 'WD_BPM_MSYNC' 1 : deck 1 set 'WD_BPM_MSYNC' 1
deck 2 get_beatdiff 50% ? deck 2 set 'WD_BPM_MSYNC' 1 : deck 2 set 'WD_BPM_MSYNC' 1
deck 3 get_beatdiff 50% ? deck 3 set 'WD_BPM_MSYNC' 1 : deck 3 set 'WD_BPM_MSYNC' 1
deck 4 get_beatdiff 50% ? deck 4 set 'WD_BPM_MSYNC' 1 : deck 4 set 'WD_BPM_MSYNC' 1
 

Posted Tue 22 May 12 @ 7:33 am
Try notepad++ http://notepad-plus-plus.org/

You'll never want to use another text editor again!

PS: Watchdog V2 is on the makes but I'm waiting for Version 8 to see what changes it will bring. Then I will be able to do this and even more stuff ;)
 

Posted Tue 22 May 12 @ 7:38 am
notepad++ is great phantom thanks for the heads up... I'm wondering now if you are able to perform simple maths on the data, specifically I would like to move the y axis of everything down 10 or 20 pixels so there is more room for the waves. I had a look on google but didn't find anything specific, do you have any advice?
 

Posted Tue 22 May 12 @ 2:51 pm
On notepad++ highlight the area you want to perform the maths.
Select replace (Ctrl + H)
On the find box type y="
On the replace box type y="20+
Check the on selecyed area checkbox
Hit replace all

This will move all the y coordinates 20 pixels down.

If you don't know it Vdj performs maths on all coordinates. It can perform standard maths eg y="100+70+95-60" and also use relative coordinates eg y="+250"
 

Posted Tue 22 May 12 @ 4:51 pm
djdadPRO InfinityDevelopment ManagerMember since 2005
I think you need to study this more, as if you replace all y=" you will get +20 with all lines (selected, down, over etc). I guess you need only the pos to be adjusted, right ?
 

Posted Tue 22 May 12 @ 6:58 pm
Unfortunately It's only the <pos> that I want to change, it's good to know I can use maths though, just wish I had of thought of it a couple of days ago and I would have swapped the order of x="" and y="" so i could find and rename

<pos y="
<pos y="20+

EDIT-----------------
just tried it in Notepad++ and ticked "in selection" then used "replace all", unfortunately it only does it to the highlighted line... it works if you use "replace" (single) but you have to hit the button each time which I can handle but did I miss a step George?
 

Posted Tue 22 May 12 @ 9:05 pm
well I found the manual but it's not very indepth, I also tested pressing the "replace" button multiple times but it changes every y"" value not just the <pos> one, which is the line I selected. I also tried recording a macro but that just records every key you type and repeats the keys when you press play, it's not smart enough to do this task. Oh well next skin i'll make it easier on myself lol.

actually I just had another thought... I could just add 20 pixels to everything and change the image so everything is 20 pixels lower accept the wav's, although I really wanted to use it as is but use everything on pannels that can shift down so i can have 4 paralell colored waves like itch as it will only cost 44 pannels or 88 registry characters for 11 color options plus 10 or so more pannels for everything to move down when needed... It would be so much easier if we could plot components relative to pannels down graphic though, then place the pannel on screen and be able to move it at will, without having to duplicate controls for different pannels eg

<pannel id="" group="" deck="" >
<pos x="" y=""/> place this on the screen where you want the graphic
<down x="" y=""/> use ths where you want the graphic to be drawn from
</pannel>

<button pannel="" action=""> action doesn't require a deck definition
<pannelpos x="" y=""/> use this and the rest of the definitions in the down graphic of the pannel
</button>

this way the pannel definition says what deck the controls contained within operate on. and no matter where you place the pannel the controls move relative to it... it would cut my xml down quite a lot having this ability, and would allow me to create multiple layouts incredibly easily ala traktor where you have the option to show, hide make things larger or smaller within defined parameters in many different ways for a truly versatile interface
 

Posted Tue 22 May 12 @ 10:17 pm


One image, 100 words!

You should select an entire area, not just a single line first.

PS: This way you can select entire blocks of code and change (replace) the coordinates directly without maths.
On the above example all these buttons have common y since they are on the same "visual height". So, changing the y coordinate becomes a three clicks job!
 

Posted Wed 23 May 12 @ 12:15 am
synthet1c wrote :
It would be so much easier if we could plot components relative to pannels down graphic though, then place the pannel on screen and be able to move it at will, without having to duplicate controls for different pannels eg

<pannel id="" group="" deck="" >
<pos x="" y=""/> place this on the screen where you want the graphic
<down x="" y=""/> use ths where you want the graphic to be drawn from
</pannel>

<button pannel="" action=""> action doesn't require a deck definition
<pannelpos x="" y=""/> use this and the rest of the definitions in the down graphic of the pannel
</button>

this way the pannel definition says what deck the controls contained within operate on. and no matter where you place the pannel the controls move relative to it... it would cut my xml down quite a lot having this ability, and would allow me to create multiple layouts incredibly easily ala traktor where you have the option to show, hide make things larger or smaller within defined parameters in many different ways for a truly versatile interface

You can try a different approach:

<pannel id="MyFunkyCrazyPanel" group="FunkyGroovyJazzy" deck="69" >
<pos x="515" y="220"/>
<down x="+0" y="+2000"/>
</pannel>

<button pannel="MyFunkyCrazyPanel" action="deck 69 reverse">
<pos x="515+15" y="220+5"/>
</button>

This way, if you move the position of the panel (eg to x="600" and y="260") you can just replace

x="515+ with x="600+
y="220+ with y="260+
 

Posted Wed 23 May 12 @ 12:25 am
unfortunately thats not what I'm after as it changes all of the y values in the entire document.. is there any way to select only the lines begining with <pos then making the modification...

next time I will have 2 <pos> lines if I can eg

<element>
<size width="" height=""/>
<pos x=""/>
<pos y=""/>
</element>

That way modifications to the code will be simple ;-)

PhantomDeejay wrote :
You can try a different approach:


problem is that you need to duplicate all the controls contained within the pannel and change their location within the pannel to match, I would prefer to plot the controls only once within the pannel, and just duplicate the pannel and not all the controls within it.
 

Posted Wed 23 May 12 @ 12:34 am
You could use regular expressions for search, but not for replace:
<pos x="[0-9]*" y="

This will search and "select" all pos y="
However you can't use REPLACE with regular expressions as it will replace the entire string. I will search a little bit further on this

PS: If you use relative coordinates for your down/hover graphics for instance

<button action="deck 1 timecode_bypass">
<size width="32" height="11"/>
<pos x="53" y="143"/>
<up x="+0" y="+0" />
<down x="+53" y="+1587"/>
<selected x="+53" y="+2587"/>
<tooltip>Signal Bypass</tooltip>
</button>

then you CAN do two replacements

1)search: y=" replace y="20+

<button action="deck 1 timecode_bypass">
<size width="32" height="11"/>
<pos x="53" y="20+143"/>
<up x="+0" y="20++0" />
<down x="+53" y="20++1587"/>
<selected x="+53" y="20++2587"/>
<tooltip>Signal Bypass</tooltip>
</button>

2)search y="20++ replace y="

<button action="deck 1 timecode_bypass">
<size width="32" height="11"/>
<pos x="53" y="20+143"/>
<up x="+0" y="+0" />
<down x="+53" y="+1587"/>
<selected x="+53" y="+2587"/>
<tooltip>Signal Bypass</tooltip>
</button>
 

Posted Wed 23 May 12 @ 1:40 am
thanks for your help george.. I just added "0+" to all the pos y values so I can modify it easily, it was fairly painless and only took about an hour. I also used "0-" on the down graphics.. I like that you can use multiple plus and minus signs so I might change it to

y="++"
y="--"
y="+-"
y="-+"

thay way I have 4 variants if I need then

 

Posted Wed 23 May 12 @ 1:56 am
JeremKPRO InfinityStaffMember since 2004
The Skin Creator has this feature (move all X or Y values)

It is in the XML zone of the Ribbon. I don't have the Skin Creator in front of me so I can't remember the name of the button.
 

Posted Wed 23 May 12 @ 3:43 am
I just had a look jeremie, it's called "relative graphics" but it's missing <pos> lol... but I should be able to add 20 to everything with find and rename, the remove it from everything but <pos> with the skin creator to get the same result ;-)

It's a fantastic app Jeremie just not as stable as I would like when the xml gets larger in size
 

Posted Wed 23 May 12 @ 4:29 am
i'm having trouble making relative graphics work, have you got any hints of how to do it? I checked the manual but it only mentions what it does on page 5. i tried highlighting text, not highlighting... I haven't tried saving though
 

Posted Wed 23 May 12 @ 5:17 am
Relative graphics work "relative" regarding the POS coordinates of the element

eg:

<button action="deck 1 timecode_bypass">
<size width="32" height="11"/>
<pos x="62" y="143"/>
<up x="+0" y="+0" />
<down x="+0" y="+1500"/>
<selected x="+0" y="+3000"/>
<tooltip>Signal Bypass</tooltip>
</button>

equals to:

<button action="deck 1 timecode_bypass">
<size width="32" height="11"/>
<pos x="62" y="143"/>
<up x="62" y="143" />
<down x="62" y="1643"/>
<selected x="62" y="3143"/>
<tooltip>Signal Bypass</tooltip>
</button>

Relative coordinates are a neat way to work especially if you design a multi-state version of your entire skin graphics:

Y coordinate @ BMP File:
Start@0 = UP Graphics (Entire skin face)
Start@1500 = OVER Graphics (Entire skin face with all buttons in hover state. Perhaps you can leave browser out)
Start@2500 = DOWN Graphics (Entire skin face with all buttons in down state)
Start@3500 = SELECTED Graphics (Entire skin face with all buttons in "Selected" (active) state)
Start@4500 = OVERSELECTED (Entire skin face with all buttons in overselected state)

This way all your buttons can look like this:

<button action="SOME ACTION">
<size width="WWWWW" height="HHHHH"/>
<pos x="XXXX" y="YYYY"/>
<up x="+0" y="+0" />
<over x="+0" y="+1500"/>
<down x="+0" y="+2500"/>
<selected x="+0" y="+3500"/>
<overselected x="+0" y="+4500"/>

</button>
 

Posted Wed 23 May 12 @ 9:16 am
that is a great way to do everything, I will definately use maths and this in the future if I make more skins... but I probably will lol
 

Posted Wed 23 May 12 @ 4:19 pm
73%