Kirill Grouchnikov's Blog

Experimenting with scroll panes and scroll bars - incorporating your feedback

The previous entry showed the first experimental support for translucent scrollbars that show the viewport contents on the scrollbar area (buttons and track). The readers have left very interesting ideas in the comments section (thanks everybody), and here is the new implementation.

First, the WebStart link itself. The bottom slider controls the opacity of the scroll bar in inactive (non-rollover) state, while the top slider controls the opacity of the scroll bar in active (rollover) state.

Here's the list of things that were changed (besides the obvious support for different rollover opacity):

• The scroll thumb is translucent as well.
• The scroll bar can be marked with "active" property. This makes the scroll buttons appear always in active color scheme (as in the link above).
• The thumb becomes "active" when the mouse is over any area of the scroll track (not only the thumb area).
• The performance is much better, making the viewport appear much less "torn" under the scrollbars.

The transitions between inactive and active states are fully animated (note that there is no assumption on the composites for these two states being both SRC_OVER. There are still the following points (feel free to add yours in the comments):

• Should the track be painted in "active" composite in rollover state (as the thumb does)? See th first screenshot below - the mouse is over the horizontal scroll track, but it appears as opaque as the vertical scroll track. Thanks to alski for the suggestion.
• Should i provide an API to allow mouse-proximity based composites? This may not work very well when the mouse comes from the bottom or from the right... Thanks to for the suggestion.

One thing that is not yet implemented (will be) - proper animation of the scroll button "ears". This is especially noticeable on standard button shaper. And now for some screenshots. Scroll pane with 50% inactive and 80% active opacity on scroll bars (the mouse is over the horizontal scroll track):

Scroll pane with 50% inactive and 80% active opacity on scroll bars (the mouse is not over any track):

Scroll pane with 30% inactive and 60% active opacity on scroll bars (the mouse is over the horizontal scroll track):

The code for the test application (and the supporting UI delegates) is not yet in CVS (it will be added once 3.1 is officially out and properly tagged). To see the code, download the distribution zip from this location and see the src/test/ScrollDemo.java.

Comments

• I am duly impressed.

  2.2 GHz Celeron, hardware acceleration disabled (running under Linux with a a SYS video card that has crummy drivers). Mousing on and off the scrollbars only creates a 10-20% CPU spike. Scrolling by dragging the thumb rapidly creates a ~70% CPU spike, so whatever algorithim you're using to paint the checkerboard is processor hungy.

  Also, I'd like to know specifically what you mean about the scroll button ears. Everything looks fine to me. :-)

  William

  Posted by: afishionado on November 07, 2006 at 09:35 PM

• William - this example uses the classic button painter with 2-pixel radius for scroll thumb. If you use the standard button painter, the thumb is round, and so are the scroll buttons - see this screenshot. The "ears" are those "pointy" corners that extend into the scroll track. They are painted in the paintTrack but are synchronized with the adjacent button. So, when you rollover the button, that part of the scroll track should be painted accordingly to maintain the visual continuity of the scroll buttons. This is a major pain in the *** for me, but a nice exercise in Java2D trickery nonetheless.

  Posted by: kirillcool on November 07, 2006 at 10:04 PM

• Very swish. What about the bottom right grey rectangle? Maybe that could be transparent.

  Posted by: commanderkeith on November 09, 2006 at 04:24 AM

• Keith - i've thought about that corner, and it doesn't feel "right" to put the viewport there. Perhaps with very high opacity factor? It's just that the scrollbars are real controls, so it's kind of "OK" to put the viewport under them, but that corner just "belongs" outside of the scroll pane.

  Posted by: kirillcool on November 09, 2006 at 10:45 PM

• A suggestion for the lower right corner is to put a popup thumbnail map there. You see this on paint programs a lot - the whole viewport with a red rectangle that you can move to the region you want. You already have the thumbnails from your tab pane previews, so you'd just need to add the red movable rectangle. If you're going to add this I'd suggest make it big, I find that those overview maps are useless if they're too small. Alternatively, have the main viewport scroll live as you move the red rectangle around so you can see the detail of what you want highlighted.

  Posted by: r_nagappan on November 11, 2006 at 03:45 PM

• Raj - something like this?

  Posted by: kirillcool on November 11, 2006 at 06:47 PM

• Yes exactly like that. I didn't realise that it was so easy to add stuff to that corner.

  Posted by: r_nagappan on November 12, 2006 at 04:06 PM

• Raj, this has been added to the 3.2dev version - thanks to the original code author (Pierre) that has graciously agreed to contribute the code under BSD license. It has been augmented with animation on scrolling. You can try the latest 3.2 dev drop - all scroll panes have this selector, unless the SubstanceLookAndFeel.NO_EXTRA_ELEMENTS VM flag / UIManager setting is used.

  Posted by: kirillcool on November 13, 2006 at 04:12 PM

This work is licensed under a Creative Commons License.