Depth-First: Tag chemicalstructure

Screencast: Drawing Structures Quickly With ChemWriter

Rich Apodaca — Wed, 18 Jun 2008 13:55:00 +0000

This short video shows how to use ChemWriter to draw structures quickly with keyboard shortcuts.

Better Structure Drawing With ChemWriter 1.3.0

Rich Apodaca — Mon, 16 Jun 2008 16:18:00 +0000

ChemWriter 1.3.0 has been released and is ready for download. This version makes it possible to change the mouse cursor hover radius for more accurate drawing. It also adds a setting to disable heteroatom keyboard shortcut events occurring away from a molecule node, reducing the possibility of an off-atom label being inadvertently drawn.

For details, see the Metamolecular Company Blog.

Adobe Flash for Cheminformatics: Fast, Scalable, and Attractive 2D Depiction of Chemical Structures with Vector Graphics

Rich Apodaca — Tue, 10 Jun 2008 11:05:00 +0000

The previous article in this series discussed the use of vector graphics markup languages for cheminformatics, in particular for the display of 2D chemical structures. Although vector graphics are well-suited for creating responsive and appealing cheminformatics Web applications, the lack of universal native browser support makes both Scalable Vector Graphics (SVG) and its cousin Vector Markup Language (VML) unattractive at this time. This article highlights Adobe Flash as a 2D chemical structure renderer for Web applications, and features a fully-functional proof of concept based on the ChemWriter rendering engine.

About Adobe Flash

Although Adobe Flash is practically an industry unto itself today, at it's core, Flash is a lightweight vector graphics renderer. Introduced in 1996, the Flash Player can be found on millions of Internet-enable devices today. According to a study by Adobe, the Flash Player was running on nearly 99% of Internet-enabled desktops as of March 2008. The player has also found its way onto a host of handheld devices and phones.

Many technologies have been layered on top of the Flash Player. One of the first was the ActionScript scripting language. More recently, Adobe has introduced Flex, a full-fledged application development framework.

Unlike SVG and other vector graphics systems, Flash is ready today, proven, and about as close to universal as is possible on the Web. If you want to do vector graphics on the Web with the most convenient user and developer experience, Flash is your tool.

But what can Flash do for cheminformatics?

A Demonstration

The table below is composed of twelve cells, each of which display a chemical structure through the Flash Player.

zoom	zoom	zoom
zoom	zoom	zoom
zoom	zoom	zoom
zoom	zoom	zoom

Several points are worth mention:

Each of the structures can be zoomed by clicking on its 'zoom' link.
Each cell contains a lightweight embedded "SWF" file, or "ShockWave File," and the zoomed view displays exactly the same file. No matter how the SWF file is resized, it will always be proportionally-scaled to its smallest dimension and centered.
The size of each SWF file ranges from a low of 563 bytes to a high of 8.5 KB, with an average of around 1.5KB. The larger the molecule, the more space is required. A comparable PNG with a resolution of 150x150 pixels would require on average for each structure about 6-8 KB.
Each image was generated from a molfile using a development version of the ChemWriter rendering engine via the open source Transform SWF Java toolkit.
SWF Files, unlike applets, are highly optimized for multiple instance display on all major platforms and browsers. In every case, startup will be nearly instantaneous and scrolling will be smooth. The performance of Flash should be at least as good as, if not better than, raster images.

The Right Tool for the Job (is Probably not a Raster Image)

One of the first challenges developers of cheminformatics Web applications are faced with is how to render 2D chemical structures. For an overview of the technologies now in use, see the previous article in this series. Each option has its own set of trade-offs.

The most widely-used 2D structure rendering option, raster images, is both inflexible and inefficient. Unlike a vector image, a raster image by definition has only one resolution, which is fixed at creation time. If image dimensions need to change, then all structures must be re-imaged. Given the size of many of today's chemistry databases, such a system-wide re-imaging of structures can involve a non-trivial amount of processor power and bandwidth.

To compensate, many sites store relatively large images, say 300x300 pixel, and then use the HTML <img> tag to shrink it as needed. But this creates problems of its own: both storage and bandwidth requirements are far larger than they need to be, resulting in the need for more powerful server hardware and poorer application scalability. And then there are the application's users, who must wait through a 30KB or higher download for each 2D image.

A significant number of structures in any compound collection will be so large that even a 300x300 pixel image will be insufficient to render the necessary detail. For example, a recent Depth-First article discussed a vector graphics solution this problem within the context of Chempedia, the free chemical encyclopedia. Vector graphics simply eliminate this issue.

Many cheminformatics applications would benefit from being able to show 50 or more structures at a time, with each structure having a zoom view for closer inspection. To a non-chemist, this might seem unnecessary. But for today's chemists dealing with large chemical catalogs and high-throughput screens, it's not only possible, but a routine part of the practice of chemistry. The raster image approach makes it extremely difficult to meet this important need on the Web. Vector graphics, possibly delivered through the Flash Player, offer a much simpler and more efficient way to do it.

2D chemical structures are vectorial in nature; using raster images to depict them is in most cases the more costly and lower quality option.

Summary

Vector graphics are a near-perfect match for the job of depicting 2D chemical structures on the Web. Although there are many vector graphics platforms to choose from, the Flash Player is by far the most universal option. This article has demonstrated a working example of multiple 2D chemical structures rendered as lightweight vector images via the Adobe Flash Player, the first and only such demonstration of which I'm aware.

The key technologies behind this demonstration are the ChemWriter rendering engine and the open source Flash developer toolkits available from Flagstone Software. If you're interested in learning more about how vector graphics and Flash can improve both the user and developer experience in your cheminformatics Web applications, I'd be happy to hear from you.

The Other Vector Graphics Markup Language

Rich Apodaca — Fri, 06 Jun 2008 14:39:00 +0000

Scalable Vector Graphics (SVG) is a technology that enables the creation and publication of high quality images that can be scaled to any resolution. SVG is ideally suited for the Web, and all major browsers now support it - except Internet Explorer (IE). This poses a problem: vector graphics are by far superior to raster images for many applications, but the lack of native IE support makes SVG a non-starter for most developers. This article discusses a little known IE capability that might provide a solution.

Oh Brother, Where Art Thou?

Way back in 1998 a group of companies including Microsoft submitted a proposal for a vector graphics language called Vector Markup Language (VML) to the W3C. This set in motion a series of events that culminated in the development of what we know today as SVG. But while use of SVG quickly expanded, VML remained almost exclusively limited to Microsoft products.

Soon after, IE 5 introduced the ability to decode and display VML - a capability that exists today in IE 7.

SVG and VML are two vector graphics languages, each designed to do essentially the same thing. For basic shape rendering, their similarities outweigh their differences.

About VML

To understand why VML never caught on, you need look no further than the documentation - or the lack thereof. The original VML submission is a decade old and has not been updated.

For the most part, VML documentation is scattered and incomplete. Nevertheless, there are some useful resources. Here, in no particular order are some of them:

Microsoft Documentation Authoritative, but lacking in examples.
VML, SVG, and Canvas Discusses some of the differences between VML and SVG.
Cum mortuis in lingua mortua Good history of VML.
Examples of the Vector Markup Lanugauge There are far too few of this kind of site.
VectorConverer A PHP library that uses XSLT to interconvert SVG and VML. Unfortunately, the stylesheet didn't work in my hands under Xalan or Ruby/xslt - and I know almost nothing about PHP.
Julie Nabong's Masters Thesis Julie wrote and documented an SVG/VML XSLT for interconverting the two languages.

JSDrawing: Interconverting Vector Languages on the Fly

One VML resource deserves special note - JSDrawing. This library seems to be capable of generating Flash, VML, or SVG from a common vector graphics language precursor. I'm not sure how practical this approach would be, but it does provide some food for thought.

Why It Matters

Chemistry is in a good position to take advantage of vector graphics. Chemical structures, being closely based on graph theoretical constructs, would seem to be a perfect match for vector languages like SVG and VML, especially on the Web. So far it hasn't happened, primarily for the reasons outlined above.

Currently, if you want to display 2D chemical structures in Web pages you're faced with some tradeoffs:

Raster Images. This is by far the most common practice. This option unfortunately makes it very difficult to redesign the layout of a site or support multiple views of the same structure, especially with databases of one million plus compounds becoming commonplace. Even if images are never regenerated, they need to be stored and retrieved, adding to cost and complexity. Images could be dynamically generated, but at the expense of substantial memory and CPU requirements.
Applets. This is the approach currently taken by Chempedia, the free chemical encyclopedia, and gives complete flexibility in page layout and structure appearance. Changing the dimensions of a structure is as simple as changing the size of a div. Unfortunately, some browsers handle multiple applets better than others. Firefox on OS X is very slow at refreshing applets while scrolling, and IE requires a Javascript trick to remove the 'click to active' message that causes some flashing when in progress.
Vector Graphics Through Plugins There are at least two SVG plugins for IE (one by Adobe and the other from Examotion). Will all of your users be able to find and install them? Unless the answer to both questions is 'yes', this option is probably best left as a last resort. Another option is to render SVG on IE through the Flash or Silverlight plugins. But as far as I can tell, neither approach is ready for prime-time.
Native Vector Graphics Available on all major browsers including Internet Explorer 5/6/7, Firefox 1/2, and Opera 8/9. Combines the flexibility, lossless depiction, inlineability and low data storage/retrieval overhead of applets with the speed of images. Interactivity and other special effects can be achieved through DOM manipulation. All of this depends, of course, on the vector graphics format being compatible with the rendering engine.

In some circumstances, serving VML to IE clients and SVG to everyone else would be a viable option - if it were possible to generate VML.

Conclusions

Vector graphics have a lot to offer chemistry, especially when used with Web applications. The combination of VML and SVG offers a proven technology platform that's ready today, but only if you can generate VML.

Building Chempedia: Resizable Structures With ChemWriter

Rich Apodaca — Mon, 19 May 2008 09:42:00 +0000

One of the difficulties in viewing 2D chemical structures is that molecules vary in size. In particular, larger molecules become difficult to read when confined to a small section of a screen. This article shows how this problem has been addressed in Chempedia using the 2D rendering capabilities of the ChemWriter package.

As an example, consider Chempedia's entry for Aluminon. Although the summary box at the right shows the structure for Aluminon, it may not be completely readable due to the large size of the molecule.

To solve this problem, Chempedia has implemented a "zoom" link for all monographs containing a chemical structure. Clicking on the zoom link for Aluminon gives a magnified, scaled, stretchable, and resizable view of the molecule.

To implement this feature, Chempedia uses the ChemWriter PainterApplet. Simply setting the width and height attributes of the <object> tag to "100%" gives an applet that resizes itself as the surrounding window is resized.

Implementing a resizable 2D structure image window using AJAX and dynamic images is possible, but would be much more difficult to implement. It could also potentially produce a much higher, and unpredictable demand on server memory, CPU cycles, and bandwidth.

ChemWriter makes it possible for the server to delegate resizable image processing to the client, resulting in a much more responsive feature with minimal effect on the server.

The Art and Science of Chemical Structure Diagrams: ChemWriter as Chemically-Aware Vector Graphics System

Rich Apodaca — Thu, 14 Feb 2008 13:13:00 +0000

Of the many problems to be solved when building software to view and manipulate 2D chemical structures, one of the trickiest is getting all features to scale proportionally. This problem is widespread because it can seldom be predicted at which resolution a chemical structure will be viewed.

This article describes some ways in which this problem was addressed in the Web-based chemical structure editor ChemWriter.

Chemically-Aware Vector Graphics

ChemWriter is at its a core chemically-aware vector graphics system. It was designed with the belief that chemical structures should remain readable regardless of size.

The ability to scale 2D chemical structures to any resolution and retain readability is essential when creating cheminformatics systems because magnification factors are so varied. For example, in many cases, structures are user-resizable. In others, the size of the structure is statically set by the developer. In others, the bond length needs to remain fixed and the overall image size needs to adapt accordingly. Even when a chemical structure display context may seem static, future design constraints may force a change.

A robust chemical structure graphics system needs to gracefully enable the resizing of its output.

A Demonstration

Your system needs Java to display this image.

The live applet shown above lets you scale a chemical structure using the ">" and "<" keys, or the View->Zoom In and View->Zoom Out menu items.

Note: if you haven't installed and activated Java in your browser, you'll need to do so before viewing the above demonstration.

Scaling Chemical Structure Features

Properly scaling 2D chemical structure diagrams may not seem that difficult, but consider some of the properties involved:

Atom Label Size. Hardcoding font sizes is simply not an option.
Atom Label Padding. The empty space around a heteroatom bond label prevents bonds from making direct contact with the atoms they connect.
Line Thickness. Lines have variable absolute thickness that ensure they're visible at lower magnification and not too thin at higher magnification.
Multiple Bond Offset Distance. Double and triple bonds contain lines that are offset from the center bond line.
Stereo Bond Maximum Width Wedge and hash bonds have a maximum thickness.

To retain readability, each of these properties must proportionally scale when a chemical structure is reduced or enlarged.

The ChemWriter System

What does it mean to resize a chemical structure?

The dimensions of a structure are determined by its underlying atom coordinates. Resizing a chemical structure scales these coordinates. It's convenient to think of this process as a proportional change in the absolute length of the bonds between atoms; relative bond lengths, and relative atom positions remain fixed.

Given that only bond lengths change during scaling, it's useful to adopt bond length as a yardstick. Although not all bonds in a molecule will have the same length, for the most part these values will be tightly clustered around a median.

For this reason, a molecule's median bond length is the standard unit of measurement in ChemWriter.

As an example, setting atom label height can be done by calling ChemWriter's setAtomLabelHeight method (or using the atomLabelHeight parameter). The double-precision value represents a fraction of the median bond length. To make atom labels appear half as high as the median bond length, use a value of 0.5. To make them appear smaller by half, use a value of 0.25.

Your system needs Java to display this image.Your system needs Java to display this image.

The demonstration above shows the effect of each of these settings.

Conclusions

ChemWriter uses a vector graphics system that can create consistent, readable output for a wide range of image sizes. This flexibility is essential in creating cheminformatics systems that work well across a broad range of platforms and output formats.

Image Credit: cattypumkinhead

Testing Automatic Chemical Structure Recognition with OSRA

Rich Apodaca — Thu, 07 Feb 2008 10:45:00 +0000

Countless chemical structures exist only in a raster image format such as JPG, GIF, BMP, or on a printed page or PDF. While perfectly readable to humans, they are very difficult for machines to read. Given the sheer number of these structures that have been produced over the last few decades, the only hope of excavating them from their current data tombs is with computer recognition of some kind. This article discusses OSRA, an open source software package designed to do for chemical structures what Optical Character Recognition did for the printed word.

An online version of OSRA was used to read PNG images of chemical structures produced by an application based on ChemWriter. Both aliased and antialiased images were used and atom coloring was disabled:

Structure interpretation failed for the antialiased image at both 300 and 72 DPI resolution. This was the SMILES that was produced at 72 DPI; the one produced at the 300 DPI setting was not much more encouraging.

However, using the aliased imaged at 72 DPI produced the correct structure.

Could the failure to recognize the antialiased image be due to a problem with the ChemWriter application's rasterization method? Apparently, not. When a screen capture utility was used to produce the image from the ChemWriter application window, the wrong structure was again produced. Here, the PNG encoding was not through a Java program but rather the underlying operating system (Linux) using a standard screen capture utility.

To test the idea that line thickness might play a role in determining the quality of OSRA's interpretation, the antialiased image below was submitted:

Still, the incorrect structure was produced.

Apparently, images of 2D structures in which antialiasing has been applied cause difficulties for OSRA.

Fortunately, the ChemWriter-based application embedded the full connection table of the molecule into all of its images as metadata, so an optical recognition step is unnecessary.

Provided that no antialiasing has been applied to images, OSRA would seem to be a capable tool for converting rasterized 2D chemical structures into machine-readable format.

Image Credit: jspad

Editable and Searchable 2D Molecular Images

Rich Apodaca — Mon, 30 Jul 2007 08:01:00 +0000

Word processing replaced the typewriter for the simple reason that documents could be prepared and edited so much more quickly. If Web authoring replaces conventional word processors, it will be for the simple reason that Web documents can be found, distributed, reprocessed, and combined with other content so much more effectively. The peculiar nature of chemical structure information complicates chemistry's transition to Web authoring. This article, the first in a series, discusses some of the challenges that lie ahead.

State of the Art: Word/ChemDraw

Microsoft Word allows 2D molecular graphics, typically created with ChemDraw, to be embedded in documents and later edited. Those images can then be copied into Power Point presentations and reused in a variety of other Windows-specific products. This practice has become so widespread throughout industry and academics, that few chemists even think about the technology that many of them rely on several times a week.

Chemical Structures are Peculiar

A 2D molecular image, like the one depicting fluoxetine at the top of this article, is a peculiar beast. On one level, it's a picture that anybody can look at. But on another level, it's a type of object for which manipulation by humans and computers is extremely useful. The combination of Microsoft Word and ChemDraw lets chemists conveniently manage the dual nature of chemical structures.

Live Molecular Images

Why would anybody want to create editable and searchable 2D molecular graphics such as JPGs, PNGs, and SVGs? Alas, technology has a way of moving on just when we're getting comfortable with it (an especially difficult concept for typewriter manufacturers who went bust during the 1980s, and the dedicated word processor manufacturers who followed).

Consider the number of Word and PowerPoint documents you read last week compared to the number of Web pages. Chances are the ratio is at least 1:10. The trend shows no signs of reversing itself.

Although Web authoring tools have been very slow to reach the average user, the blogging explosion has led to rapid evolution in the field. As tools like WordPress, Movable Type, and even Wikipedia race to satisfy the needs of power authors, the average user will rather unexpectedly discover that they have access to perfectly capable tools that let them abandon their over-engineered (and expensive) word processors to experiment with Web publishing.

The Wikipedia Chemisty/Structure Drawing Workgroup hints at what lies ahead for chemistry. Two tools, GChemPaint and ACD ChemSketch, now enable molecular structure information to be embedded in images.

As chemistry turns to the Web as its primary publication medium, chemists will need the same ability to deal with chemical structures offered by their current tools of choice. In articles to follow, I'll discuss some ways this could happen.