Spinners in Substance 6.0
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:
and here is how they look under the latest 6.0dev:
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:
The same spinners under the Business skin in release 5.3:
and under the latest 6.0dev:
The same spinners under the Gemini skin in release 5.3:
and under the latest 6.0dev:
Finally, the same spinners under the Twilight skin in release 5.3:
and under the latest 6.0dev:
Note that this is still work on progress, and you’re more than welcome to leave comments on the new look.
Related posts:
- Comboboxes in Substance 6.0 One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma)...
- 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)...
October 29th, 2009 at 11:00 pm
Great. I’ll definitivly use substance in the future. You’re getting better and better. I like your work very much.
October 30th, 2009 at 4:13 am
Hi Kirill. Looks great!
October 30th, 2009 at 5:55 am
Much appreciated Kirill! :)
October 30th, 2009 at 2:31 pm
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.
October 30th, 2009 at 7:06 pm
In your screenshots there is no distinction between editable and non-editable spinners. Am I missing something?
October 30th, 2009 at 8:24 pm
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
October 31st, 2009 at 6:14 am
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!
October 31st, 2009 at 7:30 am
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
November 2nd, 2009 at 8:12 am
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.
November 2nd, 2009 at 8:34 am
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
November 2nd, 2009 at 10:10 am
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.
November 2nd, 2009 at 10:12 am
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…