Custom PL buttons?

[jogosa]

Hello.

Ok so I've searched the forum and couldn't find a thread mentioning exactly how to add custom buttons to playlist window. So I copied some of the pledit.xml from the modern skin to see how it goes. Apparently I'm still sitting with wasabi buttons in my playlist. What's the secret code to put custom buttons in to playlist & video windows?

Gonna put my xml here, maybe it helps to figure it out:

code:




<!--ELEMENTS-->

<elements>

	<bitmap id="wnd.region.tl" file="frame/Region.png" x="0" y="0" w="53" h="9"/>

	<bitmap id="wnd.region.tr" file="frame/Region.png" x="53" y="0" w="53" h="9"/>

	<bitmap id="wnd.region.bl" file="frame/Region.png" x="0" y="9" w="41" h="12"/>

	<bitmap id="wnd.region.br" file="frame/Region.png" x="65" y="9" w="41" h="12"/>



	<bitmap id="wnd.basetexture" file="frame/bg.png" />

	<bitmap id="wnd.tl" file="frame/frame_layer_0.png" x="0" y="0" w="55" h="19" />

	<bitmap id="wnd.tm" file="frame/frame_layer_0.png" x="55" y="0" w="1" h="19" />

	<bitmap id="wnd.tr" file="frame/frame_layer_0.png" x="56" y="0" w="56" h="19" />

	<bitmap id="wnd.l" file="frame/frame_layer_0.png" x="0" y="19" w="16" h="1" />

	<bitmap id="wnd.r" file="frame/frame_layer_0.png" x="96" y="19" w="16" h="1" />

	<bitmap id="wnd.bl" file="frame/frame_layer_0.png" x="0" y="20" w="44" h="28" />

	<bitmap id="wnd.bm" file="frame/frame_layer_0.png" x="44" y="20" w="1" h="28" />

	<bitmap id="wnd.br" file="frame/frame_layer_0.png" x="68" y="20" w="44" h="28" />

</elements> 



<!--WTF_PART-->

<groupdef id="pledit.buttons.group" relatw="1" w="0" h="21">

 	<button id="pledit.button.add"

		rectrgn="1"

		action="PE_ADD"

		x="28" y="-4"

		relaty="1"

		image="plwnd.add"

		hoverimage="plwnd.add-hvr"

		downimage="plwnd.add-prf"

	/>

	<button id="pledit.button.rem"

		rectrgn="1"

		action="PE_REM"

		x="47" y="-4"

		relaty="1"

		image="plwnd.rem"

		hoverimage="plwnd.rem-hvr"

		downimage="plwnd.rem-prf"

	/>

	<button id="pledit.button.sel"

		rectrgn="1"

		action="PE_SEL"

		x="66"

		y="-4"

		relaty="1"

		image="plwnd.sel"

		hoverimage="plwnd.sel-hvr"

		downimage="plwnd.sel-prf"

	/>

	<button id="pledit.button.misc"

		rectrgn="1"

		action="PE_MISC"

		x="84" y="-4"

		relaty="1"

		image="plwnd.misc"

		hoverimage="plwnd.misc-hvr"

		downimage="plwnd.misc-prf"

	/>

	<button id="pledit.button.list"

		rectrgn="1"

		action="PE_LIST"

		x="-43" y="-4"

		relatx="1" relaty="1"

		image="plwnd.list"

		hoverimage="plwnd.list-hvr"

		downimage="plwnd.list-prf"

	/>

 </groupdef>



<!--TITLEBAR-->

<groupdef id="wasabi.titlebar" xuitag="Wasabi:TitleBar" embed_xui="window.titlebar.title">

	<text id="window.titlebar.title"

		x="0" y="0"

		w="-1"

		relatw="1"

		fontsize="19"

		antialias="1"

		color="255,255,255"

		forceupcase="1"

		font="player.font.mlg"

		default=":componentname"

		align="l"

		gammagroup="text"

		alpha="160"

	/>

	<layer id="mousetrap" x="0" y="0" w="0" h="0" move="0"/>

	<hideobject target="mousetrap"/>

</groupdef>



<!--FRAME_BASIC-->

<groupdef id="component.content.group">

	<component x="11" y="24" w="-22" relatw="1" h="-35" relath="1" param="guid:default"/>

</groupdef>



<groupdef id="wasabi.frame.layout" background="wnd.basetexture">

	<layer id="wnd.tl" x="0" y="0" image="wnd.tl" resize="topl" />

	<layer id="wnd.tm" x="55" y="0" w="-100" relatw="1" image="wnd.tm" resize="top" />

	<layer id="wnd.tr" x="-55" y="0" relatx="1" image="wnd.tr" resize="topr" />

	<layer id="wnd.l" x="0" y="19" h="-33" relath="1" image="wnd.l" resize="l" />

	<layer id="wnd.r" x="-15" y="19" h="-33" relatx="1" relath="1" image="wnd.r" resize="r" />

	<layer id="window.resize.disabler" x="5" y="5" w="-40" h="-10" relatw="1" relath="1" />

	<group id="wasabi.titlebar" x="17" y="20" w="-56" h="32" relatw="1"/>

	

	<button id="sf.close"

		action="CLOSE"

		rectrgn="1"

		relatx="1"

		image="wnd.close-off"

		hoverImage="wnd.close-hvr"

		downImage="wnd.close-prf"

		x="-16" y="6"

		tooltip="exit"

		cursor="cur.hades"

	/>

	

	<layer id="regiontopl" x="0" y="0" image="wnd.region.tl" sysregion="-2"/>

	<layer id="regiontopr" x="-53" y="0" relatx="1" image="wnd.region.tr" sysregion="-2"/>

	<layer id="regionbottoml" x="0" y="-12" relaty="1" image="wnd.region.bl" sysregion="-2"/>

	<layer id="regionbottomr" x="-41" y="-12" relatx="1" relaty="1" image="wnd.region.br" sysregion="-2"/>

</groupdef>



<!--FRAME_WITH_STATUS-->

<layout id="resizable_status" background="component.basetexture" minimum_h="90" minimum_w="150">

	<group id="wasabi.standardframe.statusbar" x="0" y="0" w="0" h="0" relatw="1" relath="1" notify="content,component.content.group"/>

</layout>

	

<groupdef id="wasabi.standardframe.statusbar" inherit_content="scripts">

	<group id="wasabi.frame.layout" x="0" y="0" w="0" relatw="1" h="0" relath="1"/>

	<layer id="wnd.bl" x="0" y="-28" relaty="1" image="wnd.bl" />

	<layer id="wnd.bm" x="44" y="-28" relaty="1" w="-12" relatw="1" image="wnd.bm" resize="bottom" />

	<layer id="wnd.br" x="-44" relatx="1" y="-28" relaty="1" image="wnd.br" resize="bottomr" />

	<LayoutStatus id="standardframe.layoutstatus" x="7" y="-18" relaty="1" w="-14" relatw="1" h="14" exclude="{system}" />

	<SysCmds id="syscmds"/>

	<layer id="regiontopl" x="0" y="0" image="wnd.region.tl" sysregion="-2"/>

	<layer id="regiontopr" x="-53" y="0" relatx="1" image="wnd.region.tr" sysregion="-2"/>

	<layer id="regionbottoml" x="0" y="-12" relaty="1" image="wnd.region.bl" sysregion="-2"/>

	<layer id="regionbottomr" x="-41" y="-12" relatx="1" relaty="1" image="wnd.region.br" sysregion="-2"/>

</groupdef>



<!--FRAME_NO_STATUS-->

<layout id="resizable_nostatus" background="component.basetexture" minimum_h="90" minimum_w="150">

	<group id="wasabi.standardframe.nostatusbar" x="0" y="0" w="0" h="0" relatw="1" relath="1" notify="content,component.content.group"/>

</layout>



<groupdef id="wasabi.standardframe.nostatusbar" inherit_content="scripts">

	<group id="wasabi.frame.layout" x="0" y="0" w="0" relatw="1" h="0" relath="1"/>

	<layer id="wnd.bl" x="0" y="-28" relaty="1" image="wnd.bl" />

	<layer id="wnd.bm" x="44" y="-28" relaty="1" w="-12" relatw="1" image="wnd.bm" resize="bottom" />

	<layer id="wnd.br" x="-44" relatx="1" y="-28" relaty="1" image="wnd.br" resize="bottomr" />

	<layer id="regiontopl" x="0" y="0" image="wnd.region.tl" sysregion="-2"/>

	<layer id="regiontopr" x="-53" y="0" relatx="1" image="wnd.region.tr" sysregion="-2"/>

	<layer id="regionbottoml" x="0" y="-12" relaty="1" image="wnd.region.bl" sysregion="-2"/>

	<layer id="regionbottomr" x="-41" y="-12" relatx="1" relaty="1" image="wnd.region.br" sysregion="-2"/>

</groupdef>



<!--FRAME_STATIC-->

<layout id="static" background="component.basetexture" minimum_h="90" minimum_w="150">

	<group id="wasabi.standardframe.static" x="0" y="0" w="0" h="0" relatw="1" relath="1" notify="content,component.content.group"/>

</layout>



<groupdef id="wasabi.standardframe.static" inherit_group="wasabi.standardframe.nostatusbar">

	<group id="wasabi.frame.layout" x="0" y="0" w="0" relatw="1" h="0" relath="1"/>

	<layer id="wnd.bl" x="0" y="-28" relaty="1" image="wnd.bl"/>

	<layer id="wnd.bm" x="44" y="-28" relaty="1" w="-12" relatw="1" image="wnd.bm"/>

	<layer id="wnd.br" x="-44" relatx="1" y="-28" relaty="1" image="wnd.br"/>

	<layer id="regiontopl" x="0" y="0" image="wnd.region.tl" sysregion="-2"/>

	<layer id="regiontopr" x="-53" y="0" relatx="1" image="wnd.region.tr" sysregion="-2"/>

	<layer id="regionbottoml" x="0" y="-12" relaty="1" image="wnd.region.bl" sysregion="-2"/>

	<layer id="regionbottomr" x="-41" y="-12" relatx="1" relaty="1" image="wnd.region.br" sysregion="-2"/>

</groupdef>

[midiwriter]

Make sure your element tags match existing graphics...

Maybe this will help:

code:
<!--

::One - Video Tab

-->

<groupdef id="centro.video.buttons">

	<button action="VID_FS"	x="4" y="1" rectrgn="1" image="video.button.fullscreen.normal" hoverImage="video.button.fullscreen.hover" downImage="video.button.fullscreen.down" tooltip="Fullscreen"/>

	<button action="VID_1X"	x="29" y="1" rectrgn="1" image="video.button.1x.normal" hoverImage="video.button.1x.hover" downImage="video.button.1x.down" tooltip="Normal Size"/>

	<button action="VID_2X" x="54" y="1" rectrgn="1" image="video.button.2x.normal" hoverImage="video.button.2x.hover" downImage="video.button.2x.down" tooltip="Double Size"/>

	<button action="VID_TV" x="80" y="1" rectrgn="1" image="video.button.itv.normal" hoverImage="video.button.itv.hover" downImage="video.button.itv.down" tooltip="Internet TV"/>

	<button action="VID_Misc" x="-27" y="1" relatx="1" rectrgn="1" image="video.button.cfg.normal" hoverImage="video.button.cfg.hover" downImage="video.button.cfg.down" tooltip="Video Options"/>

	<text id="info" display="VID_Info" ticker="1" x="105" y="4" w="-135" relatw="1" align="center" valign="top" color="ComponentTab.Status.Text" font="cpro.status.font" move="1"/>

</groupdef>

<groupdef id="centro.video" name="Video">

	<windowholder id="centro.windowholder.video" x="1" y="1" w="-2" relatw="1" h="-27" relath="1" autofocus="1" wantfocus="0" autoclose="1" autoopen="1" autoavailable="1" visible="1" hold="guid:{F0816D7B-FFFC-4343-80F2-E8199AA15CC3}"/>

	<group id="centro.video.buttons" x="1" y="-24" w="-2" relatw="1" h="22" relaty="1" visible="0"/>

</groupdef>



<!--

::One - Playlist Tab

-->

<groupdef id="centro.playlist2.buttons">

	<button action="PE_Add"	x="4" y="1" rectrgn="1" image="pl2.add.1" hoverImage="pl2.add.2" downImage="pl2.add.3" tooltip="Add Files to Playlist"/>

	<button action="PE_Rem" x="29" y="1" rectrgn="1" image="pl2.rem.1" hoverImage="pl2.rem.2" downImage="pl2.rem.3" tooltip="Remove Files from Playlist"/>

	<button action="PE_Sel" x="54" y="1" rectrgn="1" image="pl2.sel.1" hoverImage="pl2.sel.2" downImage="pl2.sel.3" tooltip="Select Files from Playlist"/>

	<button action="PE_Misc" x="80" y="1" rectrgn="1" image="pl2.misc.1" hoverImage="pl2.misc.2" downImage="pl2.misc.3" tooltip="Misc Actions"/>

	<button action="PE_List" x="-27" y="1" relatx="1" rectrgn="1" image="pl2.man.1" hoverImage="pl2.man.2" downImage="pl2.man.3" tooltip="Manage Playlist"/>

	<text id="centro.playlist.pltext1" display="PE_Info" ticker="1" x="105" y="4" h="13" w="-135" relatw="1" align="center" color="ComponentTab.Status.Text" font="cpro.status.font" move="1"/>

</groupdef>

<groupdef id="centro.playlist2" name="Playlist">

	<PlaylistPro id="centro.windowholder.playlist2" x="1" y="1" w="-2" relatw="1" h="-4" relath="1"/>

	<group id="centro.playlist2.buttons" x="1" y="-24" w="-2" relatw="1" h="22" relaty="1" visible="0"/>

</groupdef>

[jogosa]

Both PL and Video didn't work..

[midiwriter]

Originally Posted by jogosa

Both PL and Video didn't work..

You'll need to make sure, in your elements, that the buttons are defined properly. If you need help, send me your elements.xml (the section containing your PL and VID buttons).

[jogosa]

Ok , here's my elements file:

[midiwriter]

wow that's a huge elements file..best thing is for you to look at my skin MIDISUI and see how I did it...it should be very straightforward.
http://www.winamp.com/skin/midisui/222421
just make sure you have your elements defined making reference to your .png (button) files...did you make your own buttons yet?
(just glancing at your file I don't see any of your own buttons in there...)

[jogosa]

Oh yeah I have them all done, I'll be lookin into your skin and see if that goes..

[jogosa]

Still no luck... here's the whole thing

[midiwriter]

Here's the code you need (sorry I had to look for it):

code:
<groupdef id="player.normal.group.display.playlist" w="750" h="450" ghost="1">

     <windowholder id="Playlist" x="193" y="125" w="361" h="294" hold="guidl" autoclose="1" autoopen="1"/>

     <button action="PE_Add"	x="198" y="428" rectrgn="1" image="button.PL.add" hoverImage="button.PL.add.hover" downImage="button.PL.add.pressed" tooltip="Add Files to Playlist"/>

     <button action="PE_Rem" x="229" y="428" rectrgn="1" image="button.PL.add" hoverImage="button.PL.add.hover" downImage="button.PL.add.pressed" tooltip="Remove Files from Playlist"/>

     <button action="PE_Sel" x="260" y="428" rectrgn="1" image="button.PL.add" hoverImage="button.PL.add.hover" downImage="button.PL.add.pressed" tooltip="Select Files from Playlist"/>

     <button action="PE_Misc" x="290" y="428" rectrgn="1" image="button.PL.add" hoverImage="button.PL.add.hover" downImage="button.PL.add.pressed" tooltip="Misc Actions"/>

     <button action="PE_List" x="492" y="428" rectrgn="1" image="button.PL.playlist" hoverImage="button.PL.playlist.hover" downImage="button.PL.playlist.pressed" tooltip="Manage Playlist"/>

     <text id="centro.playlist.pltext1" display="PE_Info" ticker="1" x="104" y="413" h="12" w="75" align="left" color="font.display.songticker" font="font1" fontsize="14" move="1"/>

	 



</groupdef>

Thats the playlist, here's the avs and vid windows:

code:
<groupdef id="player.normal.group.display.avs" w="750" h="450" ghost="1">

     <windowholder id="Vis" x="193" y="125" w="361" h="294" hold="guid:avs" autoclose="1" autoopen="1"/>

	 <button action="VIS_Prev" x="317" y="426" rectrgn="1" image="button.AVS.prev" hoverImage="button.AVS.prev.hover" downImage="button.AVS.prev.pressed" tooltip="  Previous Visualization Preset  "/>

<button action="VIS_Next" x="384" y="426" rectrgn="1" image="button.AVS.next" hoverImage="button.AVS.next.hover" downImage="button.AVS.next.pressed" tooltip="  Next Visualization Preset  "/>

<togglebutton id="vis.random" x="362" y="426" rectrgn="1" image="button.AVS.random" hoverImage="button.AVS.random.hover" downImage="button.AVS.random.pressed" ActiveImage="button.AVS.random" tooltip="  Randomly change Visualization Presets  " cfgattrib="{0000000A-000C-0010-FF7B-01014263450C};Random"/>

<togglebutton

    id="led.vis.random"

    cfgattrib="{0000000A-000C-0010-FF7B-01014263450C};Random"

    x="363" y="424"

    image="button.AVS.random.LED_OFF"

    downImage="button.AVS.random.LED_ON"

    activeImage="button.AVS.random.LED_ON"

    rectrgn="1"

	ghost="1"

  />

  <button action="VIS_FS" x="500" y="423" rectrgn="1" image="button.AVS.full" hoverImage="button.AVS.full.hover" downImage="button.AVS.full.pressed" tooltip="  Fullscreen  "/>

  <button action="VIS_Cfg" x="198" y="426" rectrgn="1" image="button.AVS.options" hoverImage="button.AVS.options.hover" downImage="button.AVS.options.pressed" tooltip="  Preset Editor / Options  "/>

  <button action="VIS_Menu" x="524" y="426" rectrgn="1" image="button.AVS.presets" hoverImage="button.AVS.presets.hover" downImage="button.AVS.presets.pressed" tooltip="  Presets  "/>



  <text id="centro.playlist.pltext1" display="PE_Info" ticker="1" x="104" y="413" h="12" w="75" align="left" color="font.display.songticker" font="font1" fontsize="14" move="1"/>



</groupdef>



<!-- ****************************************************************************************** -->



<groupdef id="player.normal.group.display.video" w="750" h="450" ghost="1">

      <windowholder id="Vis" x="193" y="125" w="361" h="294" hold="guid:{F0816D7B-FFFC-4343-80F2-E8199AA15CC3}" autoclose="1" autoopen="1"/>



	 <button action="VID_FS"	x="475" y="426" rectrgn="1" image="button.video.full" hoverImage="button.video.full.hover" downImage="button.video.full.pressed" tooltip="  Fullscreen  "/>

	<button action="VID_TV" x="431" y="426" rectrgn="1" image="button.video.TV" hoverImage="button.video.TV.hover" downImage="button.video.TV.pressed" tooltip="  Internet TV  "/>

	<button action="VID_Misc" x="229" y="426" rectrgn="1" image="button.AVS.options" hoverImage="button.AVS.options.hover" downImage="button.AVS.options.pressed" tooltip="  Video Options  "/>

	<text id="info" display="VID_Info" ticker="1" x="118" y="3" w="560" align="left" valign="top" color="0,222,255" font="cpro.status.font" move="1"/>



	<text id="centro.playlist.pltext1" display="PE_Info" ticker="1" x="104" y="413" h="12" w="75" align="left" color="font.display.songticker" font="font1" fontsize="14" move="1"/>



</groupdef>]

Essentially, you just make a basic container and add the <windowholder> tag to include the component, then throw your custom buttons on top of that. Hope this helps, let me know if you get it.

[jogosa]

Tried the one with the container, still nothing(I used bigger button tags than here). This PL buttons thing is getting on my nerves !

code:


<container id="Pledit" name="Playlist Editor">

	<groupdef id="player.normal.group.display.playlist" w="750" h="450" ghost="1">

	<windowholder id="Playlist" x="193" y="125" w="361" h="294" hold="guidl" autoclose="1" autoopen="1"/>



		        <button id="pledit.button.add"/>

			<button id="pledit.button.rem"/>

			<button id="pledit.button.sel"/>

			<button id="pledit.button.misc"/>

			<button id="pledit.button.list"/>



	</groupdef>

</container>

[midiwriter]

You don't have any background image so there's nothing for your elements to sit on.
A great example of this is the new S7Reflex skin. He used this method on his components.
His code is easy to read...you'll use relatw="1" relath="1" to get resizing.

Much easier is to use wasabi buttons and just change the window-elements.png file, if you can't get this working.

[jogosa]

Today I tried all sorts of ways to make the buttons to work by looking at the S7Reflex - no luck. Gonna have to halt this one...

[jogosa]

btw wasabi buttons won't look good at all in playlist, they do however in ML because they are in the LCD area..

[midiwriter]

Originally Posted by jogosa

Today I tried all sorts of ways to make the buttons to work by looking at the S7Reflex - no luck. Gonna have to halt this one...

Don't give up it's not too hard; I'd hate for you to give up this far along.

What exactly is happening? Do you even see the buttons? Or do they just not function? I still think it may just be an elements incongruency...

[jogosa]

What happens is that I see the default buttons and no custom ones..

[jogosa]

You can check my skin file to see what's going on there..

[midiwriter]

Looks like you have your groups and layout defined, but I didn't see any container holding your code. Did you add:

code:
<container id="Pledit" name="Playlist Editor" dynamic="1" component="guid:{45F3F7C1-A6F3-4ee6-A15E-125E92FC3F8D}" default_x="354" default_y="0" default_visible="1">

  <include file="pledit-normal.xml"/>

</container>]

where pledit-normal.xml would be the file containing your layout and windowholder.

[midiwriter]

One more thing I notice you have your group defined:

code:
<groupdef id="player.normal.group.display.playlist" w="100" h="15" ghost="1">

but this group isn't anywhere in your skin. Needs to be in your PL container/layout.

[jogosa]

Oh yeah I tried putting them into container tags:

code:
<container id="Pledit" name="Playlist Editor" component="guid:{45F3F7C1-A6F3-4ee6-A15E-125E92FC3F8D}" default_visible="1">

[midiwriter]

Hey how is your skin coming along?
I just finished my new skin, I did what you are asking about.
I skinned all the component windows, but left the video window with standardframe buttons.
Have a look at my code, I think it's quite easy to understand.
Remember, I made my component windows with no'width' border (w="0" relatw="1"),
but if your frame has sides (left and right) you'll need to include those coordinates.
Hope you got it working...I attached my finished skin.
I left in all my .m files so you can look at those too.

[jogosa]

Hi, It's funny because I was so pissed about the playlist buttons that I started to make a new project I have put an image of it..

You skin looks nicee, though I would have made it more variating.. But then again it's called simpleskin ,right?

I you don't mind I'll take a look into your skin for the pl-button code


By the way you shoud double check your skin because the playlist window snaps at about
~190px far of right..

[jogosa]

That said, I'm planning of going back to the Digital project, rewrite all the xml, add the PL buttons, maybe Video too and I still have to make the mini mode..

[jogosa]

That said, I'm planning of going back to the Digital project, rewrite all the xml, add the PL buttons, maybe Video too and I still have to make the mini mode..

[jogosa]

If only I could delete my posts....