Editing xmls and maki scripts

[ariszlo]

This is a new thread to continue the Is it possible to move PE_Info to the main player? topic because most of the questions raised there are not strictly Quinto-specific.

Originally Posted by Calvaria

Then I apply the bitmap font to the remaining (second) instance. But it just disappears.
– Oh, I see now why it disappeared, it's because this font doesn't have any letters but they still take space. So if you please remove the words and the colon, it will be fine!

This post describes how you can remove them.

Originally Posted by Calvaria

I managed to do it myself! It works fine, thanks a lot!

How did you do it? Did you lower the value of x in the "a1" tag? That's not the best idea because it may confuse you about how x's are calculated. Removing the words by editing playlistlength.m and then compiling it to playlistlength.maki as described in this post will not cause such confusion.

[Calvaria]

I did it as you described in your post (with maki). Of course it would have taken me much less time, if I had your detailed explanation )

[ariszlo]

Originally Posted by Calvaria

2) it's even more complicated than you have described because I as mentioned earlier in some timers Winamp removes extra space for the same combination of digits and colon while in others it doesn't

Could you show the codes of the different timers, please?

Originally Posted by Calvaria

3) even if I manage to create smaller bitmap font it will not make much sense – even though the digits will be smaller, the distances between them will become proportionately larger.

They should not. I tested it with the attached bitmap font.

Add this line to the <!-- FONTS --> section of elements.xml somewhere between <elements> and </elements>:

code:
<bitmap id="testfont" file="PNG\testfont.png" gammagroup="gamma.main.player.timer"/>

Then change the font of one of the timers to testfont and see that the distances will be all right.

[Calvaria]

Originally Posted by ariszlo

Could you show the codes of the different timers, please?

If I understand you correctly the codes are
display="time"
display="songlength"
display="timeremaining"

I tried you testfont, on one hand the font is smaller and the distances between digits are small too, on the other hand the distance between the colon and the following digit is huge, a whole digit with spaces can fit there. There is this line in main-player.xlm in the timer section <!-- space between number left/right and ":", here 8 pixels --> but it's not clear what this comment refers to in the code and whether this space can be changed.

I made one digit smaller in the original bitmap timer font and indeed the space around this digit became greater. So I don't know how to explain all this. But from the practical point of view I am concerned not so much about the font size as about the distance between the colon and the following digits in different timers.

[ariszlo]

Removing timecolonwidth="15" might fix it.

[ariszlo]

This is what the Skin Developer Wiki says about timecolonwidth:

timecolonwidth - (int) How many extra pixels wider or smaller should the colon be when displaying time. Default is -1

[Calvaria]

I set it to 12 and it works fine, but not in the case of display="songlength" or total playlist length. For those two I tried removing the line altogether, setting it to -1, 0 , 1or 12 – it doesn't affect the colon.

[ariszlo]

Could you post how you modified this?

PHP Code:

<text id="a1"
  x="267" y="80" h="28" w="0" relatw="1" align="left"
  font="Arial" fontsize="28" color="255,255,255" text="-"
  tooltip="Total playlist time (hh:mm:ss / hh:mm)"
/> 


Could you also post the tag containing "songlength" starting with < and ending with /> as in the "a1" tag above?

[ariszlo]

I have just found this: Change Time or Clock Format. If it still has not been fixed since 2010, and chances are that it has not, then it explains why you cannot set timecolonwidth for strings copied from PE_Info.

What bitmap font are you using for songlength and total playlist length?

[Calvaria]

PHP Code:

<text id="a1"
        x="310" y="150" h="28" w="250" align="right"
        font="bitmapfont.timer.id"
        timecolonwidth="1"
        /> 


PHP Code:

<text
        x="170" y="50" w="160" h="20"
        id="mp.timer.id"
        align="right"
        display="songlength"
        font="bitmapfont.timer.id"
        ghost="0"
        timeroffstyle="1"
        timecolonwidth="12"
        /> 


I am using the standard Quinto bitmap for all timers.

[Calvaria]

There is another minor thing with timers. The Quinto timer (display="time"), unlike other timers, has the leading zero. Can it be dropped?

[ariszlo]

It seems timecolonwidth is still buggy. So I would use a TrueType font instead. In the example below, I am using a custom TrueType font called FifteenOkay.

Copy FifteenOkay.ttf in the PNG folder.

Add this line to the fonts section in elements.xml:

PHP Code:

<truetypefont id="font.length.id" file="PNG\FifteenOkay.ttf"/> 


Change font="bitmapfont.timer.id" to font="font.length.id".

Add fontsize and color.

[ariszlo]

Originally Posted by Calvaria

There is another minor thing with timers. The Quinto timer (display="time"), unlike other timers, has the leading zero. Can it be dropped?

Yes, it can but it would require heavy editing of 14-main-player.m and would go against the skin author's intention. You might want to send him an email asking for an option to turn oldTimer on and off in the next release of Quinto.

[Calvaria]

All right, thanks a lot for the info.

[ariszlo]

You are welcome. Here you can find some other dotted fonts if you decide on using a TrueType font for your timers: wFonts.com

Just type 01:23 in the Custom fonts preview field and browser through the pages.

[ariszlo]

Calvaria, will you check your private messages, please?

[ariszlo]

Originally Posted by Calvaria

How do I assign VID and VIS buttons to toggle Equalizer, Frequency response graph or VU meter analog?

What you need is the id's of the containers.

To get the id of the Frequency Response Graph container, open frequency-response-graph.xml and search for container. You will see that its id is "frequency.response.graph".

Now open main-player.xml and find the button you want to toggle the Frequency Response Graph window. Let's say, it is the VIS button. The VIS button has this parameter:

PHP Code:

param="guid:{0000000a-000c-0010-ff7b-01014263450c}" 


Replace it with the id of the Frequency Response Graph container like this:

PHP Code:

param="frequency.response.graph" 


Now you can toggle the Frequency Response Graph window with the VID button but hovering over the button will still show VID rather than FRG. To fix that you will need to edit button-vid-vis-pe-ml-mute.png with an image editor. Personally, I use GIMP but any other image editor will do that can do transparency and has a color picker and a fill bucket.

There are three instances of each button text. The color of the letters in the first row is #2b3339 and it is #af8a2a in the other rows. The attached png contains the letters for FRG and EQ in a style similar to those used in Quinto.

[ariszlo]

Originally Posted by Calvaria

Also the player has the word "Equalizer" on the display...

It is not a button. It is there to tell you whether the equalizer is turned on or off. If you turn the equalizer on by pressing the EQ button in the Equalizer window then the text will turn to light blue.

[Calvaria]

I thought you'd need some special guids to call up those things and was trying to find them.

I turned the Equalizer text into a button, anyway , just like VIS, VID and others, for consistency.
Thank you for the letters!

I have another question, about Play and Pause buttons. The hoverimage and downimaage work well when those buttons are inactive, but when they are active (and they glow brightly in my version) those images are hard to see. For some reason they blend with the active image instead of replacing it. How to make them replace the active image?

[ariszlo]

Originally Posted by Calvaria

I have another question, about Play and Pause buttons. The hoverimage and downimaage work well when those buttons are inactive, but when they are active (and they glow brightly in my version) those images are hard to see. For some reason they blend with the active image instead of replacing it. How to make them replace the active image?

It is intentional. In a less sophisticated skin, you just add a line like this to a button tag:

PHP Code:

hoverImage="button.minimize.hover" 


With that line added, an active button will look the same as an inactive button when you move the mouse over it. The author of Quinto decided that an active button should always be distinct from an inactive button.

In Quinto, every button has a red hover glow around it but it is hidden by default. It only becomes visible if you hover the mouse pointer over an inactive button. The red hover glow is a layer whose opacity is set to 0 with the following line in 11-hoverglow.m:

PHP Code:

glowObject.setXmlParam("alpha","0"); 


And this is how you make it visible:

PHP Code:

glowObject.setXmlParam("alpha","255"); 


(alpha="0" stands for zero opacity, i.e. full transparency, alpha="255" stands for full opacity and alpha="127" stands for 50% opacity/transparency.)

To show the hover glow around both active and inactive buttons, you need to simplify the triggerObject.onEnterArea funtion to this:

PHP Code:

triggerObject.onEnterArea()
{
    String object_id = triggerObject.getId();
    glowObject.cancelTarget();
    glowObject.setXmlParam("alpha","255");
} 


But if you do so then Quinto will lose one of its cool features.

[Calvaria]

I should have said that I had already introduced hoverimage in all the buttons and that the images I use for hoverimage (and downimage) are completely different from Quinto images. The problem is this: when hoverimage and downimage are activated over an inactive button, they replace the inactive image, that's great. But when they are activated over an active button, they blend with the active image. Is this the internal Winamp feature or Quinto's ? Now my hoverimage and downimage are such, that they can hardly be seen against the glow of the active button (the latter being vastly different from Quinto's active image as well). To be seen they must replace the active image. How to get them to do it?

I would prefer to have separate images for hovered active button and pressed active button, but if not possible , then I'd rather have a distinct hover image (the same for active and inactive) and a distinct down image (the same for active and inactive). So which is the best way to solve this: with hoverimage or with hoverglow.maki or some other way?

[ariszlo]

Without maki, you can show three states of a regular button:

• image
• hoverImage
• downImage

Toggle images also have an activeImage state.

If you are okay with the above states then you might want to comment out all glow layers and all calls of 11-hoverglow.maki like this:

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"/--> 


If you want more then you need maki. Say, you have made an image to show both that the Play button is down and that the mouse pointer is over it. To achieve that, do NOT comment out the glow layers and the calls of 11-hoverglow.maki. You should instead change the following line in elements.xml to point to the image you want to use:

PHP Code:

<bitmap id="mp.button.play.glow"    file="PNG\button-playback.png" x="0"   y="78" w="60" h="36"/> 


Then you should edit 11-hoverglow.m to set the alpha value of your image to "255" if it is in the appropriate state. You should make a backup of 11-hoverglow.m before starting to experiment with it. With trial and error, you will finally find out how to modify it to get what you want.

[Calvaria]

Is possible to convert Play and Pause buttons into toggle buttons in order to use activeimage with them?

[ariszlo]

Originally Posted by Calvaria

Is possible to convert Play and Pause buttons into toggle buttons in order to use activeimage with them?

I don't think so but there is a workaround. PeterK. does the trick by adding status tags after the button tags.

[Calvaria]

It's still not quite clear to me. You ask me if image, hoverimage and downimage is enough for me. Yes, quite enough (and of course the active image too). So I have them and I have hoverglow.maki disabled. But hoverimage and downimage don't work the way their name suggests: they don't replace the image of the active button, merging with it instead. So I only have partial functionality of hoverimage and downimage – they work only when the button is inactive. Are you saying that to get them to work normally (that is to replace the image of the active button) I must use (modify) glow.maki?

[ariszlo]

Now that you have spent so much time with editing Quinto, I think you will like FrisbeeMonkey's Tutorial. It is a bit outdated but still the best introduction to Winamp skinning.

Most of what you will find there still works. One notable exception is that you can no longer load the containers of the Winamp 3 default skin for your own skin. Another is that the original version of the Play-to-Pause maki is broken. But you can find an updated version here.

[ariszlo]

Do you mean that you want Quinto to show the button states as they are shown in the Winamp Classic skin? Then all you need to do is comment out all the extras added by PeterK. In addition to commenting out all the glow layers and all calls of 11-hoverglow.maki, you should also comment out the status tags immediately below the Play, Pause and Stop button tags.

[ariszlo]

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

[Calvaria]

But status contains the definition of the active button, so if I comment it out I will have no active button! I need image, hoverimage, downimage and active image, with hoverimage and downimage replacing active image when hovered over or pressed down. 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.

[Calvaria]

This must be somehow connected with the special status of the <status tag and its playBitmap (what does it mean? why not just "image"? This status thing somehow resists being replaced.

[Calvaria]

Originally Posted by ariszlo

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]

Originally Posted by Calvaria

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]

Originally Posted by Calvaria

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

PHP Code:

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

PHP Code:

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


4. Copy playlistlengthchunks.maki into the scripts folder

[ariszlo]

Explaining the gettoken function

PHP Code:

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.)

PHP Code:

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


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

[ariszlo]

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:

PHP Code:

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:

PHP Code:

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]

Originally Posted by Calvaria

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]

Originally Posted by Calvaria

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.