Kirill Grouchnikov's Blog

November 2006 Archives

Spicing up your buttons with rollover (and pressed) effects, part II

The first part introduced the "ghosting image" effects (aka "spring" in Romain presentations). When you rollover the mouse over a button, its icon has an outward decaying "ghost" image painted (starts from 50% opacity and decays linearly to zero). I asked for your feedback, and this entry shows how some of your requests have been implemented.

• Jens and Aberrant asked for "pushing" the rollover effect outside the button bounds. Request granted :)
• Christian asked for for a clear feedback on pushing the button. Request granted :)
• Felipe asked for transparent frames. Sorry, but the best we can do for the next couple of years is "it's on our wish-list and the community is welcome to chip in, and in case you really want to know when it will be available, it's on our wish-list" :)

Here is the video (it's a little jaggy, so you're more than welcome to run the WebStart app below):

And here's the test application. Move the mouse over the buttons (best seen on "Cut" and "Paste") and click at will. Use the combo to set the animation speed.

A few notes about the current limitations:

• It works only on the immediate parent panel. That is, if you have a button in a SOUTH panel of your app, the effect will be painted only on that panel, not "spreading" to the CENTER panel. This is done to cut down on CPU and on the implementation complexity (which will be much more complex in general case).
• It works only when the parent is JPanel. While it's trivial to extend it to buttons in JToolBars, custom containers with UI delegates not in Substance will not have this effect (outside the button bounds).
• It works only on JButtons and not on JToggleButtons. It's trivial to extend it to the later, but not to custom components not in the core Swing.

As always, your feedback is more than welcome. While the ultimate goal is something as attractive but yet not distracting as this Beryl clip, it may take a while to get there. The next step would most probably involve extending this effect to tree expanding (thanks, Pramod).

Spicing up your buttons with rollover effects

One of the main source of ideas for new features in Substance is the community. And not only the explicit user requests. I try to stay updated on the latest trends, tricks, gadgets and what-nots in the UI area (this is probably the most important piece of advice i mention in the How to write a custom look and feel article on java.net. When i run the Aerith the first time, one of the more interesting UI tricks were the "image ghosting" (for the lack of better description) effects on button icons - when you rollover the button, the icon has an expanding fading-out ghost image. And recently, i saw this Beryl clip (i highly recommend checking out some of the effects that can be achieved with this engine) that pretty much shows the same thing.

So, after a few minutes of playing with the button UI delegates, this has been added to the latest dev drop of version 3.2 (code-named Iowa). Here is a screencast (it's somewhat jaggy sometimes, so you're more than welcome to launch the WebStart as well):

And here's the test application. Just move the mouse over the buttons and let me know how it feels.

I'd appreciate hearing your thoughts on the following subjects. Is it too pervasive and distracting to have it enabled by default? Should it be more transparent? Should it be faster (the demo shows the SLOW speed to demonstrate the effect, this is twice as slow as the default speed)? Should i add a "pulsating" effect - as long as the mouse stays over the button, have this effect happen every 3-4 seconds? Anything else?

Adding scroll pane previewers to your Swing applications

Previous entries on this blog introduced a few enhancements that were made in Substance look and feel to the scroll panes:

• Improving the user experience with scroll bars showed how to control the location of scroll buttons.
• Experimenting with scroll panes and scroll bars series introduced overlay animation effects on scroll bars (including scroll track, scroll thumb and scroll buttons).

One of the comments requested having a "preview" functionality on the scroll panes. The request outlined having a button in the lower-left / lower-right (depending on the scroll pane orientation). Clicking on a button would bring up a thumbnail of the scroll pane contents allowing to quickly navigate to the relevant section. But wait - it already exists in the JDNC incubator project. So, i contacted the original developer, Pierre Le Lannic, and he graciously agreed to contribute this code to Substance (this was needed since the JDNC license is not BSD compatible). Thanks, Pierre.

Over the course of adopting his code, i've made some changes:

• The control itself is a button that allows rollover effects.
• When you drag the view rectangle, the scroll pane scrolls to that location.
• Dismissing the popup preview (with Escape key) scrolls the viewport to its original location (using the animation layer from laf-widget project).
• The icon itself has been synced with Substance search / preview icons.
• The new LafWidget.COMPONENT_PREVIEW_PAINTER client property can be used to install custom preview painter on the scroll pane. This allows changing the preview painting, preview popup window size etc.

After all this has been done, Pierre came up with a great idea (wish i thought about this first :) - why not put it in the laf-widget (see this java.net article that describes this project). And indeed - why not? This way it can be available not only to Substance, but to any other third-party look-and-feel. This has been done in the latest development drop of both projects. Once again, many thanks to Pierre for his original contribution and the ideas.

Here is the WebStart link to a test application. Press the overview button, move the mouse over the preview popup, release it or press Escape and see how it feels. Use the c-preview checkbox to turn on a custom preview painter (note that it produces larger popup and smoother thumbnail):

For those behind corporate firewalls, here are two screenshots. The first one shows a scroll pane with rolled-over scroll pane selector button:

The second one shows the scroll pane selector popup with preview thumbnail:

Substance LAF 3.1 official release

• Support for toned-down skins

  

• Support for color-blind mode

  

• Support for multi-mixed themes

  

• Scrollbar buttons location policies
• Improved micro-design of text components
• Icons on context edit menus on text components

  

• Negated themes
• Native icons in filechooser dialog
• New dark themes
• Support for hue-shifted themes

  

• Option for separate watermark theme on complex themes
• Selective theme saturation
• New gradient painters
• Additional animation effects, including full animation of lists, trees and tables
• Support for open sides on buttons
• Extended customization of tabbed panes
• Pin / unpin functionality on internal frames

  

• Support for flat scrollbar buttons

  

• Support for custom background composites

Experimenting with scroll panes and scroll bars - it's a go

One feature that was suggested in the original entry (thanks Alan) was to animate the opacity of the scroll track when the mouse enters / leaves the scroll bar. This turned out to be trickier than I originally thought (mostly since i decided to animate the scroll track and the scroll thumb on the scroll button rollovers) but the result is pretty nice (see the WebStart link and the screenshots below). The main reason for pretty much a complete rewrite of the rendering code is that the scroll buttons are child components of the scroll bar and are painted / animated separately. Fortunately, the animation layer in the laf-widget is flexible enough to track any ButtonModel changes, so the scroll bar UI delegates "tricks" it to track a composite model that wraps the models for the scroll buttons and a "surrogate" model of the scroll thumb (see the details in the code).

First, the WebStart link itself. The top panel contains the following controls that show (almost) all available configuration options for scroll panes:

• The enabled checkbox enables / disables the scroll pane.
• The combo allows changing the button policy.
• The flat checkbox marks all the scroll buttons to have flat appearance. Flat button shows the background only on rollover / selected / pressed state (think about toolbar buttons).
• The active checkbox marks all the scroll buttons to always be painted in theme active color. An active non-flat button will provide visual consistency with the scroll thumb, while non-active flat button will draw less attention from the viewport.
• The overlay checkbox marks the scroll tracks, scroll thumbs and scroll buttons to paint the viewport under them.

And now for some screenshots. All the screenshots show enabled, non-flat, active and overlayed scroll bars with 40% inactive and 70% active opacity on scroll bars. The first screenshot shows the mouse on the viewport (scrollbar is non-active):

The second screenshot shows the mouse on the track. The track and the thumb are painted in active opacity (compare with the vertical track and thumb):

The third screenshot shows the mouse on the left scroll button. The button, the track and the thumb are painted in active opacity (compare with the right button):

The fourth screenshot shows the mouse on the right scroll button. The button, the track and the thumb are painted in active opacity (compare with the left button):

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.

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.

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.

This work is licensed under a Creative Commons License.