Print

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

[markf2748]

With the Subject option selected, a Standard View skin incorrectly draws the expanded Scrollbar VerticalHandle (same for horizontal handle).  It appears the handle's endpoint sub-images are stretched in one direction, but not the other, resulting in a distorted handle image during enlarged mouseover and during an enlarged scrollbar drag.  Many enlarged scrollbars have always looked goofy to me, and I think this is partly to blame.

Example:  I define the handle to be a simple rounded rectangle with (corner radius) = (rectangle narrow dimension) / 2, thereby giving smooth "half round" ends to the handle (see attachment, but I've seen the same issue with other handle images and other Standard View skins).  With the Subject option deselected everything looks good, nicely rounded as expected.  With the Subject option selected, the ends appear squashed, as if stretched in one direction but not the other.

I use the following code in the <SCROLLBARS> section of the skin's main.xml file:

Code: [Select]

<Entry Name="VerticalHandle"  Bitmap="Scrollbar_VerticalHandle.png"  NumberImages="3" Margins="0,5,0,5" Scale="1" DrawMode="REGION_E_VSTRETCH"/>
<Entry Name="VerticalBackground" Bitmap="Scrollbar_VerticalBackground.png"  NumberImages="1" Margins="0,5,0,5" Scale="1" />
<Entry Name="VerticalUpArrow" Bitmap="Scrollbar_VerticalUpArrow.png"  NumberImages="3" Margins="0,0,0,0" Scale="1" />
<Entry Name="VerticalDownArrow" Bitmap="Scrollbar_VerticalDownArrow.png" NumberImages="3" Margins="0,0,0,0" Scale="1" />

Seems like a bug to me.  I messed around with several other DrawMode values and did not find anything that changed the described behavior.  In any case, it cost me several frustrating hours to unravel this story while modifying a skin with the option selected.

General Comments re Subject option:  It's 100% an optical illusion, and I've decided never to use it (at least as currently implemented).  This option in no way affects the actual operation of selecting the scrollbar and scrolling: (1) It does not make it easier to initially "hit" the scrollbar (initial target area is not enlarged) (2) During scrolling, the LMB down mouse can be dragged anywhere on the screen while continuing to scroll (a good thing), irrespective of this option setting. (3) It has the annoying side affect of temporarily pushing all the Control Panel thumbnails to the left.

Note:  MC must be re-launched for a change in the Subject option to take affect.

Win11 Pro (64-bit) | Win10 Pro/Home (64-bit) | MC 32.0.49 (in beta)

[Matt]

I have this option on and with the default skin it looks right.  Could you post a screenshot showing the problem?  Thanks.

[markf2748]

I have this option on and with the default skin it looks right.  Could you post a screenshot showing the problem?  Thanks.

Screenshots attached.
With Enlarged Scrollbar, the half-round ends of the scrollbar handle are flattened compared to the full half-circle seen without the Subject option.  It looks as if there is sub-image stretching in the horizontal direction without equivalent stretching in the vertical direction.  The effect is not noticeable if the scrollbar handle is a squared-off rectangle.

The distortion can be very apparent, depending on length and size of the scrollbar, but always displays the same geometry.

I have not fully examined dependence on size of the original image, but from my limited testing it is independent of original image size.

[Matt]

I think that's because of the margins on the handle images.  They have a margin that's set that doesn't stretch.  Then the inner part stretches.  You could remove the margins so it stretches uniformly if you preferred.

[markf2748]

I think that's because of the margins on the handle images.  They have a margin that's set that doesn't stretch.  Then the inner part stretches.  You could remove the margins so it stretches uniformly if you preferred.

Thanks - removing the margins apparently corrects the problem (see attachment and simplified code below).

Code: [Select]

<!--  Vertical Scrollbar -->
<Entry Name="VerticalHandle"  Bitmap="Scrollbar_VerticalHandle.png"   NumberImages="3" Scale="1" />
<Entry Name="VerticalBackground" Bitmap="Scrollbar_VerticalBackground.png"  NumberImages="1" Scale="1" />
<Entry Name="VerticalUpArrow" Bitmap="Scrollbar_VerticalUpArrow.png"  NumberImages="3" Scale="1" />
<Entry Name="VerticalDownArrow"  Bitmap="Scrollbar_VerticalDownArrow.png"  NumberImages="3" Scale="1" />
That leaves two niggles when selecting the Subject option:

(1) When I initially mouseover the handle, there is a brief flash (~ 1 second) between the Up Image and the Over Image during which an un-enlarged Over Image appears.  This is especially apparent when the bright part of the Up Image is significantly narrower than the Over Image, as in the OP example.  I can't capture it, but it's there and is bothersome for this case.

(2) As mentioned in OP, with Subject option selected, the thumbnails shift left as the handle expands.  Then they shift back to right when done scrolling.  Rather annoying. 

The simplified code distorts the handle endpoints when not using Enlarged Scrollbars.  So I will go back to the original code with non-zero top/bottom Margins + DrawMode, and deselect the Subject option (I assume DrawMode requires a Margins callout to define sub-images).

[HPBEME]

Scrollbar thumbs are really tough to get right without distortion on rounded ends. When I started my very first skin, the scrollbar images were the very first thing I started working on. I found it so difficult to figure out what was going on, I just about gave up early on because it got so frustrating.

I had zero experience editing images, and had no clue what the various image parameters meant in the main.XML file. Several years on after that original experience however, addressing image distortion issues is second nature, and I feel somewhat silly that I didn't figure things out much sooner.  One piece of advice you might find helpful: a key thing to grasp is that thumb sizing is ultimately controlled by scrollbar background image. You can make the thumb image as big as you want, but it will always get squished down to fit within the limits of your scrollbar width, which when combined with margins and scaling, can mess up how it comes out in actual use. 

Regarding the built in checkbox for "Enlarge Scrollbars on Mouse Over" - it does work, but has an intolerable delay. For all my skins now, I design the thumb hover sub-image, to be much larger than the default display sub-image. Consequently, the scrollbar thumb enlarges instantaneously on mouse over (vs. waiting for the software to react). See thumb size delta in the attached screenshot. NOTE: the scroll background is completely transparent, so it simply shows the list background as continuous. Nevertheless, the width of that transparent background controls how big the thumb can enlarge to.

[HPBEME]

Since the previous reply showed a scrollbar background image that was transparent, I thought it would be useful to show a scrollbar that has an actual background to illustrate more explicitly how the background limits the thumb size (note: there are lots of tricks you can play with margins, transparency and other image control parameters to do some pretty unique stuff)

The attached file shows another scrollbar/thumb variation (five variations total) in my new (and yes, still unavailable) Dream in Blue skin. This picture also uses the native color, while the previous picture used MC's skin effects to flip the blue and green two digit hex color codes.

[markf2748]

Scrollbar thumbs are really tough to get right without distortion on rounded ends.
.
One piece of advice you might find helpful: a key thing to grasp is that thumb sizing is ultimately controlled by scrollbar background image. You can make the thumb image as big as you want, but it will always get squished down to fit within the limits of your scrollbar width, which when combined with margins and scaling, can mess up how it comes out in actual use.
.
NOTE: the scroll background is completely transparent, so it simply shows the list background as continuous. Nevertheless, the width of that transparent background controls how big the thumb can enlarge to.

I thought it would be useful to show a scrollbar that has an actual background to illustrate more explicitly how the background limits the thumb size (note: there are lots of tricks you can play with margins, transparency and other image control parameters to do some pretty unique stuff)

Thanks for the tips.  I've concluded that getting low-distortion rounded scrollbar handle ends is pretty much a crapshoot discovery process.  First, draw width of the background to set overall scrollbar width, as you suggest.  Then draw the handle images for each state at widths close to what you want relative to the background width.  Set margins and DrawMode to control sub-image stretching.  Finally, iteratively adjust the Scale factors between 1 and 3 until distortion is brought down to an acceptable level.  If the final appearance is not right, start all over again.

The process seems to work, but there really should be a better, more deterministic built-in method wrt to handling distortion once margins and DrawMode are properly set.

On the other hand, if you're satisfied with flat ends, it's more straightforward.

[HPBEME]

I would definitely agree that the scrollbar thumbs in particular do not behave like other images. But...

...that doesn't mean you cannot get a perfectly rounded ends, as demonstrated in the attached pic showing the default and mouse-over appearance (this is yet another thumb variation I have in addition to the two shown in my prior posts).

It is definitely not a crap-shoot… you just have to know how to apply certain tricks and use the right image parameters.