Editing xmls and maki scripts

[Calvaria]

Originally Posted by ariszlo

I assume you want to use your own hoverimages, not Quinto's hover glow, otherwise you would have edited and compiled 11-hoverglow.m as described here.

That's right. As I said they are partially transparent, that's why I need them to replace the active image, not cover it.

[Calvaria]

Here's my basic play button. Hover and down images are the same white image with a different alpha, active image is the green one.

[ariszlo]

This is how you can do it with the Play button:

1. Add your hoverimage to the Play button if you haven't added it yet:

PHP Code:

<button
  x="64" y="0"
  id="mp.button.play.id"
  image="mp.button.play"
  downimage="mp.button.play.down"
  hoverimage="my.play.hover"
  action="PLAY"
  tooltip="Play/Restart "
/> 


2. Comment out (or simply remove) the glow layer and the script tag calling 11-hoverglow.maki:

PHP Code:

<!--layer
  x="64" y="0"
  id="mp.button.play.glow.id"
  image="mp.button.play.glow"
  ghost="1"
/-->
<!--script file="SCRIPTS\11-hoverglow.maki" param="mp.button.play.id/mp.button.play.glow.id"/--> 


3. Add the following script tag with a slashed parameter containing the button's id to the left of the slash and the status tag's id to the right of the slash:

PHP Code:

<script file="SCRIPTS/statuswidth.maki" param="mp.button.play.id/mp.button.play.active.id"/> 


4. Copy statuswidth.maki into the scripts folder.

Add your hoverimage to the Pause and Stop buttons, too. Comment out the glow layers and 11-hoverglow.maki tags that follow them. Add the script tag calling statuswidth.maki for each button with the necessary changes in param.

NOTE. The attached statuswidth.maki works with status images whose width is 60 pixels. If the width of your status images is other than 60 pixels then you will need to edit statuswidth.m and recompile it.

[ariszlo]

Originally Posted by Calvaria

Here's my basic play button. Hover and down images are the same white image with a different alpha, active image is the green one.

Are you saying that you only want two images for each button? The green one when the button is not pressed and the mouse pointer is not over it and a partially transparent one for hoverimage and downimage? Then it is MUCH simpler. You just remove the glow layers and the script tags calling 11-hoverglow.maki.

And also the status tags immediately following the button tags.

[Calvaria]

Originally Posted by ariszlo

Are you saying that you only want two images for each button? The green one when the button is not pressed and the mouse pointer is not over it and a partially transparent one for hoverimage and downimage?

No, I have four images: normal (no playback), hover (playback or no playback), down (playback or no playback) and active (playback on). The first three are the same image with a different alpha, making them three different images. The green one is for playback.

[ariszlo]

Originally Posted by Calvaria

As I said they are partially transparent, that's why I need them to replace the active image, not cover it.

OK. I got it. Then this is how you do it.

1. Add your hoverimages to the Play, Pause and Stop buttons if you haven't added them yet.

2. Remove the status, layer and script tags immediately below the Play, Pause and Stop button tags so that you only have this between <!-- BUTTON "PLAY" - GLOW EFFECT --> and <!-- BUTTON "NEXT" - GLOW EFFECT -->:

PHP Code:

    <!-- BUTTON "PLAY" - GLOW EFFECT -->
    <button
        x="64" y="0"
        id="mp.button.play.id"
        image="mp.button.play"
        downimage="mp.button.play.down"
        hoverimage="my.play.hover"
        action="PLAY"
        tooltip="Play/Restart "/> <!-- do not translate the tooltip -->
    <!-- BUTTON "PAUSE" - GLOW EFFECT -->
    <button
        x="128" y="0"
        id="mp.button.pause.id"
        image="mp.button.pause"
        downimage="mp.button.pause.down"
        hoverimage="my.pause.hover"
        action="PAUSE"
        tooltip="Pause/Unpause "/>  <!-- do not translate the tooltip -->
    <!-- BUTTON "STOP" - GLOW EFFECT -->
    <button
        x="192" y="0"
        id="mp.button.stop.id"
        image="mp.button.stop"
        downimage="mp.button.stop.down"
        hoverimage="my.stop.hover"
        action="STOP"
        tooltip="Stop "/> <!-- do not translate the tooltip -->
    <!-- BUTTON "NEXT" - GLOW EFFECT --> 


3. Add this line before <!-- BUTTON "NEXT" - GLOW EFFECT -->:

PHP Code:

    <script file="SCRIPTS/pressedbuttons.maki"/> 


4. Read the attached pressedbuttons.m and, if necessary, edit the button id's inside the parentheses of the getObject functions and the image id's inside the parentheses of the setXmlParam functions.

5. Compile pressedbuttons.m and copy it into the scripts folder.

[Calvaria]

In the above approach, if I wanted to have pauseBitmap for the play button, would it be possible to keep the status tag with pauseBitmap (but without playBitmap) or must the whole status be removed?

Could you explain the difference between a basic (regular) play button (coded with image=) and a stopped play button (coded with stopBitmap=)? Can stopBitmap be used for the play button or it only makes sense to use it for the stop button?

Originally Posted by ariszlo

Since the status tag with the id "mp.button.play.active.id" only specifies playBitmap, it will only hide the Play button's image and downimage if playback is on.

I didn't understand this, could you explain what you mean?

[ariszlo]

Originally Posted by Calvaria

Could you explain the difference between a basic (regular) play button (coded with image=) and a stopped play button (coded with stopBitmap=)?

The difference is that playBitmap, stopBitmap and pauseBitmap are not buttons at all. They are status images.

You keep saying that you want to replace one image with the other, not cover it. You cannot replace a button image (image, hoverimage, downimage) with a status image (playBitmap, stopBitmap, pauseBitmap), only cover it. So if it is replace what you want then you should forget about Quinto's status images covering the button images if in the appropriate status.

If replace is what you want, then you want this.

[ariszlo]

Status images display playback status (playing, paused, stopped). They are not buttons.

Here are three examples:

1. Winamp Modern: ▶️ play symbol to the left of the timer
2. Quinto: PAUSE text to the left of the timer
3. Quinto: ⏸ pause symbol to the left of the timer (you need to go to Options > Quinto > Configuration > Playback Status to change the text to symbol)

Quinto also uses another set of status images to fake active buttons. But they are not buttons. They are covering the real buttons when playback is in the appropriate state. Without the ghost="1" parameter in the status tags, you could not even use the buttons below the status images. You would just click, click and nothing would happen. Ghost="1" allows you to click through objects that cover buttons.

Originally Posted by Calvaria

As I said they are partially transparent, that's why I need them to replace the active image, not cover it.

That's why you should remove the status, layer and script tags immediately below the Play, Pause and Stop button tags and use pressedbuttons.maki.

[Calvaria]

All right, that's why I couldn't see much difference between stopBitmap in the status of the play button and image="mp.button.play" (and was wondering why stopBitmap existed at all). You mentioned that PeterK did an unusual thing by using status for some buttons, but I didn't understand why it was unusual and was going to ask you about it, because it seemed logical for a button to have a status. Now you have explained it.

So Winamp Modern skin play button doesn't have a status tag, yet does have an active play button image because it's coded in a maki file? So what PeterK did with Quinto is he used status instead of maki, to make things simpler, yet have the same effect? Indeed, with non-transparent buttons it makes a lot of sense, you can have playBitmap and pauseBitmap state and maybe even playBitmap/pauseBitmap+hover/down states (if it's possible to make a suitable mix of non-transparent and partially transparent images).

Strange, though, that Winamp doesn't use "activeimage" for the active button state.

[ariszlo]

Originally Posted by Calvaria

So Winamp Modern skin play button doesn't have a status tag, yet does have an active play button image because it's coded in a maki file?

No, Winamp Modern does it like Quinto. I just did not know that before you asked. You can check it out in Winamp Modern's player-normal-group.xml, player-elements.xml, player_buttons.png and player_buttons_status.png.

Thanks for asking. Now I know more about Winamp Modern.

Originally Posted by Calvaria

So what PeterK did with Quinto is he used status instead of maki, to make things simpler, yet have the same effect?

Now that I have looked into Winamp Modern's xmls, I would say no. His solution is based on Winamp Modern's with some modifications.

Originally Posted by Calvaria

Indeed, with non-transparent buttons it makes a lot of sense...

Yes, it does.

Originally Posted by Calvaria

Strange, though, that Winamp doesn't use "activeimage" for the active button state.

Interfaces evolve. Showing playback states on playback buttons is not an idea that automatically comes to mind. Playback status has been shown next to the timer since Winamp 1.0 and probably no developer thought it necessary to introduce a parameter to repeat that info on the playback buttons. Luckily, you can do a lot of things with xml's and maki.

[Calvaria]

Your pressedbuttons.maki works beautifully, thanks a lot!

Do you know if this function still works in Winamp

PHP Code:

action="reload_skin" 


I am tired of switching between skins to refresh my skin. I made a button with this skin (reassigned the lightning bolt) but it doesn't work.

[ariszlo]

Originally Posted by Calvaria

Do you know if this function still works in Winamp

As a button action, it does not. It is listed under *** Broken Action (Winamp 5) *** in Wasabi Appendix: Action List.

As a hotkey, it does. Press F5 (or if you have an HP then Fn+F5) to reload the skin.