INTERACT FORUM

Please login or register.

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

Author Topic: New Standard View Skin: Easy Grey  (Read 818 times)

Jappie

  • Recent member
  • *
  • Posts: 15
New Standard View Skin: Easy Grey
« on: April 26, 2024, 04:45:07 am »

I like to share a 'Standard View' skin. I tried to submit the skin but I am unable to login. So, I decided to publish it using this forum. Anyone: feel free to use it.
About the skin: it's based on Modern Cards Dark, Black on Black, Windows (dark theme) and Tidal. I tested on Windows 10 Pro, Windows Display resolution: 1920x1080 (Size 150%), 3840x2160 (Size 250% and 300%), JRiver MC32, Font Segoe UI 10 pt and larger. Skin sizing from 50% to 400% without problems (exempt navigation issues above 200% of course).
I used the skin for the past month and it works well. No suprise: it's my default skin now...
Logged

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 8949
Re: New Standard View Skin: Easy Grey
« Reply #1 on: April 26, 2024, 11:53:56 am »

First impressions are positive. Attention to detail is very high indeed, and, I've a fair idea how much time this will have taken. Really enjoying the "seamless" approach you have taken with this. Very good. I'll run with it a few days, see if I can break it ;)

I probably won't use it as-is full-time though because in some places, such as the tag window, the high black/white contrast is just too much for me.

comox

  • Galactic Citizen
  • ****
  • Posts: 408
Re: New Standard View Skin: Easy Grey
« Reply #2 on: April 26, 2024, 10:35:34 pm »

Thank you! Looks very promising. I will test drive for a few days.
Logged

Jappie

  • Recent member
  • *
  • Posts: 15
Re: New Standard View Skin: Easy Grey
« Reply #3 on: April 27, 2024, 08:08:36 am »

First impressions are positive. Attention to detail is very high indeed, and, I've a fair idea how much time this will have taken. Really enjoying the "seamless" approach you have taken with this. Very good. I'll run with it a few days, see if I can break it ;)

I probably won't use it as-is full-time though because in some places, such as the tag window, the high black/white contrast is just too much for me.

Hello Marko,
thanks for your response!
On March 1, I started editing an existing Skin. Just for fun. It's great to have a 'skinable' program and being able to change the looks (retired Webdesigner). I spend about 3 weeks learning, editing, testing (and repeating all that), resulting in a complete Skin. Complete? I hope so. Media Center is very complex, so many windows and views.

I am willing to make changes and of course correct errors, if any are discovered. I do not use every feature of Media Center so it's easy to miss something.

You mentioned:
"... in some places, such as the tag window, the high black/white contrast is just too much for me."
Could you explain more? Is it about Text-color? There are 2 editors, the 'modern' and the 'legacy' editor. The 'legacy editor' has different (darker white) text-colors. The 'modern' Tag-window is the only one with real white (#ffffff) Text.
Of course there was a reason for 'real white'. It's about focus and attention. Opening the Tag-window is kind of special. White Text will draw your attention from a List-item to the Tag-window.
I admit I like the text-colors of the 'legacy' editor more...
Logged

Jappie

  • Recent member
  • *
  • Posts: 15
Re: New Standard View Skin: Easy Grey
« Reply #4 on: May 03, 2024, 07:44:56 am »

Update Easy Grey version 1.1

I made some changes, and created a new version of the Skin: Easy Grey version 1.1.
I put the version-number in the main.xml (About...), not in the Skin Name itself.
Changes:
1. Rating stars: I forgot about them because I never use them. They were still in color. Changed that to greyscale to match the 'mood' of the skin.
2. Increased the 'Status Text', above the progress bar. The Rating Stars looked bad next to the (very small) 'Status Text'. Those Rating Stars... Well, if anyone wants to use them: they are ready.
3. Changed the modern TAG Window Text color (very white). Less shining, more compatible with other text-colors. (Thanks: Marco)

------------------------------------------------------------------------------------------------------------
Update Skin Easy Grey version 1.2

A new version of the Skin: Easy Grey version 1.2.
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Many small improvements. Seventeen images updated, sometimes just a pixel, some changes in background color and margins.
Examples:
1. Modern TAG Window: different background, improved text-color, it looks more compact, like an editor.
2. Action Window and Display window: removed many margins to get a clean look. An image in 'Display' fits perfectly, no top or bottom-line. Very nice view when you select: 3D Visualization: Oscilloscoop. See attached Printscreen.
3. Tree-menu: All background color-bars (mouse-over) perfectly sized and aligned with Tag-, Display- and Action-titlebars. All with 1 pixel between them vertically. Issues about 1 pixel? Yes, indeed.
4. Very small changes in the Viewheader. Horizontal aligning of color-bars (Tabs and Playing Now background), vertical dark lines between Tabs. One pixel line below the Tab-title. A new Tab shows the real background color of the main List-area.
5. Search menu: It looked nice with rounded corners but the same Search menu shows on different places. One left, below the Tree-menu, whenever the Tag-window is active, can stretch as wide as the Tag-window. Rounded corners start to look messy. Not acceptable. Rectangular looks better.

------------------------------------------------------------------------------------------------------------
Update: Easy Grey version 1.3
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. Playerbar_Search.png: stretching was not working properly. Changed Code. Now everything stays pixelperfect.
2. Updated Icons:
- SmallIcons.png, Options.png, ActionBarNavigation.png: a few new Icons. Added a transparent border. This slightly reduces Icon display-size and gives them some 'air' in Tree-menu and Options windows. Yes, it took some ingenuity with Photoshop actionscripts to automate Icon-size changes :)
Action-bar Icons were grey, now back to original colors.
3. Frame_Spotlight.png: changed design and changed size. Image was not so square at large Skin sizes (200+).
4. minor changes, not worth mentioning.

Testing: I have a 55 inch LG Oled. Never used it at 3840x2160 resolution and 100% size (Windows-setting). 100% makes text very small... My eyes are usually 2.00 meters (78 inch) away with a Windows-setting of 300%. With 100% I needed to get up close: 70 centimeter (27 inch). Anything for a test... It was nice to play with Font-size and Skin-size. Font 8pt and Skin 400% looks good! Mainframe borders and images stay perfect. Set font to 8pt and Skin 200% and enjoy editing your database. Impressive.

------------------------------------------------------------------------------------------------------------
Learned about better organizing all the Skin-information on the forum. Thanks: SkGe

------------------------------------------------------------------------------------------------------------

Update: Easy Grey version 1.4
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. Update Player Control-buttons. Re-created the buttons,just a tiny bit different: thicker lines, the buttons gained weight. Most important: at some skin-sizes the vertical/horizontal lines are pixel-sharp ('hard lines'). Typical: Windows resolution 1920x1080, size 100%, Skin-size 150% (or Windows size 150% and Skin-size 100%): Player buttons are really sharp-edged.
2. MainFrame with the rounded corners kept me busy. At small Skin-sizes (50%, 60%), the corners looked bad. Improved images and xml-coding.
3. Frames of popup-windows (Options) with border and rounded corners also had problems with small Skin-sizes (50%, 60%): right-border disappeared. In the end: removed rounded corners. Just a 1 pixel border remains. (and disappears again as soon as the popup-windows go 'overboard' and the 'maximize' has to jump in to cure the issue...)
4. Some things are not possible: the button to Maximize the mainframe-window (Frame_FullScreenArrowsExpand), is very close to the horizontal Slider (adjust thumbnail-size). I can change that but at larger Skin-sizes (150% +) the maximize-button gets distorted (not square).
5. Put the 'old' (but improved) Spotlight-button back.
6. Some minor changes, and xml-code cleaning/updating. 26 images changed.

I am happy with the current 'state'. For me this Skin is about limiting distractions and placing the most important assets at the center: video/audio/images. Album Art is visually essential and database-selections should be clear and helpful. And yes, I like clean, well-made icons and 'skin-Art'.

------------------------------------------------------------------------------------------------------------
Update: Easy Grey version 1.5
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. The MainFrame with the rounded corners is not looking good at small skin-sizes (50% - 80%). Not acceptable. Kept me busy for some hours. In the end: replaced it with a rectangular field, one color.
This is quite a change, unfortunately. Well, it does make the layout-elements more consistent in the design.
2. minor changes.

That's it. Don't know what else to do. Maybe (re)create some icons?
Version 1 is ready?

------------------------------------------------------------------------------------------------------------
Update Easy Grey version 1.6
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. The MainFrame with the rounded corners is not coming back despite experiments with special coding (... BorderMaximized). Below Skin-size 100% Mainframe_LeftBorder and Mainframe_RightBorder do not resize equal compared to Top- and BottomBorder.
2. Minor improvement of a few Player Control-buttons.
3. SmallIcons: All colored Icons (150) are back. Video/Audio/Images: no grey Icons anymore.
4. Some code cleanup.

That's it. Maybe (re)create some icons in the future..

Logged

markf2748

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 689
Re: New Standard View Skin: Easy Grey
« Reply #5 on: May 07, 2024, 12:38:10 am »

Hello @Jappie,

Thanks for posting so much impressive work.  In version 1.1 I liked your Player-Control buttons (similar to Modern Cards: Dark), but the appearance was somewhat lacking in quality and I didn't find the size I wanted.  I see in the notes for version 1.4 you have now improved them.

Inspired by v1.1, I worked up a variation for use with my modified Dark on Dark skin.  I simplified the PlayerBar_PrevButton and PlayerBar_NextButton to resemble their minimalist Segoe Fluent Icon font counterparts (Previous, Next, unicode points e892, e893).  Also added suggestive bright colors during mouseover as well as a slight size expansion during mouseover for additional clarity and a little fun factor.  I use them at Windows Scale 100% and MC Size 100% on a 1920x1200 monitor.  Files are attached in case you are curious.  :)

Logged

Jappie

  • Recent member
  • *
  • Posts: 15
Re: New Standard View Skin: Easy Grey
« Reply #6 on: May 07, 2024, 10:57:53 am »

Hello Mark,

nice to see some colors and experiments!
I admit I do like to play with existing styles/images and see if I can make it more useful (size, sharpness) and interesting. My latest Player-buttons work very wel for sharpness. At 50%, 100%, 150% and 200% skinsize the buttons are very sharp. Separate button-images like 1x, 1.5x, 2x, do not help. Just found out... Learning and editing.
Easy Grey v 1.5 is out. Maybe last one for the time being.
Logged

Awesome Donkey

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 7395
  • The color of Spring...
Re: New Standard View Skin: Easy Grey
« Reply #7 on: May 07, 2024, 12:19:31 pm »

It's a pretty interesting skin, I like that it has a little more modern look compared to the Modern Cards: Dark Edition skin. It better fits Windows 11's aesthetic, IMO. Great work!

If I get some time, I might make a modification to the skin for my use by adding semi-transparency using the glass skin support MC has. You can (mostly) simulate the Acrylic/Mica aesthetic found in Windows 11 for example, and it looks rather nice when used in MC. Also might add rounded corners when the window isn't maximized, thanks to Matt adding support for that in skins. Both makes MC look more native, IMO.
Logged
I don't work for JRiver... I help keep the forums safe from Viagra and other sources of sketchy pharmaceuticals.

Windows 11 2023 Update (23H2) 64-bit + Ubuntu 24.04 LTS Noble Numbat 64-bit | Windows 11 2023 Update (23H2) 64-bit (Intel N305 Fanless NUC 16GB RAM/256GB NVMe SSD)
JRiver Media Center 32 (Windows + Linux) | iFi ZEN DAC 3 | Edifier R2000DB Bookshelf Speakers | Audio-Technica ATH-M50x Headphones

Jappie

  • Recent member
  • *
  • Posts: 15
Re: New Standard View Skin: Easy Grey
« Reply #8 on: May 07, 2024, 09:55:29 pm »

That's how I started 'skinning': making just a few modifications to an existing Skin. It's nice to be (cap)able to do this.
Interesting the ''glass skin support MC has", something like in Black On Black and Noir Glass? Looking forward to see something new. I think Easy Grey is a nice clean, pure basic Skin waiting to get a new make-over :)
Rounded corners support? Like to know more about that. I was not so lucky with my experiments. The 50%-80% Skin-sizes had issues (version 1.3 and 1.4). I miss a touch of 'round'.
Logged

Awesome Donkey

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 7395
  • The color of Spring...
Re: New Standard View Skin: Easy Grey
« Reply #9 on: May 07, 2024, 10:01:59 pm »

Interesting the ''glass skin support MC has", something like in Black On Black and Noir Glass?

Kinda. I did it with some forks of the Modern Cards skins: https://yabb.jriver.com/interact/index.php/topic,106397.msg841878.html#msg841878

You'll notice in the screenshots that the frame (especially the top part of the window) is semi-transparent with a Acrylic/Mica type of effect that better fits Windows 11. I've actually done some more small improvements since releasing those. I guess I should get around to doing that at some point.

Rounded corners support? Like to know more about that. I was not so lucky with my experiments.

Something that Matt added so when MC is windowed, it'll have rounded corners. If it's maximized it has straight/full corners so a maximized MC won't have rounded corners. This is part of the main.xml...

Code: [Select]
<MAINFRAME>
<Data MinimumWidth="800" MinimumHeight="600" />

<Entry Name="LeftBorder" Bitmap="MainFrame_LeftBorder.png" />
<Entry Name="RightBorder" Bitmap="MainFrame_RightBorder.png" Rows="24,?-Flex" />

<!-- NOTE: This part makes up the entire top part of the player window (background for the menu, prev-play-next buttons, song title etc.) -->
<Entry Name="TopBorder" Bitmap="MainFrame_TopBorder.png" Columns="200,?-Flex,200" Rows="?-Flex,31" Cells="B1-Tile,B2-Tile,B3-Tile" />
<Entry Name="TopBorderMaximized" Bitmap="MainFrame_TopBorderMaximized.png" Columns="200,?-Flex,200" Rows="?-Flex,31" Cells="B1-Tile,B2-Tile,B3-Tile" />

<!-- NOTE: The larger bottom border of the window, which contains the status bar etc. -->
<Entry Name="BottomBorder" Bitmap="MainFrame_BottomBorder.png" Columns="23,?-Flex,23" Cells="A2-Tile " />
<Entry Name="BottomBorderMaximized" Bitmap="MainFrame_BottomBorderMaximized.png" Columns="23,?-Flex,23" Cells="A2-Tile " />
...

You get the idea. :)
Logged
I don't work for JRiver... I help keep the forums safe from Viagra and other sources of sketchy pharmaceuticals.

Windows 11 2023 Update (23H2) 64-bit + Ubuntu 24.04 LTS Noble Numbat 64-bit | Windows 11 2023 Update (23H2) 64-bit (Intel N305 Fanless NUC 16GB RAM/256GB NVMe SSD)
JRiver Media Center 32 (Windows + Linux) | iFi ZEN DAC 3 | Edifier R2000DB Bookshelf Speakers | Audio-Technica ATH-M50x Headphones

Jappie

  • Recent member
  • *
  • Posts: 15
Re: New Standard View Skin: Easy Grey
« Reply #10 on: May 08, 2024, 03:37:06 am »

You'll notice in the screenshots that the frame (especially the top part of the window) is semi-transparent with a Acrylic/Mica type of effect that better fits Windows 11. I've actually done some more small improvements since releasing those. I guess I should get around to doing that at some point.

Just installed the ModernCards Acrylic Dark. Tree+Tabs seem to float, very nice. Clear systematic layout with a touch of some colors.

Something that Matt added so when MC is windowed, it'll have rounded corners. If it's maximized it has straight/full corners so a maximized MC won't have rounded corners. This is part of the main.xml...

Ahh, there is an extra Entry: TopBorderMaximized and BottomBorderMaximized. And there is a difference between Maximized vs Windowed? I shall try again with the new Entries. Thanks for the Code!
Maybe there is an issue with resizing below Skin-size 100%. The Left- and RightBorder resize. The Top-and BottomBorder do not resize the same amount. And I designed the border inside ALL Mainframe-borders...
Logged

EnglishTiger

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 965
Re: New Standard View Skin: Easy Grey
« Reply #11 on: May 09, 2024, 06:44:54 am »

As others have said your Easy Grey Skin is far superior to the ModernCards Dark Skin.
I like the fact that you have done something nobody, including me, has never tried to do before - Moving away from using the Font Weights that use the "Normal HTML Values"
Unfortunately I have spotted a few Changes/Edits you probably should not not have made: -

Positioning of Close, Min, Max & Resize buttons on the Mac.
Those buttons are all exactly the same size and, hopefully, should be evenly spaced on the Toolbar.
However the original OffsetX positions for those 3 buttons in the ModernCards Dark Skin were 7(Close), 26(Min) & 45(Max/Restore) with a gap of 19 units between each position
But you altered them to 9(Close), 26(Min) and 52(Max/Restore) resulting in 17 units between the Close and Min Buttons but 26 units between the Min and Max/Restore.
You need to either reduce the OffsetX position for the Max/Restore buttons to 43 or reinstate their original OffsetX and OfssetY values.

It looks like you may have misunderstood how MC uses the PlayerBar Display items WaveformBarA and WaveformBarB.
WaveformBarA is the colour for the unplayed part of the track -  WaveformBarB is the colour for the played part - by setting them both to the same colour "333333" you have made it impossible for the user to follow/monitor the tracks progress.

By using similar icons for PlayerBar_DSPButton.png and PlayerBar_DSPDirectButton.png you have made it impossible for the user to spot if MC is in Normal lor DSP Direct Mode.

By hiding the Splitter Bar Arrows you have made it harder for the User to use them to hide/reveal the Tree and the Upper and Lower panels that normally appear to the right of the Tree in Playing Now.

In one or two of your postings you have mentioned problems when setting the screen size below 100%.
MC is notorious for "Discolouring" Light/Small Fonts, especially if Segeo UI is the Font being used plus setting your skin below 100% makes a lot of the text hard to read when sitting less than 1 metre from the screen.
Since the vast majority of users are probably never set the Screen Size below 100% I believe you cans safely ignore any weirdness that happens only when the screen size is less than 100%.

In another posting you mentioned "Separate button-images like 1x, 1.5x, 2x, do not help".
The buttons in the Black on Black Skin contain a lot of detail which means they have to be created at a size larger than that used for the 1x buttons in the ModernCards Dark Skin.
So for every instruction in that Skins main.xml there has to be a "Scale=" instruction present when those buttons are used.
But, unlike with the all the ModernCards Skins there are no 1.5x, 2x, etc. Images.
Plus if you open any ModernCards Skin Folder in Windows Explorer in Details View you should spot that not all those images that have 1.5x, 2x, etc. images have the same number of Additional Images.
A lot of those 1.5x, 2x, etc images look like they were created by opening the 1x image in an Image Editor and resizing them.

The 1st of the 3 attached images is of your Easy Grey skin at 150% and reveals the problem with the Player Bar Waveform.
The 2nd is of a modified Easy Grey skin at 150% with a corrected Player Bar Waveform, visible arrows on the Splitter Bars and a blue PlayerBar_DSPDirectButton
The 3rd is the same modified Easy Grey skin at 100% with a corrected Player Bar Waveform but without that "horrible red halo" around the open tag in the Tag Window.

Instead of using the main.xml from the ModernCards Dark Skin I used the one from the ET Black Card II Skin, which has a more logical layout, no redundant/unnecessary code, is fully notated, has been modified to cater for every change to Standard Skins that has been implemented. Other than the changes already mentioned there isn't single 1.5x, 2x, etc. image I resized your TagWindow_Field.png and TagWindow_FieldLabel.png images to get rid of the need to "Scale" them.

The attached "modified version of your skin" is currently named "ET Easy Grey", if you download it and find it a better "template" simply remove the "ET " prefix from both the Skins Folder Name and from the Skin Name in the main.xml.

Logged
Win NUC - VENOEN 11Th NUC Mini PC Core i7 1165G7,Dual HDMI 2.0+Mini DP,Windows 11 Mini Desktop Computer,Thunderbolt 4.0,1 Lan, USB-C,Wifi,Bluetooth 5.0,32GB RAM Toshiba MQ04ABF100 ‎500Gb 5400 RPM ‎eSATA HD, Gigabyte GP-GSM2NE3512GNTD 1Tb NVMe SSD, Samsung 870 QVO 8 TB SATA 2.5 Inch SSD (MZ-77Q8T0) in Sabrent Ultra Slim USB 3.0 to 2.5-Inch SATA External Aluminium Hard Drive Enclosure (EC-UK30)

Apple 2020 Mac mini M1 Chip (8GB RAM, 512GB SSD)
Sabrent Thunderbolt 3 to Dual NVMe M.2 SSD Tool-Free Enclosure with Sabrent 2TB Rocket NVMe PCIe M.2 2280 High Performance SSD + Crucial P3 Plus 4TB M.2 PCIe

ET Skins & TrackInfo Plugins - https://englishtiger.uk/index.html

Awesome Donkey

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 7395
  • The color of Spring...
Re: New Standard View Skin: Easy Grey
« Reply #12 on: May 09, 2024, 07:22:25 am »

And there is a difference between Maximized vs Windowed?

Yes, on Windows 11 windowed apps (e.g. File Explorer) have rounded corners and I wanted to simulate that in MC. Previously if you use rounded corners, MC would use rounded corners when the window was maximized, so it didn't look good. Thankfully Matt added support for that with the addition of TopBorderMaximized and BottomBorderMaximized. You can now simulate rounded corners when windowed, but straight/full corners when maximized. :)

The Acrylic skins are pretty old now, they were superseded with the Mica versions with slight tweaks/changes like rounded corners in the years since first release. The only gotcha is I can't reproduce the Mica (or previously the Acrylic) semi-transparency effect in Photoshop. I came as close as I could, but there's no Photoshop templates or examples or anything like that to aid in simulating the Mica light and dark semi-transparency.

Here, if you want to look at the current Mica skins to poke around and play with for ideas (and see rounded corners in action), feel free: https://www.mediafire.com/file/qbzmuuflqa6gmxi/ModernCardsMicaSkins.zip/file
Logged
I don't work for JRiver... I help keep the forums safe from Viagra and other sources of sketchy pharmaceuticals.

Windows 11 2023 Update (23H2) 64-bit + Ubuntu 24.04 LTS Noble Numbat 64-bit | Windows 11 2023 Update (23H2) 64-bit (Intel N305 Fanless NUC 16GB RAM/256GB NVMe SSD)
JRiver Media Center 32 (Windows + Linux) | iFi ZEN DAC 3 | Edifier R2000DB Bookshelf Speakers | Audio-Technica ATH-M50x Headphones

Jappie

  • Recent member
  • *
  • Posts: 15
Re: New Standard View Skin: Easy Grey
« Reply #13 on: May 09, 2024, 04:35:26 pm »

Hello EnglishTiger,
What an incredible surprise I got this evening! I am exited, thrilled, flabbergasted, moved to tears, and lost for words, my english vocabulary is limited! Thank you. What a great job you did. A complete code-correct, up-to-date main.xml and lots of good looking images. I like the comments in the main.xml. Very informative.

You nailed it with all the errors and mistakes that were still present. I expected to need several weeks to check every issue... Yes, those WaveformBars, it made me grin. Just an extra color. Yes, the DSP-button. I wanted to recreate that. There are more buttons that need improving. The first version of the Skin had a 2px border. Because of that I decided to mess with the positioning of the window-buttons (Minimize, Maximize etc.). Leaving a 'loose' end. I did discover an image with minor-error (Button not centered properly: Maximize.png).
The 1x, 1.5x, 2x subject was mainly aimed at the Player Control-buttons: I recreated those buttons sharp edged, 3 sizes. But when looking at those buttons with Windows 1920x1080, scale 150, and Skinsize 100/150/200 I wondered: what's the use? All I get is interpolation and unsharp images. A 2x image-size and a good graphics resizer should give enough quality up to (at least?) 200% Skinsize. Meaning 1 image-size should be sufficient. That was/is also on my todo-list... 1.5x is already removed.
The Tag-editor... I am glad that the ugly red overlay is gone. What a complicated color-system.

I looked at "ET Easy Grey" and it is good! What next?
In my first posting, with version 1.0, I mentioned that the work I do is for the community, for everyone whatever they like to do with it. There is a reason for this: I can only work for limited time per day with a PC to do the work for this skin. My mind loves it, my body does not (I am 69 but my body feels like 80+). From 2000 to 2012 I worked as a webdesigner and systembuilder. After 2012 it was over. However: working at a Skin is very appealing to me! I would like to finish this Easy Grey Skin, make it a 'mature' Skin. After that maybe someone should take over...
For now: enough to do. I wil dive into your main.xml, select the best quality images and make them work.
Logged

EnglishTiger

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 965
Re: New Standard View Skin: Easy Grey
« Reply #14 on: May 10, 2024, 12:29:19 pm »

Jappie

Unfortunately I failed to spot that in v1.6 you had made some changes to the colours the Toolbars use so you will need to either copy the
<Colors Text="B5B5B5" HilightText="0078d7" SelectedText="018efe" Separator="333333"/> instructions from your 1.6 version to the ET Easy Grey version, or download the corrected version using the link at the bottom of this posting.

Over the years I've come to hate the ModernCards Dark skin with it's lack of contrast, especially that black text on a dark grey background for the track currently playing in playing now and for the selected option in the DSP studio form; its even worse on the mac where that black text is almost impossible to read. So I was pleasantly surprised when I downloaded and installed your Easy Grey skin and what my grand children refer to as the most boring skin for MC (ModernCards Dark), had been brought to life.

Before creating my first skin I did load of research and very soon found that all of the existing skins were using virtually the same uncommented and badly structured main.xml file, plus the existing tutorials were not very helpful when it came to deciphering the code in those files. Thankfully HPBME had created his Dream in Blue Skin which had a xml file in it that had loads of useful comments in it https://yabb.jriver.com/interact/index.php/topic,128460.0.html 

Just like you I started with the ModernCards skin but my first action was to put the skin.xml file into a more logical order whilst adding the appropriate comments that would make it easier to be able to make changes to the skin. Gradually the skin.xml "Template" that made it possible for me to create all those MC Standard View Skins that live on my website took shape. Although unlike your 3 weeks from starting to having your first working skin for me it was more like 3 months.

Jappie other than resizing your TagWindow_Field.png and TagWindow_FieldLabel.png to remove the need to scale them and adding a blue tint to the PlayerBar_DSPDirectButton.png the images in ET Easy Grey are the ones you created.
Not only do I like your skin I also liked what you are trying to do with it so I thought I'd give you a helping hand by creating ET Easy Grey in the hope that its better structure along with the extensive comments it contains would make it easier for you to achieve your aims for what is an excellent skin.

If there is anything in that main.xml you don't understand or need any help tbe easiest way to get hold of me is probably via a Forum Message.

Logged
Win NUC - VENOEN 11Th NUC Mini PC Core i7 1165G7,Dual HDMI 2.0+Mini DP,Windows 11 Mini Desktop Computer,Thunderbolt 4.0,1 Lan, USB-C,Wifi,Bluetooth 5.0,32GB RAM Toshiba MQ04ABF100 ‎500Gb 5400 RPM ‎eSATA HD, Gigabyte GP-GSM2NE3512GNTD 1Tb NVMe SSD, Samsung 870 QVO 8 TB SATA 2.5 Inch SSD (MZ-77Q8T0) in Sabrent Ultra Slim USB 3.0 to 2.5-Inch SATA External Aluminium Hard Drive Enclosure (EC-UK30)

Apple 2020 Mac mini M1 Chip (8GB RAM, 512GB SSD)
Sabrent Thunderbolt 3 to Dual NVMe M.2 SSD Tool-Free Enclosure with Sabrent 2TB Rocket NVMe PCIe M.2 2280 High Performance SSD + Crucial P3 Plus 4TB M.2 PCIe

ET Skins & TrackInfo Plugins - https://englishtiger.uk/index.html

EnglishTiger

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 965
Re: New Standard View Skin: Easy Grey
« Reply #15 on: May 11, 2024, 01:02:19 pm »

Jappie

I spent this morning running MC32 on both my Mac Mini with it's Samsung 24" 1920x1080 Screen and MacBook Air with it's 13" Retina Screen switching between the ET Easy Grey Skin and ModernCards Dark Skin.

The attached link is for a set of Screenies from both Mac PC's mostly with Screen Size set at 100% but some are set to 150% and for 1 of them it was set to 200%.
But there is something you need to know about some of Apples Odd-Behaviour before you look at them.
Regardless of which app is being run there is always a Whitish (Apple) Header Bar at the top of the screen where the App's Menu is placed; however the Windows Control Buttons (Close/Min/Max) are always on the Apps own Header Bar
Apple's Retina system has a dislike for drawing anything (usually images) that is 1 pixel wide or high so if you look very carefully at any of the images where the Details List is visible you should spot the Vertical Gridlines between the Columns are "Absent".
The Apple OS also replaces the header bar on any small/secondary window; like the Tools > Options and DSP Studio Window with a whitish one that has rounded corners and the Apple System windows control buttons instead of the ones from the skin.
There is a small problem in respect of the Segoe UI Font - None of the Segoe font family are shipped with Mac PC's but they can be downloaded and installed. Unfortunately for the OS and MC to be able to use them the PC has to be rebooted.
Mac Pc's have always has had better graphics presentation than that thing IBM developed so there is less tendancy for small/light fonts being discoulered.

Images 1-12 are from the Mac Mini where I was using the Verdana Font some are with Size at 100% others are at 150% and 1 of them is at 200%
Images 3, 4, 8, 9 & 10 are for the ModernCards Dark and reveal a couple of the reasons why it should be sent to the rubbish dump.
Images 7 & 11 show that while the OS hijacks the MC Menu, which means the Drop Down Menus are located just below the Apple Header Bar they are still using the MC Skin and do get resized by the Skin Size Command.
Images 13-15 are from the MacBook Air, where I did install and use the Segeo  UI Font, and as long as the user is no more than 30" from the screen the lower line in the Display Panel is still readable.

So just as with the Win PC once again those images reveal that your skin was thought out, planed and constructed with a lot more thought than that Naff ModernCards Dark Skin; your Contrast Level is far better.

I wish I'd remembered to switch to the ModernCards skin on the MacBook and taken a screenie of it because that would have definitely revealed why I hate the thing.

Incidentally if you are wondering where the Dark Gey background ModernCards uses for the Currently Playing Track and the Selected Option in the DSP Window in images 2, 3, 4, 8, 9 or 10. It appears as 3 very short lines at the left hand side of the line in the images where the Track List is visible and at the right hand edge of the line in the DSP Window.

Link to Images on Pix01 - https://pix01.jriver.com/sM1%40m4ZV 
Logged
Win NUC - VENOEN 11Th NUC Mini PC Core i7 1165G7,Dual HDMI 2.0+Mini DP,Windows 11 Mini Desktop Computer,Thunderbolt 4.0,1 Lan, USB-C,Wifi,Bluetooth 5.0,32GB RAM Toshiba MQ04ABF100 ‎500Gb 5400 RPM ‎eSATA HD, Gigabyte GP-GSM2NE3512GNTD 1Tb NVMe SSD, Samsung 870 QVO 8 TB SATA 2.5 Inch SSD (MZ-77Q8T0) in Sabrent Ultra Slim USB 3.0 to 2.5-Inch SATA External Aluminium Hard Drive Enclosure (EC-UK30)

Apple 2020 Mac mini M1 Chip (8GB RAM, 512GB SSD)
Sabrent Thunderbolt 3 to Dual NVMe M.2 SSD Tool-Free Enclosure with Sabrent 2TB Rocket NVMe PCIe M.2 2280 High Performance SSD + Crucial P3 Plus 4TB M.2 PCIe

ET Skins & TrackInfo Plugins - https://englishtiger.uk/index.html

markf2748

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 689
Re: New Standard View Skin: Easy Grey
« Reply #16 on: May 11, 2024, 06:19:14 pm »

One notable difference between ET Easy Grey and Easy Grey (1.6) is the contrast between text and background when mouse hovers over an unselected tab.  In both skins the tab changes to whitish text with "light tan" background color.  For ET Easy Grey I find the contrast is very low and the text is barely readable.  Adjusting MC's Skin Effects does not help matters.  The contrast is higher in Easy Grey (1.6) and the background color choice is a little more consistent with the theme.

No criticism, just pointing it out.  Personally I currently use a horizontally striped dual grey-tone scheme for the tab mouseover, and a light grey underline for the selected tab (screenshot attached).  Aside: A low blue dot indicates the tab is locked.  An "i" prefix in the tab name indicates an Image View of the album artwork which is stored in the audio album folders as sidecar files.  I have 5 such Image Views defined in the Tree, each synced (i.e. same sort order) to its corresponding Audio View.

BTW, thanks to all for the discussion and sharing of your history and expertise with this challenging corner of MC.  I must confess to borrowing a couple of ideas.  :)


5/12/2024:  Updated second paragraph.

Win 11 Pro 64-bit | Win 10 Pro & Home 64-bit | MC 32.0.45 (currently in beta)
Logged

EnglishTiger

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 965
Re: New Standard View Skin: Easy Grey
« Reply #17 on: Yesterday at 07:07:52 am »

This morning I remembered why the Selected Track in the List Section and Selected Option in the DSP Window look so odd/bad on the Mac. It's because it, like a few other skins, uses badly formed transparent overlay images with the word "Selection" in their name. When any of those skins are used on the Mac that weird distortion visible in the Images for the ModernCards Dark Skin. two of the skins where the Overlay Images don't get distorted on the Mac are the Pearl Bailey and ThunderStorm Skins. So well done Jappie for, without realising it, changing those "Selection" images from ones that use badly formed images using transparent colours to ones that using solid colours, making it Mac Compatible

Mark that lack of contrast when hovering over inactive tabs on the ViewHeader is down to me, technically the Tabs section of the skin.xml is obsolete and I wrongly removed it;, what I forgot is that although MC no longer has tabbed forms/frames its color statement is used by the ViewHeader sections Inactive Tabs. Incidentally that's not the only place where instructions in one section of the skin.xml get used in another, usually unrelated, section;
the Legacy Tag Window and parts of the DSP Studio window use some of the instructions and images from the List Section.

Mark you don't need to apologise for "borrowing a couple of ideas"; with the exception of the very first skin that was created for MC it is probable that some of the other skins available have borrowed code and ideas from other places. When I created my own skins the layout of the skin.xml is me applying the same principles I'd learnt as a Computer Programmer/Analyst; lay the file out by starting at the top left hand corner and work left to right down the screen to the bottom right hand corner. Some of the images were built using my ideas, or ideas/suggestions my Grand-Daughter came up with, but there are some images that I borrowed from other skins and modified to suit my requirements; and a lot of the remaining code was certainly borrowed from other skins; and I'm certainly not the only Skin Creator that has done that. One of the reasons for all those comments in my skin.xml files was to make it easier for other users to modify them to suite their own requirements or as a starting point when creating a brand new skin.

The reason why adjusting MC's Skinning Effects didn't improve the contrast problem is probably down to the fact that Skinning Effects get applied to the whole skin and unfortunately, thanks to the MC Skinning Engines idiosyncrasies, can result in totally unexpected result.

The attached ET Easy Grey.Zip has the version with the reinstated Tab section plus I've added the 4 mac Close, Minimize, Maximize and Restore Buttons that my skins use and changed the relevant instructions in the MainFrame and Frame sections to use them instead of the 3 OSX buttons.
Logged
Win NUC - VENOEN 11Th NUC Mini PC Core i7 1165G7,Dual HDMI 2.0+Mini DP,Windows 11 Mini Desktop Computer,Thunderbolt 4.0,1 Lan, USB-C,Wifi,Bluetooth 5.0,32GB RAM Toshiba MQ04ABF100 ‎500Gb 5400 RPM ‎eSATA HD, Gigabyte GP-GSM2NE3512GNTD 1Tb NVMe SSD, Samsung 870 QVO 8 TB SATA 2.5 Inch SSD (MZ-77Q8T0) in Sabrent Ultra Slim USB 3.0 to 2.5-Inch SATA External Aluminium Hard Drive Enclosure (EC-UK30)

Apple 2020 Mac mini M1 Chip (8GB RAM, 512GB SSD)
Sabrent Thunderbolt 3 to Dual NVMe M.2 SSD Tool-Free Enclosure with Sabrent 2TB Rocket NVMe PCIe M.2 2280 High Performance SSD + Crucial P3 Plus 4TB M.2 PCIe

ET Skins & TrackInfo Plugins - https://englishtiger.uk/index.html

Jappie

  • Recent member
  • *
  • Posts: 15
Re: New Standard View Skin: Easy Grey
« Reply #18 on: Today at 08:57:02 am »

I see new posts from EnglishTiger and Mark. A lot of information.
I am impresssed by all the responses, hints and ideas. Printscreens of MC on MAC. I can barely see border lines of the Options popup windows. Oh, help.
Did I start this? Will I be able to finish the new Skin?

Just to give an update about the progress on the Skin Easy Grey: there is a lot to do.

I am still cleaning up images.
Example: 'click area' is a well known concept with website-building. Many buttons from Modern Cards have this click area. But do we really need this? It seems NOT. With or without it I notice no difference when using MC. Cleaning up is not a priority but I am working on the images so...
Example: image sizes. I am removing all the 1x and 1.5x sizes. I have to make sure I don't need them and the new default size (2x) is the best. Volume-bar and Progress-bar are typical: the background disappeared with skin-size 50 or 60%. And while I am at it, let's improve the Volume-bar (yes a very nice improvement!).
Example: The colors of different button-stages. Yes you can expect less 'minimalism' and better use of colors. No you won't see it at first glance. It's puzzling, I had to set up some guidelines like (default for the Player-bar): Volume: Mute off, Play: no shuffle, no repeat, DSP Direct: On.
And so on...

Little issue: WaveForm Bar colors. I don't have the WaveForm bar only those 2 little spectrum-analyzers in the top-bar (and they don't respond to the WaveFormBar colors :). Analyzing audio, not done. Don't want the data in my sidecar.xml. Will analyze some music, so I can setup nice colors. OK, just had MC analyze some music. YES, now I see the 'Wave'. Play with colors, okay.
Little issue: Fonts? Important, yes! 'Segoe' not on Mac? Makes me think of website-building: Verdana, Geneva, sans-serif or: Arial, Helvetica, sans-serif. Those were/are the most OS and browser-compatible options. I can NOT change the default Windows 10 font (without registry editing). So, for the 'looks' of MC there is little choice. But it does influence contrast and balance of text on the Skin.
Little issue: in version 1.4 there was a border with rounded corners but it looked bad at 50-70% Skin-size. It should be possibble. 'Blue Steel' Skin has it. It does not work on Easy Grey. The border lines just do NOT meet at the corners. After (again) several hours I found a solution. Rounded corners are back.
Little issue: Overlay transparency-issue on the MAC. I did not know about this issue but I do know that transparency is something to avoid. If a see layer-transparency in an image in Photoshop I will remove it. There is another transparency issue probably on both Mac and Windows computers: overlay transparency will not work in video-playback with something like the 'Mini Player'. I tried to give it rounded corners but they showed up black when playing a video and going to the topborder to activate the playerbar. GIF-transparency always had better support among the OS's. But we want more colors, so we need PNG...

I won't bore you with more details. Maybe at the end of this week, maybe next week, there will be an update of Easy Green.
Logged
Pages: [1]   Go Up