Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[6233638]

Please add the ability to load different assets based on the window scale used in Media Center.
To support all scale factors in Media Center, I'm drawing most of the assets for a skin I'm working on at 400% size.
As I understand it, this is what's required for Retina (2x) rendering at 200% size - the maximum currently supported in Media Center.
 
However, these 4x assets often look terrible when displayed at 1x.
Here is some pixel-perfect 1x art:

 
And here is what Media Center displays when I add a 4x version:

 
 
4x artwork seems to scale nicely to 2x though, so it looks like I would only have to design artwork for two resolutions - and probably only for certain parts of the UI rather than everything.
 

 
 
This is the code I'm currently using in the skin:

Code: [Select]

   <Entry Name="CloseButton" Platform="Windows" Bitmap="1_WindowControls_Win_1x_Close.png" NumberImages="3" Scale="1" Alignment="2" OffsetX="-3" OffsetY="0" />
    <Entry Name="MaximizeButton" Platform="Windows" Bitmap="1_WindowControls_Win_1x_Maximize.png" NumberImages="3" Scale="1" Alignment="2" OffsetX="-49" OffsetY="-1" />
    <Entry Name="RestoreButton" Platform="Windows" Bitmap="1_WindowControls_Win_1x_Restore.png" NumberImages="3" Scale="1" Alignment="2" OffsetX="-49" OffsetY="0" />
    <Entry Name="MinimizeButton" Platform="Windows" Bitmap="1_WindowControls_Win_1x_Minimize.png" NumberImages="3" Scale="1" Alignment="2" OffsetX="-75" OffsetY="0" />

    <Entry Name="CloseButton" Platform="Windows" Bitmap="1_WindowControls_Win_4x_Close.png" NumberImages="3" Scale="4" Alignment="2" OffsetX="136" OffsetY="-1" />
    <Entry Name="MaximizeButton" Platform="Windows" Bitmap="1_WindowControls_Win_4x_Maximize.png" NumberImages="3" Scale="4" Alignment="2" OffsetX="27" OffsetY="-1" />
    <Entry Name="RestoreButton" Platform="Windows" Bitmap="1_WindowControls_Win_4x_Restore.png" NumberImages="3" Scale="4" Alignment="2" OffsetX="27" OffsetY="-1" />
    <Entry Name="MinimizeButton" Platform="Windows" Bitmap="1_WindowControls_Win_4x_Minimize.png" NumberImages="3" Scale="4" Alignment="2" OffsetX="3" OffsetY="-1" />

 
I suppose I could simply create two versions, but I'd much rather it be a single skin that scales nicely to all sizes.
For development purposes, it would also be a lot easier if I could scale Media Center to 400% rather than have the OS at 2x and Media Center at 200%.

[6233638]

Please support an active/inactive state for the search box:
 

 
And the "Search" text in an inactive field seems to be misaligned. Either centering the text, or using the same left alignment as text entry would be nice.

[Matt]

Next build:
Fixed: Skinning didn't support an oversized SplitViewTab::Close button.

[Matt]

Any idea why the checkbox images are only being loaded in some parts of the UI?
They aren't being scaled either.

What do you mean?

[6233638]

What do you mean?

Checkboxes in the options window and DSP studio aren't using the image defined in the skin's XML file - I don't know where they're coming from.
 
Checkboxes in "get movie & tv info" and the analyze audio window do use the image defined in the XML file - but don't currently support scaling.

[Matt]

Checkboxes in the options window and DSP studio aren't using the image defined in the skin's XML file - I don't know where they're coming from.
 
Checkboxes in "get movie & tv info" and the analyze audio window do use the image defined in the XML file - but don't currently support scaling.

They come from SmallIcons.png.

[6233638]

They come from SmallIcons.png.

Got it, thanks. Is there a "proper" way to override items in the Default Art folder? (and how would you do that for a Mac skin?)

[Matt]

Got it, thanks. Is there a "proper" way to override items in the Default Art folder? (and how would you do that for a Mac skin?)

If you make a "Custom Art" folder, any resources that are there will replace the "Default Art" resource.

[6233638]

I'm having some difficulty skinning Slider_HorizontalBackground.png and Slider_HorizontalHandle.png correctly.


 
At 100% size the upper slider is drawn as 120x19
The lower slider is drawn as 120x18

I'm not sure if it's meant to be 18 or 19 px tall (it seems like 19px would be correct) but it needs to be the same for both or else the images are getting scaled incorrectly.
 
 
At 200% size, the upper slider is drawn as 240x34
The lower slider is drawn as 240x33

These should both be either 36px or 38px tall, depending on whether you decide to use 18px or 19px at 100% size.
 
This results in the slider and background being squashed at 200% size.
I'm guessing it also applies to larger scales, but there's no way I can see to check how 400% is being rendered.

[6233638]

Not a skinning issue as such, but an issue with the way that Media Center is rendering selections.
Something I thought I had been seeing, and have now confirmed, is that selections are not properly centered.
 

 
Shadows (green) are properly aligned to the thumbnail with 7px left and right, and 5px/9px top/bottom. (the vertical offset appears to be intentional)
Selections (blue) are usually shifted over to the left - though how much depends on the size of the thumbnails in the current view.
 
EDIT: It looks like selections are correctly centered - it's the thumbnails which are shifted over to the right, at least based on the text centering.

[Matt]

Next build:
Changed: Skinning supports over-sized checkbox controls.

[Matt]

I'm having some difficulty skinning Slider_HorizontalBackground.png and Slider_HorizontalHandle.png correctly.

At 100% size the upper slider is drawn as 120x19
The lower slider is drawn as 120x18

Next build:
Fixed: The size of the thumbnail size slider would be one pixel different between the top and bottom lists.

[Matt]

It would be helpful if you made your skin available to me for testing the additional issues.  I'm matt at jriver dot com.

[Matt]

Next build:
Fixed: Skinning supports over-sized radio buttons.
Fixed: Skinning supports over-sized search clear buttons.

[6233638]

Great, thanks.

[Matt]

Are there other issues?  I'm at the bottom of the list right now, but it's possible I overlooked something.

[6233638]

1.  I'm still having problems with the window controls (close/minimize etc.) not showing up on anything that's not the main window. (e.g. options window, DSP Studio etc.)

 
2.  It would be nice if there was support for an active/inactive state for the search box.
 
 
3.  The sliders are still not being scaled up to 200% size correctly.
While the upper and lower sliders are now the same size, they're being scaled from 120x19 to 240x34, when that should be 240x38.
It doesn't sound like much, but it means the round slider looks oval.


4.  Thumbnails are not being properly centered.
Here, Border_GlowShadow.png was changed to be a bright green square to make the misalignment obvious.
The text is properly centered inside a selection, and the shadow is properly centered around the thumbnail, so it would appear that the thumbnails themselves are shifted to the right. How much varies on the thumbnail size.


5.  And while it's good to have scaling support for more items, I still think that the option to load different assets based on the current scale is important. (see the first post)
While most things look fine, some items just look terrible when scaled down from 4x size.
I'd like the option to include 1x and 4x items in a skin (4x items seem to scale nicely to 2x) rather than maintain separate skins.
 
 
I'm just working on the skin as I have the time, so I can't say if that will be everything. There's still a lot of work to be done.

[6233638]

I wanted to see how this looked on my Retina MacBook Pro, but how are you supposed to load custom skins there?
I was able to add it via Show Package Contents but as soon as you upgrade to a new version, the skin will be removed.

Is there some other location that Media Center will load skins from on a Mac?

[adamt]

I wanted to see how this looked on my Retina MacBook Pro, but how are you supposed to load custom skins there?
I was able to add it via Show Package Contents but as soon as you upgrade to a new version, the skin will be removed.

Is there some other location that Media Center will load skins from on a Mac?

This is currently where it loads it from.  As you say, when it's upgraded the skins get deleted.  I agree, this should be loaded from somewhere else.

[6233638]

This is currently where it loads it from.  As you say, when it's upgraded the skins get deleted.  I agree, this should be loaded from somewhere else.

/Users/<username>/Library/Application Support/J River/Media Center 19/Skins/ seems like the logical place for custom skins.
Keeping standard skins inside the app seems fine.
 
I'd need to be able to load Custom Art in addition to skins from that location as well.

[6233638]

For some reason, the action window is not using ActionWindow_Background.png

It's applied correctly everywhere else in the left pane, just not the action window. (the image includes that border on the right)


And even though it's a 1x image, the minimize button is being scaled when using the mini view:


It should look like this:

[Matt]

For some reason, the action window is not using ActionWindow_Background.png

It's applied correctly everywhere else in the left pane, just not the action window. (the image includes that border on the right)

I think the background of the list takes over the background.  In other Action Window pages you'll see the background.

[Matt]

And even though it's a 1x image, the minimize button is being scaled when using the mini view:


It should look like this:

This will be fixed next build.

[6233638]

I think the background of the list takes over the background.  In other Action Window pages you'll see the background.

Yes, it uses the HTML code for the background color, but doesn't load an image - which means that there isn't a border being drawn.
Would it be possible to have it load ActionWindow_Background.png or a new one for the list background?

This will be fixed next build.

Great!

[6233638]

Well when drawing Frame_ComboBoxButton.png, I noticed that it's another element which is getting squashed at 200% size.

Rather than scaling from 17x23 to 34x46, it's scaled to 34x40:



How it should look:

 
I suspect the same thing is happening to the buttons, but it just isn't as obvious without that chevron in the middle.


I do need to spend some time figuring out matrix drawing to try and help alleviate these problems when elements are scaled like that.
If I understand things correctly, I should be able to at least prevent the center of the image being scaled at all.


Another thing to mention is that I still haven't figured out how to replace those checkboxes on the left of DSP studio.

[6233638]

Well, good and bad news.

The good news is that matrix drawing was not as complex as I thought, so I was able to fix things relatively easily by splitting the image into five rows, keeping the top/bottom/center a fixed size and allowing the other areas to be scaled as necessary.



This means that the button is a lot more flexible, as the height can now vary without it looking stretched or squashed. (note: this example uses a 2x image at 200% size)


The bad news is that matrix values do not seem to be scaled with the image size.
So a 4x image scaled down to 100% size results in this with matrix drawing:



Using margins rather than matrix drawing scales down to 1x size correctly:


But it results in stretched/squashed graphics if the aspect ratio changes on scaling.
E.g. When this is displayed as 17x23 at 100% size, and then 34x40 at 200% size instead of 34x46, as in my previous post.

[6233638]

Scrollbars don't seem to be rendering properly below a certain size, when they are scaled.

As a test, I used this image, which is 68x28. (17x7 @4x)



The top and bottom 12px are magenta, with 4px cyan in the center.
The margins are set to "0,12,0,12" so the only thing which should be getting scaled is the cyan portion in the center.
 
When viewed at 1x, this should allow the scrollbar to render correctly until it is 6px tall. (the smallest possible for this design)
Instead, when they get below 24px in height they are improperly scaled so that the top & bottom margins are stretched to fit:
 




This has the effect of making the scrollbars appear distorted:


When they should look like this:

[adamt]

Scrollbars don't seem to be rendering properly below a certain size, when they are scaled.

Matt fixed this, and it will be in the next build.  Thanks for the report!

[6233638]

Matt fixed this, and it will be in the next build.  Thanks for the report!

It's better, but still doesn't seem to be rendering correctly:



At a certain point, the margins shrink in size, and the bottom gets cut off.
With images drawn at 4x scale, using margins of "0,12,0,12" and viewing at 100% size, I would expect the magenta portions to stay 3px tall (12÷4) at all times, and only the center portion to be scaled.

This should be able to shrink down to 3px magenta, 1px cyan, and 3px. (or 0px cyan?)
Instead the top margin is being shrunk to 2px tall, and the center seems to stop scaling at a certain point.


The arrows are rendering incorrectly now too (tiny!) even with the default Noire theme.

[6233638]

I'm looking to get back to working on this, after not having the time to work on it for the last few weeks - has there been any progress made with the scrollbars?
There are still some issues remaining with how they are being scaled, and since the last change, the up and down buttons are being scaled to a tiny size for me on all skins - not just my own. (I hadn't even started work on them)
 
I'm still having issues with secondary windows (Options, DSP Studio etc.) not displaying their window controls for some reason.
 
And the matrix drawing issues are preventing me from working on a number of elements.
Matrix drawing seems like the ideal solution for items which may have a variable height or width, but have a central area that is not to be scaled. The issue is that matrix drawing doesn't seem to support scaling at all - that central area is displayed at 4x size.
The only alternative would be to create graphics for each size, which is not ideal. (unless I could include multiple graphics and have MC select the most appropriate for the current scale)


I have plenty of things I can still work on (including redrawing an unknown number of elements due to a stupid mistake) but some of these are preventing me from working on certain areas of the skin until things are resolved.

[6233638]

Would it be possible to support transparency on the scrollbars?
Right now I have to choose between white or gray for the background, which means that it has to look wrong either in lists or in the tagging pane:
 

 
(Animated PNG)

If I try to use transparency now, those elements show up black.

[6233638]

When inverting the skin, it would be nice if some elements could be marked as "do not invert" such as certain window controls.
The option to load separate elements might also be useful, but is less important.