INTERACT FORUM
More => Old Versions => JRiver Media Center 20 for Windows => Topic started by: Blaine78 on May 12, 2015, 08:58:22 pm
-
JRiver needs to overhaul in the skin department. Something that's nice and simple, like flat metro design. The skins currently remind me of late 90's audio/media software - techno/industrial glossy bubble gum, an eyesore of colours that has dated badly. Only current tasteful skin I find is Purity.
I've tired MetroX, but has text problems in the info window at top the text doesn't resize with enlarging, and the colour selection is limited and jarring.
-
May I recommend modern cards: http://yabb.jriver.com/interact/index.php?topic=83217.0
It's my favorite Media Center skin and it's nice and flat, with different buttons for different OS's
-
May I recommend modern cards: http://yabb.jriver.com/interact/index.php?topic=83217.0
It's my favorite Media Center skin and it's nice and flat, with different buttons for different OS's
I run Noire. But if I was going to use any third-party skin, it'd be those ones.
I don't like the Custom Resources Dirhael adds, but other than that, they're sharp skins.
-
Thanks for the suggestion.
not bad, i like the top bar and menus, but the text for the now playing information at the top (standard veiw) is to small and not able to change the size of it as i can with Purity. Also, a dark version would be nice instead of the white windows.
Problem with purity skin is the 'audio direct path' button doesn't turn blue when path is direct.
-
I'm with you man.
When I made Purity, a very long time ago, I'm just starting to understand how skins works on MC.
However, time goes by and I just understand that making a decent skin for MC is mainly impossible and worthless, because of the lack that skins developers have to face it (there are to much things that you can't control/design). My last intent was a skin for myself that I made a year ago in order to "match" the flat design guidelines.
(http://i.imgur.com/cZmYV7x.png)
(http://i.imgur.com/WXAEWtL.png)
-
well done, i really like purity.
like the look of this one you've posted too. is it available for download?
-
No, sorry and I don't think it'll ever be. As I say, until they make some changes about the skinning capabilites, I'm done with it.
-
that is a shame, I really like that one
-
Be cool if they could my the GUI function similar to Roon (Roon Labs).
-
Be cool if they could my the GUI function similar to Roon (Roon Labs).
+1 !!!!
-
My last intent was a skin for myself
Great to see I'm not the only who dreams of a progress bar that is NOT 2 pixel thin, to the point that one struggles to click on it. There is hope :).
-
May I recommend modern cards: http://yabb.jriver.com/interact/index.php?topic=83217.0
It's my favorite Media Center skin and it's nice and flat, with different buttons for different OS's
Same here too.
No, sorry and I don't think it'll ever be. As I say, until they make some changes about the skinning capabilites, I'm done with it.
What changes, if you mind me asking?
-
I'm with you man.
When I made Purity, a very long time ago, I'm just starting to understand how skins works on MC.
However, time goes by and I just understand that making a decent skin for MC is mainly impossible and worthless, because of the lack that skins developers have to face it (there are to much things that you can't control/design). My last intent was a skin for myself that I made a year ago in order to "match" the flat design guidelines.
(http://i.imgur.com/cZmYV7x.png)
(http://i.imgur.com/WXAEWtL.png)
Please may I have a copy of your skin above. Its perfect for my dim room large TV set up.
-
That skin looks great instigator!
-
What changes, if you mind me asking?
Icons per skin based, ability to use different images based on the DPI, fonts by default per skin (also size), no more lines defined by random colors (ex. the color of the text on lists also defined some line colors in other places. WTF?), true precision when set margins (apparently the app decides how to stretch/tile images, so what's the point of left the skin developer set margins for stretch/tile images? And I'm just starting...
-
I'd also be happy to get the chance to use your beautiful skin, instigator :)
-
Icons per skin based, ability to use different images based on the DPI, fonts by default per skin (also size), no more lines defined by random colors (ex. the color of the text on lists also defined some line colors in other places. WTF?), true precision when set margins (apparently the app decides how to stretch/tile images, so what's the point of left the skin developer set margins for stretch/tile images? And I'm just starting...
Maybe you should make a topic dedicated to these requests? Who knows, maybe they'll be considered. But in addition to listing them, I'd be more specific on what you're looking for and explain why they're needed. I'm thinking if the devs can understand what you're asking for and why you're asking for them, they'll have a better chance of being considered.
-
Icons per skin based, ability to use different images based on the DPI, fonts by default per skin (also size), no more lines defined by random colors (ex. the color of the text on lists also defined some line colors in other places. WTF?), true precision when set margins (apparently the app decides how to stretch/tile images, so what's the point of left the skin developer set margins for stretch/tile images? And I'm just starting...
Could I/we have a copy of your skin please. Its perfect for night eyes, which I have all the time in my dim front room and a 50inch computer screen.
-
Maybe you should make a topic dedicated to these requests? Who knows, maybe they'll be considered. But in addition to listing them, I'd be more specific on what you're looking for and explain why they're needed. I'm thinking if the devs can understand what you're asking for and why you're asking for them, they'll have a better chance of being considered.
The history of such dialogs is not encouraging. The problem is really simple: we don't have the cookbook. What do I mean by that? Let's take Noire and Black on Black as examples, both designed by Pixtudio for JRiver.
LeftBorder definition in Noir: <Entry Name="LeftBorder" Bitmap="MainFrame_LeftBorder.png" Margins="0,0,0,0" />
LeftBorder definition in Black on Black: <Entry Name="LeftBorder" Bitmap="MainFrame_LeftBorder.png" Margins="1,0,0,0" DrawMode="REGION_E_HSTRETCH,REGION_E_VTILE" Scale="2" />
What on Earth is DrawMode and where is it explained? Why do I have to try at my own time expense to find out instead of just being creative and actually designing something? And the moment somebody with more than 2 neurons sees these, he will wonder what else is out there, what other undocumented functions, half-exposed from the core code are out there?
Why everything that we know about skinning had to be practically reverse-engineered?
We might be willing to pool our creative resources into making cools skins, but we need a sign that things are changing for the better, from JRiver. And so far on this front, the mothership is silent, sending supplies and reinforcements in other battles.
-
Yeah... The Dev documentation is decent, but has holes, particularly around skinning (which I've never looked at, so the wiki stuff is really ancient, I'm sure).
If you come up with a list of terms, and ask for definitions, I bet they'd respond, and then we could make a wiki article.
Someone who knows skinning really well could take a crack at fixing the wiki (http://wiki.jriver.com/index.php/Category:Skinning) so that we can really identify what we know and don't know.
-
The history of such dialogs is not encouraging.
We can't always do what you want, but we do read and consider what you say.
As glynor said, a new thread with details and reasoning would be helpful.
-
Please may I have a copy of your skin above. Its perfect for my dim room large TV set up.
Check the Modern Cards thread, there is a screenshot of a black version, done by simply inverting the colors. Might be your solution. I am using it on a 55' LCD-TV, looks pretty decent...
-
And badly needs a Tablet friendly skin! We lost mini-skins with version 17??? due to Mac/Linux compatibility issues. Don't get me wrong I use MC due to the focus on performance/features over flash but some additional focus on skinning would be greatly appreciated AND I'm quite sure there are many consumers who ARE easily swayed by flashy UI. So you don't have to have the best UI/skinning but it will get to a point where it's detrimental to sales.
-
Check the Modern Cards thread, there is a screenshot of a black version, done by simply inverting the colors. Might be your solution. I am using it on a 55' LCD-TV, looks pretty decent...
Thanks. I tried playing round with that, not bad, colours look a little jarring. the main reason it wont suit is the text in the info window too small, not adjustable
-
Thanks. I tried playing round with that, not bad, colours look a little jarring. the main reason it wont suit is the text in the info window too small, not adjustable
You can set the font size under Tools > Options > Tree & View.
On some skins you can set "Size" under the View Menu.
-
You can set the font size under Tools > Options > Tree & View.
I just tried this and it works. But it has unexpected results:
1. The font size in the track playing information (at the very top) changes, along with everything else. This is bad because in some skins I use the font size there is MUCH bigger than the main display. I'd guess it's something like 18 or 20 as opposed to 12 point. After changing fonts, it's now tiny by comparison. See ThunderStorm or Z for examples from skins that are included by default.
2. The fonts in the side navigation bar change too. This just looks "funny" and bad.
3. I can't find a way to find the original font. Trying various ones changes them, but I can't seem to find the original which looked normal and nice to me.
4. Worst of all, once you change the font, I can't find any way of undoing the change. After looking around for 10 minutes I decided to do a Library Restore, restoring just settings. This worked perfectly. It just doesn't seem like a proper way of changing fonts and styles! :)
Brian.
-
You change the font in the same location as where you first set it.
-
LOL. Come on Jim, I'm smarter than that! :)
I what I mean is two things:
1. There's no way to reverse the global change where it changes the font size in 3 different locations. Change the font and size all you want and you can't get back to the original sizes in the three locations I talked about.
2. I don't know what the original font or fonts were. So I can try dozens trying find the right one, but I can't seem to get back to the original.
I forgot to mention originally that I'm using MC 20 on Mac, in case that makes a difference.
Brian.
-
I'd like a reset to defaults button in there too.
For the record, it is 10-point Segoe UI on Windows. I can check the Mac version if you want.
-
Segoe UI doesn't seem to exist in the Mac version. I scrolled through the whole list an didn't see a highlighted font so... <shrug> Not sure what the font really is. I'd be interested if you (Glynor) find something out.
Brian.
-
Correct. Segoe is a Microsoft only font that they commissioned for Vista.
On Mac I believe it is Helvetica or Lucida Grande, depending on the version of OSX, but I'll have to check. Probably also 10 point.
-
You can set the font size under Tools > Options > Tree & View.
On some skins you can set "Size" under the View Menu.
Hi Jim,
yes I've tried this, it doesn't work for metroX, all fonts except for the top info windows resizes, but other skins it works fine. and the skin resize does not exist for metro x
-
...to add to that, metrox icons need to be larger, they are too small on a 1080p big screen.
-
MetroX is a third party skin. Tell Maverick07.
-
For the record, it is 10-point Segoe UI on Windows. I can check the Mac version if you want.
Actually, I remembered wrong: it is 9-point Segoe UI on Windows
12-point Helvetica on 10.10.x.
I didn't bother to fire up my VM, but it is almost certainly 12-point lucida grande on 10.9 and earlier.
I'm not sure what you mean about the "three places". There's only one place to set the actual font (which is the one that is a pain to reset). The other size settings are by percentage, and you can set them to 100% to reset to defaults.
You don't need to change the font at all just to alter the font size. If you did this before bumbling around, you should put it back to the ones I've listed above and use the size settings built into MC, if you can.
I actually keep my HTPC set at 10-point Segoe and then set the overall size setting for Standard View to 110%, Theater View at 105% (that's why I got mixed up about the default). This helps readability from the couch without boosting the "UI" size quite as much as would be needed otherwise. If you're going to change the font size, though, it is best to only do a little (as otherwise the fonts overrun the edges of dialogs and stuff and get cut off). They do all interact, but get what you can from the built-in sizing first, and tweak the font size only a little if needed at all.
-
The history of such dialogs is not encouraging. The problem is really simple: we don't have the cookbook. What do I mean by that? Let's take Noire and Black on Black as examples, both designed by Pixtudio for JRiver.
LeftBorder definition in Noir: <Entry Name="LeftBorder" Bitmap="MainFrame_LeftBorder.png" Margins="0,0,0,0" />
LeftBorder definition in Black on Black: <Entry Name="LeftBorder" Bitmap="MainFrame_LeftBorder.png" Margins="1,0,0,0" DrawMode="REGION_E_HSTRETCH,REGION_E_VTILE" Scale="2" />
What on Earth is DrawMode and where is it explained? Why do I have to try at my own time expense to find out instead of just being creative and actually designing something? And the moment somebody with more than 2 neurons sees these, he will wonder what else is out there, what other undocumented functions, half-exposed from the core code are out there?
Why everything that we know about skinning had to be practically reverse-engineered?
We might be willing to pool our creative resources into making cools skins, but we need a sign that things are changing for the better, from JRiver. And so far on this front, the mothership is silent, sending supplies and reinforcements in other battles.
Been meaning to reply to this thread for days....
Perhaps it's just because I've written too much code in my time, but DrawMode is crystal clear to me :P
Explanation:
REGION_E_HSTRETCHStretch horizontally :)
REGION_E_VTILETile vertically :)
HTILE would tile horizontally, VSTRETCH would stretch vertically.
If you try the most recent version of MC, I believe that you'll find a lot of older niggles with skinning have been fixed internally.
Not everything by any stretch of the imagination, but it's getting better.
Onto less controversial stuff:
I completely agree that allowing per-skin icons is highly desirable-
I disagreed with the decision to change to the current blank media icons, and thought the older ones were far better (And indeed I've changed back). To a certain extent, JR needs to be able to make design choices, but these should absolutely be able to be overridden by a skin.
Fonts are a slightly different kettle of fish, especially now there are Mac and Linux versions. At the moment, MC is set to use font defaults that will be installed on any standard system.
Changing to another font within a skin would require a fallback mechanism if said font is not installed on an end-user's system.
I suppose that it'd be technically possible to package fonts within a skin, but IMHO that's liable to cause no end of trouble.
-Leezer-
-
I'm not sure what you mean about the "three places".
Try a skin like ThunderStorm or Z. Then look at my three places:
1. The track display at the top. This uses a different size font than all the rest; much larger.
2. Left hand navigation bar category titles. Titles like Audio, Video, etc. These are a different font style than all the rest. You can tell because the kerning is larger, making them appear less horizontally compressed and easier to read.
3. All list areas like Now Playing or anywhere else lists of song information are presented. This font is the smallest, with the most compressed kerning.
This appearance difference becomes extremely obvious once you change the font in Options -> Tree and View -> Select Font, because the track display becomes tiny, and the nav bar categories all suddenly get compressed and hard to read. Again, try this with a Skin like ThunderStorm or Z to see exactly what I mean.
Once you've set the font to something, you can't ever get back the 3 distinct looks of the three distinct areas. I had to do a Library Restore in order to get the default looks back. I hope this is more clear now.
There's only one place to set the actual font (which is the one that is a pain to reset). The other size settings are by percentage, and you can set them to 100% to reset to defaults.
For some Skins that works. For the vast majority, it's disabled. It *does* work as expected for the one example I can find (Noire)
Perhaps what I'm seeing is more Mac specific? Looking at screen shots online, I'm pretty sure this is universal.
Brian.
-
Skins can specify art.
I believe they need to make an <Art> section in the skin and specify each image resource.
For example, if a skin specified OptionsTree.png that will be used instead of the one that's in Default Art.
-
Perhaps what I'm seeing is more Mac specific? Looking at screen shots online, I'm pretty sure this is universal.
A whole bunch of the skins have gotten updates over the past few weeks to work better with the new sizing options, but I don't think the changes have rolled out to the Mac version yet.
I use Noire. I'm generally not a fan of using non-default skins on any application. Most of the alternate skins in MC are "older defaults" (with a few extras), and they don't always get all new features.
-
^ Ok. That doesn't address the font issue. But I guess I don't really care that much and I'd rather spend time asking about issues that are important to me.
Thanks,
Brian.
-
I'm still reading this, and thinking, and reading, and...
The idea would be to allow to learn skinning for all people that desire to. Not for just the best of the best, with previous experience, etc. So I'll draw a parallel. Some 5 years ago I believe marko did an awesome job by re-writing the wiki expression page. So those expressions that were explained with absolute, particular values, got to have a complete explanation of their generic syntax. That's what we need here. I don't want to hear in scattered posts what DrawMode does (anyway, leezer3, thanks for that man), I want to know the generic syntax for an entry in main.xml, with all its parameters explained.
And then we need a list of all things that do not exists, but MC will use them if they are user created -> The <ART> section Matt mentions above, the I don't know what other Custom Art folders that MC scans for when changing skins and so on. And whenever there's a change, a new function applied, something new invented, that should be part of the new release notes.
This will help with where we are right now.
We could go crazy later - animations, conditional variables, etc.
And a small note. I'm looking at the latest Noir. While currently minimal, there are platform specific elements. This is problematic, because it's unlikely that somebody will design skins having all platforms in front of him - especially considering how many active skins are in development. And ending up with platform specific skins, or worse, working on some and broken on others... that's major headaches.
-
And a small note. I'm looking at the latest Noir. While currently minimal, there are platform specific elements. This is problematic, because it's unlikely that somebody will design skins having all platforms in front of him - especially considering how many active skins are in development. And ending up with platform specific skins, or worse, working on some and broken on others... that's major headaches.
This kinda brings up one of my top pet peeves with the current skins like Noire. I think there's some room for improvements in the multiple platforms front with skins - it seems the platform names are too vague and don't specify specific editions. Example being this snippet from Noire;
<Entry Name="CloseButton" Platform="Windows" Bitmap="Close.png" NumberImages="5" Scale="4" Alignment="2" OffsetX="191" OffsetY="-10" Scale="4" />
<Entry Name="MaximizeButton" Platform="Windows" Bitmap="Maximize.png" NumberImages="5" Scale="4" Alignment="2" OffsetX="98" OffsetY="-10" Scale="4" />
<Entry Name="RestoreButton" Platform="Windows" Bitmap="Restore.png" NumberImages="5" Scale="4" Alignment="2" OffsetX="98" OffsetY="-10" Scale="4" />
<Entry Name="MinimizeButton" Platform="Windows" Bitmap="Minimize.png" NumberImages="5" Scale="4" Alignment="2" OffsetX="73" OffsetY="-10" Scale="4" />
<Entry Name="CloseButton" Platform="Mac" Bitmap="Close-mac.png" NumberImages="5" Alignment="0" OffsetX="8" OffsetY="5" Scale="4" />
<Entry Name="MaximizeButton" Platform="Mac" Bitmap="Maximize-mac.png" NumberImages="5" Alignment="0" OffsetX="48" OffsetY="5" Scale="4" />
<Entry Name="RestoreButton" Platform="Mac" Bitmap="Restore-mac.png" NumberImages="5" Alignment="0" OffsetX="48" OffsetY="5" Scale="4" />
<Entry Name="MinimizeButton" Platform="Mac" Bitmap="Minimize-mac.png" NumberImages="5" Alignment="0" OffsetX="28" OffsetY="5" Scale="4" />
It's worth noting the Windows platform MC uses Windows Vista/7-esk minimize/maximize/windowed/close buttons which honestly look out of place (and dated too, if I'm to be completely honest) when using MC on newer Windows editions like Windows 8.1 and Windows 10. This is the main reason I don't use Noire even though I can 'fix' this myself, and I have in the past, but never bothered to update the fixes once the hidpi support in Noire started rolling out. I'm thinking the platform specified should know which edition of Windows it's running on (using the Windows version number) and then have the skin load the correct buttons to better match the native Windows interface it's running on. Currently there's no way to tell the skin which images to load for X version of Windows.
Mac OS X's in the same boat too in this case - it uses the older 10.9 and below stoplight buttons even on OS X 10.10 which uses newer, brighter stoplight icons. Again, this is something I can easily 'fix' myself by modifying Noire, but again because of the active skin changes I haven't done this. And yet again this is something else where there's currently no way to tell the skin to load which images to load for X version of OS X.
Then there's Linux... it has no platform support in for skins (currently), probably for good reason. There's soooooooooo many different desktop environments with many, many different skin styles. That is a discussion for a different time.
If skins had the ability to specify operating system versions in addition to the platforms, this would greatly help. Like this for example;
<Entry Name="CloseButton" Platform="Windows" OSVersion="6.0-6.1" Bitmap="Close-windows-Vista7.png" NumberImages="5" Scale="4" Alignment="2" OffsetX="191" OffsetY="-10" Scale="4" />
...
<Entry Name="CloseButton" Platform="Windows" OSVersion="6.2-6.3" Bitmap="Close-windows-8.png" NumberImages="5" Scale="4" Alignment="2" OffsetX="191" OffsetY="-10" Scale="4" />
...
<Entry Name="CloseButton" Platform="Windows" OSVersion="10.0" Bitmap="Close-windows-10.0.png" NumberImages="5" Scale="4" Alignment="2" OffsetX="191" OffsetY="-10" Scale="4" />
Or something like this for Mac;
<Entry Name="CloseButton" Platform="Mac" OSVersion="10.6.8-10.9.5" Bitmap="Close-mac-Legacy.png" NumberImages="5" Alignment="0" OffsetX="8" OffsetY="5" Scale="4" />
...
<Entry Name="CloseButton" Platform="Mac" OSVersion=10.10" Bitmap="Close-mac-10.10.png" NumberImages="5" Alignment="0" OffsetX="8" OffsetY="5" Scale="4" />
There's even (crude) support for a range of different OS versions that use the same images there as well, which is pretty nice and convenient. This also adds the benefit of quickly and easily supporting newly released versions of OSes without breaking past OS support, which is a major plus for those using the older OS versions. :D So yeah, something like this would be nice. This will probably be my number 1 request for MC 21. :P
Thoughts?
-
I think there's some room for improvements in the multiple platforms front with skins
While I don't disagree in any way with the suggestion... Why couldn't you just make different editions? You won't need all of those versions installed on each computer (each platform has its own), so...
* Modified Noire (Win10)
* Modified Noire (Yosemite)
* Modified Noire (Mavericks)
I dunno... Not super-elegant, but it works, and doesn't really hurt anything. It also keeps the "code" of the skin itself simpler, and the overall package smaller, which both seem like wins.
-
Some 5 years ago I believe marko did an awesome job by re-writing the wiki expression page.
Credit where credit is due:
(http://glynor.com/img/screenshots/etc/Expression_Language_Wiki_History.png) (http://wiki.jriver.com/index.php?title=Expression_Language&offset=20111124032510&limit=500&action=history)
Marko certainly did a ton, but much of what is there now, was done by MrC.
-
While I don't disagree in any way with the suggestion... Why couldn't you just make different editions? You won't need all of those versions installed on each computer (each platform has its own), so...
* Modified Noire (Win10)
* Modified Noire (Yosemite)
* Modified Noire (Mavericks)
I dunno... Not super-elegant, but it works, and doesn't really hurt anything. It also keeps the "code" of the skin itself simpler, and the overall package smaller, which both seem like wins.
Because it adds complexity by having multiple versions of the same skin with platform-specific changes when there's already basic platform support in skins for Windows and Mac - it just needs expanded upon a little, IMO. With my idea it'd eliminate the need for having multiple edits of the same skin. Besides, I'm assuming MC is already aware which version of Windows or Mac it's running on, it might as well allow skins access to that information to know which images to use as well. ;)
-
Because it adds complexity
There's complexity both ways, of different sorts.
Like I said:
While I don't disagree in any way with the suggestion...
I meant that. But, I wouldn't say it is a show stopper by any means.
-
Have the author fill in a tag with the target platforms/versions of OS. Show a warning message if a user attempts to load a skin on something it was not meant to run.
Just saying.
As a funny add-on question: why wasn't the interface also made platform-independent?
-
That'd be useful for the Noire Glass skin, which only works properly on Windows Vista and Windows 7 (and Windows 8.1 with the third-party Aero Glass program).
-
As a funny add-on question: why wasn't the interface also made platform-independent?
Look on the Mac board at the number of requests to make it more 'Mac-like'
Mac has a very unified system and set of UI guidlines, which are followed by most apps. Whether that's a good or a bad thing I don't know....
I certainly don't like it, and never got on with the Mac I tried for a year, but there are people who swear by it.
-Leezer-
-
Apple changes their look often. JRiver, however, remains predictably familiar. ;)
-
^ and ^^ . The Mac has UI guidelines that are rather strict. This is supposed to insure a familiar look and feel across applications so they all seem to be unified in some way. Like having Command-S be save on any application that does saving. I think this is mostly a good thing, but it's at the expense of creativity.
The good news is, you can obviously write an OSX app that looks nothing like the guidelines. As JRiver has proven. Frankly, it's off putting to a lot of Mac users because it's so "not a Mac App!!!". It bothered me for about a week and then I got used to it. But I'm a power user. I'm not a typical Mac guy. Though I am enthusiastic about it.
But more importantly, to address Jim's comment: The look changing. I don't think OSX itself changes looks very often, and when it does, it's more cosmetic than actually functional. But darn itunes!!! They seem to change design paradigms every year. You get used to how it works, download an update and BAM! Your familiar features and interface are gone.
It's kind of insane how badly they mess with the interface on itunes. Like removing cover flow. Bam, gone. You liked it? Oh, sorry, try the new interface, we swear it's better. The itunes team leadership should all be fired; it's one of the most complained about pieces of software on the entire platform, and equally complained about on the Windows side.
That's one thing JRiver has going for it. Not only are the views EXTREMELY flexible, they don't change from release to release (as far as I can tell being somewhat new to JRiver). This doesn't exactly belong in this thread, but hey you guys brought it up. :)
Brian.
-
The Mac has UI guidelines that are rather strict.
The HIG is dead. It died a long time ago, and it was Apple that killed it (http://daringfireball.net/2011/01/uniformity_vs_individuality_in_mac_ui_design).
-
I completely agree with the original post.
I'll take anything with a modern, sleek look and feel. I don't care if it conforms to Mac HIG or not as long as it's clean.
I've trialed JRiver several times and the functionality is good, but this is one of the two things holding me back from purchasing. It just feels clunky, even with the 3rd party skins.
-
I think the skin-makers would need(?) some assurance from the devs, the skinning situation has been a recurring theme for many years, and I think many skinners are not willing to "risk" putting down a lot of work on this when the situation is as it is today.
-
I think the skin-makers would need(?) some assurance from the devs, the skinning situation has been a recurring theme for many years, and I think many skinners are not willing to "risk" putting down a lot of work on this when the situation is as it is today.
It's hard to know what that means.... "situation as it is today"...
-
It's hard to know what that means.... "situation as it is today"...
The situation seems to be that skinning is not very flexible and easy today, and there is no signals that it will change in the near future.
-
I'm with you man.
When I made Purity, a very long time ago, I'm just starting to understand how skins works on MC.
However, time goes by and I just understand that making a decent skin for MC is mainly impossible and worthless, because of the lack that skins developers have to face it (there are to much things that you can't control/design). My last intent was a skin for myself that I made a year ago in order to "match" the flat design guidelines.
Please consider sharing this skin, it looks great.
-
It's hard to know what that means.... "situation as it is today"...
After trying to create a skin for MC:
Retina support is buggy (many elements are not being scaled up or down correctly - especially in the Mac version)
There is no support for multiple assets to cover situations where you must have an image drawn for that resolution rather than scaled for it to look right
Some of the skinning features have not been updated to support retina scaling.
Many elements of the skinning engine are not rendering "to spec" causing glitches which may be acceptable with or not even applicable to many of the skins that MC is shipping with, but makes it impossible to have certain designs look correct.
Though I've already put in a lot of effort into creating a skin that attempts to look "native" in OSX Yosemite, without these bugs being taken care of I can't create a skin that renders correctly, and it's not worth putting any more effort in.
If I created a non-retina skin, or was creating a skin that was not trying to exactly match something else (the latest version of OSX) many of these could be overlooked.
It would be less work if I was drawing a "standard" non-retina skin, because you don't have to worry about it scaling correctly or being so precise with how you define many elements of the skin.
Fixing the rendering issues would significantly reduce the amount of work to create a "retina" skin since the ideal would be that you draw it for 4x size and it just works at any other scale.
Maybe you would have to draw a handful of icons at 1x and 2x scale for it to look its best, but ideally you'd just draw it once and that's it.
There are a few examples of the issues I ran into in this topic: https://yabb.jriver.com/interact/index.php?topic=92667
-
This kinda brings up one of my top pet peeves with the current skins like Noire. I think there's some room for improvements in the multiple platforms front with skins - it seems the platform names are too vague and don't specify specific editions. Example being this snippet from Noire;
I make you a deal, I will add a PlatformVersion element next to the existing Platform, and you provide me with images for Noire, matching style for 8/8.1 and 10? :D
-
I can in the original 100% size, sure. Sizes up to 4X for HiDPI *may* pose issues - I have to find if/where Windows stores those larger images. Or I need to find an artist (I can't draw, but I can edit pretty well!) to recreate them. :P
The Windows 10 ones I ripped out of the aero theme are here: http://yabb.jriver.com/interact/index.php?topic=97977.0
I'll dig out the 8.x ones from my archive drive. :)
P.S. If Mac is also on this list, I can also provide 1:1 stoplight icons for 10.10 (and assuming they're going to be used in 10.11), but again only at 100% original size - no HiDPI ones.
-
For official inclusion I would really need HiDPI variants. Maybe I'll see if i can dig them up.
-
It wouldn't be hard to just resize them though I'm not sure how well they'd look - probably fine for minimize, maximize and restore... but the close button uses a little anti-aliasing so not too sure.
I did however just rip the Windows 8.1 buttons while set to the largest DPI available on Windows.
-
Okay, here's the Windows 8.1 buttons ripped at the highest DPI available on Windows: https://www.mediafire.com/?38nn6415cbc9pba
It looks like all of them, including the close button, can just be resized bigger without any issue as needed, which is a good thing so it should be easy to integrate these.
Now on back to Windows 10 and see what can be done there...
-
They look like they are 200% size out of the box, which should be fine. I'll see what I can do with these.
-
Yeah, I'd just open them in paint.net and upscale them from 200% to 400% - should be no issue with those since no aliasing is involved. When I'm done with Windows 10, I'll upscale them all to 400% and reupload. :)
Windows 10 on the other hand... yeah, it'll take me a little bit but I think I can rip the 200% close button out of the aero theme. The other buttons are already ripped and ready and will upscale to 400% without issue.
-
Success, got the close button perfectly. Here's Windows 10's buttons at 200%: https://www.mediafire.com/?xyy70dmiaeox4l2
Honestly, MC should limit the size of these buttons to 200% regardless of the size specified to match the OS in this case.
Next, I'll start doing OS X 10.10 at 200%. :)
-
I'd advise caution spending a bunch of time doing Windows 10 specific skinning. Microsoft is still re-skinning pieces of Windows 10. They've already changed the notification area's "reveal arrow" and the Computer icon since the current public build.
-
True, but it only takes me less than an hour to re-rip the buttons. Speaking of, at 200% there's actually a couple bugs with the Windows 10 button images MS uses, which I fixed.
-
Okay, here's the skin ready 200% size Windows 8.1 images. Included are Minimize, Maximize, Restore and Close. :)
https://www.mediafire.com/?d8x2wj20x3yymkd
Sample (Windows 8.1):
(http://i.imgur.com/pNg4Mtf.png)
I'm about to make a clone of Noire and start some testing.
-
And here's skin ready 200% images for Windows 8.1 and Windows 10. Again all four are included for each.
https://www.mediafire.com/?2div534l6enuzxx
Sample (Windows 10):
(http://i.imgur.com/t5WBKGK.png)
-
Having the disabled button state be all blank seems weird (the 4th image). Not sure if its used at all for these buttons though, but I would rather have something there.
Good job so far.
How does the 10 look on Noire? I imagine it might not be perfect due to the dark color.
-
Ah, you're right. Maybe a greyed out button?
I got sidetracked by 10's images - I'll test that here in a bit. As for the dark color, I can make the first button of each white instead of black - they exist as white in both. :)
EDIT: Something like this work?
(http://i.imgur.com/EHSoe84.png)
-
True, but it only takes me less than an hour to re-rip the buttons.
Cool. As long as you're eyes-wide-open. ;D
-
Awesome,
Thanks for doing this. It's fun to watch.
Jim
-
Cool. As long as you're eyes-wide-open. ;D
Always am. ;)
Awesome,
Thanks for doing this. It's fun to watch.
Jim
No problem Jim, this really is fun to do too. :D
Anyways, here's the fixed Windows 8.1 200% buttons - comes in two flavors for lighter and darker skins which are skin ready, the source images for all of them and newly created disabled buttons for all of them.
http://www.mediafire.com/download/nlyf9pvs7n958j1/Windows8WindowButtons.zip
-
And here's the fixed Windows 10 200% buttons. Again they come in two flavors, is available as skin ready images for both dark and light skins, source images are included and disabled buttons were created for all of them. :)
Enjoy!
http://www.mediafire.com/download/5j0p9z1kbx7j7l1/Windows10WindowButtons.zip
-
I was successful at adding the Windows 10 buttons to a modified Noire - I won't embed the images as they're too big for the forums;
100% size: http://i.imgur.com/0jf0U97.png
200% size: http://i.imgur.com/KScwAwR.png
And here's the needed main.xml code;
<Entry Name="CloseButton" Platform="Windows" Bitmap="Close-Win10.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="42" OffsetY="2" Scale="2" />
<Entry Name="MaximizeButton" Platform="Windows" Bitmap="Maximize-Win10.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="-5" OffsetY="2" Scale="2" />
<Entry Name="RestoreButton" Platform="Windows" Bitmap="Restore-Win10.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="-5" OffsetY="2" Scale="2" />
<Entry Name="MinimizeButton" Platform="Windows" Bitmap="Minimize-Win10.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="-50" OffsetY="2" Scale="2" />
-
And finally here's Windows 8.1's buttons in the modified Noire. 200% looks good, but at 100% the images look blurry (especially maximize/restore, perhaps due to downsampling?) compared to how they normally look within Windows. Shame I can't specify different images for specific sizes (e.g. 100% and 200%).
100% size: http://i.imgur.com/J9e6u9H.png
200% size: http://i.imgur.com/4YuRcJ2.png
And main.xml's code;
<Entry Name="CloseButton" Platform="Windows" Bitmap="Close-Win8.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="42" OffsetY="2" Scale="2" />
<Entry Name="MaximizeButton" Platform="Windows" Bitmap="Maximize-Win8.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="-25" OffsetY="2" Scale="2" />
<Entry Name="RestoreButton" Platform="Windows" Bitmap="Restore-Win8.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="-25" OffsetY="2" Scale="2" />
<Entry Name="MinimizeButton" Platform="Windows" Bitmap="Minimize-Win8.png" NumberImages="5" Scale="2" Alignment="2" OffsetX="-49" OffsetY="2" Scale="2" />
-
At last, the buttons marathon is over! Here's the window buttons (aka stoplight buttons) for OS X 10.10 at 200%! They're available in skin ready PNGs and source images! I've tested this in a modified Noire - I know the menus overlap the buttons at 200% (normal Noire modded to show only Mac buttons does this too!), which seems to be a bug if you force the Mac skin on Windows (maybe Mac too?). Oh, and the skin ready PNGs have the space on the end - without it the buttons don't look correct, it seems. Also, it looks like these stoplight buttons won't change for OS X 10.11 either, so that's good news. :)
Download: http://www.mediafire.com/download/qanexqf8aqkgnqa/OSX10.10WindowButtons.zip
100% size: http://i.imgur.com/v6WOWRT.png
200% size: http://i.imgur.com/Gmk8BIm.png
And main.xml's code;
<Entry Name="CloseButton" Platform="Windows" Bitmap="Close-Mac10.10.png" NumberImages="5" Alignment="0" OffsetX="8" OffsetY="5" Scale="2" />
<Entry Name="MaximizeButton" Platform="Windows" Bitmap="Maximize-Mac10.10.png" NumberImages="5" Alignment="0" OffsetX="48" OffsetY="5" Scale="2" />
<Entry Name="RestoreButton" Platform="Windows" Bitmap="Restore-Mac10.10.png" NumberImages="5" Alignment="0" OffsetX="48" OffsetY="5" Scale="2" />
<Entry Name="MinimizeButton" Platform="Windows" Bitmap="Minimize-Mac10.10.png" NumberImages="5" Alignment="0" OffsetX="28" OffsetY="5" Scale="2" />
-
I've tested this in a modified Noire - I know the menus overlap the buttons at 200% (normal Noire modded to show only Mac buttons does this too!), which seems to be a bug if you force the Mac skin on Windows (maybe Mac too?).
The OSX version doesn't have a menu there, as the menu moves to the main OSX menu bar at the top of the screen, so thats fine.
200% looks good, but at 100% the images look blurry (especially maximize/restore, perhaps due to downsampling?) compared to how they normally look within Windows. Shame I can't specify different images for specific sizes (e.g. 100% and 200%).
Maybe I'll add that as well while I am at it, but the possible choices is getting quite complex, which makes me think I should add a new sub-element, as parsing a long list of top-level <Entry> elements with different conditions is going to get complicated in the code.
Platform alone was easy, since there are no alternatives, ie. its a simple true/false check, but if I add PlatformVersion and some kind of Scale-dependent condition, thats not so straight forward.
So, something like this (names not final)
<EntryGroup Name="CloseButton">
<ConditionalEntry Platform="Windows" PlatformVersion="6.2-6.3" Scale="1" Bitmap="Close-Win8-100.png" NumberImages="5" Alignment="2" OffsetX="42" OffsetY="2" />
<ConditionalEntry Platform="Windows" PlatformVersion="6.2-6.3" Scale="2" Bitmap="Close-Win8-200.png" NumberImages="5" Alignment="2" OffsetX="42" OffsetY="2" />
<ConditionalEntry Platform="Windows" PlatformVersion="10.0" Scale="1" Bitmap="Close-Win10-100.png" NumberImages="5" Alignment="2" OffsetX="42" OffsetY="2" />
<ConditionalEntry Platform="Windows" PlatformVersion="10.0" Scale="2" Bitmap="Close-Win10-200.png" NumberImages="5" Alignment="2" OffsetX="42" OffsetY="2" />
</EntryGroup>
This makes parsing and handling this easier, since I can just parse all elements inside the EntryGroup, evaluate their conditions, and then decide which of the entries to actually use for the style.
Especially for Scale this is important, since scale might be 1.5, and no perfect match exists - and I need to decide which of the images to use only after I know which options do exist.
Another question on that, should it just decide based on the existing "Scale" value, which doubles as the image scale for rendering, or should there be an explicit new option for the conditional behavior?
Using the existing Scale makes it a bit simpler, but it limits the flexibility a bit, since these things are directly tied together. But on the other hand, are you ever going to use ScaleCondition=1 with Scale!=1? Does that even make sense? Why not pre-scale all your assets perfectly?
On that topic, anyone want to express an opinion on how to select an image based on scale? What do I use for 1.5 scale in this example? Avoid upscaling, if possible?
I'm open to suggestions on how you feel the syntax might be best for this.
-
I would say that Media Center should select an exact scale if it exists, else it should pick the closest size up and scale down from that.
Scaling up should be a last resort if a high enough resolution image does not exist.
That way you can create a skin with 4x assets and only include specific elements at 1x or perhaps 2x scales.
Generally once you get above 100%, scaling down from a 4x image looks fine though, it just looks bad at 1x for certain items.
-
Thats what my thought would've been.
-
Same here, I'd avoid upscaling where possible. I'm thinking 2X would probably be the best limit, even at 4X since the OSes seem to have a limit with the window buttons at 2X anyways.
The OSX version doesn't have a menu there, as the menu moves to the main OSX menu bar at the top of the screen, so thats fine.
D'oh! I knew that. :P
The proof of concept looks great, I don't see any issue with that. But I have to ask, in Noire by default why is Scale="4" listed twice in each entry for Windows?
I'll start the creation of 1X sizes using my existing 1X sources, so it shouldn't take long but the placements will probably be a little different.
-
The proof of concept looks great, I don't see any issue with that. But I have to ask, in Noire by default why is Scale="4" listed twice in each entry for Windows?
Bug. Its XML, double attributes are just ignored. If they would have different values, that might end up fun.
-
Hmmm, might have to try that. :P
Anywho, here's the 1X scale buttons for Windows 8.1, Windows 10 and OS X 10.10 (just the skin ready PNGs this time). PlatformVersion for OS X can be set to 10.10-10.11 since the stoplight buttons are (currently) the same. :)
Download: http://www.mediafire.com/download/ob06cvqxoqg9m92/1XScaleWindowButtons.zip
Here's the placements in main.xml I currently use for each;
Windows 8.1:
<Entry Name="CloseButton" Bitmap="Close.png" NumberImages="5" Alignment="2" OffsetX="-3" OffsetY="0" />
<Entry Name="MaximizeButton" Bitmap="Maximize.png" NumberImages="5" Alignment="2" OffsetX="-49" OffsetY="0" />
<Entry Name="RestoreButton" Bitmap="Restore.png" NumberImages="5" Alignment="2" OffsetX="-49" OffsetY="0" />
<Entry Name="MinimizeButton" Bitmap="Minimize.png" NumberImages="5" Alignment="2" OffsetX="-75" OffsetY="0" />
Windows 10:
<Entry Name="CloseButton" Bitmap="Close.png" NumberImages="5" Alignment="2" OffsetX="-3" OffsetY="0" />
<Entry Name="MaximizeButton" Bitmap="Maximize.png" NumberImages="5" Alignment="2" OffsetX="-48" OffsetY="0" />
<Entry Name="RestoreButton" Bitmap="Restore.png" NumberImages="5" Alignment="2" OffsetX="-48" OffsetY="0" />
<Entry Name="MinimizeButton" Bitmap="Minimize.png" NumberImages="5" Alignment="2" OffsetX="-93" OffsetY="0" />
OS X 10.10:
<Entry Name="CloseButton" Bitmap="Close.png" NumberImages="5" Alignment="0" OffsetX="7" OffsetY="6" />
<Entry Name="MinimizeButton" Bitmap="Minimize.png" NumberImages="5" Alignment="0" OffsetX="26" OffsetY="6" />
<Entry Name="MaximizeButton" Bitmap="Maximize.png" NumberImages="5" Alignment="0" OffsetX="45" OffsetY="6" />
<Entry Name="RestoreButton" Bitmap="Restore.png" NumberImages="5" Alignment="0" OffsetX="45" OffsetY="6" />
-
This is coming along nicely. Scale-dependent lookup is already working, just need to build a parser for the OS version strings in the PlatformVersion field.
I'm thinking of supporting following syntax:
"6.3" - single match
"6.2-6.3" - range
"?-6.1", "10.0-?", open ranges
Not sure the last one is really needed, but its not making anything more complicated, so why not.
It'll only support two-component version numbers (so only 10.6, not 10.6.8), but that fine grained control really shouldn't be needed. Luckily versions are structured similarly between Windows and Mac (and Linux just doesn't apply).
If there is an entry without any PlatformVersion, its considered a fallback, and will only be used if none of the other entries match (ie. the current Close button will be the fallback, and the new ones use specific version strings in Noire).
Do we have a wiki page on Standard View skinning where I can document this? I should check.
-
There is, but it is old.
http://wiki.jriver.com/index.php/Category:Skinning
-
Anywho, here's the 1X scale buttons for Windows 8.1, Windows 10 and OS X 10.10 (just the skin ready PNGs this time).
First off, thanks, second, some comments on the Win8/Win10 versions.
I feel it looks slightly odd to have the close button overlap the outer skin border on Noire, because it gives it a sharp corner which isn't really supposed to be there.
I realize, standard Windows layout has the close buttons right to the top edge without any gap, but that doesn't really seem to work very well with our skin.
Oddly enough, the 2x scale versions didn't have this, they were positioning 2px further down, which is where i'll move these to as well probably.
Second point:
The 1x versions of the "normal" state in the "Light" Win8 version are grey, while the 2x versions are white. White seems to be the color I want for a dark skin, grey looks inactive.
An inconsistency here is also weird in general. :)
-
Second point:
The 1x versions of the "normal" state in the "Light" Win8 version are grey, while the 2x versions are white. White seems to be the color I want for a dark skin, grey looks inactive.
An inconsistency here is also weird in general. :)
Whoops, fixed: http://www.mediafire.com/download/7il5fcsic2jd66o/Windows8LightButtons1x.zip
-
Thanks.
I've added them and the required skinning changes to the next build, for Noire only. We'll see how it goes, and I can move them to other skins later.
Also for the main frame only, I was poking the other frames, but its not done yet. Maybe I'll get them done in time for the next build, we'll see!
-
and Linux just doesn't apply.
Haha, yeah, the elephant in the room. I've got an idea for this, not sure if how viable it is. Perhaps for Linux and other OSes in general where a match isn't detected could use the window buttons from the Noire Glass skin?
-
Haha, yeah, the elephant in the room. I've got an idea for this, not sure if how viable it is. Perhaps for Linux and other OSes in general where a match isn't detected could use the window buttons from the Noire Glass skin?
Linux is kinda cheating right now as it is, as it uses the Platform="Windows" entry (and with the new PlatformVersion, for "0.0"). We'll have to see once we decide to give it its own skinning platform. ;)
-
Linux is kinda cheating right now as it is, as it uses the Platform="Windows" entry (and with the new PlatformVersion, for "0.0"). We'll have to see once we decide to give it its own skinning platform. ;)
I'd be happy to get consistent behavior from clicking the maximize and minimize buttons in Linux (they don't work at all on the ARM builds, and only in some configurations on x86 linux) before we worry too much about how they look :P