Werner Randelshofer’s Blog

Jeremy Woods recently published an article named A Good GUI for Selecting Colors.

Here is a screenshot with one of the PaletteUI’s he created:

There is very much to like about this arrangement of the colors:

• The columns represent hue values, the rows brightness values.
• The colors are ordered by wavelength from lowest (red) to highest (purple).
• The rows are ordered by brightness from brightest to darkest (bright ’sky’ above, dark ‘earth’ below).
• Gray is singled out in a separate column.

I think this arrangement is very forthcoming for the human visual system, allowing to identify the desired colors easily.

And – this was the main point of Jeremy’s article – the interface puts the user in control. The overall design is concise and simple. Everybody can use this chooser right away.

I had a similar color chooser in JHotDraw 7.4, but I used a different arrangement. I had placed the red column in the middle and the darkest row at the top. I have changed this now according to Jeremy’s layout:

You can try it out here.

Here are some points that I considered in this design:

• There are exactly 12 columns. This allows to represent the additive primary color hues, their complements and their mixtures in an equal spacing of 30 degrees on the color wheel.
• There are 10 rows. The top row contains a gray scale in 10 % steps. The first 5 of the color rows provide a saturation scale in 20 % steps. The last 5 of the color rows provide a brightness scale in 20 % steps. (The row in the middle is shared with the saturation scale).
• There is spacing between the color swatches. I hope that this reduces the contrast effect. But I am not sure whether this really is the case – it seems that much more spacing would be needed.
• A tooltip shows the component values of the color swatch under the mouse pointer.
• At the bottom, there is a button which allows to open a color chooser. I haven’t designed it yet, so the standard Java color chooser pops up here.

There are some non-visual things in this design as well:

• A color can be selected using a single mouse press-drag-release interaction. Press the mouse over the color well, drag the cursor to the desired color swatch and then release the mouse button.
• The color chooser can be quickly dismissed by clicking on the color well again.
• Java Color objects are created using the constructor which takes a ColorSpace argument. This prevents loss of information when a ColorSpace does not have a bijective mapping with sRGB. For example when different CMYK colors map to the same sRGB color.
• I have also added a means to enter the color textually. The entry field currently supports sRGB, HSB and Gray color spaces. I will add CMYK in a future revision. Again, the system remembers which color space was used and presents the color components without rounding errors. (Unfortunately, the SVG file format only supports sRGB. Thus after saving and loading a file we always get back to sRGB – sigh).

Unfortunately, there are lots of things missing too.

• The current color is not marked.
• I want to pick colors from the drawing. I want to press the mouse button over the color well, drag the cursor over a desired color on the drawing, and then release the mouse button.
• Support for gradients is missing.
• The creation of palettes is not supported. (This was my main point in my comment on Jeremy’s article).

Anyway. It was fun to get this far already.

JHotDraw is a framework for structured drawing editors. Many people don’t know – at least I guess that they don’t – that JHotDraw actually consists of two frameworks. The second one is a framework for document oriented applications.

For JHotDraw 7.4, I have revised the application framework to identify a document by a java.net.URI instead of by a path to a file. This allows to use the framework for applications which access documents over a network connection, from a database or for some other location which is not a file, or no document at all. For example I created a VNC viewer based on this framework.

I also restructured the use of javax.swing.Action’s in the application framework. The Action classes are now grouped in smaller packages. But – more importantly – the Action objects are now organized in a hierarchy of javax.swing.ActionMap’s rather than in a global Map object. There is now a root ActionMap for the application as a whole, and ActionMap’s for each opened view. This change was necessary, because we need to have individual Action objects per view (for example for the undo/redo actions) as well as global actions (for example the “exit” action).

Finally I restructured the packages of the drawing framework. A study “The Logical Modularity of Programs” suggested that the persistence knowledge of the drawing framework should be moved out of the org.jhotdraw.draw package. There is also restructuring of persistence handling methods suggested, which I haven’t integrated (yet). I intentionally provide a means for ‘quick and dirty’ persistence in JHotDraw for student projects. The method that I use is slightly more robust than just doing serialization, but still extremely ‘dirty’. Hm, maybe I should throw it out in one of the next releases…

Here is a JDiff of the changes from JHotDraw 7.3.1 to 7.4.

By the way. I am very much interested into the results of studies about JHotDraw. So far, I google for them from time to time. But it would be nice, if people who performed a study about JHotDraw would actively feed the results back to the developers.

The Fujifilm Finepix Real 3D W1 has a 3D screen which allows to perceive the depth of a stereo image without having to wear special glasses. Now, how can we convey depth on a regular computer screen?

Read the rest of this entry »

I bought myself a Fujifilm Finepix Real 3D W1 camera for christmas.

Read the rest of this entry »

In the last few days I added support for Amiga CRNG color cycling to MultiShow and ANIMApplet.

Read the rest of this entry »

I have updated the user interface of CubeTwister under Windows.

Read the rest of this entry »

Just for fun, I have added ClearType support to my EmbedPDF applet.

Read the rest of this entry »

I finally managed to squeeze in a few hours to create new releases of the JHotDraw and the AnyWikiDraw projects. Read the rest of this entry »

So far, I use the Flash player to deploy videos on the web. Because it is the only one which works in all browsers on Windows and Mac OS X. But in the future, this might change since the HTML 5 video element has been adopted by Firefox 3.5 and Safari 4.

Read the rest of this entry »

Decoders from the FMJ project can be used as plug ins for JMF. But some work is required.

Read the rest of this entry »