Editing xmls and maki scripts

[Calvaria]

How do you like this skin? My impression is that you are working hard to turn Quinto into something like that.

No at all.

[ariszlo]

Why do hoverimage and downimage merge with active image, why this strange behavior? Different images (button states) are supposed to replace each other, not merge.

The button tag with the id "mp.button.play.id" and the status tag with the id "mp.button.play.active.id" have the same coordinates. If you have two or more tags with the same coordinates then the image of the tag that comes later will cover the image of the tag that comes earlier.

The status tag will show the playback status with images specified with playBitmap, pauseBitmap and stopBitmap.

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.

[ariszlo]

playlistlengthchunks.maki

... there is this huge distance between the colon and the following digit.

Here is a workaround for you.

1. Keep the info.input tag in main-player.xml as it is.
2. Replace the a1 tag in main-player.xml with these 5 tags:

<text id="firstchunk"
  x="271" y="81" h="20" w="50" align="right"
  font="bitmapfont.timer.id" text=""
/> <!-- firstchunk should be right-aligned because it may have any number of digits before the colon -->
<text id="firstcolon"
  x="321" y="81" h="20" w="13" align="left"
  font="bitmapfont.timer.id" text=":"
/>
<text id="secondchunk"
  x="334" y="81" h="20" w="50" align="left"
  font="bitmapfont.timer.id" text=""
/>
<text id="secondcolon"
  x="384" y="81" h="20" w="13" align="left"
  font="bitmapfont.timer.id" text=":"
/>
<text id="thirdchunk"
  x="397" y="81" h="20" w="50" align="left"
  font="bitmapfont.timer.id" text=""
/> 

Adjust the coordinates and widths as you like.

3. Replace the tag calling playlistlength.maki with this:

<script id="playlistlengthchunks" file="SCRIPTS/playlistlengthchunks.maki"/> 

4. Copy playlistlengthchunks.maki into the scripts folder

[ariszlo]

Explaining the gettoken function

String PLTimev = getToken(infoInput.getText(), "/" , 1); 

This creates a new string PLTimev from the second chunk of what "info.input" would display in main-player.xml (if the visibility of "info.input" was not set to zero with alpha="0" and visible="0"). "/" says that the chunks of the string output by "info.input" are separated with slashes. 1 says that the new string should be created from the 2nd chunk (0 stands for 1st, 1 stands for 2nd, 2 stands for 3rd, etc.)

String rightstring = getToken(PLTimev, ":" , 2); 

This creates a new string from the 3rd chunk of PLTimev using ":" as separator.

[ariszlo]

button states

I am trying to understand what you are aiming at.

quinto-button-states.png shows how button states are shown in Quinto with the original 11-hoverglow.maki.

quinto-fifth-button-state.png shows how the active-hover state would be displayed if you simplified this function in 11-hoverglow.m:

triggerObject.onEnterArea()
{
String object_id = triggerObject.getId();

if (object_id == "mp.button.play.id" && System.getStatus() == STATUS_PLAYING)
{
glowObject.cancelTarget();
}
else if (object_id == "mp.button.play.id" && (System.getStatus() == STATUS_PAUSED || System.getStatus() == STATUS_STOPPED))
{
glowObject.cancelTarget();
glowObject.setXmlParam("alpha","255");
}
else if (object_id == "mp.button.pause.id" && System.getStatus() == STATUS_PAUSED)
{
glowObject.cancelTarget();
}
else if (object_id == "mp.button.pause.id" && (System.getStatus() == STATUS_PLAYING || System.getStatus() == STATUS_STOPPED))
{
glowObject.cancelTarget();
glowObject.setXmlParam("alpha","255");
}
else if (object_id == "mp.button.stop.id" && System.getStatus() == STATUS_STOPPED)
{
glowObject.cancelTarget();
}
else if (object_id == "mp.button.stop.id" && (System.getStatus() == STATUS_PLAYING || System.getStatus() == STATUS_PAUSED))
{
glowObject.cancelTarget();
glowObject.setXmlParam("alpha","255");
}
else
{
glowObject.cancelTarget();
glowObject.setXmlParam("alpha","255");
}
} 

to this:

triggerObject.onEnterArea()
{
glowObject.cancelTarget();
glowObject.setXmlParam("alpha","255");
} 

Will you show me your images for the Play button with the states you expect them to show, please?

[Calvaria]

If you don't mind, I will for now ignore your helpful info on the colon issue because I need to be clear about buttons.

I now see the cause of my confusion. My downimage has alpha less than 255 and my hoverimage has a large transparent area. That's why they merge with the active button image instead of replacing it. What confused me is that they don't merge with non-active button image and they don't merge with each other (downimage always "cancels" hoverimage). So I expected them to work the same way with the active button. But now you have drawn my attention to the fact that the active button image, unlike regular/hover/down images, has a different ID (I paid little attention to IDs), and so one image can't cancel the other but rather overlays it.

I am now experimenting with playBitmap, pauseBitmap and stopBitmap.

[Calvaria]

It depends on the difficulty, but I want at least to have hoverimage and downimage replace (not cover!) the active button image, so that I have the following states:
regular (inactive/stopped – is there any difference?)
active
hover (the same image for active and inactive)
down (the same image for active and inactive)
Maybe I might also add hoveractive and hoverinactive, downactive and downinactive, but I am not sure if it makes visual sense.

[ariszlo]

regular (inactive/stopped – is there any difference?)

Yes, there is:

• inactive Play = not playing (stopped or paused)
• inactive Pause = not paused (playing or stopped)
• inactive Stop = not stopped (playing or paused)

[Calvaria]

I am talking about the play/pause buttons only, other buttons are simple and clear. So my question is if there is any difference between a basic (regular) play button (coded with image=), an inactive play button (coded with alphainactive=) and a stopped play button (coded with stopBitmap=). As far as I understood Winamp defines an inactive button as one that is located in an inactive Winamp component. So if for example Winamp's player is not selected, then all its buttons are inactive (which makes the inactive feature of little use, I initially thought that the play button during the playback would be active and in all other cases inactive, but no way).

[ariszlo]

It depends on the difficulty, but I want at least to have hoverimage and downimage replace (not cover!) the active button image...

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.

[Calvaria]

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:

<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:

<!--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:

<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]

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]

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.