Substance 5.1 – introducing Jitterbug

January 4th, 2009 | 21 Comments »

Jitterbug is a visual editor for creating and editing color schemes in Substance look-and-feel. It primarily addresses the scenarios where you need to translate design mockups or emulate existing UI visuals as a Substance skin. Created during the rework of the Office Blue skin, it was used to create and refine all seventeen color schemes currently used in this skin.

The following screenshot shows Jitterbug in action (click to see full size view):

To see the Jitterbug in action, run the following signed WebStart demo:

Here i would like to ask for your feedback. This tool was created to scratch my own itch – it was getting quite tedious creating and tweaking color schemes. I did try to make both flows straightforward and intuitive. However, i cannot be an objective judge of my own creation. As such, i am not detailing any instructions on how to use Jitterbug. If you find yourself stuck in the middle of the process, or the flows do not simply make sense, let me know in the comments.

Related posts:

  1. Revisiting Jitterbug editor for Substance color schemes Jitterbug is a visual editor for creating and editing color schemes in Substance look-and-feel introduced...
  2. (Re)introducing Streetlights skin for Swing applications One of Substance users has switched from version 3.3 to the 4.* line, and is...
  3. Reworking Office Blue skin for Substance 5.1 If you’re following my Twitter stream, you know that over the last few days i...

21 Comments on “Substance 5.1 – introducing Jitterbug”

  1. 1 Greg said at 6:53 pm on January 4th, 2009:

    For substance is it possible to boil down a LAF to perhaps a few dozen parameters – color values, etc and let those be configurable.

    So that perhaps some more artistic people can come up with the mix of colors, gradients, etc? Perhaps I am over simplifying but I think Substance could perhaps compete even better if a different mix of colors were chosen. Personally I like nicely muted colors and to date JGoodies is still the best LAF I believe.

  2. 2 Kirill Grouchnikov said at 7:05 pm on January 4th, 2009:

    Greg, have you read the skin documentation and the partial list of available core skins?

  3. 3 ben said at 12:15 am on January 5th, 2009:

    Kirill,

    Do you think it would be possible to “perfectly” emulate flex’s styling with substance? How flexible is it?

  4. 4 matt said at 1:06 am on January 5th, 2009:

    Hi Kirill,
    I like your Theme Editor pretty much, altough I do not quite understand, what the “Image Area” is about.

    I’d like to see more Substance Components being influenced by the skin colors (like JTabbedPanes or Menus). Having an eyedropper would be a nice thing to have, too.

    Another Idea is, to add some functionality like ColorBlender (http://www.colorblender.com/), that helps finding some matching colors algorithmically.

    Best regards,
    Matt

  5. 5 Nacho said at 1:25 am on January 5th, 2009:

    Sorry for my stupid questin but can you explain how to use this color schema in substance. I am not familiar with substance I have read jasper Pots blog about nimbus but I just like how substance look nothing more so can you say how to use this schema in substance ? Maybe another blog post will be very useful.

  6. 6 Peter said at 4:14 am on January 5th, 2009:

    What is wrong I get on kubuntu 8.04:

    java.lang.Exception
    at com.sun.javaws.Launcher.continueLaunch(Launcher.java:912)
    at com.sun.javaws.Launcher.handleApplicationDesc(Launcher.java:518)
    at com.sun.javaws.Launcher.handleLaunchFile(Launcher.java:218)
    at com.sun.javaws.Launcher.run(Launcher.java:165)
    at java.lang.Thread.run(Thread.java:595)

  7. 7 Kirill Grouchnikov said at 8:53 am on January 5th, 2009:

    Nacho,

    Please follow the second link in the first paragraph. It will take you to the documentation on Substance skins, showing how they are build from the smaller blocks – color schemes.

    Thanks
    Kirill

  8. 8 Kirill Grouchnikov said at 8:54 am on January 5th, 2009:

    Peter,

    I don’t have access to Kubuntu so i can’t test the WebStart app there. Do you have Sun’s JDK 6.0 installed on that machine? Can you run other signed WebStart applications that require Sun’s JDK 6.0?

    Thanks
    Kirill

  9. 9 Kirill Grouchnikov said at 8:58 am on January 5th, 2009:

    Ben,

    It all depends on how much time you are willing to spend with creating custom Substance painters, as illustrated a few months ago in the Substance blueprints series. If your target Flex skin has a lot of images, you would need to see how to recreate that with either image-based custom Substance painters, or with pure Java2D. Another alternative would be the Skin look-and-feel that is based on images.

    In general, the closer you will want to get to pixel perfection, the more you will need to invest.

    Thanks
    Kirill

  10. 10 Kirill Grouchnikov said at 9:01 am on January 5th, 2009:

    Matt,

    The image area allows you to create a color scheme by clicking pixels in an image. For that, you first need to select the matching radio button on the left, and then click on the desired pixel in the image.

    Not sure about tabbed panes and menus – these are skinned by Substance. Perhaps you’re talking about the preview pane? If so, this is just a handy preview that shows buttons only – not all the possible Swing controls.

    And ColorBlender functionality is currently not planned. Although it would be a nice addition to have some kind of color quantization to allows extracting a color palette from selected image area.

    Thanks
    Kirill

  11. 11 John C. Turnbull said at 5:21 pm on January 5th, 2009:

    Hi Kirill,

    I think this is a great little helpful tool.

    What I’d really like to see though is a more comprehensive preview function which included a lot more controls and a background panel with a simple menu bar.

    Also, I am finding the clicking on the colour bars a little temperamental and sometimes I need to click 3 or 4 times to get it to popup the colour picker.

    What I’d really like to see is a skin code generator so I don’t even need to create the skin class.

    But what’s the purpose of the graph beyond incidental information?

    Cheers,

    John

  12. 12 Kirill Grouchnikov said at 9:19 pm on January 5th, 2009:

    John,

    The preview is a little out of scope in a tool that creates a single color scheme. Even with buttons i use the hard coded gray color scheme for the borders – which does not necessarily look correct for all combinations. Going beyond that and displaying additional controls will just give the wrong type of preview.

    A natural continuation of this tool will be a visual editor for Substance color scheme bundles, and visual editor for Substance skins beyond that. At the present moment this is out of scope with the time that i have.

    The graph gives you a visual indication of how “consistent” the color scheme is. For most cases, you would want to see linear or smooth curves for all three values. If the values vary wildly, the resulting visuals will not be very pleasing in most cases.

    Thanks
    Kirill

  13. 13 matt said at 12:29 pm on January 6th, 2009:

    Kirill,
    I was talking about the preview pane. Just showing buttons is not enough (in my opinion) as someone, not so familiar with swing does not which of the seven colors will appear where in which component. For example: If I select these colors, which color will the background of a JPane have? (Very important question as many colors look nice on small but ugly on big areas)

    How about an eyedropper, that works for the entire screen?

  14. 14 mikey said at 2:00 pm on January 6th, 2009:

    Hi Kirill,

    This tool looks helpful. It seems that it would be nice to have some additional controls to allow us to pick colors that are spread out by the same proportional amount. For example, if I get a “red” scheme that I am happy with, it would be nice to translate that into blue, green, orange, dark green, light green, etc. schemes where the relative difference between each color in each scheme is the same. My knowledge of color models is pretty limited, so maybe this would be tougher to do than it sounds.

    What I’m thinking of is something like the following. I created a basic red theme:
    name=red
    kind=Light
    colorUltraLight=#FFD4D6
    colorExtraLight=#FFA1A2
    colorLight=#FF7D7F
    colorMid=#FF666B
    colorDark=#FF3B41
    colorUltraDark=#FF2125
    colorForeground=#E30508
    Now, I would like to create a green theme, but I want the differences in colors to be the same without guesswork on my part. So, in this case, I could just check a box to retain the same relative color differences, and when I changed one color, all of them would change appropriately (i.e. If I set the foreground to dark green, the other colors would be lighter shades of green.). It would also be nice to only pick one color and to let the tool automatically generate the other colors based on some pre-defined or user-defined parameters (similar to what I mentioned above, but without the user even needing to define a whole scheme first).

    Also, I agree that it would be nice to preview more components with the colors, because some colors don’t seem to make it to the preview area, or at least their impact on components is not very apparent without creating the color theme and trying it out in an application.

    At any rate, great job as always! :)

  15. 15 Hafiz said at 7:31 pm on January 6th, 2009:

    Hi Kirill,

    I one of your substance fan and had applied it to our application.

    I want to ask you whether we can applied different color/skin to different component or panel in one screen ?

    For rite now, one screen will have only one color/skin with different contrast for different component. Maybe it will be colorful and cheerful if different component will have different color also.

    Thanks,
    Hafiz

  16. 16 Kirill Grouchnikov said at 8:39 pm on January 6th, 2009:

    Matt,

    As i detailed in my earlier reply to John, this tool is limited only to creating a single color scheme. Even such a simple control as button is painted with two color schemes – fill and border. A checkbox is painted with three – fill, border and mark. Properly showing a preview for the controls is out of scope of Jitterbug at the present moment.

    I do understand the advantages of taking Jitterbug to the “next level” as a standalone visual tool to completely define a Substance skin, but i simply do not have the time in the foreseeable future to do so. Right now it’s scratching my own itch – create color schemes based on colors in the given image. I do welcome interested parties to take a look at the code behind Jitterbug and consider joining the effort in evolving it in the future.

    Thanks
    Kirill

  17. 17 Kirill Grouchnikov said at 8:46 pm on January 6th, 2009:

    Mikey,

    Changing the overall hue of the color scheme you create in Jitterbug is a great idea. Right now you can load the created color scheme definition with (still internal, but to be exposed) SubstanceColorSchemeUtilities.getColorScheme(InputStream) API and apply the SubstanceColorScheme.hueShift(double) API on it. That will preserve the value and brightness, but will shift the hues of all the colors. It would indeed be a nice addition in Jitterbug to allow changing the hue of the entire color scheme.

    About your second request – automatically creating a color scheme based on a single color is, IMHO, an inferior approach. It is not incidental that professional designs (such as Office 2007 or Nimbus) use multiple colors for creating exact and visually pleasing gradients. It is an interesting idea to think about that set of user-defined or predefined parameters, and if you’re willing to experiment with it, please contact me at the project “users” mailing list.

    As to extending the preview – please see my replies to John and Matt above.

    Thanks
    Kirill

  18. 18 Kirill Grouchnikov said at 8:49 pm on January 6th, 2009:

    Hafiz,

    Please read the available documentation on decoration area and painters, skins and colorization support. If these do not address your UI requirements, please join the “users” mailing list of the project and post a design mockup of your application.

    Thanks
    Kirill

  19. 19 Steve said at 11:01 pm on January 19th, 2009:

    A useful little tool, I found myself clicking on the graph to try to adjust the points directly to smooth out the curve.

    Various transform tools would also be useful to invert an entire scheme, switch colours in an entire scheme to quickly generate new schemes with similar relationships

  20. 20 Adam said at 10:39 am on January 26th, 2009:

    For some reason the color scheme checkbox and the preview buttons below the image area do not appear. I have tried this on 2 computers both running JRE1.6.0_11.

  21. 21 Kirill Grouchnikov said at 11:10 pm on January 26th, 2009:

    Adam – the preview panel has been removed from the current version of Jitterbug. It just introduced misleading visual cues. There is much more than one color scheme that is involved in painting a button, and showing preview under a few core Substance gradient painters is not right either – since the custom skin will be most probably be using a custom gradient painter based on the target visuals.

    Thanks
    Kirill