Spinners in Substance 6.0

October 29th, 2009 | 12 Comments »

One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma) is to polish the appearance of existing components. Today i’m going to talk about visual enhancements done for the spinners in the latest 6.0dev drop of the library.

These enhancements address two major points:

  • Adding more contrast to screens that use spinners – by creating an “inset” look
  • Modernizing the appearance of the spinners – by smoothing the corners and borders

The overall appearance of the spinners is consistent with that of text components and editable comboboxes – to create visual consistency across all types of text-based input controls.

Here is a screenshot with a few spinners under the Dust Coffee skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-dustcoffee-old.png

and here is how they look under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-dustcoffee-new.png

As with the comboboxes, the overall look is inset, and the buttons are flat. When the mouse is over one of the buttons, it fades in indicating that it is indeed a button:

https://substance.dev.java.net/release-info/6.0/spinners-dustcoffee-new-rollover.png

The same spinners under the Business skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-business-old.png

and under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-business-new.png

The same spinners under the Gemini skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-gemini-old.png

and under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-gemini-new.png

Finally, the same spinners under the Twilight skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-twilight-old.png

and under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-twilight-new.png

Note that this is still work on progress, and you’re more than welcome to leave comments on the new look.

Related posts:

  1. Comboboxes in Substance 6.0 One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma)...
  2. Text components in Substance 6.0 One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma)...
  3. SwingX date pickers in Substance 6.0 The core Substance look-and-feel library is in the feature freeze state, and it’s time to...
  4. Control alignment in Substance 6.0 Last week i have written about improving the visuals of text components, comboboxes and spinners...

12 Comments on “Spinners in Substance 6.0”

  1. 1 Marcel said at 11:00 pm on October 29th, 2009:

    Great. I’ll definitivly use substance in the future. You’re getting better and better. I like your work very much.

  2. 2 Pedro Duque Vieira said at 4:13 am on October 30th, 2009:

    Hi Kirill. Looks great!

  3. 3 Marcio said at 5:55 am on October 30th, 2009:

    Much appreciated Kirill! :)

  4. 4 Eugene Ryzhikov said at 2:31 pm on October 30th, 2009:

    Kirill,
    I do have one comment. IMO vertical distance between arrow icons in the spinner when mouse is not over the component is visually to big. I do understand why it is like that – you centering the icon on its respective button. That looks good when the button is visible. But when the buttons are hidden IMO the arrow icons should be closer to each other to produce more balanced appearance.
    Once again this is just the way I feel.

  5. 5 Eugene Ryzhikov said at 7:06 pm on October 30th, 2009:

    In your screenshots there is no distinction between editable and non-editable spinners. Am I missing something?

  6. 6 Kirill Grouchnikov said at 8:24 pm on October 30th, 2009:

    Eugene – what’s an uneditable spinner? Perhaps you meant disabled spinners, or am i missing some JSpinner API? About the arrows – they all already too close to the button borders, and if i’ll move them any further, the rollover buttons will look bad – or i will need to paint the arrows at different Ys depending on the mouse location.

    Thanks
    Kirill

  7. 7 Eugene Ryzhikov said at 6:14 am on October 31st, 2009:

    Kirill,

    I guess my last question wasn’t clear enough. The API states that you can assign your own editor to the spinner. How is Substance going to render Spinner with custom editor?

    As far as arrow icons … I understand the reason you’re doing it. I guess you can experiment with different Ys depending on mouse position and make your decision based on aesthetics of what you see.

    Thanks again for great LAF!

  8. 8 Kirill Grouchnikov said at 7:30 am on October 31st, 2009:

    Eugene,

    It depends on the specific custom editor. It may not have the right insets, and it may not have the correct rollover effects. There’s only so much that can be done in a generic way in Substance. If you have a specific example that is misbehaving under Substance 6.0dev, you’re welcome to post a small (<100 lines) test example of the project forums / mailing lists.

    Thanks
    Kirill

  9. 9 Jason Young said at 8:12 am on November 2nd, 2009:

    Hi Kirill, I like the sleek new look. However, would it make sense to unify the button look for the editable combobox button and the spinner buttons? Both fields are editable and contain a button within their borders.

  10. 10 Kirill Grouchnikov said at 8:34 am on November 2nd, 2009:

    Jason,

    The look for these buttons is already unified. They are flat – not showing the background by default, and fading in the background when the mouse is moved over them. Would you mind clarifying your suggestion about unifying the buttons look?

    Thanks
    Kirill

  11. 11 Jason Young said at 10:10 am on November 2nd, 2009:

    I probably worded that wrong. I’m talking about the difference in how the editable combobox’s button has visual separation from the text part, but the spinner button does not have that visual separation. The spinner button looks like the buttons for the uneditable comboboxes. But the fact that the spinner field is editable leads me to think they should be drawn the same way.

  12. 12 Jason Young said at 10:12 am on November 2nd, 2009:

    Nevermind! I think I see what you did with the comboboxes now. The separation is only there when hovering. That makes a lot more sense. Sorry to confuse you…