Posted by kirillcool on February 11, 2007 at 08:26 PM | Comments (16)
One of the more interesting suggestions on the entries about translucent scroll bars came from Mikael Grev: 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. While this hasn't been implemented yet on the scroll bars, this functionality is now available on the sliders in the latest development drop of the next version of Substance (code-named Japan).
First, here's a screenshot of how sliders look like under the latest release:
Now, here's a screenshot of how sliders look like in the latest development drop:
Question 3 of the project FAQ states that while the binary backwards compatibility is of topmost importance (in fact, it was broken only in one release), the visual compatibility is less strictly enforced. As a matter of fact, one of the main reasons for the slider overhaul was the amount of vertical space that the horizontal sliders take, and after seeing a video demonstration of Yahoo Messenger for Vista, it was time to make some changes. In fact, a horizontal slider with no ticks and no labels is now 18 pixels high instead of 24, a horizontal slider with ticks and no labels is 21 pixels high instead of 32 and a full blown slider with ticks and labels is 38 pixels high instead of 49.
Another, and more interesting addition comes in the form of slider thumb animation on mouse pointer proximity. This can be seen in both the demonstration of Yahoo Messenger and in the following short clips (click the play button). Here are the new sliders under the Business Black Steel skin:
Note how the slider thumb grows when the mouse is directly over it or in its vicinity and shrinks back (the essence of this functionality is apparently lost on some). The slider ticks are less obtrusive (translucent near the end). The focus ring properly fades in on focus acquiring and fades out on focus lost. In addition, the first and the last ticks are not painted since they're pretty much redundant.
To see the new sliders in action, click on the image below and go to the "Sliders" tab.
Last but not least, i will be presenting a small session at Desktop Matters conference which will take place on March 9th in San Jose. If you're interested in one long all-desktop day, you're welcome to register and participate.
Comments are listed in date ascending order (oldest first) | Post Comment
Did I notice correctly that the sliders cannot be modified by keyboard? They should.
Posted by: herkules on February 12, 2007 at 08:10 AM
Joerg - what keys are we talking about? PageUp / PageDown behave like in Metal / Windows. Are there any other expected keyboard navigation shortcuts that you have in core LAFs and not in Substance?
Posted by: kirillcool on February 12, 2007 at 09:07 AM
Arrow keys. I double checked with SwingSet2. There arrow keys allow for finer movement of the slider.
Posted by: herkules on February 12, 2007 at 09:22 AM
Joerg - the reason for different behavior in Substance test application and SwingSet2 is that in the former all sliders have snapToTicks set to true and the minor tick range is 5 (so when you use regular arrow keys, the difference of +1/-1 results in the same model value). When i tested Substance on SwingSet2 sliders, they behave as you have described (as expected) - this comes from BasicSliderUI. I'll add some more options to Substance test app to allow testing this behavior. Thanks for looking into this.
Posted by: kirillcool on February 12, 2007 at 09:45 AM
Little animations always impress me as they give a sense of there being so much more to an app. I dont use a slider a lot so I cant comment on it much. Certainly thin looks way better.
I wish all split pane dividers were as thin (your split pane mitigates that using color and the grip in the center).
Posted by: aronsmith on February 12, 2007 at 11:29 AM
I like the stuff that you do. Looks great. I need to try it on Windows.
On my Mac (Power Book Core Duo 2.16 Ghz), it is damn slow...
Posted by: janaudy on February 12, 2007 at 12:19 PM
janaudy - are you talking about the WebStart demo application or your own application running under Substance? If the former, than it's not really written with the performance in mind - it just showcases all Substance features (some of them are pretty heavy). On top of this, the sandbox is always slower than running a local app (too many security checks get in the way).
Posted by: kirillcool on February 12, 2007 at 12:56 PM
I like this. Following from an above comment, I like the idea of split-pane dividers being ultra-thin (like 1px) and growing via a short anim to a more normal width upon a hover for ease of grabbing. Maximises real-estate when not in use and usability when required. I hate having to try to grab 1px wide split pane dividers! Can't offhand think of anywhere I've seen this used.
Posted by: peeet on February 14, 2007 at 04:06 AM
peeet, aron - i'd say that the split divider being 1-pixel wide wouldn't provide enough visual information that it can be dragged. There would be no place to put the drag bumps (or any other visual indication of "grabbiness"), so perhaps this is why it's not a common paradigm. With Substance, you can mark the JSplitPane with this property to make it even flatter (will have the current watermark painted on it to blend better with the application background).
Posted by: kirillcool on February 14, 2007 at 09:13 AM
Yeah I know what you mean but there are a lot of applications, like NetBeans IDE, where you can adjust the position of the division between two areas without there being the visual clue of a split-pane divider; it might just be nice if in places like that, the grabbable area would slightly expand when the mouse hovers over it to make it easier to grab.
Posted by: peeet on February 14, 2007 at 11:29 AM
Your l&f is getting better each day, performance is indeed an issue (testing on Linux).
ps: shouldn't a double click on the title bar maximize the frame?
Posted by: francisdb on February 15, 2007 at 03:54 PM
francisdb: the code is in SubstanceRootPaneUI starting from line 1125. It is working as expected on Windows, and since i don't have access to Linux machines, i'd appreciate if you can debug this on your box (if you have time, of course). Does it work with other core and third-party LAFs under decorated mode (in Linux)?
Posted by: kirillcool on February 15, 2007 at 06:15 PM
I'll make a reminder to check this out.
What is decorated mode?
Posted by: francisdb on February 16, 2007 at 04:34 AM
Decorated mode is when you call JFrame.setDefaultLookAndFeelDecorated(true) before creating your first frame. Then, the title pane is painted and handled by the LAF and not by the OS. Only under decorated mode is Substance responsible for handling double clicks. Does it work in the test WebStart application (which is decorated)?
Posted by: kirillcool on February 16, 2007 at 08:48 AM
The doubleclick doesn't work in the application started by the webstart link in this article. There also is a problem for moving the frame using the mouse: while the fame moves, the mouse moves within the frame and the move is not fluent... Hard to explain exactly what happens but it seems to me that the control point is changing while you drag the frame.
Posted by: francisdb on February 19, 2007 at 04:56 AM
I'll add the different issues in the issue tracker
Posted by: francisdb on February 19, 2007 at 04:57 AM