Topic: Skinning The Playing Now popup (Read 4950 times)

EnglishTiger · « **Reply #50 on:** September 11, 2024, 06:21:02 am »

There seems to be some discrepancy between how MC33.0.20 is interpreting/using the attached code under Win11 and Mac Sequoia.

Code: [Select]

<MJPS version="1.0">
<SKIN Name="ET Control" Author="EnglishTiger" />

<POPUP>
	<Settings Width="600" Height="200" BackImage="" BackColor="" Border="yes" />
	<ContentItem Type="image" Name="Thumbnail" X="10" Y="10" Width="180" Height="180" Source="[Large]" Tooltip="[Name] by [Artist] from [Album]" />
	<ContentItem Type="text" HAlign="center" FontSize="18" Name="Name" X="200" Y="10" Width="390" Height="20" Text="[Name]" FontStyle="bold" Tooltip="[Name]" />
  <ContentItem Type="text" HAlign="center" FontSize="18" Name="Artist" X="200" Y="30" Width="390" Height="20" Text="[Artist]" Tooltip="[Artist]" />
	<ContentItem Type="rating" Name="Rating" X="350" Y="50" Width="100" Height="20"/>
  <ContentItem Type="text" HAlign="center" FontSize="18" Name="Album" X="200" Y="70" Width="390" Height="20" Text="[Album]" Tooltip="[Album]" />
	<ContentItem Type="text" HAlign="center" FontSize="18" Name="Genre" X="200" Y="90" Width="390" Height="20" Text="[Genre]" Tooltip="[Genre]" />
	<ContentItem Type="time" HAlign="center" FontSize="18" Name="ElapsedTime" X="200" Y="110" Width="390" Height="20" Text="{e} // {t}"/>
  <ContentItem Type="text" HAlign="center" FontSize="18" Name="Details" X="200" Y="130" Width="390" Height="20" Text="File Type: [File Type] - Bit Depth//Sample Rate: [Bit Depth]//[Sample Rate]" />  
  <ContentItem Type="image" Name="Previous" X="302" Y="160" Width="48" Height="32" Source="{PlayerBar,PreviousButton,0}||{PlayerBar,PreviousButton,1}||{PlayerBar,PreviousButton,2}" Tooltip="Previous: [Name] by [Artist] from [Album]" Command="10004,4" TrackOffset="-1"/>
  <ContentItem Type="image" Name="Play" X="350" Y="160" Width="48" Height="32" Source="{PlayerBar,PlayButton,0}||{PlayerBar,PlayButton,1}||{PlayerBar,PlayButton,2}" Tooltip="Play//Pause [Name] by [Artist] from [Album]" Command="10000"/>
  <ContentItem Type="image" Name="Stop" X="398" Y="160" Width="48" Height="32" Source="{PlayerBar,StopButton,0}||{PlayerBar,StopButton,1}||{PlayerBar,StopButton,2}" Tooltip="Stop" Command="10002"/>
  <ContentItem Type="image" Name="Next" X="446" Y="160" Width="48" Height="32" Source="{PlayerBar,NextButton,0}||{PlayerBar,NextButton,1}||{PlayerBar,NextButton,2}" Tooltip="Next: [Name] by [Artist] from [Album]" Command="10003,0" TrackOffset="1" />
</POPUP>

</MJPS>

The attached images show that on my Win11 PC only the [Name] line is using a Bold Fontface but on the Mac Mini all the lines seem to be using either a Bold Fontface or a different font size.

P.S. Semi-Colon delimited lists are being displayed without the space between the semi-colon ; and the next entry in the list

cncb · « **Reply #51 on:** September 11, 2024, 08:17:48 am »

The other text does not look bold to me on the Mac, just bigger. Try a smaller font size on the Mac.

EnglishTiger · « **Reply #52 on:** September 18, 2024, 02:44:23 am »

There is a problem when moving a PlayingNow popup that has a transparent background on the mac:-

When you try to move a transparent popup on the Win PC the background goes solid but on the Mac it remains transparent and it's almost like the darn thing is creating a screenie of the area of the MC Window it's sitting on. I had the popup situated over a TI in the display panel/window that was displaying lyrics and when I moved it parts of the "Text/Lyrics" visible behind the Popup got moved as well and remained visible behind the popup until a track change.

EnglishTiger · « **Reply #53 on:** September 18, 2024, 02:59:51 am »

There's also a problem if the popup is manually induced, using ctrl+I, just before the end of a track

As the attached image shows the Artwork and details are for the track it had been playing but the timings are for the track that is currently playing

cncb · « **Reply #54 on:** September 18, 2024, 01:22:15 pm »

Quote from: EnglishTiger on September 18, 2024, 02:44:23 am

There is a problem when moving a PlayingNow popup that has a transparent background on the mac:-

This was caused by the "simulated" background transparency on the Mac. The next Mac build will support "real" transparency and will avoid this problem.

cncb · « **Reply #55 on:** September 18, 2024, 02:23:27 pm »

Quote from: EnglishTiger on September 18, 2024, 02:59:51 am

There's also a problem if the popup is manually induced, using ctrl+I, just before the end of a track

Probably caused by the short delay before doing a screen grab for the "simulated" transparency. Please try the next Mac build.

EnglishTiger · « **Reply #56 on:** September 18, 2024, 10:07:11 pm »

Quote from: cncb on September 18, 2024, 02:23:27 pm

Probably caused by the short delay before doing a screen grab for the "simulated" transparency. Please try the next Mac build.

The problem of only the timings for the new track being the only thing that got updated when a track change happened with a manually invoked popup was happening on my Win PC with a Popup that has a solid background.

cncb · « **Reply #57 on:** September 19, 2024, 08:31:18 am »

Quote from: EnglishTiger on September 18, 2024, 10:07:11 pm

The problem of only the timings for the new track being the only thing that got updated when a track change happened with a manually invoked popup was happening on my Win PC with a Popup that has a solid background.

I am not seeing this. Could you please share steps to reproduce?

EnglishTiger · « **Reply #58 on:** September 19, 2024, 09:48:18 am »

Quote from: cncb on September 19, 2024, 08:31:18 am

I am not seeing this. Could you please share steps to reproduce?

With the PlayingNow PopUp disabled, I got it to happen by using ctrl+I to open the popup pretty close to the end of the 1st track and spotted that after the track change the Timings were those for the new track whilst the coverart and other details were for the 1st track. I was using the attached popup skin with the duration set to 60 seconds.

cncb · « **Reply #59 on:** September 19, 2024, 11:05:28 am »

Quote from: EnglishTiger on September 19, 2024, 09:48:18 am

With the PlayingNow PopUp disabled, I got it to happen by using ctrl+I to open the popup pretty close to the end of the 1st track and spotted that after the track change the Timings were those for the new track whilst the coverart and other details were for the 1st track. I was using the attached popup skin with the duration set to 60 seconds.

Fixed. Thanks.

cncb · « **Reply #60 on:** September 23, 2024, 10:09:58 am »

Quote from: marko on August 21, 2024, 02:25:13 pm

Volume Control:
Please, can we get a volume slider control? I made buttons, and they do work, but they are really, pretty clunky

I have this working using the Standard Skin's style. Do you need this customizable?

marko · « **Reply #61 on:** September 23, 2024, 11:34:21 am »

Quote from: cncb on September 23, 2024, 10:09:58 am

I have this working using the Standard Skin's style.

Amazing. Thank you, again.

Quote from: cncb on September 23, 2024, 10:09:58 am

Do you need this customizable?

Yes Please

cncb · « **Reply #62 on:** September 23, 2024, 12:06:35 pm »

Quote from: marko on September 23, 2024, 11:34:21 am

Yes Please

Do you "really" need it

?

marko · « **Reply #63 on:** September 23, 2024, 12:27:30 pm »

Tell you what... wait until I've had a chance to play with it using the current standard view slider.

The reason I answered "Yes" is because, thus far, I've had less than successful results trying to shoe-horn standard view items into skins. They're all different shapes, sizes and colours, and also use varying amounts of surrounding transparency to affect their placement in standard view, which is making them look odd and mis-shaped in the pop-up.
A black standard view volume slider is not going to be visible on a popup that has a specified black background, and the skin creator has no control over that.
------------------------

Other skinning anomalies are bubbling to the surface over here too: https://yabb.jriver.com/interact/index.php/topic,139695.msg969005.html#msg969005

Apart from the "black square" thing, I'm guessing there's no control over how different platforms interpret a font size?

cncb · « **Reply #64 on:** September 23, 2024, 12:54:54 pm »

Quote from: marko on September 23, 2024, 12:27:30 pm

Apart from the "black square" thing, I'm guessing there's no control over how different platforms interpret a font size?

Right. I had to remove the font sizes from the 3-Track skin due to text being cut off on Mac only.

EnglishTiger · « **Reply #65 on:** September 26, 2024, 07:08:11 am »

cncb

My Granddaughter and I had a go at creating a Skin that makes use of the Playerbar Buttons plus the Mainframe Sections Minimise and Maximise Buttons and discovered something "Cool" - if the Standard View Skin being used specifies Window Control Buttons for each platform the popup uses the set for the platform it is running on.

The attached image shows that popup skin on the Win PC (the one on the left) alongside the same Skin on the Mac PC (the one on the right); both PC's are using the Verdana font with a Fontsize of 10.
The popup skin is also set to use the Verdana font but does not have any "Fontsize" instructions in it.

There appears to be a mistake on the wiki page - the example for a Time statemement reads example: "{e} // {t}" - but that causes 2 backslashes to appear in the popup; only 1 backslash is needed in that example/statement.

The image for the Mac displays one of the more cranky aspects of the Apple Graphics Engine that we MC Mac users have learned to live with. It has a somewhat random allergy to drawing horizontal or vertical lines that are 1 pixel wide or high including if they are at the edges of an image; which is why the border around the popup is missing.

Another thing we discovered to use the Playerbar Buttons in the popup skin the section name is "PlayerBar" but in the Standard View Skin main.xml it is "PLAYERBAR"; to be able to use the Mainframe sections buttons the section name had to be the fully capitalised version "MAINFRAME" that appears in the Standard View Skin main.xml, any attempt to use any lower case letters in the section name failed to load the image.

cncb · « **Reply #66 on:** September 26, 2024, 08:49:23 am »

Quote from: EnglishTiger on September 26, 2024, 07:08:11 am

There appears to be a mistake on the wiki page - the example for a Time statemement reads example: "{e} // {t}" - but that causes 2 backslashes to appear in the popup; only 1 backslash is needed in that example/statement.

Are you sure you are using the forward slash / as in the example and not backslash \?

EnglishTiger · « **Reply #67 on:** September 26, 2024, 08:54:41 am »

oops I keep getting the names of forward and backslash mixed up - it is the forward slash that I'm using in this line from the skin I created

Code: [Select]

<ContentItem Type="time" Name="Elapsed" X="130" Y="80" Width="365" Height="15" FontFace="Verdana" HAlign="center" Text="Elapsed Time: {e}/{t}"/>

cncb · « **Reply #68 on:** September 26, 2024, 09:47:26 am »

You are correct. 2 slashes are only necessary if it's an expression that is evaluated. I will fix the Wiki. Thanks.

Moe · « **Reply #69 on:** September 28, 2024, 03:27:39 pm »

Is it possible to put an image in a tooltip?

I am making my own thin skin like Marko's that will sit at the top of my monitor, it's 25 pixels tall. I'd really love it if I could hover over the album cover and see a larger version album cover in the tooltip.

Thanks

marko · « **Reply #70 on:** September 29, 2024, 07:11:45 am »

Afternoon all, update time

First, a bug...
My "Top Toolbar" skin is 23 pixels high. If I specify Border="Yes" in the skin xml, the skin has padding applied to the bottom edge, pushing it to around 40 pixels tall.

Second, Every day's a school day
The penny finally dropped in regards to font sizes. If they're not specified, they're pulled from standard view. All of my work thus far has been done with a standard view setting of "Normal weight, size 9" I kicked that up to size 12 and it made a real mess of the top toolbar skin, because I removed the font size instructions from the skin in order for it to work on the Mac.

Any number of users, on any platform, are going to be using a virtually infinite combination of font, weight and size settings in their MC. This makes it impossible for anyone to create a skin that's heavily reliant on text output, without working font size instructions in the skin itself. The only people the skin will work for are those that, by chance, happen to have the same font settings as the skin creator.

This is quite a big deal. I'm considering putting the font size instructions back in my skins and advising that they're only suitable as-is on the Windows platform. For others, it may not work, or will after a considerable amount of editing. I'll hold off for now, but you can see why this is concerning.

Third, The volume slider
It shows up. It works. It responds quickly if the volume is changed in Standard view too. We really need to be able to create our own stand-alone sliders though. Again, there is too much that's unpredictable, especially in regard to the amount of transparent padding the current standard view skin is using. Changing skins causes the slider in the popup to move around, mostly up and down depending on the padding, and while most 'kind of' worked OK, others did not. Here are some pics using a w.i.p. skin that has been abandoned at the moment due to the font thing...

The first two are using the stock "Z" skin, and "Dream In Blue". They just don't look right at all. "Z" has an erroneous speaker icon in it, and the one from Dream in Blue just looks pretty broken. It does work, but it's uglier than an ugly thing when it's split away from the rest of its standard view components.

The others, we kind of get away with, on this particular background, albeit with some movement on the x-axis. They're not great.
==========================
So, that's my pitch for custom volume sliders done. Could this be possible? I have one other "oooh, that would be good too" thing, but I'll keep that for another time. Fonts and sliders are way more important than that

Thanks for reading,
-marko.

EnglishTiger · « **Reply #71 on:** September 30, 2024, 01:18:59 am »

I totally agree Marko the FontSize Problem needs soring out on All Platforms.

This image is of 2 variants of a popup I am trying to create:-

The one on the left uses this set of instructions to put the text in:-

Code: [Select]

<ContentItem Type="text" Name="Name" X="10" Y="220" Width="365" Height="35" FontFace="Verdana" FontStyle="bold" FontSize="14" HAlign="center" VAlign="center" Text="[Name]" Tooltip="[Name]"/>
  <ContentItem Type="text" Name="Artist" X="10" Y="255" Width="365" Height="35" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="[Artist]" Tooltip="[Artist]"/>	
  <ContentItem Type="text" Name="Album" X="10" Y="290" Width="365" Height="35" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="Album: [Album]" Tooltip="Album: [Album]"/>	
	<ContentItem Type="text" Name="Genre" X="10" Y="325" Width="365" Height="35" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="Genre: [Genre]" Tooltip="Genre: [Genre]"/>	
	<ContentItem Type="rating" Name="Rating" X="155" Y="360" Width="95" Height="15"/>
	<ContentItem Type="time" Name="Elapsed" X="10" Y="375" Width="365" Height="15" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="Elapsed Time: {e}/{t}"/>

Whist the one on the right uses this set:

Code: [Select]

<ContentItem Type="text" Name="Name" X="10" Y="220" Width="365" Height="35" FontFace="Verdana" FontStyle="bold" HAlign="center" VAlign="center" Text="[Name]" Tooltip="[Name]"/>
  <ContentItem Type="text" Name="Artist" X="10" Y="255" Width="365" Height="35" FontFace="Verdana" HAlign="center" VAlign="center" Text="[Artist]" Tooltip="[Artist]"/>	
  <ContentItem Type="text" Name="Album" X="10" Y="290" Width="365" Height="35" FontFace="Verdana" HAlign="center" VAlign="center" Text="Album: [Album]" Tooltip="Album: [Album]"/>	
	<ContentItem Type="text" Name="Genre" X="10" Y="325" Width="365" Height="35" FontFace="Verdana" HAlign="center" VAlign="center" Text="Genre: [Genre]" Tooltip="Genre: [Genre]"/>	
	<ContentItem Type="rating" Name="Rating" X="155" Y="360" Width="95" Height="15"/>
	<ContentItem Type="time" Name="Elapsed" X="10" Y="375" Width="365" Height="15" FontFace="Verdana" HAlign="center" VAlign="center" Text="Elapsed Time: {e}/{t}"/>

The only difference is that the 1st contains FontSize="14" instructions but the 2nd doesn't

So why are those lines appearing in different places in the images and why am I having to use FontSize="14" to match the popups default FontSize on an MC instalation that is using the Verdana Font with a FontSize of 10?

For anybody who is curious as to why the "Height" setting on some lines is more that double the "FontSize" setting it's to make use of an undocumented feature in the popups that marko discovered; it lets anything in a "Text" instruction WordWrap anything that exceeds the "Width" value onto a second line .

EnglishTiger · « **Reply #72 on:** September 30, 2024, 11:55:02 am »

Quote from: EnglishTiger on September 30, 2024, 01:18:59 am

I totally agree Marko the FontSize Problem needs soring out on All Platforms.

This image is of 2 variants of a popup I am trying to create:-

https://englishtiger.uk/downloads/marko/Font_Size.png

The one on the left uses this set of instructions to put the text in:-
Code: [Select]
<ContentItem Type="text" Name="Name" X="10" Y="220" Width="365" Height="35" FontFace="Verdana" FontStyle="bold" FontSize="14" HAlign="center" VAlign="center" Text="[Name]" Tooltip="[Name]"/> <ContentItem Type="text" Name="Artist" X="10" Y="255" Width="365" Height="35" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="[Artist]" Tooltip="[Artist]"/> <ContentItem Type="text" Name="Album" X="10" Y="290" Width="365" Height="35" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="Album: [Album]" Tooltip="Album: [Album]"/> <ContentItem Type="text" Name="Genre" X="10" Y="325" Width="365" Height="35" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="Genre: [Genre]" Tooltip="Genre: [Genre]"/> <ContentItem Type="rating" Name="Rating" X="155" Y="360" Width="95" Height="15"/> <ContentItem Type="time" Name="Elapsed" X="10" Y="375" Width="365" Height="15" FontFace="Verdana" FontSize="14" HAlign="center" VAlign="center" Text="Elapsed Time: {e}/{t}"/>
Whist the one on the right uses this set:
Code: [Select]
<ContentItem Type="text" Name="Name" X="10" Y="220" Width="365" Height="35" FontFace="Verdana" FontStyle="bold" HAlign="center" VAlign="center" Text="[Name]" Tooltip="[Name]"/> <ContentItem Type="text" Name="Artist" X="10" Y="255" Width="365" Height="35" FontFace="Verdana" HAlign="center" VAlign="center" Text="[Artist]" Tooltip="[Artist]"/> <ContentItem Type="text" Name="Album" X="10" Y="290" Width="365" Height="35" FontFace="Verdana" HAlign="center" VAlign="center" Text="Album: [Album]" Tooltip="Album: [Album]"/> <ContentItem Type="text" Name="Genre" X="10" Y="325" Width="365" Height="35" FontFace="Verdana" HAlign="center" VAlign="center" Text="Genre: [Genre]" Tooltip="Genre: [Genre]"/> <ContentItem Type="rating" Name="Rating" X="155" Y="360" Width="95" Height="15"/> <ContentItem Type="time" Name="Elapsed" X="10" Y="375" Width="365" Height="15" FontFace="Verdana" HAlign="center" VAlign="center" Text="Elapsed Time: {e}/{t}"/>
The only difference is that the 1st contains FontSize="14" instructions but the 2nd doesn't

So why are those lines appearing in different places in the images and why am I having to use FontSize="14" to match the popups default FontSize on an MC instalation that is using the Verdana Font with a FontSize of 10?

For anybody who is curious as to why the "Height" setting on some lines is more that double the "FontSize" setting it's to make use of an undocumented feature in the popups that marko discovered; it lets anything in a "Text" instruction WordWrap anything that exceeds the "Width" value onto a second line .

Moe · « **Reply #73 on:** October 04, 2024, 10:02:53 am »

Quote from: Moe on September 28, 2024, 03:27:39 pm

Is it possible to put an image in a tooltip?

I am making my own thin skin like Marko's that will sit at the top of my monitor, it's 25 pixels tall. I'd really love it if I could hover over the album cover and see a larger version album cover in the tooltip.

Thanks

Anyone? If it isn't possible, could I request it?

HPBEME · « **Reply #74 on:** October 04, 2024, 11:46:39 am »

Quote from: Moe on September 28, 2024, 03:27:39 pm

Is it possible to put an image in a tooltip?

I know hovering over the small cover art image in the standard view player bar will popup a large cover art image, and it is definitely a tooltip there. Or at least I presume it must be, since if you turn off Show Tooltips, hovering over the small image will no longer pop up the larger image.

That said, I have no idea how you get it working for the mini Playing Now pop up - for the standard view XML file there is no user accessible/editable code regarding that. It does seem like it could be done however if the developers decide to take on your request.

cncb · « **Reply #75 on:** October 08, 2024, 11:41:40 am »

Quote from: Moe on September 28, 2024, 03:27:39 pm

Is it possible to put an image in a tooltip?

Sorry, it is not possible and probably won't be anytime soon.

Moe · « **Reply #76 on:** October 08, 2024, 05:44:36 pm »

Quote from: cncb on October 08, 2024, 11:41:40 am

Sorry, it is not possible and probably won't be anytime soon.

That's unfortunate, but I appreciate the response. Thanks.

marko · « **Reply #77 on:** October 13, 2024, 05:25:56 am »

Quote from: marko on September 29, 2024, 07:11:45 am

First, a bug...
My "Top Toolbar" skin is 23 pixels high. If I specify Border="Yes" in the skin xml, the skin has padding applied to the bottom edge, pushing it to around 40 pixels tall.

A little 'bump' as this is still outstanding.

Quote from: marko on September 29, 2024, 07:11:45 am

Second, Every day's a school day
The penny finally dropped in regards to font sizes. If they're not specified, they're pulled from standard view. All of my work thus far has been done with a standard view setting of "Normal weight, size 9" I kicked that up to size 12 and it made a real mess of the top toolbar skin, because I removed the font size instructions from the skin in order for it to work on the Mac.

Any number of users, on any platform, are going to be using a virtually infinite combination of font, weight and size settings in their MC. This makes it impossible for anyone to create a skin that's heavily reliant on text output, without working font size instructions in the skin itself. The only people the skin will work for are those that, by chance, happen to have the same font settings as the skin creator.

As far as I can tell, the font size issues on the Mac are all fixed as of MC 33.0.30, so, I've updated my skins with font size instructions as of this morning.

Quote from: marko on September 29, 2024, 07:11:45 am

Third, The volume slider
So, that's my pitch for custom volume sliders done. Could this be possible?

Bumping my pitch for popup skin specific volume slider images

I released a version of Notify that uses the volume slider from standard view instead of incremental buttons. Depending on the active skin, it doesn't always look too good, but as it's what we are constrained to just now. Any feedback on this one?

Quote from: marko on September 29, 2024, 07:11:45 am

I have one other "oooh, that would be good too" thing, but I'll keep that for another time. Fonts and sliders are way more important than that

Fonts are fixed, so as we're getting there, I thought I'd bring this idea to the table now

Currently, we can have "state dependent" buttons for "Play" and "Pause" and they're working great.
Would it be possible to extend the scope of the HideStates="" attribute so that we could use different images for "Mute Off" and "Mute On"?

-marko.

EnglishTiger · « **Reply #78 on:** October 14, 2024, 07:30:34 am »

Can we please have Playing Now Popups modified to inherit the MC Tooltip Transparency setting or the ability to switch it on or off via an instruction in the <Settings..... > section.

Plus can we please have the Popups modified to add the space behind the ; in semi-colon lists the same way MC and the MC Ultra TrackInfo Plugins do.

cncb · « **Reply #79 on:** October 15, 2024, 10:54:13 am »

Quote from: marko on October 13, 2024, 05:25:56 am

Currently, we can have "state dependent" buttons for "Play" and "Pause" and they're working great.
Would it be possible to extend the scope of the HideStates="" attribute so that we could use different images for "Mute Off" and "Mute On"?

The next build (32) supports this.

I also added a new "Sidebar" skin that harkens back to the days of the Windows Sidebar gadgets (which I really liked). It is basically the Control skin modified to be skinny and displayed on the side of the screen. It adds some of the new features too like volume slider and playlist popup. This looks good for most of the built-in Standard View skins but sizes and spacing might still need to be tweaked for some skins.

INTERACT FORUM

Author Topic: Skinning The Playing Now popup (Read 4950 times)