Depth-First: Tag screenshots

Imaging Chemical Structures with ChemPhoto: WYSIWYG Drawing Settings

Rich Apodaca — Thu, 11 Sep 2008 15:44:00 +0000

Depending on the audience and medium, chemical structures can be presented in a variety of styles. Chemical structure imaging applications should make it easy to visually and/or numerically arrive at the best appearance. ChemPhoto makes it easy to get exactly the right look for your structures through what-you-see-is-what-you-get (WYSIWYG) drawing settings.

The screenshots below illustrate the three main categories of drawing settings in ChemPhoto: Atoms; Bonds; and Images. As each setting is manipulated, the entire view is updated in real-time to reflect the changes. A set of changes can be rolled back by pressing the "Cancel" button, making it easy to undo unwanted modifications.

Turquoise Theme with Atoms Tab

Console Theme with Bonds Tab

Blueprint Theme with Images Tab

To try an alpha version of ChemPhoto for yourself, drop me a line.

Making Your 2D Structures Look Good: Firefly, Styles and Stylesheets

Rich Apodaca — Fri, 13 Jul 2007 11:19:00 +0000

Chemists can be very discerning when it comes to chemical structure aesthetics. This is not surprising, given the central role played by 2D chemical structures in the day-to-day work of many chemists. For example, consider the Wikipedia Chemistry/Structure drawing workgroup's ongoing discussion about achieving a consistent look for chemical structures on the online encyclopedia.

Several articles have discussed Firefly, a 2D chemical structure editor specifically designed for the Web. With major work on the rendering engine and structure manipulation interface complete, recent efforts have turned toward exposing drawing settings through a graphical user interface. Here I'll provide some screenshots of an interface prototype along with sample structures. I'll also briefly discuss the larger question of making 2D structure drawing styles portable.

Drawing styles are edited through a tabbed dialog containing a live preview window that uses the current structure or a default structure if none is available. The dialog is resizable, enabling users to immediately see the effects of changes on structures of varying sizes. Although this dialog could be bundled and deployed with the editor, its large footprint makes it more appropriate for use as an optional feature or as a standalone configuration tool in a Web application.

Changes can be rolled back entirely ("Reset"), canceled ("Cancel"), or accepted ("OK").

Let's say we'd like to apply a black background with white bonds, as used in some Power Point presentations:

After applying this change, we decide that we'd rather not use atom coloring:

After looking at this structure for a few seconds, we decide that narrower stereo bonds are needed:

After some experimentation, we find a more appropriate non-stereo bond width and double bond offset:

What about a Serif font? No, I don't think so:

But we could certainly reduce the size of the atom labels:

On second thought, the original atom sizes were fine, although changing font may require us to reconsider the atom label heights:

As you can see, the possibilities for customization are nearly endless. In practice, however, most chemists will adopt only two structure drawing styles that they re-use as needed: one for reports and manuscripts; and one for presentations. It will be interesting to see whether a third style makes it's way into the standard repertoire: Web.

Each chemist will want a way to save their styles, possibly share them, and easily apply them. Although a few systems for doing so are feasible, the most practical approach would be a stylesheet. Applying a stylesheet to any structure diagram would change its appearance, offering a simple mechanism to achieve a consistent look across documents.

Developing a universal (cross-editor) stylesheet system would be no easy task, given the wildly divergent capabilities of 2D structure rendering software. Despite the technical difficulty, the payoff for users is obvious.

A Chemical Structure Editor for the Web: Four Screenshots of a Firefly Prototype

Rich Apodaca — Wed, 02 May 2007 10:13:00 +0000

The previous article in this series discussed the requirements of Firefly, a new 2D chemical structure editor for the Web. Another article discussed Firefly's design constraints and the importance of embracing them. Why so much focus on a structure editor? Simply put, the structure editor is the key link between chemistry and cheminformatics. Without the structure editor, there would be no audience for cheminformatics software.

So far the discussion has been rather abstract. To make it less so, the following four screenshots illustrate the user interface and rendering capabilities of a Firefly prototype. All molecules were drawn with the Firefly interface running on Linux. Screenshots were directly captured from the running application.

Cholesterol

The image below illustrates fused rings and stereo atoms. Also notice that the atom label for oxygen has one implicit hydrogen atom that is properly placed to the left.

Doxorubicin

This image illustrates both atom labels and aromatic bonding. Notice the improperly-placed quinone double bond. Refining Firefly's aromaticity perception is currently a top priority.

Flunoxaprofen

Firefly comes complete with a developer-overridable atom coloring scheme. Also notice the correct length of the internal carbon-nitrogen double bond line.

Uric Acid

One of the more difficult aspects of rendering molecules with implicit hydrogens is placing them in the correct quandrant. In this screenshot of uric acid, notice how the hydrogens occupy three different quadrants relative to their hosting nitrogen atoms.