Quinto Black CT - New Winamp Modern skin

[Victhor]

By Peter's request, I'm posting this as a sneak peak of his upcoming skin:
___________________________________________________________

Hello Community!

Exactly one year ago I asked Victor to post a short article about my Modern Skin Quinto Black. He did it and I was very happy to share my work with you.

Today I am very excited to present another update of my Modern Skin Quinto but this time on my own.

Here it is: Quinto Black CT.

But before I start I would like to say THANK YOU to Victor for pointing out to all those "weird-looking" bitmap files and to martin.deimos for his very useful coding tips.

Now let me guide you through all the new, exiting features which I implemented in this version.

Without any doubt, the bitmap files - and I mean all of them - got improved. I spent months changing, altering and trying new colors, gradients and alpha values. And I must admit, I am very pleased with the end product of my efforts. Are you?

The Playlist Editor was the biggest challenge and made an enormous transformation journey from Just-Frame in Quinto, through Just-Frame-with-Buttons in Quinto Black - into fully equipped container window, which easily can replace the Main Player now.

Once Quinto Black CT is installed, you will find the Playlist Editor in its "native" look showing pure simplicity in its appearance. If you like it this way - keep it. But there is more!

You will notice a vertical divider which, once moved to the left, shows the album cover of the current playing song...

And if you resize the window, a SWITCH button will appear. And this is the point where it gets interesting...

One click on the SWITCH button and a brand new PLAYBACK area is loaded! In here you will find additional:

- progress bar
- volume bar
- playback buttons
- eject button
- mute button
- two displays
- and two LED lights which indicate whether a click was made on Main Player's REPEAT or SHUTTLE button.

And if this was not enough I added FILE INFO area which can be toggled by clicking on the FILE INFO button. (I have to make a short remark regarding the labels in this area though. Not all of them are translated (Winamp related issue) so I decided to keep all of them in English. In case you insist upon having them in your native language, open the player-groups.xml, find the translate="0" commands and change them into translate="1").

The FILE INFO area changes its looks into this once a stream is loaded:




And since I found it very handy to have this PLAYBACK area in the Playlist Editor container window I also implemented this in Video and Visualizer container. You will never ever again have to switch between Video and Main Player in order to pause a video or start a new one. Now this is handy, is it not?

Video container window:




Visualizer container window:

Color Themes have their own window which as well provides a SWITCH button. Now you have the choice: Just-Frame or Frame-with-Buttons?

While adding Color Themes to the skin it was not my intention to make Quinto looking too "candy-like". So I decided that just a minor amount of bitmaps change their color after a Color Theme was chosen:

And for all of you who are Equalizer fans I have just THE THING! Not only you can switch the Equalizer on and off, where all sliders "jump" automatically into "0 dB" position, no, you also have an additional display on top of that, which shows values of every single equalizer band and preamp!

And while listening to your favorite songs you can click on the timer on Main Player which shows then the remaining time. Please remember: You cannot toggle this option by clicking on the additional display on Playlist Editor, Video or Visualizer. And during a stream this option is disabled.

I really hope you will find the new update not only good looking on your desktop but also useful. The download link will come soon...

Stay tuned...

Thanks.

Peter

[ariszlo]

Quinto has been one of the best modern skins since its first release and it is getting even better!

[Aminifu]

For the past year, I've been using Quinto Black when I want a small UI while just listening to my music.

The updates to the Playlist Editor and Equalizer are amazing. Sorry Victhor, but if Peter is able to work his magic on the Media Library as well, I will have to think hard about selecting a new favorite skin.

[Victhor]

Originally Posted by Aminifu

For the past year, I've been using Quinto Black when I want a small UI while just listening to my music.

The updates to the Playlist Editor and Equalizer are amazing. Sorry Victhor, but if Peter is able to work his magic on the Media Library as well, I will have to think hard about selecting a new favorite skin.

And what magic is that? Switch skin without worry, but you'll come back soon, I also have a trick under my sleeve..

[Aminifu]

Originally Posted by Victhor

And what magic is that?

The magic of presenting the core Winamp features in new and useful ways, similar to what Komodo X Touchscreen does. Komodo also adds useful stuff from the cPro code, so it still has the edge imo.

Originally Posted by Victhor

Switch skin without worry, but you'll come back soon, I also have a trick under my sleeve..

Promises, promises. Seeing is believing.

[Victhor]

Originally Posted by Aminifu

The magic of presenting the core Winamp features in new and useful ways, similar to what Komodo X Touchscreen does. Komodo also adds useful stuff from the cPro code, so it still has the edge imo.

Peter is actually stuck there (among one other bug), so I guess I'll have that edge for a little longer.. heh

[jetaro]

This is one of the best skin I used it .. excellent and comfortable.

[PeterK.]

Hello again,

I finally managed to get rid of a nasty bug (Runtime Error messages) and implemented a playback area with an additional display in the Media Library container window:



Please remember: Clicking on the PLAY button in the Media Library window plays the item from the Playlist Editor. In case you would like to play a song from the playlist in the Media Library just double click the item.

And another small preview of the MainPlayer:



Stay tuned ...

[ariszlo]

Amazing!

[PeterK.]

A short update:

Meanwhile both displays (on MainPlayer and MediaLibrary) are synchronized. Hence, you will see all notifications on both container windows. And since every click on a button or slider (on MainPlayer or Equalizer) will send a message to both displays, you will gain full control over all your settings.

[PeterK.]

Hello again ...

Today I would like to introduce a new feature which I spontaneously implemented in the container windows. From now on every container window has three modes:

NoFrame-Mode
Frame-Mode
Frame w/ Playback-Mode



Since all three modes are linked to each other (and Playback Area "demands" more than 280 pixel in the width), you have to resize the window first in order to switch between the modes. As soon as the SwitchButton (on the right side) is not grayed out anymore, the feature is activated and you can choose one.

This extension will give you all three possible "surroundings" a container window content can have. I really hope you will find it useful.

And while I am at it, I would like to ask you some short questions:

1) Should we leave one button design/looks for all three modes or should I make three different ones? Currently the SwitchButton has two horizontal lines.

2) Right now the Playlist Editor features not only the Playlist content but also the AlbumCover. (which you can make visible by grabbing and dragging the vertical divider from right to the left side).



Should we keep it that way or remove the AlbumCover and leave the Playlist "alone"?


Please bear in mind that the border of the NoFrame-Mode is just 1 pixel wide/heigh. Hence it might be a little bit tricky sometimes to "get" the "double-headed-resize-arrow". Be patient ...

To be continued ...

[Aminifu]

1. The one button design for each mode looks fine to me.

2. Keep the AlbumCover panel in the Playlist Editor. Can you add it to the Media Library panel?

I very much want to try this skin. Can you provide an ETA for it's release?

[PeterK.]

Hello Aminifu,

Thank you for your reply.

Being honest I cannot understand your request for having an additional AlbumCover panel in the MediaLibrary since ML Container already has that functionality.
Is this not enough?



(By the way: this would be the NoFrameLook on MediaLibrary window).

If you convience me that additional AlbumCover panel would bring some adventages I would agree to put it on my To-Do-List.
Deal?

The ETLD (Estimated Time of Landing on your Desktop ) should be in October. Normally my release statements are very unreliable since I constantly come up with new ideas/features/options. And do not forget the fun I have had! A release means End of Fun!

Here is one of my struggles I had in the past few days. I just could not decide which color the side panels should have: brown, black or even dark red. So I added a SP button to the Equalizer drawer and now we can switch between the colors:



Once again, I could imagine that the project could see the final compilation and upload in October.

Thanks ...

[ariszlo]

Originally Posted by PeterK.

1) Should we leave one button design/looks for all three modes [...]?

Yes, that is fine.

2) Right now the Playlist Editor features not only the Playlist content but also the AlbumCover. [...] Should we keep it that way [...]?

Absolutely. It is one of the distinctive features of your Quinto skins.

Please bear in mind that the border of the NoFrame-Mode is just 1 pixel wide/heigh. Hence it might be a little bit tricky sometimes to "get" the "double-headed-resize-arrow".

I wonder how you are going to do that. Will it be an invisible layer partially covering the list area that will become visible when you hover the mouse over it and grab it?

[Aminifu]

Originally Posted by PeterK.

...
Being honest I cannot understand your request for having an additional AlbumCover panel in the MediaLibrary since ML Container already has that functionality.
Is this not enough?

...

Indeed it is. My request was triggered by the screenshot in post #8 above. I didn't realize that all of the standard Media Library displays would still be available, in addition to the playback area you have added.

Release this update when you're ready. It has been said that good things come to those who wait. However, a release doesn't have to mean the end of your development fun. A project like this is never really finished, imo. New ideas/features/options can always be added later.

BTW, the side panel colors option is a great idea!

[PeterK.]

Originally Posted by ariszlo

I wonder how you are going to do that. Will it be an invisible layer partially covering the list area that will become visible when you hover the mouse over it and grab it?

Hello Ariszló,

It will be a pleasure to answer your question.

Let's take the Playlist Editor for this demonstration.

Generally speaking every container window has three layers. Each one of them is placed within a <groupdef>. As you can see on that screenshot, we have ...



1) standard background layer
2) frame layer (in this case - NoFrame)
3) component layer (here Playlist plus AlbumCover)

In order to be able to switch between three frame layer groups (NoFrame -> Frame -> PlaybackFrame) you need a script, in which you specify which group should be hidden/shown AND (very important!) which size the component layer should have.

Hence you will need a different size while showing the PlaybackFrame and you will need another one, when NoFrame group is active. The trick here is not to make a 1-pixel-bitmap-file (which would be our frame) but to manage to align both layers (frame and component) so just 1 pixel is left on the left, bottom and right side.

Is this clear?

You also cannot get rid completely of the frame layer (=cover it to 100% with component layer) because you would lose the ability of resizing your container window. You still need at least 1 pixel so the standard mouse pointer can change into the "double-headed-resize-arrow" while hovering over the bottom right corner.

And this is where it could get a little bit tricky, as I already mentioned.

@Aminifu

Is it O.K. like this?

[Aminifu]

Originally Posted by PeterK.

...

Is it O.K. like this?

That looks fine!

[PeterK.]

A small feature: if you move the Balance Slider on the Equalizer drawer a red bar appears in order to remind you that the Slider is not in the center.

[ariszlo]

Nice and useful.

[PeterK.]

A big THANK YOU goes to Aminifu and Ariszló for their active participation in this thread ...

I do appreciate it guys!

[PeterK.]

Many weeks ago Victor has a wonderful idea. He asked me to display notifications like "Crossfade On/Off" on the MainPlayer's display. I very welcomed that suggestion and extended this to ALL possible notes like "CLOSE ALBUM DRAWER" or "REPEAT: ALL" etc.

Now I realized that there is an "oddity" regarding this workflow and Color Themes Container.
Normally, Winamp adds a new created container to the Context Menu, which is understandable. The drawback of this option is that the CT Button on the Equalizer Drawer AND Color Themes Container ARE NOT SYNCHRONIZED as it is the case between PL-, ML-windows and "their" buttons on the MainPlayer.

This has an ugly effect that wrong notifications are shown when I ...

- open CT window by a click on the CT-Button (="OPEN COLOR THEMES")
- close CT window using the X-Button
- open it again using the CT-Button (="CLOSE COLOR THEMES" which is completely wrong here)

What can be done here?

1) I very doubt it, that I could "hide" the COLOR THEMES command in the Context Menu and "leave" the user just with the CT Button. Is it possible?
2) I am not aware of any technique how to set a PrivateInteger after opening a Container window using the Context Menu. Do anybody of you know the trick?
3) Get rid of the CT Button on the Equalizer Drawer. Unorthodox but would avoid the wrong notifications on the display.

What to do ...?

[PeterK.]

Do any of you know what are the wasabi id's for the scrollbar background and this spot marked pink on the screenshot?



(wasabi.scrollbar.background does not show any effect on my Media Library).

Thanks.

[PeterK.]

Yet another small feature for all fans of "clean design".



If you click on a container, what will set focus on that particular window, all caption buttons on all other windows will "disappear". In order to get them back, all you have to do is, move your mouse over the window and click it (set focus).

[ariszlo]

Originally Posted by PeterK.

Do any of you know what are the wasabi id's for the scrollbar background and this spot marked pink on the screenshot?

The color of the pink spot is the same as the background color of the media library around the list view area:

PHP Code:

<color id="wasabi.window.background" value="255,0,255"/> 


Originally Posted by PeterK.

If you click on a container, what will set focus on that particular window, all caption buttons on all other windows will "disappear". In order to get them back, all you have to do is, move your mouse over the window and click it (set focus).

[PeterK.]

The color of the pink spot is the same as the background color of the media library around the list view area

Yes, I know and this is also the reason why I am asking: I would like to have it in the same color as the scrollbar background (which in my case is a bitmap file, since wasabi.scrollbar.background does not work)

[ariszlo]

Then I guess what remains is putting an extra layer with a small square on top of the layer with the scrollbars.

[PeterK.]

Nah, I will leave it as it is.

My question was initially triggered by this picture which I found on the forum:



It led me into thinking I could change the color of this "dead area" spot using just a wasabi line. Obviously it was deleted during the development and replaced by the wasabi.window.background id, which, as seen on your screenshot, now extends on more area than it used to. This is what wasabi.window.background used to cover:



Thank you for your effort.

[PeterK.]

This is probably my last note before the upcoming test and final compilation.

I would like to mention that for the sake of a "clean design" I moved the vertical scrollbar with its buttons on the Color Themes container window (while running the NoFrame option) so far to the right that you will not see it. "Hiding" the scrollbar does not affect the functionality of the list though. We still can move the content of the list up and down using the scrollwheel on the mouse.

In case some of you cannot help but notice that the background bar is too short, I can assure you that this is not a skin-related issue. The width of that background bar seems to be constant regardless of the total width of the entire ColorList.



If you know how to make this background bar wider, please speak now ...

[PeterK.]

This is a solution/answer to my own question, which I asked in my previous post.

The issue was the length of the background bar in the ColorThemes container window.

Creating a new ColorThemes container will provide not only the actual list of color themes which are stored in a .xml-file but also show a tab divided in two parts. On the left part, it says Theme and this part is clickable: by doing so the sort order is changed from A to Z and vice versa. The right part of that tab is not labeled and seems to not have any function. (You will not see that tab in my skin since I disabled it.)

The crucial part is that the divider between those two has a constant width and cannot be grabbed or moved in any direction. Hence the (exactly same) constant width of the colored background bar.



"Quod erat demonstrandum" = which is what had to be shown

[PeterK.]

A short note:

I have added a new feature to Quinto's upcoming update (v1.1) which will allow you to place the notifier all over your display/monitor:




I also made some subtle changes regarding the minimum size of container windows in order to avoid truncated text while running on high resolution displays.

[ariszlo]

Also available at DeviantArt.

When you finish the upcoming update, will you please publish it at WinCustomize, too? You will get more downloads there with no distractive anime girl skins.

To get a skin accepted at WinCustomize, you will have to add a permission.txt, identifying yourself as the copyright holder and allowing users whatever you want to allow them.

[PeterK.]

In the current version of my skin the text color of the song being played and the background of the inactive (selected) title change their values accordingly to the set color theme.

But in many cases it is pretty hart to see the difference between the song being played and the rest of the playlist.

In order to make things more "readable" I am going to add a small change to that. Regardlessly of the color theme you set the color of the song being played and the background of the inactive title will remain the same:



The same change affects also the text lines within the Media Library.

I will implement those modifications in the upcoming small update.

[ariszlo]

Originally Posted by PeterK.

But in many cases it is pretty hart to see the difference between the song being played and the rest of the playlist.

Yes, pink contrasts more with light grey thant light grey with even lighter grey.

[PeterK.]

Originally Posted by ariszlo

Yes, pink contrasts more with light grey thant light grey with even lighter grey.

Thanks for your feedback Ariszló.

I am aware of the fact that it will be hard to satisfy every single user, but I think the chosen color constellation (red text + black background) should make the text indeed more readable.

[ariszlo]

Yes, red is a good choice even for people with achromatopsia: in greyscale it is a darker shade of grey.

Actually, this is how I started skinning: fixing the colors of Fusion AMPdeck.

[Aminifu]

Hi PeterK.,

Any idea on when you will be releasing the update (discussed in the posts above) for Quinto Black CT?

[PeterK.]

Originally Posted by Aminifu

Hi PeterK.,

Any idea on when you will be releasing the update (discussed in the posts above) for Quinto Black CT?

I have been waiting for the download link.

[Aminifu]

A download link from whom and for what?

[PeterK.]

Originally Posted by Aminifu

A download link from whom and for what?

A download link from www.winaero.com for the skin file.

[PeterK.]

Regarding the multiple check status in Notifier/Songticker context menu:

In order to avoid copying and pasting stuff from Bento hoping it would work in my skin I decided to get professional help because my wish was to change as less as possible within the files and within the folder order.

And since the understanding of the "mechanism" within my skin was paramount from the very beginning (making Quinto back in 2010) I asked martin.deimos if it was possible to get rid of the bug without writing additional scripts and/or making my skin unnecessarily too big. All I got from him as a respond was just one sentence: "add the file which contains the line #define MAIN_ATTRIBS_MGR".

Well, it was not that hard to find that loadattribs.m file, which I instantly altered according to Quinto's "needs". The problem was that the addition and compilation of that file did not show expected results. It took me the entire weekend to find out what was missing: the call line for that script! One search run through Bento's files and there I had it. The call line was added into the skin.xml file and now we have a perfectly working context menu while running Quinto skin.

This also means we have another update. (v1.2)

I certainly will run some tests an keep it on my desktop for the next couple of days. I also will contact Winaero to discuss the matter of a new download link and/or entry in his blog. So please be patient and stay tuned.