 |
Multi-colored buttons
Posted by kirillcool on February 22, 2006 at 01:41 PM | Comments (9)
With the release of version 2.2 of Substance look-and-feel scheduled for this Monday, i have started to work on the next version (2.3 code-named Firenze). One of the things i wanted to improve are color themes, and a lot of work has already been done in this area. For now, i want to introduce the concept of "mixed" themes.
Substance comes with eighteen core and twenty one plugin themes. The total is thirty-nine. By the end of the article you will see how after a few hours of coding this has been increased by 630 additional themes. Here is a sample screenshot of mixed themes and how they look like on buttons:
The mixed theme is composed of two base themes. When some mixed theme is used, the resulting image is composed from these two based themes. The first 30% is the first theme, the last 30% is the second theme and the middle 40% is the blending between the two. Now, Chet has mentioned the concept of color distance. In the simplest computation, it's the Euclidean distance between the color components (red, green, blue). For the human perception, it's better to use hue-saturation-value scale or assign different coefficients to red-green-blue (as when RGB is translated to gray-scale). The examples above showcase some of the best matches distance-wise. They are not too close (so the two distinct themes are visible) and not too far (so the themes are not dissonant). The entries above are:
- Aqua and Light Aqua
- Aqua and Bottle Green
- Barby Pink and Raspberry
- Bottle Green and Lime Green
- Brown and Sun Glare
- Sunset and Orange
Here is a screenshot of all available mixed themes (generated in the Substance test application) - 122 themes. This screenshot is ordered by the first theme (all entries in a row have the same first base theme):
Here is a screenshot of the same themes ordered by simple Eucledian distance (shown as the button text):
Once you drop the theme-pack plugin in the classpath, the number of mixed themes increases from 122 to 630. Here is the screenshot of all available mixed themes ordered by distance (click to see all 630) - as you can see two themes that are two close do not produce the desired multicolor effects:
This is one of the reasons i prefer Java2D over image-based drawing (such as Synth-based LAFs). You need to invest a little bit more in the programming, but the outcome is much more generic - once a new theme is added to Substance, 20+ new mixed themes are available at no cost. In addition, once a mixed theme is set as Substance current theme, it is used for all controls (buttons, checkboxes, tabs, spinners, sliders, scroll bars etc). Think about the amount of work needed to be done for each Synth-based theme...
Bookmark blog post:  del.icio.us  Digg  DZone  Furl  Reddit
Comments
Comments are listed in date ascending order (oldest first) | Post Comment
-
The huge difference is that with a fine tuned, hand generated, image based theme you have MUCH MORE control over the final design. It is more coherent and more pleasing. I like the idea of having hundreds of themes for an app but if most of them will look bad because they are generated by a program that has no clue about visual design. Anyway, Synth does not work ONLY with images. The image painter is one painter you can use but you can add your own. You can for instance create an image painter that lets you specify the tint of the images. You just use gray images, change the tint with the painter and voila :)
Posted by: gfx on February 22, 2006 at 03:22 PM
-
Trippy. I have this unusual urge to eat them.... is that weird?
Posted by: loubs001 on February 22, 2006 at 06:00 PM
-
Programmatic layouts have another huge advantage over image-based ones - scalability. A 'scaleFactor' setting in a look & feel could make it possible to zoom up or down the entire app, for use on high resolution and low resolution displays alike. Since images lose fidelity when scaled, you can't do this with that type of look & feel.
Posted by: jessewilson on February 22, 2006 at 06:03 PM
-
is that the good old arguments between vector & raster graphics?
Posted by: alexlamsl on February 22, 2006 at 06:23 PM
-
Can't wait to have an SVG-based LaF :) SvgPainter for Synth anyone? :))
Posted by: gfx on February 22, 2006 at 10:50 PM
-
Romain,
I know that we do not see eye to eye on the Java2D-vs-Photoshop based LAFs - the users will decide what's best for them. I am however a very strong proponent of Java2D - with the right amount of tuning the code you can achieve good results that scale both size-wise and color-wise.
In the specific case of Substance, the application must enable the mixed themes that it wants. The SubstanceLookAndFeel class has this function:
public static void addMixedTheme(SubstanceTheme theme1,
SubstanceTheme theme2)
that enables a specific mixed theme. It's not all 630 that are available (some are very ugly). It's all about providing an option to the application developers, much like the case of button shaper pack. You don't have to use it, but for that 0.01% of applications that would like to (like, say, a pharmaceutical application), it's there.
Posted by: kirillcool on February 23, 2006 at 01:11 AM
-
Don't get me wrong, I am a very strong proponent of Java2D. I prefer to draw with the code rather than picture. In some cases though pictures are far easier to use. But be it with pictures or Java2D code I don't think high user customization must be chosen over fine-tuned visual design (which is very hard to get anyway.)
Posted by: gfx on February 23, 2006 at 02:02 AM
-
Really nice, i think it's preferable and more dynamic (infinite scale like say jessewilson) to use Java 2D than fix image.
I'm sure to use substance to build UniNet UI, good job !
Posted by: alois on February 23, 2006 at 06:23 AM
-
:-)))) What you do with your theme is indredible!
I don't know who would like to have such a color full theme ...probably perfect for children.
You have always some refreshing ideas. That's really nice even if I would not use the outcome in its current state.
Posted by: imjames on February 23, 2006 at 10:56 PM
|
java.net RSS Feeds
