getmusicbee.com

MusicBee & Add-Ons => Customizations => TheaterMode => Topic started by: mmakes on February 08, 2020, 03:18:56 AM

Title: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: mmakes on February 08, 2020, 03:18:56 AM
This was my first attempt at Musicbee Theater Mode skins, and I think they ended up pretty good so I figured I should share them. This skin is named Fluent, based on the design system of Windows 10, which is characterized by clear and clean layout and fonts and a sense of dimension.

Download the latest release here:
https://mmak.es/MetrologyForMB

Installation Instructions:
https://mmak.es/MetrologyforMBGuide

If you're using it, please post a screenshot of how it looks on your end! That'd be very helpful.


Clean layout.
- 3 skins are supplied: One for Theater Mode which has all the buttons, one for Now Playing view which is even cleaner and has no buttons, and one for 4K fullscreen mode.
- All icons straight outta Windows 10. Damn.
(https://i.imgur.com/XbH7R0T.png)(https://i.imgur.com/mhOfute.jpg)(https://i.imgur.com/VqUTqK7.png)

Fully functional.
- Bio, lyrics, and playing queue all supported. And spectacularly.
(https://i.imgur.com/pCgR6eG.png)
(https://i.imgur.com/9K0oi8K.jpg)

Feel free to redistribute, but all I ask is to give credit back to me wherever you post or in any edits you made. I make designs to get food in this apocalyptic world, y'know.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: psychoadept on February 08, 2020, 04:38:57 AM
Nice work, thanks for sharing!
Title: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: naresh on February 09, 2020, 06:28:23 AM
Excellent theatre mode. But the background images are too dark. How do I brighten them up so I can see them clearly?

Thanks.

Naresh.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: Freddy Barker on February 10, 2020, 12:41:15 PM
Excellent theatre mode. But the background images are too dark. How do I brighten them up so I can see them clearly?
Naresh.
You just need to change the bg="245,0,0,0" in the XML to bg="200,0,0,0" to make the artist pics brighter...
Code
<!-- Background Gallery -->
<element type="Block" xAnchor="#Gallery.Left" x="0" yAnchor="#Gallery.Top" y="0" widthDock="x:#Gallery.Right" width="0" heightDock="y:#Gallery.Bottom" height="0" bg="200,0,0,0"/>
You can experiment with different values to suite you viewing preference.
Regards: Freddy
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: mmakes on February 10, 2020, 11:44:54 PM
Thanks Freddy 😎

I noticed that it's too dark and will make it brighter in the next release too.

Keep the bug reports coming. 😁
Title: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: naresh on February 11, 2020, 12:33:41 AM
Thanks, Freddy, that works, and is much better.

Naresh.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: jtpavlock on May 24, 2020, 02:24:05 AM
I think the download link is down.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: mmakes on May 25, 2020, 10:31:22 PM
Thanks for letting me know!

The link has a typo and is now fixed: https://mmak.es/MetrologyForMB
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: jtpavlock on May 26, 2020, 01:07:29 AM
Thanks for fixing the link. I'm loving these designs, keep up the great work!
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: jtpavlock on May 27, 2020, 09:57:50 PM
Would you mind sharing the xml code that shows the lyrics/bio for the fluent layout? Thanks!

On a side note..

I'm trying to get track rating to display in the NowPlayingList, but it is only showing as a numerical value i.e. 4 stars showing as the number 4. Would you happen to know how to accomplish this? Here is the code I tried
Code
	<element type="NowPlayingList"  xAnchor="Panel.55" x="0" yAnchor="Panel.20" y="0" widthDock="Panel.Height.66" width="0" heightDock="y:Panel.80" height="0"  rowPadding="20" font="Segoe UI" style="Regular" size="12" fg="128,128,128" fg2="255,255,255" mouseOverFg="195,0,82">
<child id="Speaker" width="20"/>
<child>  </child>
<child id="DiscAndTrackNo" align="left" font="Segoe UI" style="Regular" size="12" width="80"/>
<child>  </child>
<child id="Rating" size="14"/>
<child>  </child>
<child id="Title" widthDock="Panel.Height.40" width="0" />
<child>  </child>
<child id="Duration" width="80" align="right" font="Segoe UI Semibold" size="8" style="Regular"/>
</element>
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: chainyk on June 02, 2020, 02:54:27 PM
What skin are you using ?
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: phred on June 02, 2020, 04:16:54 PM
What skin are you using ?
There is no skin. This is a Theater Mode.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: chainyk on June 03, 2020, 06:00:07 AM
yea, but i mean the main skin dark/pink
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: phred on June 03, 2020, 12:29:04 PM
yea, but i mean the main skin dark/pink
This theater mode is called Fluent just as it says in the subject.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: hiccup on June 03, 2020, 04:17:55 PM
yea, but i mean the main skin dark/pink

I think it might be the Magenta version of DarkRED:

https://getmusicbee.com/forum/index.php?topic=10884.msg66159#msg66159
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on March 18, 2023, 09:18:08 PM
Very awesome stuff! But I'm having a slight issue. It is not fitted into my screen properly, some of the buttons are partly outside the screen even if I double-click to enter fullscreen. It is only better when I go to theater panel dock and I change the startup mode to fullscreen.

(https://imagizer.imageshack.com/img923/3263/rt3Ha3.png)
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: phred on March 18, 2023, 09:34:48 PM
Are you running a screen resolution greater than 100%?
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on March 18, 2023, 10:07:26 PM
Thankyou for the speedy reply. Do you mean in musicbee, my pc or the plugin? If you mean my computer then no, but if the other two I'm not sure. I don't face the same problem with any other theater plugin though.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: phred on March 18, 2023, 11:28:09 PM
Screen resolution is set at the PC and all applications then conform to it.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on March 18, 2023, 11:37:53 PM
I do not think that is the issue because my resolution is set at the best setting as of now. I was thinking that I would be able to fix it by editing something in the xml file.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: phred on March 19, 2023, 03:52:27 AM
I do not think that is the issue because my resolution is set at the best setting as of now.
The "best" setting is not necessarily the correct setting. If you're using 125% than EVERYthing is increased by 25%. Therefore it's possible something that appears to be cut off at 125% could be shown properly at 100%. But if you don't want to tell us what your screen resolution is, and if you don't want to try it at 100% if it currently isn't, then you're on your own. I'm trying to help and you don't want my help. Good luck.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on March 19, 2023, 06:43:36 PM
I'm sorry for any misunderstanding, how do you suggest I solve the problem?

-also sorry for the late reply, my pc had some issues
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: phred on March 19, 2023, 08:20:09 PM
I'm sorry for any misunderstanding, how do you suggest I solve the problem?
I'm not saying it -is- the problem. I'm saying it -could- be the problem if your screen scaling is not at 100%. If it's not at 100% make it so and then try MB again to see if it has fixed the issue.
https://www.windowscentral.com/how-set-custom-display-scaling-setting-windows-10
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on March 19, 2023, 08:48:02 PM
(https://imagizer.imageshack.com/img922/1553/qpkZkH.png)

My scale is at 100%, any other suggestions?
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: hiccup on March 19, 2023, 09:10:22 PM
I am guessing it is a restriction/issue with the fluent theater mode itself.
It was probably designed and tested on higher resolutions than what you are using it on.
But since the creator of it hasn't been active for a couple of years since publishing it, you could try and send her a P.M. to see if she is willing and able to take a look at it.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on March 19, 2023, 09:44:11 PM
Thankyou
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: mmakes on April 01, 2023, 07:57:27 PM
Very awesome stuff! But I'm having a slight issue. It is not fitted into my screen properly, some of the buttons are partly outside the screen even if I double-click to enter fullscreen. It is only better when I go to theater panel dock and I change the startup mode to fullscreen.

Thanks for your compliments!  :)

As far as I could remember, the bug should be fixed within MusicBee by @steven a while ago.

With that said, I had made a few variations for lower or higher resolution displays in response to a few bug reports back then. You can find them on my GitHub at: https://github.com/Madelena/Metrology-for-Musicbee

https://github.com/Madelena/Metrology-for-Musicbee/blob/master/Metrology%20-%20Fluent%20(4K%20Fullscreen).xml

https://github.com/Madelena/Metrology-for-Musicbee/blob/master/Metrology%20-%20Fluent%20(Lo%20Res).xml
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on April 07, 2023, 02:28:28 PM
Thankyou so much, this genuinely fixed my problem.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: Tempre on April 22, 2023, 04:06:44 PM
How do I make the background image just a blur of the album art instead of an image pulled from the internet?
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: OnlineAppearance on April 22, 2023, 06:21:07 PM
I don't know if you can do that without messing with the code but If your not connected to the internet, it basically puts a blurred version of the album art instead of a photo from the internet.
Title: Re: FLUENT. A clean and functional Theater Mode designed to match Windows 10.
Post by: Mayibongwe on April 22, 2023, 07:03:39 PM
How do I make the background image just a blur of the album art instead of an image pulled from the internet?
As OnlineAppearance mentioned, you need to edit the Theater Mode's .xml file a bit.
Look into that file and you should see something like this:

<!-- Background Gallery -->
 <element name="#Gallery" type="Gallery" ...
 <element type="Block"...

Change it to:

<!-- Background Gallery
 <element name="#Gallery" type="Gallery" ...
 <element type="Block"...
-->