INTERACT FORUM

Please login or register.

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

Author Topic: Skinnable frames & borders introduced in build 171  (Read 9081 times)

4BYE

  • Regular Member
  • Galactic Citizen
  • ****
  • Posts: 416
Skinnable frames & borders introduced in build 171
« on: June 16, 2012, 03:23:13 am »

Quote
4. NEW: All thumbnail borders are drawn with skin items (that can be customized per skin).

It sounds like an answer to my problem, not wanting to show a border around my thumbs, but I don't know where to look or how to do this.

Thanks in advance for some info on this.

Regards,

Theo
Logged

phalanthus

  • Galactic Citizen
  • ****
  • Posts: 461
Re: Skinnable frames & borders introduced in build 171
« Reply #1 on: June 16, 2012, 03:54:10 am »

It sounds like an answer to my problem, not wanting to show a border around my thumbs, but I don't know where to look or how to do this.

Thanks in advance for some info on this.

Regards,

Theo

+1
Logged

4BYE

  • Regular Member
  • Galactic Citizen
  • ****
  • Posts: 416
Re: Skinnable frames & borders introduced in build 171
« Reply #2 on: June 16, 2012, 04:35:46 am »

I tried to change/edit the "Frame_ThumbnailBorder.png" but after re-starting MC17 I still have those borders around my thumbs. From the look of the file it should be the right image to change/edit and I cannot find another that looks like it. (I renamed the original file first). How about every new install: should you first copy the (saved!) edited file again to get rid of the border every time?
Logged

SkGe

  • Galactic Citizen
  • ****
  • Posts: 433
Re: Skinnable frames & borders introduced in build 171
« Reply #3 on: June 16, 2012, 02:09:12 pm »

I tried to change/edit the "Frame_ThumbnailBorder.png" but after re-starting MC17 I still have those borders around my thumbs. From the look of the file it should be the right image to change/edit and I cannot find another that looks like it. (I renamed the original file first). How about every new install: should you first copy the (saved!) edited file again to get rid of the border every time?
To do this is simple.
Go on .xml file, 'border section' copy the code from there to your actual skin (...) .xml file, and paste in the file at that skin, after that, you can create your own template border, or, you don't copy the border from the default skin (C:\Program Files (x86)\J River\Media Center 17). Do a restart of J River and you are settle.
Hope that help you.
Logged

4BYE

  • Regular Member
  • Galactic Citizen
  • ****
  • Posts: 416
Re: Skinnable frames & borders introduced in build 171
« Reply #4 on: June 16, 2012, 03:04:56 pm »

Thanks for your help. I got the part of copying the XML part to my skin. I guess it's the main.xml. I copied the "BORDER" part. Now I don't see anything at all. However I don't know what images are used for showing the border. It seems a little confusing: I have 4 images that all look like "Frame_ThumbnailBorder.png". I edited "Frame_ThumbnailBorder.png" and deleted the border and kept the shade, but it still shows the border. I figured that I only had to change/edit the image to lose the border? Or do I have to change/edit also "Border_DropShadow.png",  "Border_Frame.png" and "Border_GlowShadow.png"?
Logged

SkGe

  • Galactic Citizen
  • ****
  • Posts: 433
Re: Skinnable frames & borders introduced in build 171
« Reply #5 on: June 16, 2012, 04:45:02 pm »

Thanks for your help. I got the part of copying the XML part to my skin. I guess it's the main.xml. I copied the "BORDER" part. Now I don't see anything at all. However I don't know what images are used for showing the border. It seems a little confusing: I have 4 images that all look like "Frame_ThumbnailBorder.png". I edited "Frame_ThumbnailBorder.png" and deleted the border and kept the shade, but it still shows the border. I figured that I only had to change/edit the image to lose the border? Or do I have to change/edit also "Border_DropShadow.png",  "Border_Frame.png" and "Border_GlowShadow.png"?
Right now i don't know yet how this things work, i did play today a little bit with borders to see how is going to be, and so far i still not finish. But from look of problems, the thumbnail border you can deselect from tools>option>tree&View>Thumbnails, and deselect or select from there, this way the thumbnail border will disappear/appear.
For the rest you should redone for you taste if you want, and see how the things are in place.
When i will have a better result i will inform you how it work this borders thing.
Logged

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 9139
Re: Skinnable frames & borders introduced in build 171
« Reply #6 on: June 16, 2012, 04:54:19 pm »

Cheers Matt.

Having spent an hour or two on this, I have to say that the default drop shadow is really quite clever in the way it transitions between light and dark backgrounds.

After much switching back and forth though, I decided that I like mine better. Truthfully though, there's not a lot in it.

So, build 161 had the old drop shadow effect that served us all so well for so long...


The default from build 171 onwards looks like so...


Build 171 also allows us to modify the shadow effect via skinning. I like this, which is more like build 161, keeping the edges crisp and clean...


As I said, there's not a lot in it.

The only things left now are really minor...
  • The new system has a larger minimum thumbnail space. Build 161 allowed the thumbs to get really close, which was quite nice, will be missed, but in no way a deal breaker.
  • When selecting a thumbnail, the selected thumb does not sit in the center of the selection outline. It sits almost right-justified, and is a little off-putting. I've been scrutinising these things for hours now though, so quite possibly, no-one else will notice this. Again, nothing even approaching deal breaker for me.


Thank you again for coming up with an innovative solution to the problem.

If anyone wants a copy of the Border_DropShadow file I've used above, save this... (right click, save image as.. do not change the filename)

add it to your skin folder, and finally, add the following code to your skin xml file...
Code: [Select]
<BORDER>
  <Entry Name="DropShadow" Bitmap="Border_DropShadow.png" Rows="1,?-Flex,9" Columns="1,?-Flex,9" Cells="B2-Skip">
    <Data InternalMarginLeft="1" InternalMarginTop="1" InternalMarginRight="9" InternalMarginBottom="9"></Data>
  </Entry>
</BORDER>

-marko

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 9139
Re: Skinnable frames & borders introduced in build 171
« Reply #7 on: June 16, 2012, 04:55:59 pm »

I've reproduced a post I made earlier detailing how to change the thumb border. Post includes a sample drop shadow file...

http://yabb.jriver.com/interact/index.php?topic=72790.0

Fabricio

  • Citizen of the Universe
  • *****
  • Posts: 685
  • No one has patience with me.
Re: Skinnable frames & borders introduced in build 171
« Reply #8 on: June 16, 2012, 08:50:56 pm »

Thanks, perfect.

Fabricio, from Brazil.

4BYE

  • Regular Member
  • Galactic Citizen
  • ****
  • Posts: 416
Re: Skinnable frames & borders introduced in build 171
« Reply #9 on: June 17, 2012, 03:04:54 am »

Quote
But from look of problems, the thumbnail border you can deselect from tools>option>tree&View>Thumbnails, and deselect or select from there, this way the thumbnail border will disappear/appear.

Where do you see this option? I only have an option there for DRAW FRAMES ON IMAGES THUMBNAILS.
Logged

4BYE

  • Regular Member
  • Galactic Citizen
  • ****
  • Posts: 416
Re: Skinnable frames & borders introduced in build 171
« Reply #10 on: June 17, 2012, 03:12:48 am »

I've reproduced a post I made earlier detailing how to change the thumb border. Post includes a sample drop shadow file...

http://yabb.jriver.com/interact/index.php?topic=72790.0

Thanks for this but it seems I cannot get it right with your help. Replacing the file, even making it yellow to see any difference didn't affect my view. I changed both the orignal xml and your file to the original skin folder and then to my "minimal skin" folder, both resulting in seeing no different view.

Again I ask for an easier option to get rid of the border. On a dark background it's not to my liking.

It would be very nice if someone of JRiver could respond to this. The other option I have is stick with .160 where evrything looked still great.

Thanks in advance,

Theo

Logged

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 9139
Re: Skinnable frames & borders introduced in build 171
« Reply #11 on: June 17, 2012, 04:50:47 am »

I tried to change/edit the "Frame_ThumbnailBorder.png" but after re-starting MC17 I still have those borders around my thumbs. From the look of the file it should be the right image to change/edit and I cannot find another that looks like it. (I renamed the original file first). How about every new install: should you first copy the (saved!) edited file again to get rid of the border every time?
That file was only used for beta testing and is now obsolete.

To refresh, here are the three changes in build 171 that we need to pay attention to...

Quote
4. NEW: All thumbnail borders are drawn with skin items (that can be customized per skin).
5. Changed: Added 'Skip' cell drawing mode to skinning engine so a cell with no data (like the inside of a thumbnail frame) has no overhead (see Default Skin Items > main.xml > Border section for exmaples).
6. Changed: If thumbnail frames for images are disabled in Options, a drop shadow effect will be used in its place instead of the default thumbnail treatment.

#6 is the solution to a problem that was causing the most concern, namely that MC was applying post processing to the edges and corners of our image thumbnails when frames were turned off in options. My first post above addresses this, and only this. All other thumbs will use the default shadows.

The "Default Skin Items" folder mentioned in #5 can be found in the "Data" folder inside the Media Center installation directory. (if this makes you nervous, be sure to read the tips at the end of this post)
The three files we are interested in here are:
1. Border_DropShadow.png - Used around image files if the "Draw frames around image thumbnails" option is turned off
2. Border_Frame.png - Used around image files if the "Draw frames around image thumbnails" option is turned on
3. Border_GlowShadow.png - Used as the shadow effect for all thumbnails after the setting for "Draw frames around image thumbnails" has been taken into consideration.

4BYE, assuming that you would like the old drop shadow back for all your thumbnails, the easiest solution is to add some more code to your skin xml file that instructs the skin to use the drop shadow file for the 'glow shadow' effect too. The "Border" section of the xml would now look so:
Code: [Select]
<BORDER>
  <Entry Name="GlowShadow" Bitmap="Border_DropShadow.png" Rows="1,?-Flex,9" Columns="1,?-Flex,9" Cells="B2-Skip">
    <Data InternalMarginLeft="1" InternalMarginTop="1" InternalMarginRight="9" InternalMarginBottom="9"></Data>
  </Entry>
  <Entry Name="DropShadow" Bitmap="Border_DropShadow.png" Rows="1,?-Flex,9" Columns="1,?-Flex,9" Cells="B2-Skip">
    <Data InternalMarginLeft="1" InternalMarginTop="1" InternalMarginRight="9" InternalMarginBottom="9"></Data>
  </Entry>
</BORDER>

If you add that, save it, reload your skin, that should take care of it?

Quick explanation of the border code above
I'll give a quick outline here of what the lines of code actually do in case anyone would like to produce their own shadow images.

The first line of entry for each of the three shadow files specifies the file to use (Bitmap="<name of file to use>"), and tells MC how to draw that file using "Rows" and "Columns" information.
The rows and columns info is  given like so: Rows="1,?-Flex,9" Columns="1,?-Flex,9"
Let's look at "Rows" first. This is telling MC to start at the top of the file and draw the first row of pixels, and the last 9 rows of pixels, as they are in the file, and to stretch everything in-between to achieve the height required by the view. The exact same logic is then applied from the left of the file to the right, to draw columns.

If you imagine the rows and column markers were overlaid on the image, you would have a lopsided 'tic-tac-toe' grid defining nine areas. The columns are A, B, and C while the rows are 1, 2, and 3. The final instruction here is Cells="B2-Skip" which is telling MC to ignore this cell. We know that this is where MC will place the actual thumb image, so it is a waste of resource to have MC process this cell, only to replace it with the thumbnail later.

The next line is the "Data" line. Here we detail the "internal margins". Imagine defining an internal border using these four values, this is the area that MC will use to display the actual thumbnail.

Understanding the "Default Skin Items" Directory.
#5 in the release notes says "(see Default Skin Items > main.xml > Border section for exmaples)."
Assuming that MC is installed in the default location, if you navigate to: C:\Program Files (x86)\J River\Media Center 17\Data\Default Skin Items\Standard View\ you will find a few image files and a file called main.xml. Note that if not using a 64 bit version of windows, the path will be: C:\Program Files\J River\Media Center 17\Data\Default Skin Items\Standard View\.
These are skin items that are required by all skins, and by including them here, the system ensures that older skins remain compatible with the current skinning features. These files will be used by every skin that does not have them detailed in their own specific xml files.

If these default files are edited, they will be replaced by the default images each time you update or reinstall the program. Bearing this in mind, if you want to produce your own shadow files but are worried about breaking something, then it would be a good idea to edit these files, along with the xml file found here. If you make a mess, simply reinstall to fix it. Once you are happy, remember to copy your edited files to your chosen skin folder and to also edit the Main.xml file for that skin to make your changes specific to that skin.

Hopefully that helps if you are not enamoured with the new look thumbnails and would like to do something about it.

-marko.

phalanthus

  • Galactic Citizen
  • ****
  • Posts: 461
Re: Skinnable frames & borders introduced in build 171
« Reply #12 on: June 17, 2012, 05:07:03 am »

 ? ? ?
omg
Logged

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 9139
Re: Skinnable frames & borders introduced in build 171
« Reply #13 on: June 17, 2012, 07:05:47 am »

It's not as scary as all that really.

The really simple answer is to save the shadow file in my first post, drop it into your skin directory and add the border code to the skin xml.
Code: [Select]
<BORDER>
  <Entry Name="GlowShadow" Bitmap="Border_DropShadow.png" Rows="1,?-Flex,9" Columns="1,?-Flex,9" Cells="B2-Skip">
    <Data InternalMarginLeft="1" InternalMarginTop="1" InternalMarginRight="9" InternalMarginBottom="9"></Data>
  </Entry>
  <Entry Name="DropShadow" Bitmap="Border_DropShadow.png" Rows="1,?-Flex,9" Columns="1,?-Flex,9" Cells="B2-Skip">
    <Data InternalMarginLeft="1" InternalMarginTop="1" InternalMarginRight="9" InternalMarginBottom="9"></Data>
  </Entry>
</BORDER>

Save the xml file, reload the skin and you're done.

The only caveat at the moment is that you will need to do that for each skin individually.

The rest of my post above is for those that want to understand why it works, as they will need that if they want to produce their own shadow files.

These thumbnail changes are a direct result of this thread from last month: http://yabb.jriver.com/interact/index.php?topic=72480.0

-marko

4BYE

  • Regular Member
  • Galactic Citizen
  • ****
  • Posts: 416
Re: Skinnable frames & borders introduced in build 171
« Reply #14 on: June 17, 2012, 11:51:57 am »

Hello Marko,

First, thanks for all the time you put in this, I really appreciate this.

I did exactly what you wrote. I use "Minimal Skin" which has a dark background. In that XML file is no "BORDER" part. So I added your code and copied the "Border_DropShadow.png" from the date/Default Skin Items/Standard View to the "Minimal Skin" folder. I don't see no border anymore but it still isn't the right shadow. I played with the code but don't get it right. To show you what it looks like when I do the things you mentioned I include this view. Maybe you can see what is still wrong.



Theo
Logged

marko

  • MC Beta Team
  • Citizen of the Universe
  • *****
  • Posts: 9139
Re: Skinnable frames & borders introduced in build 171
« Reply #15 on: June 18, 2012, 12:53:37 am »

Morning 4BYE,

I think you are almost there...

The XML code and the images have to match. The code I posted above will work for the custom drop shadow file I posted above. The margins defined in that code won't be right for the default file you have copied from the default skin items folder.

So, By default, using the thumbnail effect files from the default skin items folder, the minimal skin draws thumbs like so:

I think this "Glow" effect has caught a lot of users off guard... it's certainly... different!

If we take the default drop shadow file from the default skin items folder and place it in the minimal skin directory, we also need to lift the matching border code from the xml file and paste it into the minimal skin main.xml file. Once that's done, and the skin reloaded, thumbs now look like so:

No more glow effect. The xml code needs to tell MC to use the drop shadow file when it is using this 'glow shadow' effect. The code for this is:
Code: [Select]
<BORDER>
  <Entry Name="GlowShadow" Bitmap="Border_DropShadow.png" Rows="3,?-Flex,7" Columns="5,?-Flex,5" Cells="B2-Skip">
    <Data InternalMarginLeft="5" InternalMarginTop="3" InternalMarginRight="5" InternalMarginBottom="7"></Data>
  </Entry>
  <Entry Name="DropShadow" Bitmap="Border_DropShadow.png" Rows="3,?-Flex,7" Columns="5,?-Flex,5" Cells="B2-Skip">
    <Data InternalMarginLeft="5" InternalMarginTop="3" InternalMarginRight="5" InternalMarginBottom="7"></Data>
  </Entry>
</BORDER>

And finally, if you prefer to use my "build 160 drop shadow look-a-like" file (right click this link and choose save target as... to download a copy), the thumbs then look so:

The code for this file is:
Code: [Select]
<BORDER>
  <Entry Name="GlowShadow" Bitmap="Border_DropShadow.png" Rows="1,?-Flex,9" Columns="1,?-Flex,9" Cells="B2-Skip">
    <Data InternalMarginLeft="1" InternalMarginTop="1" InternalMarginRight="9" InternalMarginBottom="9"></Data>
  </Entry>
  <Entry Name="DropShadow" Bitmap="Border_DropShadow.png" Rows="1,?-Flex,9" Columns="1,?-Flex,9" Cells="B2-Skip">
    <Data InternalMarginLeft="1" InternalMarginTop="1" InternalMarginRight="9" InternalMarginBottom="9"></Data>
  </Entry>
</BORDER>

The difference between the two different 'border' codes is in the rows, columns and internal margin values. If these do not fit the drop shadow file, MC will place the thumbnail in the wrong place relative to the drop shadow and the effect will be lost.

Does that make it any clearer? If not, I do not mind trying to explain again :)

Might be worth mentioning that personally, I think the default Glow effect, as shown in the first of the three images above is not so bad. It was specifically designed to accentuate the thumbnails when using dark skins such as "Minimal". The big issue for me, and any other photographer out there who gets a little possessive and anal about their photos, was that that glow effect was being applied to them too, as well as cover art, and was making them look awful. That's why we have separate "GlowShadow" and "DropShadow" files, and in a stroke of genius, in case any of us were still not happy with the defaults, we now have the ability to take complete control over the issue via the skinning engine. Another home run for J River Media Center.

-marko

4BYE

  • Regular Member
  • Galactic Citizen
  • ****
  • Posts: 416
Re: Skinnable frames & borders introduced in build 171
« Reply #16 on: June 18, 2012, 02:26:44 am »

Hello Marko,

This code

Quote
<BORDER>
  <Entry Name="GlowShadow" Bitmap="Border_DropShadow.png" Rows="3,?-Flex,7" Columns="5,?-Flex,5" Cells="B2-Skip">
    <Data InternalMarginLeft="5" InternalMarginTop="3" InternalMarginRight="5" InternalMarginBottom="7"></Data>
  </Entry>
  <Entry Name="DropShadow" Bitmap="Border_DropShadow.png" Rows="3,?-Flex,7" Columns="5,?-Flex,5" Cells="B2-Skip">
    <Data InternalMarginLeft="5" InternalMarginTop="3" InternalMarginRight="5" InternalMarginBottom="7"></Data>
  </Entry>
</BORDER>

did it for me. Is was playing with the numbers but couldn't get it right. But now it is. Thanks again for your time and effort.

All the best, Theo
Logged
Pages: [1]   Go Up