INTERACT FORUM

Please login or register.

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

Author Topic: A Guide to Standard View Skinning  (Read 405 times)

EnglishTiger

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1189
A Guide to Standard View Skinning
« on: March 02, 2025, 08:54:52 am »

As MC has evolved, a lot of effort has been put into trying to ensure the Wiki reflects the changes made to the software via modifications to the existing functionality and/or new features/options that have been added/implemented.

This is my attempt at collecting together things like the Skinning Tutorial, the Skinning SDK, the 2 Matrix Drawing Methods, the Submission Process and any other useful information that I can easily find into one place.

Another aspect is to find and implement methods, ways of working, that would increase the efficiency of the MC Skinning Engine via a reduced load on the users OS, CPU, GPU and the MC Skinning Engine.

Stage 1 was to extend the main.xml layout used by the ET Family of  Skins to provide a layout that contained every Skinning Function and Section a Skin Creator can use/alter when creating, or modifying, a skin.
That “Uniform main.xml layout” is arranged in a better logical order; for example, the parts covering the Main MC UI are arranged based on a working from the outside to the inside, top to bottom and left to right sequence. That same sequence is also applied to the instructions within each section.
In addition, each Section and Instruction had to be annotated if and when information about each Section and Instructions Purpose was available; to allow the Skins that used the uniform main.xml layout to become part of the Documentation Set.

Stage 2 was to “convert” every “MC Stock Skin” from their existing main.xml layout to the main.xml layout and at the same time:
Remove any code sections, instructions and images that were known to be unnecessary, obsolete or redundant.
Convert any/all images that were not in png format to png format
To remove any/all occurrences of the use of Hex Code FF00FF, that was used to indicate Transparent areas in bmp and gif images, from all images either before their conversion to png format; or because it had been left in the image when originally converted to png format.
If the skin had originally been written when MC was only available on the Windows Platform and had not been modified for the other platforms, like Aruba; I added the relevant code and images need to the MainFrame and Frame sections to allow the skin to use the Windows Control Buttons (Close, Minimize, Maximize/Restore Buttons) for the platform being used.
Once they were all “converted” I then went back through the main.xml for each skin looking for any instances of the use of “Different Names” in the same instruction in individual skins to be able to determine if those “Different Names” were referring to the same thing or not. For example, in the List Section “Current” and “HotText” are “Alternative Names” for the same part of a skin and not references to separate parts of it.

Some of the benefits the “Uniform main.xml layout” provides.
For the skin creator/modifier –
Since there is no redundant/obsolete/unnecessary instructions/code in the main.xml you are not going to waste any of your precious time changing or modifying something that will never appear on anybody’s screen/monitor. Nor are you running the risk of changing something in one of those areas that can have unexpected consequences in one of the sections that you can change/modify.
The annotations/comments are there to help you identify sections and instructions. For example, when a <Colors …. /> instruction is used the Code reveals what “individual colors” are being set for that skin; the comments inform you what those individual setting gets applied to plus all the other settings that can be used in that instruction.
Because the main.xml files for every skin that uses the Uniform main.xml layout are in the same order comparing specific instructions with those from other skins becomes easier.

For everybody –
Smaller skin folder sizes, the amount of disc space taken up by bmp images along with that taken up by images the skin is never going to use is a lot bigger than that taken up by a skin that only contains the png images it is going to use.
A reduction in the CPU and GPU Load
If the main.xml is in the order that Skinning Engine, hopefully, expects/uses it reduces the amount of time taken to get it into the relevant order.
An image in png format is going to load faster than one in bmp format of the same size in pixels and if that png image has transparent areas in it is certainly going to be loaded and rendered a lot faster than one where the Skinning Engine is going to have to convert that texture used to indicate transparency into colour/texture free areas.
One example of the unnecessary code I removed were any instructions that were telling MC to use a Bitmap that had an Image Name that was not the name of an image in the skin folder. If that instruction is in the main.xml file the Skinning Engine, or the OS, will go looking for that image and fail to find it. But if the instruction isn’t there no time gets wasted.

Unless you have been hiding under a rock for the last couple of months you are probably already aware that Stage 2 has been successfully completed.
Once Matt found out what I’d been doing and was convinced that I had not made changes that would affect the look/feel and operation of any of the “MC Stock Skins” as of MC 33.0.63 they are now all using the correct uniform layout main.xml files on every platform.

I had hoped that I was now at a point where I could start to create the new skinning guide, downloading and examining the main.xml file of some of the Skins available from the MC Skins Download Page revealed that not only did I not have enough examples/information some of the annotations/comments in the existing uniform layout main.xml files was either incomplete and/or, in a few instances, wrong.

Stage 3 – Converting the xml file for every skin available from the MC Skins Download Page that was Created by someone who is not currently active in MC into versions that use uniform layout main.xml files.
This used exactly the same methods used when converting the “MC Stock Skins” with a couple of additional changes that Matt gave me permission to carry out. The correction of any Lack of Contrast Problems, typically the use of dark colored text on a dark background or light colored text on a light background. Including in a couple of instances adding the relevant <Colors …. > instruction in the <TAGWINDOW> section to correct lack of contrast problems in the Advanced Tag Window of skins that were created long before the Advanced Tag Window was introduced.
If and when I encountered a skin that did not include a <SPLITVIEWTAB> section but did have a, now obsolete, <CUSTOMTAB> section because both sections used identical instructions, I was allowed to use those instructions to  Add a <SPLITVIEWTAB> section to skins that previously did not have one; instead of forcing those skins to use the default <SPLITVIEWTAB> section.
NOTE – Whilst the older MC Stock Skins had undergone occasional updates to include any New Major changes/options/features as and when they occurred. This was not true of many of the skins available from the MC Skins Download Page; consequently, the converted versions of those skins, other than because of the 2 exceptions mentioned above, when installed in MC will have an identical look, feel and presentation style to the original versions in most versions of MC higher than the version of MC that was current when the skin was created or a section or instruction in it was discontinued.
Of the 65 skins available on the MC Skins Download Page:-
“Black and Blue” and “The Fly” were created by Marko and “Dream in Blue” was created by HPBME both of whom are currently very active members of the MC Community so they have not been converted.
DJ_Hazelwood’s “NightLife Mega” skin appears to held on a web-page that no longer exists so I was unable to download it.
Every “Maverick07” skin is currently held on DeviantArt and you have to join DeviantArt to be able to download them and you have to manually install them. The download of his “FusionX3” contained 2 Skins – FusionX3 and FusionX3 - Blue and the download of his “MetroX” didn’t contain a skin named “MetroX” but did contain skins named – MetroX - Win 8 - Default (Cyan), MetroX - Win 8 - Default (Zune),  MetroX - Win 10 - Modern (Cyan), MetroX - Win 10 - Modern (Gold), MetroX - Win 10 - Modern (Green) and A MetroX - Win 10 - Modern (Pink).
During the conversion process I spotted that the Carbon, Minimal and No.4 Skins contained sufficient “alternative” images to justify the creation of 2 versions of each of them, one that used the images named in the relevant parts of the main.xml and a second version that uses the relevant “alternative” images.
N.B. The folders for each variant of a skin only contain the images that variant uses.

Since both the MC Stock Skins and the Skins available from the MC Skins Download Page, sometimes referred to as “Site-Skins”, form a large part of MC Heritage. Matt has already told me that, once I’ve completed any work I need to do to those Site-Skins the “Converted Versions” will replace the Existing Versions on the Skins Download Page and for the very 1st time they will all be installable from within MC.

Stage 3 – The one I’m currently working involves working section by section and instruction by instruction of the 84 “Converted Skins” installed on my PC; doing things like checking to see what happens if I use a Plain Red Image or Color in that instruction or what happens if I change the numbers in instructions that use numeric values. To identify the real purpose of those instructions and any unnecessary or redundant instructions and any corrections/additions needed to the annotation’s/comments.
Because I’m using 84 skins to test/prove individual instructions and settings I am now in a position where I can start to compile the JRiver MediaCenter Guide to Standard View Skinning.

NOTE – In this stage I am only checking what using a red image or color, or changing the values/numbers for other instructions has in the section I am checking and any other part of the skin mentioned in the existing annotation’s/comments.

Stage 4 – This one may take a while to complete because I will be trying to identify every place in a main.xml where changing an instruction causes a change, or changes, in other parts of the skin. To determine where that “unexpected” change has occurred and what has been changed.
Hopefully, and this is the thing that may take some time to prove, I will be able to discover that some or most of the “unexpected changes” can be prevented by adding a suitable instruction in the area/part the skin creator didn’t want that change to happen.

Stage 5 – Collect everything together so that I can compile the definitive version of JRiver MediaCenter Guide to Standard View Skinning.

Stage 6 – Liaise with Bob to enable the Converted “Site-Skins” versions to replace the original versions on the Skins Download Page.
And with Matt for the current versions of the “Stock Skins” to be replaced with the versions that have had their annotation’s/comments corrected/expanded, if he deems it necessary.

Stage 7 – Revert MC on my Windows and Mac computers back to being a source of entertainment and take a well-earned break from scrolling backwards and forwards through multiple main.xml files.

------------------------------------------------------------------------
What This is Not About.
Whilst one of the aims is to get the MC Skinning Engine running more efficiently it is definitely NOT about making any changes to the way it works. Or as Matt once put it in an email 
“Does all this skinning work have you cooking a list of suggested changes, or are you just reasonably happy with the engine?”

The approach I am taking, and will continue to take, is “The Skinning Engine Works” the concepts/ideas/principles embodied in are designed to help it work more efficiently. So, I can see no reason to change the way it works based on the whims and desires of a single person.

I would like to have more control over every aspect of Standard View Skin Creation.

Some of those problems caused by what could be called “Inter-Linking” changing something in one section of a skin causing a, usually unexpected, change in another part of the skin are down to the lack of adequate documentation because they can be avoided by deploying a suitable instruction in the part of the skin that the skin creator didn’t want that change to happen.

My ideal would be a Skinning Engine that didn’t do things that I would prefer it not to do. But as someone who spent 40 years of their working life designing, creating and testing software, including some that used a skinning engine, I am well aware that a change to a program that the user thinks is a very simple one can end up having some very unexpected, and disastrous, consequences especially if it’s a skinning engine that is being changed/amended.

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

What this thread/topic is for.
To keep everybody informed of my progress and since it may contain information that could be relevant/important to any skin anyone is creating or modifying access the current, but incomplete, PDF version of the Skinning Guide.
For you to provide me with positive/critical/negative feedback of those parts of the Guide that are available. i.e. to report any typos or errors I have made or anything you feel may benefit from a fuller explanation.
It provides a way in which you can provide information that I may have overlooked or not been aware of its existence.

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

What this thread/topic is not for.
Discussions on what is wrong with the Skinning Engine or what needs fixing.
Raising points/problems with the Skin Creation Process that neither I or anybody else can fix.
------------------------------------------------------------------------

This link will give you access the current PDF version of the JRiver MediaCenter Standard View Skinning Guide

For anybody interested in wanting to see what the 84 skins I’m working on look like in standard view
This link is to a Pix01 gallery showing what each skin looks like on the Windows and Linux Platforms

Or this one to see what they look like on the Mac Platform

N.B. in both galleries the Skin Name is below the image when in Thumbnail View
Logged
Apple Mac Mini Desktop Computer with M4 Pro chip with 12 core CPU and 16 core GPU: 24GB Unified Memory, 512GB SSD Storage, Gigabit Ethernet, 3 Thunderbolt5 + 2USBC ports.

ET Skins, TrackInfo Plugins and Other Goodies - https://englishtiger.uk/index.html

Dawgincontrol

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 685
  • We have met the enemy and he is us.
Re: A Guide to Standard View Skinning
« Reply #1 on: March 02, 2025, 09:07:03 am »

English Tiger you have my admiration and appreciation; not only for this, but for all the help you've given over the years.

Media Center would be way less beneficial without you and a few others.
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72924
  • Where did I put my teeth?
Re: A Guide to Standard View Skinning
« Reply #2 on: March 02, 2025, 10:06:01 am »

Thanks, ET.  I've edited your post for brevity and clarity.
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72924
  • Where did I put my teeth?
Re: A Guide to Standard View Skinning
« Reply #3 on: March 02, 2025, 10:07:42 am »

English Tiger you have my admiration and appreciation; not only for this, but for all the help you've given over the years.

Media Center would be way less beneficial without you and a few others.
I agree.  Thanks!
Logged

EnglishTiger

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1189
Re: A Guide to Standard View Skinning
« Reply #4 on: March 02, 2025, 10:46:48 am »

Dawgincontrol and JimH Thank you for your, extremely appreciated, kind words, and thanks for the edits you made JimH; as that old saying goes sometimes two pairs of eyes are better than one.

Over the years I've always been mentally active and now I'm retired I get bored fairly easily and after reading through countless threads/topics/posting in this forum/board; I decided it was time to bring all of the information about Standard View Skinning together in one place. To make it easier for current and future members of the MC Community to create new skins and as a Tribute to those individuals who are no longer part of the MC Community. They not only helped to make JRiver MediaCenter the best Media Center/Player the best one available they provided the inspiration to me and others to take a gamble and create skins either for their own own use or any member of the MC Community that wanted their Copy of MC to look different.
Logged
Apple Mac Mini Desktop Computer with M4 Pro chip with 12 core CPU and 16 core GPU: 24GB Unified Memory, 512GB SSD Storage, Gigabit Ethernet, 3 Thunderbolt5 + 2USBC ports.

ET Skins, TrackInfo Plugins and Other Goodies - https://englishtiger.uk/index.html

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 9247
Re: A Guide to Standard View Skinning
« Reply #5 on: March 02, 2025, 11:39:08 am »

As I mentioned to you, ET, earlier via email, this is a Herculean task you have set yourself. Progress thus far has been impressive, both in rate, and meticulous attention to detail.

Would you like something else to check on? I found it this week when I moved from 32 bit MC to 64 bit MC... It's those main frame close/minimise/maximise/restore buttons...

I'm on Windows 10. On 32 bit, Noire, and others, like some of mine that borrowed the code, the correct buttons were used, but on 64 bit, the default platform buttons are being used. I had to change the platform version value from 10.0-? to 22H2, and then the buttons showed up correctly. Not really sure what's up with that at all.

I'm thinking I'll have to add a line in the so that both flavours of MC are catered for. I've no idea how long it's been like that, hopefully not since the day I released them!
Logged

Some alternative skins are here | Import Stats on Steroids | Middle click the close button=One of the neatest things added to MC in a long time

Awesome Donkey

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 8111
  • The color of Spring!
Re: A Guide to Standard View Skinning
« Reply #6 on: March 02, 2025, 11:53:03 am »

ET, you're the awesome one. :D This is a huge undertaking and I highly appreciate the work you're doing on these skins, updating them and getting them all organized, especially for platforms outside of Windows. In fact after your phase 2, that was enough to get me off my butt and update my Modern Cards Mica skin forks to the latest Modern Cards skin changes (and managed to fix scaling support for the Mica skins too, which I had to previously remove due to issues when scaling). I really should get around to releasing those, huh? :P

I'm on Windows 10. On 32 bit, Noire, and others, like some of mine that borrowed the code, the correct buttons were used, but on 64 bit, the default platform buttons are being used. I had to change the platform version value from 10.0-? to 22H2, and then the buttons showed up correctly. Not really sure what's up with that at all.

Now that's interesting, I wonder if it happens on Windows 11 too? I would imagine it would, hmmm.
Logged
I don't work for JRiver... I help keep the forums safe from "male enhancements" and other sources of sketchy pharmaceuticals.

Windows 11 24H2 Update 64-bit + Ubuntu 24.10 Oracular Oriole 64-bit (AMD 7900X CPU/AMD 7800 XT GPU/64GB RAM/2TB M.2 NVMe SSD)
macOS Sequoia 15.3.2 (M4 Mac Mini 16GB RAM/256GB SSD)
Windows 11 24H2 Update 64-bit (Intel N305 Fanless NUC 16GB RAM/500GB M.2 NVMe SSD)
JRiver Media Center 33 (Windows + Mac + Linux) | iFi ZEN DAC 3 | JBL 306P MkII Studio Monitors | Audio-Technica ATH-M50x Headphones

EnglishTiger

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 1189
Re: A Guide to Standard View Skinning
« Reply #7 on: March 02, 2025, 12:52:47 pm »

Marko and AwesomeDonkey thank you both for your, appreciated, kind words and Marko for being there when I've needed some help deciphering some of the more complex instructions in the main.xml file.

AD hearing that even stage 2 had motivated you to revisit your ModernCards Mika skin fork brought a smile to my face, it even had me doing a fist-pump. Getting that kind of feedback makes completing my task/undertaking worthwhile.

Marko - I remember reading about Win 10 22h2 catching a lot of people/software out and I think it was down to it having 22h2 in the version field and not the expected 10.0.nnnn format.
Logged
Apple Mac Mini Desktop Computer with M4 Pro chip with 12 core CPU and 16 core GPU: 24GB Unified Memory, 512GB SSD Storage, Gigabit Ethernet, 3 Thunderbolt5 + 2USBC ports.

ET Skins, TrackInfo Plugins and Other Goodies - https://englishtiger.uk/index.html

Awesome Donkey

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 8111
  • The color of Spring!
Re: A Guide to Standard View Skinning
« Reply #8 on: March 02, 2025, 01:11:57 pm »

AD hearing that even stage 2 had motivated you to revisit your ModernCards Mika skin fork brought a smile to my face, it even had me doing a fist-pump. Getting that kind of feedback makes completing my task/undertaking worthwhile.

There's actually more too. Remember a few months back when Craig added the Mac system button support and you mentioned the Blue Steel and ThunderStorm skins weren't working correctly and I posted crude fixes for them without any way to check/test them as I didn't have a Mac (at least not since I stopped using a Hackintosh)? Your feedback and testing, along with your comments on your experience with the M4 Mac Mini is what made me start seriously think about getting my first legit Mac (and iPad, also my first iOS/iPadOS device) and actually helped convince me to purchase both a M4 Mac Mini and iPad a few days ago (it took me a bit as I had to add a KVM into my setup first and had to do some extensive testing to make sure everything still worked correctly before pulling the trigger on the Mac). The iPad I got Friday and it's excellent and I'll have the Mac Mini around mid-week so I'll be back on the Mac train. So thanks for that kick in the butt too! :D
Logged
I don't work for JRiver... I help keep the forums safe from "male enhancements" and other sources of sketchy pharmaceuticals.

Windows 11 24H2 Update 64-bit + Ubuntu 24.10 Oracular Oriole 64-bit (AMD 7900X CPU/AMD 7800 XT GPU/64GB RAM/2TB M.2 NVMe SSD)
macOS Sequoia 15.3.2 (M4 Mac Mini 16GB RAM/256GB SSD)
Windows 11 24H2 Update 64-bit (Intel N305 Fanless NUC 16GB RAM/500GB M.2 NVMe SSD)
JRiver Media Center 33 (Windows + Mac + Linux) | iFi ZEN DAC 3 | JBL 306P MkII Studio Monitors | Audio-Technica ATH-M50x Headphones

markf2748

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 918
Re: A Guide to Standard View Skinning
« Reply #9 on: March 02, 2025, 02:38:36 pm »

Impressive and valuable effort.  I look forward to comparing your details against notes, organization, and formatting I have been adding to my own skin over the last few months.

First suggestion:  Please add a versioning scheme to your PDF Skinning Guide.  Just adding a version number with date to the cover page would be very beneficial going forward.  Something more elaborate, like sidebars on sections that have changed, highlighting, or very brief summary notes documenting the changes would be even more helpful, if it can be done without significantly hindering the main work.

Thanks.
Logged
Pages: [1]   Go Up