getmusicbee.com

MusicBee & Add-Ons => Customizations => Skins => Topic started by: Clarence on February 14, 2020, 09:50:42 PM

Title: Beat Bar v.2
Post by: Clarence on February 14, 2020, 09:50:42 PM: Two base themes

Four colour accents

Version 2 implements small cosmetic changes as detailed below.
All download links now point to version 2.

Beat Bar:
(http://i.imgur.com/wljwNCX.png) (https://imgur.com/wljwNCX) (http://i.imgur.com/1kRaUgY.png) (https://imgur.com/1kRaUgY)
(http://i.imgur.com/zJhXBdch.png) (https://imgur.com/zJhXBdc)
(http://i.imgur.com/KhJ7MQHh.png) (https://imgur.com/KhJ7MQH)

Downloads:

~~Version 1~~
~~[Updated: 15 Feb 2020] Correction to text alignment when using very large fonts in track display~~
~~[Updated: 16 Feb 2020] Correction to text colouring to aid visibility for search box in white themed skins~~
~~[Updated: 07 Mar 2020] Correction to text colouring to aid visibility for 'Find' button in dark themed skins~~

Version 2
[Released: 19 April 2020]
Primary changes - Button recesses now moved to form part of the button matrix and removed from the background layer. The effect of which is that when a button is not displayed it no longer leaves an empty recess on the main player panel (e.g. 'LastFM Love' button).
Secondary changes - Re-positioning of the progress bar and re-positioning of the player rating stars to allow slightly more space to accommodate larger text fonts.

[Updated: 22 April 2020] To eliminate potential 'clash' of rating stars and track position (timer) on high resolution screens over 1920x1080 pixels.

BLACK:
BeatBar-Black with Blue (https://www.mediafire.com/file/3u0hg1ggn5k3bjw/BeatBar-Black_Blue.xmlc/file)
BeatBar-Black with Red (https://www.mediafire.com/file/rl492dsgnsssm10/BeatBar-Black_Red.xmlc/file)
BeatBar-Black with Purple (https://www.mediafire.com/file/h3yy9edrdcr5j6m/BeatBar-Black_Purple.xmlc/file)
BeatBar-Black with Orange (https://www.mediafire.com/file/fnqkiqontm7vb19/BeatBar-Black_Orange.xmlc/file)

WHITE:
BeatBar-White with Blue (https://www.mediafire.com/file/xkezfofnlwd59ng/BeatBar-White_Blue.xmlc/file)
BeatBar-White with Red (https://www.mediafire.com/file/cyilewjqy4wye8t/BeatBar-White_Red.xmlc/file)
BeatBar-White with Purple (https://www.mediafire.com/file/bwqg73sq16yl29v/BeatBar-White_Purple.xmlc/file)
BeatBar-White with Orange (https://www.mediafire.com/file/dfjtzq6fg2djtu3/BeatBar-White_Orange.xmlc/file)

I hope you enjoy the skins.

Skins in the Beat Bar Series:
Beat Bar Original (Black/White) (https://getmusicbee.com/forum/index.php?topic=30841.0)
Beat Bar Metallic (https://getmusicbee.com/forum/index.php?topic=31284.0)
Beat Bar Colours (https://getmusicbee.com/forum/index.php?topic=31283.0)

[PLEASE NOTE:] If you have a higher resolution screen (1920x1080px or above) and are using Windows 10 you may experience some distortion of the high density graphics when using these skins. Please refer to this post by fred for a quick solution to overcome this problem. Fix: Distorted graphics on Windows 10 (https://getmusicbee.com/forum/index.php?topic=31199.0)
Title: Re: Beat Bar
Post by: Coogan on February 15, 2020, 03:48:32 AM: Really nice job on these skins. I like all of your skins, but these really look nice when I have the library open.
Which is the way I always have my player.

Thanks for the hard work.
Title: Re: Beat Bar
Post by: Clarence on February 15, 2020, 11:25:14 AM: Quote from: Coogan on February 15, 2020, 03:48:32 AM
Really nice job on these skins. I like all of your skins, but these really look nice when I have the library open.
Which is the way I always have my player.

Glad you like them Coogan.

Quote from: Coogan on February 15, 2020, 03:48:32 AM
Thanks for the hard work.

You're very welcome, and the odd nice comment like yours makes the effort worthwhile.

By the way...
I checked whilst designing this, and whilst this one won't handle the Segoe UI-28pt that you like using, it should be OK pushed up to 22pt if you don't have multi-line text active. 8)
Title: Re: Beat Bar
Post by: Coogan on February 15, 2020, 03:45:52 PM: Hmmm, take a look at this image. See how a long title that scrolls, enters the image from the right taking the timer with it.
When the texts exits, it does so before the timer on the left.
Is there anyway to have the text enter the window from the left of the timer on the right?

(https://i.imgur.com/FLqwSC0.png)
Title: Re: Beat Bar
Post by: Clarence on February 15, 2020, 06:46:00 PM: Thanks for the spot Coogan. I hadn't noticed that during my testing. There again, I used a somewhat tame font compared to the Gazzarelli one you're using now ::)

Original downloads updated and a note added to the first post in this thread.
Title: Re: Beat Bar
Post by: Coogan on February 15, 2020, 06:57:56 PM: Quote from: Clarence on February 15, 2020, 06:46:00 PM
Thanks for the spot Coogan. I hadn't noticed that during my testing. There again, I used a somewhat tame font compared to the Gazzarelli one you're using now ::)

Original downloads updated and a note added to the first post in this thread.

I tested several fonts & sizes, before posting this time. :)

*Edit:
The fix works perfect. Looks Great!
Thanks again.
Title: Re: Beat Bar
Post by: Clarence on February 15, 2020, 08:13:46 PM: Quote from: Coogan on February 15, 2020, 06:57:56 PM
The fix works perfect. Looks Great!
Thanks again.

Glad to be of service, have a good weekend.
Title: Re: Beat Bar
Post by: Sand Raider on February 16, 2020, 09:17:55 AM: Hey Clarence, there's an issue on the white versions where in the search bar the text is invisible due to also being set to white. Black themes are all good in this respect.

Oh and while I'm here... your skin portfolio for this app is simply amazing. The best I've seen. Spoilt for choice atm as it seems like every new one you release surpasses the old. Thank you so much for them all :D
Title: Re: Beat Bar
Post by: Clarence on February 16, 2020, 10:12:27 AM: Quote from: Sand Raider on February 16, 2020, 09:17:55 AM
Hey Clarence, there's an issue on the white versions where in the search bar the text is invisible...

Damn!, and well spotted...especially as it was invisible ;) It's corrected now and the download files updated and note posted on initial post on this thread.

Quote from: Sand Raider on February 16, 2020, 09:17:55 AM
Oh and while I'm here... your skin portfolio for this app is simply amazing. The best I've seen. Spoilt for choice atm as it seems like every new one you release surpasses the old. Thank you so much for them all :D

Thank you. I'm not so sure about that but it's very kind of you to say so. Let's hope I continue to live up to your expectations.

Enjoy the rest of your weekend.
Title: Re: Beat Bar
Post by: psychoadept on February 16, 2020, 04:40:48 PM: I agree that your skins are amazing. Makes me kinda sad I don't use the player bar. :D
Title: Re: Beat Bar
Post by: Clarence on February 16, 2020, 05:23:04 PM: Thanks for the endorsement, psychoadept. Appreciated 8)
Title: Re: Beat Bar
Post by: Sand Raider on February 18, 2020, 01:02:09 PM: Quote from: Clarence on February 16, 2020, 10:12:27 AM
Quote from: Sand Raider on February 16, 2020, 09:17:55 AM
Hey Clarence, there's an issue on the white versions where in the search bar the text is invisible...

Damn!, and well spotted...especially as it was invisible ;) It's corrected now and the download files updated and note posted on initial post on this thread.

Quote from: Sand Raider on February 16, 2020, 09:17:55 AM
Oh and while I'm here... your skin portfolio for this app is simply amazing. The best I've seen. Spoilt for choice atm as it seems like every new one you release surpasses the old. Thank you so much for them all :D

Thank you. I'm not so sure about that but it's very kind of you to say so. Let's hope I continue to live up to your expectations.

Enjoy the rest of your weekend.

You're seriously welcome and thank you again. Oh and you too ;)
Title: Re: Beat Bar
Post by: Nhiet on February 19, 2020, 02:45:54 PM: Hello Clarence.

Thank you for your hard work. Your skins look so beautiful, I downloaded one immediately when I saw them. However I ran into a little trouble. After downloading "Beat-bar-Black" and installing through the "Add skin" feature of MusicBee, I encounter this display error. I'm using latest MusicBee, latest windows 10, 27" WQHD 1440p monitor. What do you think could be the problem?

Thanks in advance!

(https://i.imgur.com/aZO0q4M.png)
Title: Re: Beat Bar
Post by: Clarence on February 19, 2020, 03:21:02 PM: Hey Nhiet

To be honest with you, I have absolutely no idea. What I can see is that the player image has been distorted both horizontally and vertically which means that button positions no longer align with the recesses. These are placed by pixel location and clearly they are where I would expect them to be but the background image is over-stretched.

I tested the skin on various screen resolutions and did not find any problems. I personally use them on a 28inch monitor and they perform faultlessly. There have been literally thousands of downloads of my skins and I've had nobody else report this problem.

Quite why the main library panels have not been populated with data is also unusual.

I notice that you have the image in full screen display, does anything change to correct the image if you alter the window size?

I'm hoping that one of the more 'techy' people on here may have a better idea than me and if anyone reading this knows what's happened, both Nhiet and I would be grateful of your input.

In the meantime...let's check some basics....

-If you install another skin and select that, does it have the same problem? (try installing it by simply copying the skins .xmlc file to your skin directory and select if from the skin list (Menu/View/Skins...) if it doesn't have a problem, try copying the BeatBar skin's .xmlc file in the same way and see if that too is fine.

-Have you tried using a different monitor such as laptop screen or hdmi to TV screen, etc. If that works it would point very much at being WQHD monitor related.
Title: Re: Beat Bar
Post by: diego on February 22, 2020, 01:47:29 PM: Pretty sure this is related to display scaling, anything above 100% will cause this.

@Clarence try to set fixedHeight to false in skin.xml
Title: Re: Beat Bar
Post by: Clarence on February 22, 2020, 06:03:13 PM: @diego

Quote from: diego on February 22, 2020, 01:47:29 PM
Pretty sure this is related to display scaling, anything above 100% will cause this.

@Clarence try to set fixedHeight to false in skin.xml

I've looked into this a bit more myself over the last couple of days and you're quite right, it appears to be a scaling problem. However, setting fixedHeight="false" only serves to cause the problem to occur on non-high dpi screens. I think, because of the background graphics used and their placement method, I can find no way of having one skin that works universally and therefore that would mean having two versions. That's not going to happen if for no other reason than my testing would be severley limited and dependant on monitor access.

As the problem has only been reported once and the user in question hasn't come back with any feedback or update, I shall continue with the status quo (which, incidentally reminds me that I haven't listened to their stuff in a while).

Thanks for the input though, diego. Much appreciated.
Title: Re: Beat Bar
Post by: fred on February 23, 2020, 10:44:47 AM: If Windows Display scaling is set to 125% I get the same higgledy-piggedly Player bar as Nhiet. If I change the scaling to 100% the player bar is fine. My monitor is a Dell 25" at resolution 2560x1440. Scaling at 100% makes screen text too miniscule for my 73 year old eyes so I'll set scaling back to 125% and just live with the slightly out of place buttons.

I think your skins are great - I especially like the Classique ones.
Title: Re: Beat Bar
Post by: Clarence on February 23, 2020, 11:45:01 AM: @fred
Quote from: fred on February 23, 2020, 10:44:47 AM
If Windows Display scaling is set to 125% I get the same higgledy-piggedly Player bar as Nhiet. If I change the scaling to 100% the player bar is fine.

Thanks for the info fred and it goes to confirm diego's and my own conclusions above.

Quote from: fred on February 23, 2020, 10:44:47 AM
... for my 73 year old eyes.

A problem I know well given that we are not of vastly dissimilar age. I was beginning to think that I might be the only member of the 'Senior Club' here.
Despite the oxymoron that this forum board insists on using (http://i.imgur.com/JlFDvkQ.png) (https://imgur.com/JlFDvkQ)...if only, eh?

Quote from: fred on February 23, 2020, 10:44:47 AM
I think your skins are great - I especially like the Classique ones.

Thank you...hopefully those ones evoke an era that feels so familiar to us.
Title: Re: Beat Bar
Post by: Clarence on March 07, 2020, 04:01:11 PM: Download files updated : Correction to text colouring to aid visibility for 'Find' button in dark themed skins
Title: Re: Beat Bar
Post by: Clarence on April 12, 2020, 06:27:10 PM: As reported above, some users of higher resolution screens (1920x1080 pixels or above) can experience distortion of the high density graphics when viewing this skin with Windows 10 systems and scaling of 125% or higher.

Having re-checked the skin files and ensuring that it wasn't something I'd omitted (I have never professed to be perfect, often...), fred said he was sure he could find a solution and I said 'go on then'. He has worked on this with sample and example skins passing between us and I now have to give huge thanks to fred who wouldn't let it rest and has posted his quick fix solution here: Fix: Distorted graphics on Windows 10 (https://getmusicbee.com/forum/index.php?topic=31199.0)

If you are experiencing similar distortion on this or any of my high density graphic displays, please follows fred's post to overcome the problem.
Title: Re: Beat Bar v.2
Post by: Clarence on April 19, 2020, 01:04:14 PM: Version 2 now released:

Nothing earth shattering, but an opportunity to apply a few cosmetic tweaks:

Primary changes - Button recesses now moved to form part of the button matrix and removed from the background layer. The effect of which is that when a button is not displayed it no longer leaves an empty recess on the main player panel (e.g. 'LastFM Love' button).

Secondary changes - Re-positioning of the progress bar and re-positioning of the player rating stars to allow slightly more space to accommodate larger text fonts.

The splash screen now carries the 'v2' notation to help identify whether update is required.

The initial post on this thread has been updated and all download links now point at Version 2.

EDIT: Two new skins in the Beat Bar series now added.
Beat Bar Metallic (https://getmusicbee.com/forum/index.php?topic=31284.0)
Beat Bar Colours (https://getmusicbee.com/forum/index.php?topic=31283.0)
Title: Re: Beat Bar v.2
Post by: Jorus_E on April 21, 2020, 03:25:37 PM: A little snag.

https://i.imgur.com/oiqHxNb.png
Title: Re: Beat Bar v.2
Post by: Clarence on April 21, 2020, 04:44:25 PM: Quote from: Jorus_E on April 21, 2020, 03:25:37 PM
A little snag.

https://i.imgur.com/oiqHxNb.png

I can't reproduce the problem here...
Your image:
(https://i.imgur.com/CbLX0Gv.png)

My Image:
(https://i.imgur.com/c20XwHa.png)

The only visible difference appears to be that the font size is slightly larger, despite the 'fontSize' parameter being limited in the skin file.

I have made a small adjustment and I'd ask you to try this modified version: ~~BeatBar-Black_Red_modified~~

Please let me know if that's any better and if not, please let me know:-
Font name and size you are using for player text display.
what your monitor resolution is and, if you have scaling set, what percentage.
If possible, a full screenshot.
Title: Re: Beat Bar v.2
Post by: Jorus_E on April 21, 2020, 06:05:03 PM: Top skins by the way.

Here it is.

Nothing is changed with the modified xmlc. https://imgur.com/ox51neA

The resolution: https://imgur.com/tvjLrB7

The scaling: https://imgur.com/7kxQqUs

Font setting: https://imgur.com/DoUioo0

Total view: https://imgur.com/OHR5Ood
Title: Re: Beat Bar v.2
Post by: fred on April 21, 2020, 06:12:24 PM: Have you looked at reply#19 - have you tried what is suggested there?
Title: Re: Beat Bar v.2
Post by: Clarence on April 21, 2020, 09:44:32 PM: Quote from: Jorus_E on April 21, 2020, 06:05:03 PM
Top skins by the way.

...Nothing is changed with the modified xmlc. ...

Jorus_E ...Here's a further mod of the file: ~~BeatBar-Black_Red_mod2~~

It's something to do with the higher resolution screen size as it's not causing any problems on screens with a resolution of 1920x1080 and below.

A friend has just tested it for me on the same resolution monitor that you have and has confirmed that it does occur regardless of scaling, but I'm bug**rd if I know why at the moment.

For the moment I hope that mod2 will provide a workaround. Let me know how you get on please.
Title: Re: Beat Bar v.2
Post by: Jorus_E on April 22, 2020, 05:25:21 PM: Clarence,

top.

See: https://imgur.com/NPxdNWt

And now, over to an extensive use of the Beat Bar skin.

Thank you.
Title: Re: Beat Bar v.2
Post by: Clarence on April 22, 2020, 06:24:41 PM: Jorus_E

Your corrected Image: (https://i.imgur.com/V3waNqG.png)

My corrected Image: (https://i.imgur.com/Fen5Rvk.png)
(at 2560x1440)

If you have anything longer than this then you need to get out more :'(

Glad the 'workaround' was successful.

So far, research is indicating that the problem could be caused by the change in proximity of components dependent on the overall size of the screen used in a monitor. Two monitors may both use 2560x1440 resolution as a standard measure, but if one is in a 25 inch monitor and one is in a 23 inch monitor, the PPI value (Pixels Per Inch) is quite different.

Example: (Using the Pythagorean Theorem) a 1920x1080 resolution in a 15.6inch (typical laptop) display has 141.21 pixels per linear inch or 19,940.83 in a square inch of display. The same resolution in 14 inch display 157.35 pixels per linear inch or 24,739.18 per square inch. A noticeable difference.

This may be a red herring but I don't like not knowing why something went wrong, so I'd ask a favour , could you please let me know the size of your monitor. Just for my own peace of mind.

In the meantime, enjoy the skin.
Title: Re: Beat Bar v.2
Post by: Clarence on April 22, 2020, 10:25:46 PM: Following a report of a potential clash of rating stars and track position (timer) on high resolution screens, an update has been applied to eliminate the risk of this.

This conflict only appears to affect higher resolution screens over 1920x1080 pixels.

The initial post in this thread has been updated and all download links point to amended files.
Title: Re: Beat Bar v.2
Post by: Jorus_E on April 23, 2020, 09:00:40 AM: Clarence,

The monitor in use: Acer K272HUL

27" - 2560x1440 (Quad HD) - 16:9 - 109dpi - dotpitch 0.233mm

Thats all.

Greetings
Title: Re: Beat Bar v.2
Post by: Clarence on April 23, 2020, 12:08:44 PM: Jorus_E

Thanks for the info.
Title: Re: Beat Bar
Post by: Steven on October 25, 2020, 06:27:54 AM: Quote from: Nhiet on February 19, 2020, 02:45:54 PM
Thank you for your hard work. Your skins look so beautiful, I downloaded one immediately when I saw them. However I ran into a little trouble. After downloading "Beat-bar-Black" and installing through the "Add skin" feature of MusicBee, I encounter this display error. I'm using latest MusicBee, latest windows 10, 27" WQHD 1440p monitor. What do you think could be the problem?
Hi, in case you still browse the forum this should be fixed in the latest v3.4 patch version
https://getmusicbee.com/patches/MusicBee34_Patched.zip
unzip and replace the existing musicbee application files