Kirill Grouchnikov's Blog

Experimenting with scroll panes and scroll bars

I have mixed thoughts about the My Dream App contest. On one hand, the screenshots and the mockup videos are spectacular (check this 16MB Quicktime Movie, 800x600). On the other hand, these are really only screenshots and mockup videos, at least for now. One of these screenshots caught my eye - see this 1024*768 mockup of the winning idea (creating a dynamic weather-based desktop). What are you looking at? That translucent scrollbar that partially shows the part of the view behind it.

Substance 3.1 is in the release candidate stage (release is on November 13), and Substance 3.2 is just starting. So, what better place to test Swing's ability to provide such a feature than the look-and-feel UI delegates? Without much ado, click on the link below and see it for yourself. The slider controls the translucency of the scroll bars and the scroll buttons. Play with the slider and with the scrollbars themselves.

Here are a few screenshots for the people behind the firewalls and filters. Scroll pane with 50% opacity on scroll bars and scroll buttons:

Scroll pane with 80% opacity on scroll bars and scroll buttons:

Scroll pane with 30% opacity on scroll bars and scroll buttons:

I'd be happy to hear your thoughts about the current visual results, possible improvements and any other suggestions.

Comments

• I like it, although it's very messy when resizing the window.

  On that note, all the normal window furniture is provided by you? (ie resize from edges, close/min/max box top right, window menu top left)

  Posted by: goron on November 04, 2006 at 01:46 AM

• An interesting addition would be if the scroll bars would be very thin or in some other way very subtle and only when the mouse is close/over they would animate to their full size. This can be combined with some translucency of course. Would be neat and new (I think).

  Cheers,
  Mikael
  

  Posted by: mikaelgrev on November 04, 2006 at 06:48 AM

• Hmm. You should try to make controls (arrow buttons and the slider twice less transparent then the rest of the scroller or at least make arrow buttons not transparent to keep them consistent with the slider. Another idea to try is to hide the slider when mouse is not over it...

  There are some issues on vertical scroller. It shows white background after window is resized.

  Posted by: euxx on November 04, 2006 at 11:55 AM

• If i wasn't such a fan of yours, i'd say "It's nice. I like it!" Where do you live Kirill? i'll visit you next year, seriously!

  Posted by: evanx on November 04, 2006 at 01:20 PM

• so in case you didn't take me seriously (and please everyone, never do) seriously Kirill, i wish to visit you. I know, i hope, that it's in Russia, but if not, then where ever :) So wheresit?

  Posted by: evanx on November 04, 2006 at 01:55 PM

• Evan - that would be San Jose (CA). Everybody else - your feedback will be incorporated in the next cycle of this experiment. Thanks

  Posted by: kirillcool on November 04, 2006 at 11:11 PM

• D'oh, i gonna be in europe in the spring visiting family and friends, and i'm overdue for a visit to moscow, which is only a few hours from dublin :)

  Posted by: evanx on November 05, 2006 at 03:59 AM

• ...Not bad but how about animation that varies the translucency of the entire scroll bar on mouse enter? So it starts transparent until the mouse enters the area of the scroll bar at which point the bar slowly become say 60% opaque? I bet that'd be a nice effect.

  Posted by: alski on November 06, 2006 at 04:20 AM

• @mikaelgrev: I've had a little component called JPopupScrollbar sitting on the back burner for months, waiting to be polished so it can be submitted to SwingLabs. It shows only the thumb of the scrollbar, with the shaft materialising around the thumb when clicked. I have crude a 'proof-of-concept' JWS demo knocking about somewhere, if anyone is interested.

  Posted by: javakiddy on November 06, 2006 at 04:56 AM

• performance problems.. too heavy..

  Posted by: felipegaucho on November 06, 2006 at 06:14 AM

• I think the one at 30% has a nice effect. The border is still very visible on this one and communicates the control bounds to the user.

  Posted by: wsnyder6 on November 06, 2006 at 06:58 AM

• This is a really minor nitpick on an otherwise excellent-looking effect, but to avoid confusion in your api, what you're setting is opacity, not translucency. The 80% example has the scroll bar nearly opaque while in the 30% example, the scroll bar is nearly transparent.

  Posted by: trevorwilliams on November 06, 2006 at 11:23 AM

• Trevor - translucent is "nearly transparent". In other words - lets the underlying component (viewport) partially show through.

  Felipe - performance is still bad since i don't set the clip to paint the viewport on the scroll track and on the scroll buttons. So, it's painted 7 times :( It will be fixed once the visual effect itself is finished.

  Goron - yes, it is provided by Substance, including the system menu entries, the rollover buttons and the resizing (well, the last one is taken from the basic core delegate).

  Mikael, Simon - the next version (today or tomorrow) will feature different translucency for active and inactive state for both the scroll thumb and the scroll buttons.

  Thanks everybody for the feedback :)

  Posted by: kirillcool on November 06, 2006 at 11:35 AM

• Kirill - My point was that according the the wording of the screenshots, setting translucency to 100% would result in a completely opaque scrollbar, not completely translucent. I only bring it up because it's a great effect that shouldn't suffer from a counterintuitive api. Apologies for not being clearer before. Also apologies if the screenshot wording doesn't reflect the api. :-)

  Posted by: trevorwilliams on November 06, 2006 at 12:53 PM

• Trevor - now i see what you mean. I've changed the entry to say "X% opacity" instead of "X% translucency". The API doesn't need to be changed, since it requires the application code to return an actual AlphaComposite for the specified control (without requiring it to be SrcOver kind). The new API will require the application to return AlphaComposite for the regular and for the active state.

  Posted by: kirillcool on November 06, 2006 at 12:57 PM

• I think it looks great, but I do see a update delay in the right scrollbars background. It gets out of sync for a fraction of a second. Great stuff though.

  Posted by: aberrant on November 06, 2006 at 02:20 PM

This work is licensed under a Creative Commons License.