Quick Sign In:  

Forum: VirtualDJ Technical Support

Topic: Dynamic Screen Button Name
I am creating a popup using the "window" tag in the skin's XML file. Inside the window tag I am creating custom buttons using the "button" tag.
Let's say I have a custom_button that I'd like to make the text match whatever name I give the macro. Would anyone know how to do so.

Problem is when I give the button the class name "button_main" and the text="[TEXT]" attribute and values does allow the button name to match the macro name but then the button inherits the wrong image from the original skin rather than the new custom skin.

    <button deck="master" class="" action="custom_button 8" textaction="custom_button_name 8"  rightclick="custom_button_edit 8">
<pos x="816" y="5"/>
<size width="100" height="35"/>
<up x="5" y="45" text="[TEXT]"/>
<off x="5" y="45" text="[TEXT]"/>
<selected x="115" y="45" text="[TEXT]"/>
<over x="225" y="45" text="[TEXT]"/>
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="[TEXT]"/>
<textselected size="14" font="Arial" weight="bold" align="center" color="#ffffffff" text="[TEXT]"/>
<textover size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="[TEXT]"/>
</button>
 

geposted Tue 09 Apr 24 @ 2:03 am
You're using the wrong placeholders it seems.
You should use it like this:
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="[TEXTACTION]"/>
 

geposted Tue 09 Apr 24 @ 10:51 am
 

geposted Sat 13 Apr 24 @ 4:52 am
Thanks @PhantomDeejay, sorry it was late last night. Not sure why the file was deleted I'll try again and include the xml code

https://file.io/vNWODvFZNeZm
or files uploaded individually (non zipped)
https://file.io/0jTIhZmK4Nei

Here is the Window part of the XML
<window name="BrowserWindow"  posx="0" posy="0" width="800" height="600" image="skin.png" shown="true" resize="true">
<button deck="master" action="nothing" >
<pos x="260" y="70" />
<size width="70" height="35" />
<up x="5" y="605" />
<selected x="85" y="605" />
<over x="165" y="605" />
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="A" />
<textselected size="14" font="Arial" weight="bold" align="center" color="#ffffffff" text="A" />
<textover size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="A" />
</button>
<button deck="master" action="nothing" >
<pos x="260" y="110" />
<size width="70" height="35" />
<up x="255" y="605" />
<selected x="335" y="605" />
<over x="415" y="605" />
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="B" />
<textselected size="14" font="Arial" weight="bold" align="center" color="#ffffffff" text="B" />
<textover size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="B" />
</button>
<button deck="master" action="nothing" >
<pos x="260" y="150" />
<size width="70" height="35" />
<up x="505" y="605" />
<selected x="585" y="605" />
<over x="665" y="605" />
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="C" />
<textselected size="14" font="Arial" weight="bold" align="center" color="#ffffffff" text="C" />
<textover size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="C" />
</button>
<button deck="master" action="nothing" >
<pos x="260" y="190" />
<size width="70" height="35" />
<up x="5" y="655" />
<selected x="85" y="655" />
<over x="165" y="655" />
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="D" />
<textselected size="14" font="Arial" weight="bold" align="center" color="#ffffffff" text="D" />
<textover size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="D" />
</button>
<button class="button_main_custom" deck="master" action="nothing" >
<pos x="260" y="230" />
<size width="70" height="35" />
<up x="255" y="655" />
<selected x="335" y="655" />
<over x="415" y="655" />
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="[TEXTACTION]" />
<textselected size="14" font="Arial" weight="bold" align="center" color="#ffffffff" text="E" />
<textover size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8" text="E" />
<!-- This is not working with text as the reference -->
</button>
</window>
 

geposted Sat 13 Apr 24 @ 4:32 pm
locoDogPRO InfinityModeratorMember since 2013
your action should be

custom_button %NUM

and
<text size="14" font="Arial" weight="bold" align="center" color="#ffc8c8c8"
textaction="custom_button_name %NUM" />

my simple custom_button define & placement [a lot of the define isn't needed, it was just a copy paste]

<define class="button_top" placeholders="width=62,height=30,text,important=true,textaction,sysicon,iconsize,textsize=11,weight=normal,textcolor=textoff">
<size width="[WIDTH]" height="[HEIGHT]"/>
<off color="buttonoff" shape="square" border="bordercolor" border_size="1" radius="4"/>
<over color="buttonover" shape="square" border="bordercolor" border_size="1" radius="4"/>
<selected color="buttonon" shape="square" border="bordercolor" border_size="1" radius="4"/>
<down color="buttonon" shape="square" border="bordercolor" border_size="1" radius="4"/>
<text fontsize="[TEXTSIZE]" weight="[WEIGHT]" color="[TEXTCOLOR]" colorover="textover" colorselected="texton" colordown="texton" align="center" action="[TEXTACTION]" text="[TEXT]" localize="true" important="[IMPORTANT]"/>
<icon sysicon="[SYSICON]" coloroff="[TEXTCOLOR]" colorover="textover" colordown="texton" colorselected="texton" width="[ICONSIZE]" height="[ICONSIZE]" />
</define>



<button deck="2" class="button_top" x="+0" y="+0" width="55" height="27" action="custom_button 61" textaction="custom_button_name 61" rightclick="custom_button_edit 61" textcolor="textoff3"/>
 

geposted Sat 13 Apr 24 @ 4:41 pm
@Locodog
Excellent thanks I'm getting closer but I'm still trying to get used to referencing the skin image skin.png which has placeholders for graphical buttons. How would I point that example button you pasted to a selected state at coordinates x="35" y="195"
 

geposted Sat 13 Apr 24 @ 5:35 pm
locoDogPRO InfinityModeratorMember since 2013
Like this I think, it's been over 6 years since I've worked with png co-ords

<button deck="2" class="button_top" x="+0" y="+0" width="55" height="27" action="custom_button 61" textaction="custom_button_name61" rightclick="custom_button_edit 61" textcolor="textoff3">
<up x="120" y="1890" />
<over x="120" y="1890+100" />
<down x="120" y="1890+200" />
<selected x="120" y="1890+300" />
</button>
 

geposted Sat 13 Apr 24 @ 5:44 pm
Strange since I'm doing it similarly. When I remark out the DEFINE tag it loads the image for the button yet it doesn't print text on the button. Driving me nuts...

I don't think many people work with the skins since not many responses ... :-(
 

geposted Sat 13 Apr 24 @ 6:16 pm
Thanks @Locodog. OK I got it.
If I keep the class that was defined as you provided and I remove the child tags such as <selected...> and get the coordinates correct it does then add the image background and keep the text.

For example:
<define class="button_top" placeholders="width=62,height=30,text,important=true,textaction,sysicon,iconsize,textsize=11,weight=normal,textcolor=textoff">
<size width="[WIDTH]" height="[HEIGHT]"/>
<off color="buttonoff" shape="round" border="bordercolor" border_size="1" radius="4"/>
<over color="buttonover" shape="round" border="bordercolor" border_size="1" radius="4"/>
<!-- <selected color="buttonon" shape="round" border="bordercolor" border_size="1" radius="10"/> -->
<down color="buttonon" shape="round" border="bordercolor" border_size="1" radius="4"/>
<text fontsize="[TEXTSIZE]" weight="[WEIGHT]" color="[TEXTCOLOR]" colorover="textover" colorselected="texton" colordown="texton" align="center" action="[TEXTACTION]" text="[TEXT]" localize="true" important="[IMPORTANT]"/>
<icon sysicon="[SYSICON]" coloroff="[TEXTCOLOR]" colorover="textover" colordown="texton" colorselected="texton" width="[ICONSIZE]" height="[ICONSIZE]" />
</define>

<button deck="master" class="button_top" x="+102" y="+0" width="100" height="40" action="custom_button 61" textaction="custom_button_name 61" rightclick="custom_button_edit 61" textcolor="textoff3">
<selected x="115" y="140"/> <!-- Selected or Current State-->
<up x="115+110" y="140"/> <!-- Normal State-->
<!-- <over x="5+100" y="140"/> -->
<!-- <down x="5+100" y="140"/> <!-- Down State--> -->
<!-- <off x="5+100" y="140"/> -->
</button>


Last question for any virtual dj xml experts. This is related to the settings.xml which gets modified when the button is edited.
When I created that button as you noted,
custom_button 61


how can I logically determine the amount of commas before the button is defined in the settings.xml file.

Update: I removed the commas and it must not be using the sequential location to call the button and possibly just using the name.
 

geposted Sat 13 Apr 24 @ 7:12 pm
Update:
After restarting virtual dj, the comma order did matter.

Will post a new question since this is a bit off topic from original question
 

geposted Sun 14 Apr 24 @ 3:07 pm