Old 9th April 2021, 19:07   #41
Calvaria
Junior Member
 
Join Date: Nov 2010
Posts: 47
Quote:
Originally Posted by ariszlo View Post
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 is offline   Reply With Quote
Old 9th April 2021, 19:39   #42
Calvaria
Junior Member
 
Join Date: Nov 2010
Posts: 47
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.
Attached Images
  
Calvaria is offline   Reply With Quote
Old 9th April 2021, 19:41   #43
ariszlo
Major Dude
 
Join Date: Jun 2015
Location: Hungary
Posts: 598
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.
Attached Files
File Type: zip statuswidth.zip (2.2 KB, 2 views)
ariszlo is online now   Reply With Quote
Old 9th April 2021, 19:48   #44
ariszlo
Major Dude
 
Join Date: Jun 2015
Location: Hungary
Posts: 598
Quote:
Originally Posted by Calvaria View Post
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.
ariszlo is online now   Reply With Quote
Old 9th April 2021, 20:38   #45
Calvaria
Junior Member
 
Join Date: Nov 2010
Posts: 47
Quote:
Originally Posted by ariszlo View Post
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.
Calvaria is offline   Reply With Quote
Old 10th April 2021, 09:42   #46
ariszlo
Major Dude
 
Join Date: Jun 2015
Location: Hungary
Posts: 598
Quote:
Originally Posted by Calvaria View Post
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.
Attached Files
File Type: m pressedbuttons.m (2.5 KB, 5 views)
ariszlo is online now   Reply With Quote
Old 10th April 2021, 21:57   #47
Calvaria
Junior Member
 
Join Date: Nov 2010
Posts: 47
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?

Quote:
Originally Posted by ariszlo View Post
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?
Calvaria is offline   Reply With Quote
Old 10th April 2021, 23:04   #48
ariszlo
Major Dude
 
Join Date: Jun 2015
Location: Hungary
Posts: 598
Quote:
Originally Posted by Calvaria View Post
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 is online now   Reply With Quote
Old Yesterday, 06:31   #49
ariszlo
Major Dude
 
Join Date: Jun 2015
Location: Hungary
Posts: 598
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.

Quote:
Originally Posted by Calvaria View Post
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.
Attached Thumbnails
Click image for larger version

Name:	Winamp_Modern_playBitmap.png
Views:	8
Size:	45.4 KB
ID:	54752   Click image for larger version

Name:	Quint_Black_CT_pause_text.png
Views:	8
Size:	105.1 KB
ID:	54753   Click image for larger version

Name:	Quint_Black_CT_pause_symbol.png
Views:	7
Size:	104.9 KB
ID:	54754  
ariszlo is online now   Reply With Quote
Old Yesterday, 11:52   #50
Calvaria
Junior Member
 
Join Date: Nov 2010
Posts: 47
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.
Calvaria is offline   Reply With Quote
Old Yesterday, 18:43   #51
ariszlo
Major Dude
 
Join Date: Jun 2015
Location: Hungary
Posts: 598
Quote:
Originally Posted by Calvaria View Post
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.

Quote:
Originally Posted by Calvaria View Post
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.

Quote:
Originally Posted by Calvaria View Post
Indeed, with non-transparent buttons it makes a lot of sense...
Yes, it does.

Quote:
Originally Posted by Calvaria View Post
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.
ariszlo is online now   Reply With Quote
Old Yesterday, 21:18   #52
Calvaria
Junior Member
 
Join Date: Nov 2010
Posts: 47
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.
Calvaria is offline   Reply With Quote
Old Today, 05:49   #53
ariszlo
Major Dude
 
Join Date: Jun 2015
Location: Hungary
Posts: 598
Quote:
Originally Posted by Calvaria View Post
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.
ariszlo is online now   Reply With Quote
Reply
Go Back   Winamp & Shoutcast Forums > Skinning and Design > Modern Skins

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump