INTERACT FORUM

Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1]   Go Down

Author Topic: Skin Icons Discussion  (Read 6296 times)

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Skin Icons Discussion
« on: August 11, 2022, 06:39:29 pm »

Replace/update the Clear Playing Now icon.

The current icon is exactly the same as the Playing Now icon (shown for the active track in detail lists) which is confusing. It is also the same icon used for Zones in the left-hand tree.  I attached a couple icons that may be good replacement candidates for the Clear Playing Now icon.

UPDATE: the first two icons I downloaded from public/free websites for icons.  I decided to create a third icon from scratch to provide yet another option
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72392
  • Where did I put my teeth?
Re: Skin Icons
« Reply #1 on: August 24, 2022, 05:50:17 pm »

HPBEME, Thanks for the icon!
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons
« Reply #2 on: September 04, 2022, 02:49:55 pm »

Replace/update the Clear Playing Now icon.

The current icon is exactly the same as the Playing Now icon (shown for the active track in detail lists) which is confusing. It is also the same icon used for Zones in the left-hand tree.

I agree, clearly a good idea.  In addition to the Clear Playing Now icon, the Add To Playing Now icon also needs updating.  Recently Played should be in a logically consistent style as well.

I favor (1) using monoline simplicity (2) including the solid play glyph, and (3) retaining the same dominant green background as the current Playing Now icon, with white line style, all for distinct recognition yet instant association as members of a group.  While not my personal case, I advocate designs which to some extent accommodate color vision deficiency and low visual acuity (many icons in the tree are excellent in this regard, but a few could stand improvement).

Attached are thoughts in three different styles based on combining glyphs from Microsoft's Segoe Fluent Icon Font.
https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font
FYI:  I designed these quickly in Inkscape on Win 11, which includes this font.
Any solution needs to be checked at very small scale for readability.
There may be issues for using these in a commercial product - that would need looking into.

Clear Playing Now 1:     F5B0 PlaySolid + EA99 Broom
Clear Playing Now 2:     F5B0 PlaySolid + F78A CancelMedium
Add To Playing Now 1:  F5B0 PlaySolid + ECC8 AddTo
Recently Played:           F5B0 PlaySolid + E823 Recently
etc.

In general, I wish MC would add Segoe Fluent and similar clear modern icons to most of their menus.

MC 29.0.86  Win 10/11 Pro (64-bit)
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: Skin Icons
« Reply #3 on: September 06, 2022, 09:48:08 pm »

I like markf2748's icons better than the ones I proposed.

To emphasize the caveat Mark noted in his post: previewing the proposed icons in a very large format is great, but it's hard to say for sure how discernible they will be when in actual use, given how small the icon is in practice. That needs to be considered/evaluated when picking a replacement.

I think a more important point Mark brings up is perhaps switching to an SVG style icon font.  Maybe the SVG format is not compatible with MC, but if it is, it may be worth looking into.  I am usually a big fan of color/eye candy in MC skins, but a well-designed mono color icon that is not enclosed within a "bordered button" (which forces the icon to be smaller) can be much more effective. I've included some examples below.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons
« Reply #4 on: September 07, 2022, 12:22:59 pm »

I am usually a big fan of color/eye candy in MC skins, but a well-designed mono color icon that is not enclosed within a "bordered button" (which forces the icon to be smaller) can be much more effective. I've included some examples below.
I think both solid color plates and mono have a place in MC, depending on context and importance.

But if you use color, then there must be sufficient contrast.  Some of MC's icons, especially with gradient color at a very small scale, fail miserably in this respect and have no place in a modern UI.  Contrast is often quantified by the Contrast Ratio, which should be at least 2.0 IMO for icons, while >3 is better.  The green play icons have CR ~ 2.1; making CR higher while keeping white foreground sacrifices "brightness" so there is a tradeoff.  Below I picked some of MC's icon colors and used https://webaim.org/resources/contrastchecker/ to measure CR.

Another small-icon design principle to which I subscribe is simplify, simplify, simplify while maintaining a recognizable meaning.  Many of the Segoe Fluent Icon glyphs do a great job of this.  They are now my de facto starting point:  I only combine them or depart when necessary.  For decades, Microsoft has put a ton of effort into developing clear computer fonts.  They keep evolving them, so why not take advantage and support working towards a universal symbology (like traffic signs) at the same time?  Note however there are limits - for example, in the 21st century I choose not to use the irksome archaeological floppy disc (E74E, E78C, E792) for "Save", though I admit it is challenging to find a device-independent replacement that will not be confused with "Download".  :)
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: Skin Icons
« Reply #5 on: September 08, 2022, 10:32:41 pm »

I think both solid color plates and mono have a place in MC, depending on context and importance.
I don't disagree with that at all… In fact, that was kind of what I was suggesting with my post, just not explicitly.  Where I think the monochromatic SVG font icons should be used/added, is next to the top level tree categories, just like it is shown in the screenshots I made from other programs (that shall remain nameless).

MC used to have icons next to each tree item category, but for some reason dropped them many years ago at this point. I personally would really like to see those come back (just as shown in the screenshots).  Instead, MC uses icons for the expanded list below the category item, which does not make a whole lot of sense, since the all the items in the expanded list use the identical icon (for a given tree category). Having unique icons for each unique tree category would be much more useful/helpful. IMO, the icons currently shown in the expanded lists could be removed with zero loss of clarity.

I am hoping this would qualify as a "too easy request" - if SVG icon/fonts are usable with MC it should be extremely easy to implement. All you would have to do is type in the Unicode for the appropriate font/icon as a prefix to the tree category text, and you're done. No reason to make/add special dedicated PNG icons, define how their placed, etc.
Logged

EnglishTiger

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 1075
Re: FEATURE REQUEST: Skin Icons
« Reply #6 on: September 10, 2022, 11:42:22 pm »

One of the advantages of having icons at the Sub-Category Level is the simple fact that some of the Sub-Categories, especially Files, appear in more than one Category. When the Tree is scrolled so that the Category heading is not Visible the presence of the Icon at the Sub-category heading gives an indication of which category the user is in, i.e. the user has opted to look at Files from the Video category and not those under Audio.

Implementing the use of SVG icons/fonts may appear to be a reasonably easy but it can/should only be done if they can be used on every platform that a version/variant of MC is available for. In addition, if it was implemented it would have to be optional to allow the user to choose between the 2 variants, as I cannot be the only user who dislikes those Monochromatic Icons the Modern Cards skins use.
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: FEATURE REQUEST: Skin Icons
« Reply #7 on: September 11, 2022, 12:29:57 am »

One of the advantages of having icons at the Sub-Category Level is the simple fact that some of the Sub-Categories, especially Files, appear in more than one Category. When the Tree is scrolled so that the Category heading is not Visible the presence of the Icon at the Sub-category heading gives an indication of which category the user is in, i.e. the user has opted to look at Files from the Video category and not those under Audio.
That is a good point. I'm not so much against having icons for the lists items, but I would like to see the icons used at the top category level (like MC used to do) as I find those icons useful for my own workflow.

Implementing the use of SVG icons/fonts may appear to be a reasonably easy but it can/should only be done if they can be used on every platform that a version/variant of MC is available for. In addition, if it was implemented it would have to be optional to allow the user to choose between the 2 variants, as I cannot be the only user who dislikes those Monochromatic Icons the Modern Cards skins use.
Well as I said in my post, typically I don't like monochromatic… I am a fan of color and eye candy... but... I think the icons I referenced in my screenshot are really well-designed and look great. I much prefer icons that aren't on top of a "button" because that just forces them to be smaller to fit within the border.  And as I also said, if a monochromatic SVG font icon is not workable or desired, then at least make the current icons function like the toolbar. Which is, by default they are transparent and blend with the skin, but then show their full-color on mouse over. There's also an option for the toolbar icons to remain full-color all the time. Just saying that these would be nice options for the tree menu as well.

As for all the modern cards skins and their generic looking icons… I agree… I never use those skins because to me they are just plain boring. That said, apparently a lot of people like them - fortunately there are lots of other colorful skin options.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: FEATURE REQUEST: Skin Icons
« Reply #8 on: September 12, 2022, 01:24:56 pm »

For consideration, attached are first-cut icon samples displayed at actual size and resolution from a screen shot (Dell 24" monitor U2412 1920x1200, MC View>Size>100%).  All created out of Segoe Fluent Icons font in a flat minimalist style.  I attempted to maximize readability while using high-contrast solid-color plates at this very small scale.  To me they are clearer than the current defaults shown above (Reply #4) from Thunderstorm skin.  There may be cross-platform licensing issues to resolve.

After staring for a little while, I can already see small ways to improve some, but they illustrate the general idea.

Also noticed in the Customize Toolbar:
-- Rename Move & Copy Files has same glyph as Tag.
-- The Rip Disc glyph is different in Action Window and Customize Toolbar

I'm not so much against having icons for the lists items, but I would like to see the icons used at the top category level (like MC used to do) as I find those icons useful for my own workflow.
It is a basic design choice.  Some feel that a large bold header does not need an icon, that the icon does not really add much and may even be a negative in terms of overall simplicity and clarity.  Others may prefer the icon, but then it better be general enough to cover all the bases of the header.

Updated 9/26/2022:  Add "proposed 3" screenshot with larger action circles for clarity.

Personal comment on the old "Burn Disc" icon:  The nuclear symbol is no longer cute in today's world.
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: FEATURE REQUEST: Skin Icons
« Reply #9 on: September 12, 2022, 03:04:10 pm »

Nice work… I like those a lot. Give these new tree icons the ability to be transparent by default (or "dimmed" in the vernacular of the toolbar options) and full-color upon mouse over, and we have perfection. 

Let's do it!
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72392
  • Where did I put my teeth?
Re: FEATURE REQUEST: Skin Icons
« Reply #10 on: September 13, 2022, 01:03:40 am »

Please move all discussion out of this thread.
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: FEATURE REQUEST: Skin Icons
« Reply #11 on: September 13, 2022, 10:02:29 am »

ummm... what? We are not allowed to discuss icons?
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72392
  • Where did I put my teeth?
Re: FEATURE REQUEST: Skin Icons
« Reply #12 on: September 13, 2022, 10:31:06 am »

It clutters up an otherwise useful thread.  Discussion in another thread, please. 
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Skin Icons Discussion
« Reply #13 on: September 13, 2022, 11:32:14 am »

I think there's some major confusion going on here. I originally made this post/suggestion in the MC 30 beta board. After several people responded and I replied to them and it became a discussion, you understandably moved it... to the general MC 29 board... presumably so it could be discussed.

But now you want to move this again? To where?

To be clear, I have an essentially identical standalone post I put on the MC 30 general board for Feature Requests here:https://yabb.jriver.com/interact/index.php/topic,133694.50.html, where it remains as a request only and undiscussed (see post#64).

To remove any doubt about this specific thread, I removed Feature Request from the subject line and renamed it to Skin Icons Discussion. Hopefully this is satisfactory.
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72392
  • Where did I put my teeth?
Re: Skin Icons Discussion
« Reply #14 on: September 13, 2022, 12:32:28 pm »

I'm sorry.  I saw the subject and thought it was the MC30 Feature Request thread.

Carry on.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #15 on: September 29, 2022, 06:38:19 pm »

 :) Carrying on... here are my new top-level Tree Icons based on Segoe Fluent Icon Font (SFIF) (Audio unchanged), displayed in View>Skin>ThunderStorm.  For a little pop, and to subtly enhance contrast, the color plates include a gentle vertical linear HSL gradient (fixed Hue, 100% Saturation, gradient in Lightness only).

The Smartlist icon updates MC29's default by combining SFIF EA80 Lightbulb with List Lines.  Again I emphasize modern simplicity to improve readability at very small scale.  In the Images tier of the tree I replaced the Camera icon with SFIF E91B Photo (could also use SFIF E8B9 Picture).  That seemed more appropriate since in this image library I store album artwork rather than my own photography.  Also icons resembling E91B are ubiquitous for pictures nowadays, while the camera typically represents a device, like a cell phone camera.

To try these for yourself, see Marco's old post:
https://yabb.jriver.com/interact/index.php/topic,56830.msg385670.html#msg385670
Then use my two attached files which of course use 64x64 px: (1) SmallIcons.png and (2) Images.xml.txt renamed to Images.xml.
You may need to end process/restart both Media Center and Media Center Server for the changes to take effect.

MC 29.0.87   Win 11 Pro (64-bit)
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #16 on: October 01, 2022, 01:39:26 pm »

Updated/extended previous post attachments, with SFIF E716 People replacing the old artist icon and cleaned up:

Playlists:
* I'm using SFIF F168 Grouplist to represent a collection of Playlists or Smartlists, distinct from the Playlist or Smartlist icon itself.  I think it helps.
* The Playlist and Smartlist icons are clearly distinguishable in both shape and color, yet have consistent 3-line lists in common.  They can be tweaked for extra room in the lower right corner, for example as shown for a large Playlist Favorites star.  Similarly, large "+" Action Circles can be added for their Custom Toolbar icons.

 Drives & Devices:
* Replaced the old multi-color Compact Disc icon with a simple custom monochrome icon which depicts the CD Drive instead of the CD Media.
* Replaced the old narrow official USB icon with cleaner SFIF E88B USB, which in my mind better represents generic attached devices.
* Replaced old hard-to-read Explorer icon with SFIF EC4E ThisPC.

Attached are my 256x256 ViewHeaderXX.png icons.  They reside in the MC installation folder .../Data/Custom Art
Note: MC appears to conflate labeling between USB devices and Handheld devices.  So I used the USB icon (SFIF E88B) in ViewHeaderHandheld.png in order to get an appropriate View Header for my external USB drives, instead of SFIF E772 Devices.
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: Skin Icons Discussion
« Reply #17 on: October 04, 2022, 11:49:22 pm »

Nice work on all these icons Mark.  It is not my personal style preference, but I can appreciate the effort.  If I somehow manage to magically find the energy and time, I might produce a similar set using an icon style I have mentioned in previous posts, i.e., icons without any button background.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #18 on: October 06, 2022, 07:01:45 pm »

I just updated 10 icons in the Options menu in a proposed modern style with color plates, and added a few more new icons elsewhere.  The new icons also appear in the Customize Toolbars menu.  All tested to work with skin ThunderStorm.

Attached is my whole set of 64x64 px icons (which includes some unchanged old ones mixed in).  As usual, to try them drop all three of the attached PNG files into MC installation folder .../Data/Custom Art .
If you use my SmallIcons.png, then download and rename the attached Images.xml.txt to Images.xml and drop into folder .../Data/Custom Resources .
For changes to take effect, use Windows Task Manager to End Process for both Media Center and Media Center Server, then relaunch MC.

I might produce a similar set using an icon style I have mentioned in previous posts, i.e., icons without any button background.
It would be straightforward to turn the color plates into monochrome solid, PNG transparency, or remove them entirely, and apply a contrasting foreground color to the line art, all in the individual icon SVG files.  Then reassemble them into new PNG files for ...Data/Custom Art .  Another approach (maybe this is what you are suggesting):  For icons that have select-able state, simplify by removing the plate/button altogether, show the selected state by filling the icon with color, show un-selected state by removing color fill leaving just the outline.  That could be tried now for MC's dual state icons such as the Playing Now/Playing from... and maybe to some extent for the Custom Toolbar icons.

I find it interesting to look at Microsoft's design for static icons in the Win 11 22H2 Settings menus:  top level icons are filled color without plates/buttons, while sub-menus are simple clean monochrome (lots of SFIF :)).  Other Win menus, such as Control Panel, include a hodge-podge of legacy colored artwork icons (some way too complex for small scale) with occasional plates/buttons.  I still favor updating MC to simplified modern artwork while evolving the MC style.

Apparent Bug (?):  Custom Art for MC's new icon <ClearPlayingNow> does not get picked up from my ../Data/Custom Art/SmallIcons.png, so my custom ClearPlayingNow icon does not show up in the Custom Toolbars Menu.  AFAICT this is a MC bug.
Temporary Workaround: If desired, overwrite the <ClearPlayingNow> image in MC30's .../Default Art/SmallIcons.png with my updated "broom" icon attached below.

MC30.0.15  Win11 22H2 (64-bit)


Logged

mvandyke

  • World Citizen
  • ***
  • Posts: 159
Re: Skin Icons Discussion
« Reply #19 on: October 08, 2022, 03:51:37 pm »

I tried the install process and go the options to work properly but not the other two.  Your images.xml file has images out of order - is that correct?

Will try a couple of other things.  Thanks for the work.
Logged

mvandyke

  • World Citizen
  • ***
  • Posts: 159
Re: Skin Icons Discussion
« Reply #20 on: October 08, 2022, 04:56:00 pm »

I got it "working".  It's all based on the skin.  If you use Thunderstorm all works good.  I happen to be using the Modern Cards (Dark, grey or white) and it doesn't work. 

All other ones seem to work OK.

Will take a look at the skin code and see if I can figure out.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #21 on: October 08, 2022, 05:05:48 pm »

@mvandyke - Glad to hear you got it working and thanks for the feedback!  Since I already wrote up a response, I thought I'd post (and perfect) it anyway :) .... I also attach here two simple modern, very direct ClearPlayingNow icons: the first one, which I currently use, has a color plate; the other is filled without a plate.

I tried the install process and go the options to work properly but not the other two.  Your images.xml file has images out of order - is that correct?

Will try a couple of other things.  Thanks for the work.
I just downloaded the files and tried on a different installation of MC 30 - all worked perfectly using the ThunderStorm skin.

The details:

(1) If not already present, create two custom data folders.  On my installation:
C:/Program Files/J River/Media Center 30/Data/Custom Art
C:/Program Files/J River/Media Center 30/Data/Custom Resources


(2) Download options.png and ActionWindowNavigation.png and drop them into .../Custom Art.
Close MC and insure with Task Manager that Media Center 30 and Media Center Service are not running.  Then start MC and you should see new icons in the left panel Action Window and in Tools > Options left panel.

(3) Download SmallIcons.png and drop it into .../Custom Art.
Download [Images.xml.txt.  Rename it to Images.xml and drop into .../Custom Resources.  It remains a human-readable text file.
Restart as in (2) and you should see new icons in Tree panel, as well as in both panels of the Customize Toolbar window.

(4) Download my ViewHeaderXX.png files and drop into .../Custom Art to establish consistency between the Tree's small icon and the large icon in upper left corner of respective views.

Your images.xml file has images out of order - is that correct?
It's fine.  Images.xml is MC's "resource key" to the icons listed in SmallIcons.png.  Each XML Start Tag - End Tag set <...>n</...> encloses an integer n pointing to the 0-based icon list count in SmallIcons.png.  The tag order within Images.xml does not matter, as long as the spellings and syntax are exactly correct.  If there are errors, then I find MC drops back to its default small icons.
Note:  To solve the resource names <...> puzzle, I examined MC's default versions of these two files in .../Data/Default Resources and .../Data/Default Art.  Then I confirmed my guesses by trial and error with the custom versions.

Note the caveat described in MC30 Feature Request https://yabb.jriver.com/interact/index.php/topic,133694.msg929271.html#msg929271

Update 10/22/2022:
New <ClearPlayingNow> icon with "X" = "Clear/Cancel/Close"  SFIF E894/E711/F78A/E8B3/EF2C, which I think is a better fit.  The previous symbol "-" resembles ECC9 "RemoveFrom".  Note:  I do not use "X" in a small black Action Circle since that generally signifies "Error" in SFIF.


Update 11/10/2022:
Replaced previous (Reply #16) ViewHeaderLibrary.png and ViewHeaderLibraryInactive.png 256x256 with those attached here.  The new ones mimic the state of the small icons currently used in the Playing Now > Playing from ... list.



Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #22 on: October 13, 2022, 03:01:41 pm »

Since there is a lot of interest in this thread (over 600 views as of today), I will take the liberty to post the rest of my ViewHeaderXX.png icons and updated/expanded smallIcons.png, images.xml.txt, and options.png.  Kudos to JRiver for building in the flexibility to accommodate these customizations.

Part 2/2

10/15/2022 Updated ViewHeaderPlaylist.png (4 lines + Blue plate = Playlist; 3 lines + Aqua plate = Smartlist; Playlist group retains blue plate for both Playlists and Smartlists)
10/18/2022 Added rounded rectangle to ViewHeaderDownload.png, indicating files captured from the cloud.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #23 on: October 13, 2022, 03:06:41 pm »

Since there is a lot of interest in this thread (over 600 views as of today), I will take the liberty to post the rest of my new ViewHeaderXX.png icons and updated/expanded smallIcons.png, images.xml.txt, and options.png.  Kudos to JRiver for building in the flexibility to accommodate these customizations.

Part 1/2

10/14/2022 Brightened the Video icon line art color to pure white.  Added three new SFIF F5B0 PlaySolid icons for PlayingNow. Dimmed the line art color for PlayinNowInactive icon.
10/15/2022 Added new icon for Playlists>RecentlyImported (which also appears for Playlists > Recently Ripped).  Apply color and line convention for Playlist icons:  4 lines + blue plate = Playlist; 3 lines + aqua plate = Smartlist; PlaylistGroup has blue plate for both Playlists and Smartlists since only a single resource is available for groups.
10/18/2022 Added rounded rectangle to <DownloadManager> icon in SmallIcons.png, indicating Services & Plug-ins > Downloads are files captured from the cloud.
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: Skin Icons Discussion
« Reply #24 on: October 16, 2022, 07:51:51 am »

Hey Mark, I somehow missed the notification for all these new posts by you.  What an incredible amount of work you've done, and very generous to share… Thank you! Sure hope the JRiver team has taken note as well.

It would be straightforward to turn the color plates into monochrome solid, PNG transparency, or remove them entirely, and apply a contrasting foreground color to the line art, all in the individual icon SVG files.  Then reassemble them into new PNG files for ...Data/Custom Art .  Another approach (maybe this is what you are suggesting):  For icons that have select-able state, simplify by removing the plate/button altogether, show the selected state by filling the icon with color, show un-selected state by removing color fill leaving just the outline.  That could be tried now for MC's dual state icons such as the Playing Now/Playing from... and maybe to some extent for the Custom Toolbar icons.

Perhaps it is straightforward, but with well over 100 icons that I would want to update, that strikes me as a very large task - something that would take me many days to do. Admittedly, I'm no image-editing wizard, and maybe you have some advice for how to batch process all this. I don't have Photoshop - I use a free/open source image editor that is reasonably powerful (paint.net). I guess I could make a copy of all the small icons, convert all the colors to black and white, and then presumably I could filter on black for a transparency mask? Not really sure, as most of the image-editing I do is very basic. Any guidance you could provide would be appreciated.

I find all the full-color tree icons to be distracting and somewhat gaudy. If JRiver would add the same option for tree icons that is available for toolbar icons (remain colorless/transparent until you hover over them, and then fill with color), that would solve the "problem".  I think I will add this to the MC 30 feature requests thread, and then cross my fingers they choose to implement it.

That said, creating a brand-new icon set without the background "plate" would absolutely be a nice addition to JRiver… I am just not sure I'm up for expending the effort to create it.  Seems like those on the payroll might want to consider it though ;D.  Unfortunately, since this is an MC 29 thread, I imagine the monitoring of and interest in, is greatly diminished.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #25 on: October 19, 2022, 12:02:41 am »

Perhaps it is straightforward, but with well over 100 icons that I would want to update, that strikes me as a very large task - something that would take me many days to do. Admittedly, I'm no image-editing wizard, and maybe you have some advice for how to batch process all this. I don't have Photoshop - I use a free/open source image editor that is reasonably powerful (paint.net). I guess I could make a copy of all the small icons, convert all the colors to black and white, and then presumably I could filter on black for a transparency mask? Not really sure, as most of the image-editing I do is very basic. Any guidance you could provide would be appreciated.
I've customized about 65 MC icons so far, which covers everything I currently use, and that was a large task.  The initial time consuming part is learning the SFIF language and then evolving the designs to a simple form, plus deciphering MC's resource xml files.  Icons are created in the vector drawing program Inkscape (*.svg files) in a 64x64 pixel document size for small icons and exported at 1x scale as png, then reassembled into png strips with Gimp (both free programs).  At this point it would take me about 2 minutes per *.svg icon file to convert the color plates to transparency and re-export.  Maybe 1-2 hours to reassemble into new strips.

I fooled around in Gimp with your idea for batch processing my png strips and got as far as converting most colors to a black background, then became a little concerned about affecting the anti-aliasing.  As you suggest, it should be possible to use the black and white strip image as a transparency mask, and then change the line art color if necessary.  If you start with some other icons that are already monochrome, then I expect the most time consuming part would be getting them into acceptable 64x64 image files (a program like IconView may help https://www.botproductions.com/iconview/iconview.html).  Once you have those, doing the transparency individually should be quick, after the workflow is established.

I find all the full-color tree icons to be distracting and somewhat gaudy. If JRiver would add the same option for tree icons that is available for toolbar icons (remain colorless/transparent until you hover over them, and then fill with color), that would solve the "problem".  I think I will add this to the MC 30 feature requests thread, and then cross my fingers they choose to implement it.
Personal taste I suppose.  I'm OK with tree icons always visible, as discussed in earlier posts of this thread, as is ET (Post #6).

I like bright colors, but I realize they can be distracting, even disturbing, in a menu tree for some people.  Colors could be tamed down a bit, subject to maintaining decent contrast.  For example, the top level Windows 11 22H2 Settings Menu mainly uses soft pastel blue and green filled icons with some brighter highlights sprinkled in.  That's Microsoft addressing the least common denominator of millions (1.4 billion?) worldwide, trend-setting backed by their extensive (and respectable) UI research.  (BTW reminder: it's important that normal color vision not be required to interpret an icon's meaning.)

It's very interesting to look at the icons in Inkscape 1.2.  Their Multicolor theme icons are mainly white + gray on a dark skin, with judicious use of color fill and color line work.  Remarkably, their Edit > Preferences > Interfaces > Theming dialog window (also see Toolbars dialog) allows user selection of many icon parameters, including four different icon themes, icon colors, monochrome icons, icon size, contrast, user-defined icon directory, etc.  I believe this interface represents a paradigm shift, truly leading the state of the art.

For some people, there is a "coolness factor" associated with simple monochrome.  Pure music players like foobar2000 and MusicBee have no icons other than album covers and the usual player controls, but MC's rich multi-media feature set benefits from icons.

Styles & fashion keep evolving, by definition.  Some users may prefer the current "classic", while others, like myself, really prefer something newer.  Perhaps MC could provide a choice of icon sets and options, following in the footsteps of Inkscape.   Now and then JRiver could delight customers with an optional new icon set.  :)
Logged

EnglishTiger

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 1075
Re: Skin Icons Discussion
« Reply #26 on: October 19, 2022, 03:06:45 am »

Guys - The reason why markf2748's Icons do not appear with any of the Modern Cards Skins is because those Skins take a different approach.
Instead of placing the "Customised Icons" files ActionWindowNavigation.png, OptionsTree.png, SmallIcons.png & Images.xml in the Custom Art Folder they are in the same folder as the skin to prevent them affecting, or appearing in, any other skin.

The only problem with the putting the Smaller Icons in the Skin Folder approach is that the Skin Creator is stuck with having to use the Default Set of 256 x 256 Icons as there is no way of preventing customised versions of those Larger Icons affecting, appearing in, other Skins
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72392
  • Where did I put my teeth?
Re: Skin Icons Discussion
« Reply #27 on: October 19, 2022, 08:06:14 am »

Thanks for your work, markf2748!
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #28 on: October 19, 2022, 11:50:21 am »

Guys - The reason why markf2748's Icons do not appear with any of the Modern Cards Skins is because those Skins take a different approach.
Instead of placing the "Customised Icons" files ActionWindowNavigation.png, OptionsTree.png, SmallIcons.png & Images.xml in the Custom Art Folder they are in the same folder as the skin to prevent them affecting, or appearing in, any other skin.

The only problem with the putting the Smaller Icons in the Skin Folder approach is that the Skin Creator is stuck with having to use the Default Set of 256 x 256 Icons as there is no way of preventing customised versions of those Larger Icons affecting, appearing in, other Skins
Thanks a bunch ET.  That would explain one of the lingering questions initially raised by @mvandyke back in Post #20 about Modern Cards Skins.  I have not done it, but I suppose MCS users who want to try my new icons could replace the corresponding files in the MCS directory.

Thanks for your info about Larger Icons.  I've attached small versions (64x64, for easy viewing here) of the three Larger Icons (512x512) which I use for missing thumbnails.  They are straight enlargements of SFIF E91B Photo, E714 Video, and EC4F MusicNote with stroke size adjustments for slightly thicker lines.   These replace the traditional large red camera and purple "legged" video camera icons.

Finally I bit the bullet and added a new <MediaTypeAudio> icon to SmallIcons.png and Options.png based on SFIF EC4F MusicNote for consistent style throughout.  Loving it.

Update 10/22/2022:  New icon for <AnalyzeAudio>, uses SFIF E9D9 Diagnostic.

Logged

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 9128
Re: Skin Icons Discussion
« Reply #29 on: October 19, 2022, 11:53:02 am »

Guys - The reason why markf2748's Icons do not appear with any of the Modern Cards Skins is because those Skins take a different approach.
Instead of placing the "Customised Icons" files ActionWindowNavigation.png, OptionsTree.png, SmallIcons.png & Images.xml in the Custom Art Folder they are in the same folder as the skin to prevent them affecting, or appearing in, any other skin.

The only problem with the putting the Smaller Icons in the Skin Folder approach is that the Skin Creator is stuck with having to use the Default Set of 256 x 256 Icons as there is no way of preventing customised versions of those Larger Icons affecting, appearing in, other Skins
A while ago, I tried them all, and, these were the only ones I found, then, that were recognised by the skinning engine:
Code: [Select]
<ART>
<Entry Name="ActionBarNavigation" Bitmap="Art_ActionWindowNavigation.png" />
<Entry Name="AutomaticPlaylistBackground" Bitmap="Art_AutomaticPlaylistBackground.png" />
<Entry Name="DropHere" Bitmap="Art_DropHere.png" />
<Entry Name="OptionsTree" Bitmap="Art_OptionsTree.png" />
<Entry Name="SmallIcons" Bitmap="Art_SmallIcons.png" />
<Entry Name="Transceiver" Bitmap="Art_Transceiver.png" />
<Entry Name="Options" Bitmap="Art_Options.png" />
<Entry Name="TaskbarButtons" Bitmap="Art_TaskbarButtons.png" />
</ART>

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: Skin Icons Discussion
« Reply #30 on: October 20, 2022, 09:08:37 pm »

So I finally got around to trying to make icons without a background, and it turned out to be way easier than I ever would've imagined. Below is the result when used with my Dream In Blue skin.  To my eyes, this looks way better than the default icons. If I ever get around to uploading the updated skin (which has numerous improvements) these icons will be what it uses.
Logged

MusicBringer

  • Galactic Citizen
  • ****
  • Posts: 438
  • MC33.0.30 x64bit
Re: Skin Icons Discussion
« Reply #31 on: October 21, 2022, 01:24:21 am »

Dream In Blue skin, umm yes it does look the part.
I am keen to get this and give it a butchers hook when uploaded.
Logged
Caesar adsum jam forte. Brutus aderat. Caesar sic in omnibus. Brutus sic inat.

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #32 on: October 25, 2022, 12:10:17 am »

So I finally got around to trying to make icons without a background, and it turned out to be way easier than I ever would've imagined.
Thanks for the inspiration.  Some thoughts on simplifying my own workflow for creating new icons (second round hindsight, untested):
  • All work is done within Inkscape, both creating the icons and building the icon image strips as I go.  No requirement to export individual icon PNGs for import and assembly in Gimp, though it's nice to export the individual PNGs for viewing  thumbnails in Win Explorer.
  • It can be helpful to import MC's strips at scale, as background templates.
  • I build at least two parallel strips within the SVG file.  One with different color plates as before.  The other, with mostly identical artwork, have their color plates assigned the same Label.  Searching on the label allows all the second strip's plates to be selected at once for immediate common color and transparency control across the whole strip.
  • Each strip is separately exported as a PNG for MC Custom Artwork.  All the strips within the same SVG file use the same Custom Resources images.xml file.
I will pursue this to completion as interest and time allows, also depending on how JRiver responds to the icon issues raised, including the updated MC30 feature request:
https://yabb.jriver.com/interact/index.php/topic,133694.msg929729.html#msg929729
Logged

HPBEME

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1085
  • Goodnight and Good Luck
Re: Skin Icons Discussion
« Reply #33 on: October 25, 2022, 12:57:55 pm »

Thanks for the inspiration.  I have now greatly simplified my own workflow for creating new icons (second round hindsight):
In the event you're interested, here is some additional information regarding making all the existing MC icons "white" without no background. I did essentially what I mentioned in my previous post. That is:
  • Copied MC's Smallicons image file from the installation Default Art folder to my Dream in Blue skin folder.
  • Used paint.net to change all icons shown in the image "strip" to black and white
  • Used the "magic wand" tool to automatically select the "background plate", and then hit delete, leaving transparency in its place.
  • I could select for five or six icons at a time, apply the magic wand tool, and it generally did a very good job leaving behind exactly what I wanted.
  • In some instances I had to adjust the tools tolerance value so it did not delete the image itself
  • A smattering of partially transparent pixels were left behind throughout the strip, but I just manually deleted those where clumped together in larger patches
  • All said and done, the whole process only took about 15-20 minutes
Now creating new icons, or finding new ones online to modify... That would take a lot more time, and I did not do that.  That said, since my previous post, I am developing some new icons to replace a handful of MC's existing ones that are either duplicative for different functions, or the icon is not very representative (IMO) of the underlying function.  I do think the pure white icons look really good with my Dream in Blue skin, however, I don't think all white would look right with any of the other skins.

One other tip… The strip height is nominally 64 pixels. I increased that to 100 pixels keeping the aspect ratio locked. This results in having one icon every hundred pixels, making it infinitely easier to find a specific icon. For example, if I want to edit/replace the cloud play icon in the 83rd position (as specified in the images.XML file), I don't have to calculate 83 x 64 (=5312) and center a new icon exactly between pixels 5312 and 5376!  Instead, icon 83 is at pixel 8300 (83rd icon x 100) on the image editor ruler.  Every icon is simply a multiple of 100. You don't even need to change it back to 64 pixel height when you are done - MC automatically downsizes the icons as needed in the skin itself.

As for Inkscape, I tried that program out several years ago. It seems very powerful, so much so I wasn't up for expending the effort needed to become proficient. Same thing for Gimp. But as you noted, when time and interest allows, I may take another look.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #34 on: October 29, 2022, 09:29:51 pm »

Attached files contain 22 additional updated icons for SmallIcons.png / Images.xml (64 icons total),  as well as new icons for TheaterView and RemoteControl in Options.pngActionWindowNavigation.png and ViewHeaderXX.png are unchanged from previous posts.

When installed in the standard way described above, this color-plated icon set works, even at relatively small scale, for all skins listed in View>Skin>... except for the three Modern Cards and Twilight skins.

I do not see how to access some remaining icon resources as described in the MC 30 Feature Request
https://yabb.jriver.com/interact/index.php/topic,133694.msg929729.html#msg929729


10/30/2022 Revised the <QuickSearch> icon.
11/1/2022 <Smartlist> & <AddPlaylist>: simplify by removing unnecessary music note, use 3 list lines intead of 4; <TopHitsPlaylist>: hollow pointy star to distinguish from Favorites star; strengthen "+" signs, etc. for other playlist and smartlist icons.
Post the new SmallIcons.png (for easy compare) and the updated ViewHeaderPlaylist.png
11/3/2022 Replaced all icons in SmallIcons.png which contain a playlist graphic so they now use SFIF EA37 List (three unequal length lines instead of three equal length lines) in order to avoid confusion with the ubiquitous three-line icon for opening a menu.  Corresponding replacements applied to ViewHeaderPlaylist.png and ActionWindowNavigation.png.
11/7/2022 Corrected the <Smartlist> icon in the SmallIcons.png which posted on 11/3/2022.


MC 30.0.26  Win 11 22H2 64-bit




Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #35 on: November 09, 2022, 02:41:15 pm »

Here is a style which cools down the tree without going plain monochrome:
  • All accessible Tree icons (except Media Network) use colored line art on a dark grey background plate which matches the tree background for ThunderStorm skin (and hence the plate disappears there).
  • I use a skin-matching plate instead of transparency so that tree icons retain good contrast if added to the top Custom Toolbar, which has a light background color in ThunderStorm.  The plate also guarantees visibility on other skins, though background and line color may need to change color to implement a disappearing act while maintaining high artwork contrast.
  • The 256x256 ViewHeaderXX.png are colored to match this style (see update to Reply #21 for two more examples https://yabb.jriver.com/interact/index.php/topic,133908.msg929129.html#msg929129).
  • Small non-tree icons retain their previous brightly colored plates with white artwork for the Custom Toolbar, Options, and Action Window.
  • The attached SmallIcons.png works with Images.xml provided in the previous Reply.
I kind of like this one at the moment.

One could of course carry this to its logical minimalist conclusion by using small bullet symbols in the tree lists.  For example: circle=Audio, rectangle=Images, asterisk=Video, tilda=Streaming, long dash=Playlist, caret=Smartlist, double dash=Playlist Group.

All of this speaks to allowing the user to select from a variety of icon sets.

Update 11/11/2022:  Corrected artwork color for <AddPlaylist> icon in SmallIcons.png and updated Customize Toolbar screenshot.
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #36 on: November 15, 2022, 03:42:59 pm »

One could of course carry this to its logical minimalist conclusion by using small bullet symbols in the tree lists.
Attached is a bulleted tree list style using small outline symbols.
I really like this one - it covers the core functionality of the Tree in a very clean minimalist look enhanced by color but not dependent on it.
AFAIK this is a fresh new appearance for the MC Tree.
MC 30.0.30  Win 11 Pro 22H2

Update 1/14/2023 Replace ActionWindowNavigation.png (after it accumulated 21 views) with new version which has a shorter dash for the Build Playlist icon, making it more consistent with the tree's Playlists section.
MC 30.0.48  Win 11 Pro 22H2
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #37 on: November 18, 2022, 10:50:36 am »

Guys - The reason why markf2748's Icons do not appear with any of the Modern Cards Skins is because those Skins take a different approach.
Instead of placing the "Customised Icons" files ActionWindowNavigation.png, OptionsTree.png, SmallIcons.png & Images.xml in the Custom Art Folder they are in the same folder as the skin to prevent them affecting, or appearing in, any other skin.

The only problem with the putting the Smaller Icons in the Skin Folder approach is that the Skin Creator is stuck with having to use the Default Set of 256 x 256 Icons as there is no way of preventing customised versions of those Larger Icons affecting, appearing in, other Skins

Please make it possible for Skin Creators to be able to use Modified Versions of the 15 ViewHeaderxxxxx.png and Zone.png 256x56 Icons on a skin-by-skin basis by holding them in the Skin Folder in the same way we can with the smaller (64x64) icon sets.

@ET - Thanks for those posts.  Today's MC 30.0.33 release addresses the issue you raised in these, so I expect we'll be seeing some interesting new Icons and View Headers in future skins! :

30.0.33 (11/17/2022)

1. NEW: View header images can be customized by the skin (Image > ViewHeaderDrivesDevices, ViewHeaderServicesPlugins, ViewHeaderDownload, ViewHeaderPlaylist, ViewHeaderPodcast, ViewHeaderDLNA, ViewHeaderExplorer, ViewHeaderScheduler, ViewHeaderWebMedia, ViewHeaderHandheld, ViewHeaderCD, ViewHeaderLibrary, ViewHeaderLibraryInactive, ViewHeaderReporter, ViewHeaderTelevision).

Update 11/27/2022
(1) New ViewHeaderServicesPlugins.png attached.  The monochrome icons shown in its bottom row are now mimicked in monochrome within their respective View Headers, and match their Tree icons (where they are of course identified by name).
(2) New SmallIcons.png and Images.xml attached.  They add three <ListAudio...> icons, new Customize Toolbar <ListStyle> icon for Toggle Tree and List Styles, revise the Playlist icons with a shorter dash, simplified Playlist > Top Hits icon, and use transparency for most Tree list bullets and Playing Now icons, which works well (invariant to the selection highlight) for dark skins such as ThunderStorm and Black on Black.

11/30/2022 Attach new ViewHeaderPlaylist.png for consistency with current SmallIcons.png
12/8/2022   Attach new ViewHeaderServicesPlugins.png, revised by adding MC Plug-in image to the center.
1/6/2023    Updated SmallIcons.png with new icons for <PlayingNowInactive> (hollow grey triangle) and <PlayingNowOverview> (solid green + hollow grey triangles) for better consistency within the tree's Playing Now section.
1/21/2023  Updated SmallIcons.png by giving icons for <TopHitsPlaylist> and <RecentlyPlayed> dark plates (instead of transparency) for higher contrast against light gray backgrounds in ThunderStorm skin.

Logged

EnglishTiger

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 1075
Re: Skin Icons Discussion
« Reply #38 on: January 01, 2023, 12:00:36 am »

@ET - Thanks for those posts.  Today's MC 30.0.33 release addresses the issue you raised in these, so I expect we'll be seeing some interesting new Icons and View Headers in future skins! :

Mark - The Future is Here - https://englishtiger.uk/skins/index.html
Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #39 on: January 09, 2023, 11:26:51 pm »

Mark - The Future is Here
Looks like you are using MC's "classic" tree icons but have progressed to color plates which are customized for each of your skin variations, an improvement.

Attached is a screen shot of my latest Playing Now icons.  The hollow grey triangles were inspired by HPBME's recently posted snippets of his blue skin, while a filled green triangle indicates currently playing target(s).  My new Overview icon directly messages and pulls together the "minimalist" sensibility without introducing a new shape or color into Playing Now.

3/6/2023  Updates to minimalist Tree icons for Streaming, Playlists > Smartlists, and ViewHeaderPlaylist.  Screenshot composite and custom data files are attached.
3/15/2023  Re-align the TopHitsSmartlist yellow dot for consistent appearance (in SmallIcons.png and ViewHeaderPlaylist.png).
Logged

bob

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 13841
Re: Skin Icons Discussion
« Reply #40 on: January 10, 2023, 09:23:50 am »

Mark - The Future is Here - https://englishtiger.uk/skins/index.html
So cool.
Click and go  :)
It's going to take a bit to explore them all!
Logged

retiredteacherguy

  • World Citizen
  • ***
  • Posts: 108
Re: Skin Icons Discussion
« Reply #41 on: January 15, 2023, 07:09:29 am »

For those interested in a little monochromatic pop of color in the ModernCards Small Icons...

Obviously, remove the color from the file name  ;)

Logged

markf2748

  • Regular Member
  • Citizen of the Universe
  • *****
  • Posts: 806
Re: Skin Icons Discussion
« Reply #42 on: January 15, 2023, 07:13:14 pm »

For those interested in a little monochromatic pop of color in the ModernCards Small Icons...
Very nice idea, thanks (of course, as you might guess, I have other personal preferences for some of the line art :))

If JRiver ever provides more flexibility for selecting icon sets in the future, there could be a lot of fun here for some people.  Like randomly selecting an icon color theme each time MC opens, or automated time-of-day colors!
Logged

retiredteacherguy

  • World Citizen
  • ***
  • Posts: 108
Re: Skin Icons Discussion
« Reply #43 on: January 16, 2023, 05:11:46 am »

Very nice idea, thanks (of course, as you might guess, I have other personal preferences for some of the line art :))

If JRiver ever provides more flexibility for selecting icon sets in the future, there could be a lot of fun here for some people.  Like randomly selecting an icon color theme each time MC opens, or automated time-of-day colors!

Yes, I too have my own ideas on the line art. One step at a time, I wanted to get the color the way I wanted it (I chose blue, but red is interesting if you want to sort of give it that Apple Music vibe).

I started with the idea of being able to use Font Awesome for this stuff, which I still think would be a pretty cool solution.
Logged
Pages: [1]   Go Up