Revisiting Jitterbug editor for Substance color schemes

September 10th, 2009 | 10 Comments »

Jitterbug is a visual editor for creating and editing color schemes in Substance look-and-feel introduced in release 5.1 of the library. It primarily addresses the scenarios where you need to translate design mockups or emulate existing UI visuals as a Substance skin. The original version of Jitterbug had two major constraints – it operated on a single color scheme, and did not address the full flows of creating, editing and saving color schemes.

Jitterbug had a major revision in the upcoming release 5.3. Targeting the creation of both Magellan and Gemini skins, it has been redesigned to provide the seamless flows of creating, as well as editing the color scheme definition files that can be used to create complex Substance skins. You no longer need to switch between Jitterbug and another text editor to save color schemes. You no longer need to work on multiple color scheme files, each defining a single color scheme.

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

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

The new version of Jitterbug aims to address deficiencies in the flows of creating and tweaking color schemes. I did try to make the flows straightforward and intuitive, as well as making Jitterbug the only tool you will need to create collections of Substance color schemes. 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. Substance 5.1 – introducing Jitterbug Jitterbug is a visual editor for creating and editing color schemes in Substance look-and-feel. It...
  2. Color scheme association kinds in Substance Color scheme association kinds in Substance look-and-feel are best illustrated by a simple example: This...
  3. Revisiting the Raven Graphite skins Raven Graphite and Raven Graphite Glass skins were added to the Substance look-and-feel about two...
  4. Revisiting the Raven Graphite skins, round 2 Release 5.2 of Substance look-and-feel made a few visual changes to the Raven Graphite skins,...

10 Comments on “Revisiting Jitterbug editor for Substance color schemes”

  1. 1 Chas Emerick said at 9:31 am on September 11th, 2009:

    I don’t think we’d ever create our own scheme (although being able to tweak the baselines seems like it would be handy). That said, I didn’t really know where to start with this.

    I expected to open it up to find something like swingset (or the sample component set that the substance demos use) or maybe a way to load a form/frame from our app into the area on the right of the editor. Then fiddling with colors on the left would update immediately on the right.

    However, the introductory instructions say to drag-and-drop and image, or right click to use an image on the clipboard. Neither of these actions worked — no error was reported in either case, and the icon of the image I tried to drag snapped back to its original location in the Finder, so I’m guessing the drop wasn’t accepted.

    I hope I’m not missing some outrageously obvious point.

  2. 2 Chas Emerick said at 9:38 am on September 11th, 2009:

    I just noticed your original post about Jitterbug, and what the expected workflow is (select color in the image — not meant to be a direct/live preview of the scheme in progress).

    Getting an image into the panel on the right remains an issue, though.

  3. 3 Kirill Grouchnikov said at 9:49 am on September 11th, 2009:

    Hi Chas

    I understand that you’re working on Mac. I’m not a big expert on DnD / clipboard operation in AWT, and i have only tested this on my Windows machine. If you’re feeling adventurous, you’re more than welcome to take the latest sources (CVS / the zip file from here) and run the tools.jitterbug.JitterbugEditor locally. The DnD / clipboard paste is handled in the tools.jitterbug.JImageComponent class and i will be very happy to see code changes that will make it work on Mac.

    Thanks
    Kirill

  4. 4 Kirill Grouchnikov said at 9:52 am on September 11th, 2009:

    Chas,

    And as you have noticed, Jitterbug is not yet at the stage where it can create a complete definition of the skin. Right now it only creates the color scheme definitions. Going beyond that – creating color scheme bundles, associating color schemes to various component states, specifying custom painters etc – is well beyond the time that i have right now. Of course, it would be great to see such a tool, complete with live preview that shows immediate effect of every change on a live collection of controls.

    Thanks
    Kirill

  5. 5 Chas Emerick said at 3:35 pm on September 11th, 2009:

    I’ll add it to my todo list :-)

    We’re actually not using substance yet — waiting on the very promising developments around the Netbeans platform again becoming substance-friendly.

  6. 6 Java desktop links of the week, September 14 | Jonathan Giles said at 2:29 pm on September 13th, 2009:

    [...] Kirill Grouchnikov has been very busy recently, putting up a heap of work that he did whilst vacationing. He published three new skins for Substance, posted about overlay painters as used in Substance, and introduced an updated version of the Jitterbug editor for Substance colour schemes. [...]

  7. 7 Christos said at 3:31 am on September 14th, 2009:

    Hi Kirill,

    Is there any example of how you use the color schema files in order to create a new theme or customize an existing substance theme?

    thanks.

  8. 8 Kirill Grouchnikov said at 6:38 am on September 14th, 2009:

    Christos,

    You can see the examples of using .colorschemes files in such skins as Gemini, Magellan, Office Blue 2007, Office Silver 2007, Graphite Aqua, Raven Graphite and Raven Graphite Glass.

    Thanks
    Kirill

  9. 9 JOKe said at 11:59 am on September 27th, 2009:

    Hi Kirill nice work with jitterbug (btw very nice work for trident library too). I have only one request it will be nice to make jitterbug separate jar it will be easier for users to download it standalone and start it.

  10. 10 Kirill Grouchnikov said at 12:29 pm on September 27th, 2009:

    Naiden,

    Jitterbug is part of substance-tools.jar and requires substance.jar and forms-1.2.0.jar at runtime. The main class name is tools.jitterbug.JitterbugEditor and you can run it locally once you have all three jars on your machine.

    Thanks
    Kirill