Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Jappie]

March 8, 2025

I updated all Easy Grey and Easy White skins. Again...
Likely to be the last ones for the near future...


Where to look for the updates?
1. Easy Grey - version 1.13
https://yabb.jriver.com/interact/index.php/topic,138750.msg962453.html#msg962453

2. Easy Grey rounded - version 1.2
https://yabb.jriver.com/interact/index.php/topic,140724.msg975981.html#msg975981

3. Easy White - version 1.2
https://yabb.jriver.com/interact/index.php/topic,140699.msg975862.html#msg975862

4. Easy White rounded - version 1.2
https://yabb.jriver.com/interact/index.php/topic,140741.msg976089.html#msg976089


Enjoy.

[EnglishTiger]

Jappie - sorry if this is the wrong thread for this posting.

I think the "Rounded Corners" distorting/looking bad at different MC Scale Values problem may be down to the way the Skinning Engine is handling those Images.

When I reach a convenient point in the creation of the skinning guide I'll carry out some experiments on some of the round cornered elements in one of your skins to see if what is required is an Image and relevant Image Handling Instruction for some, or every, MC Scale Value. If that proves to be the case I will include an "Images with Rounded Corners" section in the Guide

[Jappie]

Jappie - sorry if this is the wrong thread for this posting.

I think the "Rounded Corners" distorting/looking bad at different MC Scale Values problem may be down to the way the Skinning Engine is handling those Images.

EnglishTiger,
I do not have a skin-homepage (yet) and I did not make a topic of 'rounded corners' (yet), so you can use any of my posting to add information

Yes I think it is the way the Skinning Engine is handling the images: MainFrame and Frame-borders (Options). Multiple images that do not match at some the corners of the window.
For the Mainframe solution: no corners on the outside. In combination with special xml-coding a rounded frame for Tree-List area is possible for all MC-scaling.

With the Options-window corners: at small MC-scales and large MC-scales typical the right border (1px) disappears and/or at the some corners there is a mismatch/misaligning of borderlines. I solved it partially (for now without rounded corner) with only a 1 pixel borderline. The image needs to have on the Left and Right side 1 transparent pixel. This takes care of the 'disappearing' right borderline. This works at all MC-scales.

For the submenu and popup windows we have 1 background image and that works excellent. NO problems with MC-scaling. Here the problem of transparency remains for the corners. It's only visible of course when you activate a menu or any popup and visibility depends on the background... But that is not acceptable for a 'universal skin'.
The main-program window and the MiniView also have the transparency problem at the corners.

Whenever I can assist, let me know. I have of course Mainframe + Options frame images and xml-coding available in - at the moment - 4 Skins. (did not thought I would get this far.
I did not test with different scaled skin-images though.

In the end: the transparency issue rules out any use of rounded corners. The skins 'Easy Grey rounded' and 'Easy White rounded ' have a lot 'rounded' left to see inside the window-borders to give it a nice look.
 
I have a lot to read. You have been and are very busy! Great work!

[markf2748]

With the Options-window corners: at small MC-scales and large MC-scales typical the right border (1px) disappears and/or at the some corners there is a mismatch/misaligning of borderlines. I solved it partially (for now without rounded corner) with only a 1 pixel borderline. The image needs to have on the Left and Right side 1 transparent pixel. This takes care of the 'disappearing' right borderline. This works at all MC-scales.

Thanks for pointing this out.  Today I confirmed (on 4K Windows desktop monitor) that a 1 pixel displayed width for the left and right popup borders (FRAME::LeftBorder, FRAME::RightBordor) requires 2 pixels (i.e. 2 columns) in the artwork.  To display 1 px instead of 2, I make the inner columns transparent, which I think is what you are saying.  To match with 1 px borders along top and bottom edges, add just 1 px wide borders (1 row) to FRAME::TopBorder and FRAME::BottomBorder.

Above seems likely to prevent (or certainly complicate) 1 px displayed round corners.  But maybe 1 px displayed round corners would work with FRAME::Data:BorderTopBottomLarger="1", where all the rounding is done in the corners of TopBorder and BottomBorder, while LeftBorder and RightBorder stop short of the rounded regions (I have not tried it).

[Jappie]

Thanks for pointing this out.  Today I confirmed (on 4K Windows desktop monitor) that a 1 pixel displayed width for the left and right popup borders (FRAME::LeftBorder, FRAME::RightBordor) requires 2 pixels (i.e. 2 columns) in the artwork.  To display 1 px instead of 2, I make the inner columns transparent, which I think is what you are saying.  To match with 1 px borders along top and bottom edges, add just 1 px wide borders (1 row) to FRAME::TopBorder and FRAME::BottomBorder.

Above seems likely to prevent (or certainly complicate) 1 px displayed round corners.  But maybe 1 px displayed round corners would work with FRAME::Data:BorderTopBottomLarger="1", where all the rounding is done in the corners of TopBorder and BottomBorder, while LeftBorder and RightBorder stop short of the rounded regions (I have not tried it).

Hello Markf2748,
recently I was searching the forum about 'transparency'. Came across your name in topics about 15 years old... I am just a rooky at skinning.
I dropped rounded corners on the Options frame because of transparency issues (not perfect and possible cross-platform issues).

The only border that works on EVERY resolution, 1920x1080 and 3840x2160) and (Windows) scale 100 - 400, and EVERY MC-skin size (50% and 400% on todays testing):
Start with 1 square with 1 px border. Add on the left side 2 transparent pixels and on the right side 2 transparent pixels.
I used this in XML:
  <Entry Name="LeftBorder" Bitmap="Frame_LeftBorder.png" Columns="3,?-Flex" Rows="1,?-Flex,1" Cells="A2-VTile,B1-HTile,B2-Tile,C2-VTile" />
  <Entry Name="RightBorder" Bitmap="Frame_RightBorder.png" Columns="?-Flex,3" Rows="1,?-Flex,1" Cells="A1-VTile,B1-Tile,B2-HTile,C1-VTile" />
  <Entry Name="TopBorder" Bitmap="Frame_TopBorder.png" Rows="1,?-Flex" Cells="A1-VTile,B1-Tile" />
  <Entry Name="BottomBorder" Bitmap="Frame_BottomBorder.png" Rows="?-Flex,1" Cells="A1-Tile,B1-VTile" />

There is something magical seeing MC size 50% on display 3840x2160px, scale 100... Barely readable of course (old eyes and glasses not fit for this task).
And seeing a perfect 1 pixel border on MC size 400%, UHD max scale...
 
I did try 2px borders. Issues with thickness of top and bottom borderlines.
I did not try BorderTopBottomLarger="1". It still has a RightBorder issue and this time 3 images involved.
And so we go on experimenting

[markf2748]

@Jappie - thanks for your reply.  I first joined the Interact Forum on 10/1/2020, around the time of my first MC license (~MC27), so I am also a relative newcomer to JRiver compared to the many more experienced hands helping out here.

I find MC can be pretty wonky wrt drawing narrow vertical borders on Frames like the Options popup.  For a border 2 columns wide with a single bright magenta border column (test color on the outside edge), I am convinced MC first draws the popup showing the magenta column, but then in a quick flash redraws it with the bright column missing.  However if I mouseover the frame's Top Border or Bottom Border, the bright column gets redrawn and is visible as expected!  I believe the underlying effect of adding columns, transparent or not, is to effectively pad out the border to 5 columns, at which point MC always draws things as expected for me without needing a mouseover to prompt a redraw.  So I no longer use transparent columns, and now pad towards the inside with dark opaque columns to suit.

Issues that clouded my experience:
(1) I was inadvertently using too low a dpi in some of my Inkscape images.  I find that 96 dpi gives consistent predictable results.
(2) I tended to use images that were far larger than needed, in a naive belief that making the image close to the final size would improve the success rate of MC.  Not true IME!  I forgot that simple small images, generally much less than 100 x 100 pixels, along with proper drawing instructions when needed, really help the drawing engine do its job.  Thanks for reminding me of that.
(3) MC's ?-Flex mechanism works very reliably to fix/expand most images in controlled ways and is easy for me to understand.  I find it unnecessary to use the Cells mechanism (which I do not fully understand anyway) for Frame borders.  I've successfully tested the Frame borders over a wide range of MC Sizes and variety of Frame popups, always at the recommended Windows Display resolution for each of my 3 monitors.

After far too many hours of horsing around with this, I am now in a good spot. 

[EnglishTiger]

Jappie & markf2748

Open the main.xml for the ThunderStorm skin and it's Left & Right Frame Borders in your image editor and you will learn one of the secrets of handling rounded corners for a Frame.
Unlike most of the other 86 skins I'm working on that one is using flex commands to manipulate the borders.
N.B. the frame left and right borders are only slightly rounded but they never distort on my 1920x1080 screen with every MC Size.

For contrast download and install one of the Opus MC Skins from the skins download page, they all have well rounded left and right frame borders but because the images are not manipulated they distort when the MC size is not 100%.

markf2748 - 96 dpi was the original MS/Intel spec for the old square screen CRT Monitors, and because they love to be different the original Apple spec was 72 dpi.

[markf2748]

Open the main.xml for the ThunderStorm skin and it's Left & Right Frame Borders in your image editor and you will learn one of the secrets of handling rounded corners for a Frame.
Unlike most of the other 86 skins I'm working on that one is using flex commands to manipulate the borders.

Yes. ThunderStorm does the rounding on FRAME::LeftBorder:Bitmap and FRAME::RightBorder:Bitmap, using FRAME::Data:BorderTopBottomLarger="0" to run wide vertical borders all the way up and down to meet the edges of the Frame.

I've used the same general design principles with ?-Flex, but put the rounding into FRAME::TopBorder:Bitmap and FRAME::BottomBorder:Bitmap, using FRAME::Data:BorderTopBottomLarger="1".  In this case the bright 1 pixel wide vertical border stripes (with usual square ends) meet the TopBorder/BottomBorder at their Bottom/Top edges respectively.

The Option window popup and its Close dialog message, both with rounded corners, are shown in the attachment for a 15 pixel rounding radius (in my 60x25 px artwork).  Gray borders and round corners look good at all MC Size settings.  The rounding radius in this scenario can be made somewhat larger, but is limited by the vertical height which MC allows for the BottomBorder.  Rounding on the verticals may allow a larger radius, at the price of making the border correspondingly wider.

BTW, I noticed in testing that the BottomBorder also has a refresh issue at its top row, similar to what I reported above for the LeftBorder's left column.  In practice the issue is not noticeable for the BottomBorder as long as its top row is not in a contrasting color relative to the background.

3/8/2025 Note:  The same technique is easily applied in section <MAINFRAME> to create round corners with a narrow all-around border for the main window.  Confirmed for 20 px radius with 1 px border and wider.

Win 11 Pro 64-bit | MC 34.0.3 (beta)

[Jappie]

Open the main.xml for the ThunderStorm skin and it's Left & Right Frame Borders in your image editor and you will learn one of the secrets of handling rounded corners for a Frame.
Unlike most of the other 86 skins I'm working on that one is using flex commands to manipulate the borders.
N.B. the frame left and right borders are only slightly rounded but they never distort on my 1920x1080 screen with every MC Size.

I looked at the Thunderstorm skin a year ago and was not impressed with that jagged, 'transparent' corner.
On a 1920x1080 px display the jagged edge will be noticeable, on a higher dpi-display less.

I think a JRiver skin should produce a high quality image. This implies: not with limited transparency.
Rounded corners are nice though, so I tried it on Easy Grey rounded and Easy White rounded (version 0). Not on the Mainframe but on all other (popup) windows. The transparency issue is less noticeable when the corner is on the background color of the skin, and of course when we look for a menu-option and not a corner...

Flex-coding is not a problem. Only issues that show on skin-size 50%, 300% or 400% can take some time to find a (flex) solution