Depth-First: Category Graphics

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.

Just Say "No" to Pentavalent Carbon

Rich Apodaca — Mon, 28 May 2007 09:55:00 +0000

Molecular Style Sheets: Combining SVG and CSS

Rich Apodaca — Fri, 20 Oct 2006 14:02:00 +0000

Cascading Style Sheets (CSS) are used by Web developers to modify the appearance of an HTML document without requiring changes to the document itself. This approach has become so popular because of the power it offers: developers can achieve a consistent and re-usable look by simply editing and/or copying a single document.

2-D molecular structures are like text documents in that context determines the best presentation style. For example, the way that a 2-D structure appears on a Web page, complete with atom color coding and anti-aliasing, may not be the best way for it to appear on a handheld device. Consider these use cases:

An online publisher may want to achieve a consistent "look" for their 2-D molecular graphics, regardless of who generated them. For portability, they want to avoid hard-coding the styling information into the software they use.
You want to be able to re-use the 2-D structures you've downloaded from a blog in your presentation. The appearance of these structures needs to match those you already have.
An online substructure query may return results to a user that have been highlighted to indicate the atoms and bonds where the query hit. The user may want to set his or her own highlight color, or disable the feature altogether.

Users of ChemDraw and software like it are probably familiar with its concept of styles. This is the right idea, although limited in practice. The main limitation is that these products are aimed at single users on desktop machines that are willing to do a great deal of manual work to achieve consistency. Something far more general and automated is going to be needed, and to my knowledge it does not yet exist.

Could the style sheet concept be applied to 2-D structure diagrams? It turns out that SVG may offer a solution. Just as the appearance of an HTML document can be styled with CSS, so too can the appearance of an SVG document.

A Demonstration: Highlighting Bonds

As a demonstration, we'll see how a style sheet can be used to highlight one of naphthalene's rings, possibly as a result of it being hit by a substructure search.

Consider the above 2-D structure of naphthalene, which was generated by Structure-CDK, the latest version of which can be downloaded here. The SVG that generated this image is shown below. I have edited the commented lines.

<?xml version="1.0" encoding="UTF-8"?>

<!-- Edit: a stylesheet -->
<?xml-stylesheet href="style_normal.css" type="text/css"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>

<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">

  <defs id="genericDefs" />
  <g>
    <g text-rendering="optimizeLegibility" stroke-width="0.098" transform="scale(47.2947,47.2947) translate(0.049,3.1127)" stroke-linecap="round" stroke-linejoin="round">
      <line y2="-0.7" fill="none" x1="4.8497" x2="4.8497" y1="-2.1" />
      <path fill="none" d="M4.8497 -2.1 L3.6373 -2.8 M4.5581 -1.945 L3.6488 -2.47" />
      <path fill="none" d="M0 -2.1 L0 -0.7 M0.28 -1.925 L0.28 -0.875" class="hit" /> <!-- Edit: hit -->
      <line y2="-2.8" fill="none" x1="0" x2="1.2124" y1="-2.1" class="hit" /> <!-- Edit: hit -->
      <path fill="none" d="M4.8497 -0.7 L3.6373 0 M4.5581 -0.855 L3.6488 -0.33" />
      <line y2="0" fill="none" x1="0" x2="1.2124" y1="-0.7" class="hit" /> <!-- Edit: hit -->
      <line y2="-2.1" fill="none" x1="3.6373" x2="2.4249" y1="-2.8" />
      <path fill="none" d="M1.2124 -2.8 L2.4249 -2.1 M1.224 -2.47 L2.1333 -1.945" class="hit" /> <!-- Edit: hit -->
      <line y2="-0.7" fill="none" x1="3.6373" x2="2.4249" y1="0" />
      <path fill="none" d="M1.2124 0 L2.4249 -0.7 M1.224 -0.33 L2.1333 -0.855" class="hit" /> <!-- Edit: hit -->
      <line y2="-0.7" fill="none" x1="2.4249" x2="2.4249" y1="-2.1" class="hit" /> <!-- Edit: hit -->
    </g>
  </g>
</svg>

In the image of naphthalene rendered above, the stylesheet I used was blank. However, by applying the following one-line style sheet, I can significantly change the appearance of this image:

*.hit { stroke: red }

This line is known as a "class selector." A CSS-aware SVG renderer (such as Firefox), after loading this style sheet, will apply the red stroke styling to all elements containing the hit class attribute. The output, shown below, highlights one of the rings of naphthalene in red.

Interestingly, the SVG document itself says nothing about what color the hit class should be - that's left for the style sheet to determine. So by changing one line in the style sheet, I can change the appearance of the hit highlighting to purple, green, or aquamarine. And this applies not only to colors, but to line thickness, line shape, anti-aliasing, and a variety of other properties.

Another Demonstration: Global Line Thickness

It's also possible to globally affect the appearance of naphthalene with a simple style sheet. For example, the following style sheet changes the line thickness and all line colors of naphthalene:

* { stroke-width: 0.25; stroke: green; }

When the naphthalene SVG is rendered with this style sheet, the image shown below is produced. The "*" selector is a wildcard, applying to all elements in the SVG document. This version of the style sheet ignores our "hit" styling from the example above. The hit styling could easily be added back in by adding the appropriate class selector line to the CSS.

You may notice in the image above that the leftmost vertical line appears clipped on its left side. This is because the SVG output from Structure-CDK exactly aligns the left line border with the leftmost side of the image area. By thickening the lines with a style sheet, we've overrun the image area. This could be fixed by moving the SVG viewport to the left. But that's a subject for another time.

A Limitation

It will probably never be possible to modify the distance between parallel lines, as for example in multiple bonds, with the CSS approach. These distances are set in the coordinate attributes of the line and path elements, and are independent of styling.

Conclusions

Of course, we're just scratching the surface of what's possible with CSS and 2-D molecular structures. For example, the same principles outlined here could be used for atom coloring schemes and a variety of line and drawing properties. Various forms of interactive animation are even possible. Despite its limitations, SVG and CSS make a powerful combination for developing next-generation molecular rendering platforms.

From IUPAC Nomenclature to 2-D Structures With OPSIN

Rich Apodaca — Tue, 17 Oct 2006 13:57:00 +0000

A previous article introduced OPSIN, an Open Source Java library for decoding IUPAC chemical nomenclature. In this tutorial, you'll see how OPSIN can, when interfaced with freely-available chemical informatics software, generate 2-D structure diagrams from IUPAC names.

Prerequisites

This tutorial requires Ruby CDK (RCDK), which in turn requires Ruby, Java, and the Ruby Java Bridge. Tutorials detailing the installation of RCDK on both Windows and Linux platforms are available.

In addition, you'll need a copy of the standalone jarfile opsin-big-0.1.0.jar. Future versions of RCDK will integrate the OPSIN jarfile, making this step unnecessary.

Outlining the Problem and a Solution

We'd like to create a simple Ruby class with a method that accepts an IUPAC chemical name as input and produces a PNG image of the corresponding molecule as output. OPSIN accepts IUPAC names as input, but it only produces Chemical Markup Language (CML) as output. The CML output lacks 2-D coordinates, and OPSIN itself has no 2-D rendering capabilities.

We'll use RCDK to augment OPSIN's capabilities. Thanks to CDK's built-in CML support, RCDK can read CML and generate an AtomContainer representation. RCDK also supports the assignment of 2-D coordinates to an AtomContainer via CDK's StructureDiagramGenerator. To produce the PNG image, we'll use the 2-D rendering capability made possible through Structure-CDK, which is a built-in component of RCDK.

A Simple Ruby Library

Create a working directory and copy opsin-big-0.1.0.jar into it. Next, create a file called depictor.rb containing the following Ruby code:

require 'rubygems'
require_gem 'rcdk'
require 'rcdk'

Java::Classpath.add('opsin-big-0.1.0.jar')

require 'util'

# A simple IUPAC->2-D structure convertor.
class Depictor
  @@StringReader = import 'java.io.StringReader'
  @@NameToStructure = import 'uk.ac.cam.ch.wwmm.opsin.NameToStructure'
  @@CMLReader = import 'org.openscience.cdk.io.CMLReader'
  @@ChemFile = import 'org.openscience.cdk.ChemFile'

  def initialize
    @nts = @@NameToStructure.new
    @cml_reader = @@CMLReader.new
  end

  # Writes a <tt>width</tt> by <tt>height</tt> PNG to
  # <tt>filename</tt> for the molecule described by
  # <tt>iupac_name</tt>.
  def depict_png(iupac_name, filename, width, height)
    cml = @nts.parseToCML(iupac_name)

    throw("Can't parse name: #{iupac_name}") unless cml

    molfile = cml_to_molfile(cml)

    RCDK::Util::Image.molfile_to_png(molfile, filename, width, height)
  end

  private

  def cml_to_molfile(cml)
    string_reader = StringReader.new(cml.toXML)

    @cml_reader.setReader(string_reader)

    chem_file = @cml_reader.read(@@ChemFile.new)
    molecule = chem_file.getChemSequence(0).getChemModel(0).getSetOfMolecules.getMolecule(0)

    molecule = RCDK::Util::XY.coordinate_molecule(molecule)

    RCDK::Util::Lang.get_molfile(molecule)
  end
end

Testing, Testing

A short test will demonstrate the capabilities of the Depictor library. Add the following to a file called test.rb in your working directory (or enter it interactively with irb):

require 'depictor'

depictor = Depictor.new
name = '3,3-dimethyl-7-oxo-6-[(2-phenylacetyl)amino]-4-thia-1-azabicyclo[3.2.0]heptane-2-carboxylic acid' #Penicillin G

depictor.depict_png(name, 'out.png', 300, 300)

Running this test produces a 300x300 PNG image of Penicillin G, named out.png, in your working directory:

As you can see, this simple library and test code has:

correctly parsed the rather complex IUPAC name (3,3-dimethyl-7-oxo-6-[(2-phenylacetyl)amino]-4-thia-1-azabicyclo[3.2.0]heptane-2- carboxylic acid) to a valid CML representation
converted this representation to a CDK AtomContainer
assigned 2-D coordinates
rendered a PNG image in color

Notice how the thiaazabicyclo[3.2.0] system, complete with properly-placed substitutents, was flawlessly identified and parsed.

If you entered the above test code interactively via IRB, you may have noticed a multi-second delay in instantiating Depictor. This latency results from a sluggish NameToStructure constructor in OPSIN. A similar delay also occurs in OPSIN's pure-Java unit tests. Once Depictor is instantiated, however, image generation occurs relatively quickly.

The unususal orientation of the beta-lactam carbonyl group is determined by CDK's StructureDiagramGenerator. The source of this behavior will be explored in a future article.

More Examples

To illustrate some of the capabilities of the OPSIN-RCDK combination, a few more examples are provided below.

One of OPSIN's more surprising features is how well it handles heterocycles. For example, the IUPAC name for caffeine (1,3,7-trimethylpurine-2,6-dione) is translated to:

As another example, consider the tetrazole (1-[2-hydroxy-3-propyl-4-[3-(2H-tetrazol-5-yl)propoxy]phenyl]ethanone):

Highly substituted benzene rings and carboxylic acids are also translated accurately, as in 3-acetamido-5-(acetyl-methyl-amino)-2,4,6-triiodo-benzoic acid (Metrizoate):

How about a hairy-looking macrocycle name with multiple levels of morpheme nesting (3,6-diamino-N-[[15-amino-11-(2-amino-3,4,5,6-tetrahydropyrimidin-4-yl)-8- [(carbamoylamino)methylidene]-2-(hydroxymethyl)-3,6,9,12,16-pentaoxo- 1,4,7,10,13-pentazacyclohexadec-5-yl]methyl]hexanamide)? Not a problem:

Limitations

In my tests of the OPSIN library, one structure appeared to be incorrectly parsed - N-(5-chloro-2-methyl-phenyl)-2-methoxy-N-(2-oxooxazolidin-3-yl)acetamide:

There are actually two problems with the output. First, an oxygen atom and a methyl group are overlapping near the top of the diargram. This cosmetic issue is related to CDK's StructureDiagramGenerator. Second, the oxazolidine nitrogen atom is misplaced by OPSIN. The correct 2-D image of this molecule, obtained from PubChem, is shown below:

Conclusions

It's not common to find an early-development Open Source project with the sophistication of OPSIN. The smooth handling of nested morphemes, aromatic heterocycles, macrocycles, and a good fraction of what I threw at it leads me to belive that a well-designed and extensible nomenclature parsing engine lies at OPSIN's core. More on that later, though.

What could you do with a powerful Open Source IUPAC nomenclature parser? The answer to that one question could fill a three-volume series. Suffice it to say that OPSIN, in combination with other Open Source software, offers virtually limitless potential for indexing, collecting, repackaging, reprocessing, and mashing up vast amounts of chemical information. Because of its Open Source license, OPSIN can be extended and otherwise modified to fit your particular needs. Future articles will highlight some of the possibilities.

Looking at InChIs

Rich Apodaca — Tue, 26 Sep 2006 14:35:00 +0000

InChI identifiers can be viewed both as unique molecular keys and as a language encoding molecular structure. With the right software, it is possible to decode any InChI to arrive at a human-readable molecular structure. This tutorial will show how to convert InChI identifiers into 2-D molecular renderings using open source tools.

Prerequisites

The InChI to 2-D image conversion process requires two pieces of software:

Rino decodes InChI identifiers into molfiles. The resulting atomic coordinates are set to zero.
RCDK assigns coordinates to the molfile produced by Rino, and renders the result.

Bring on the Code

The following Ruby code illustrates how the InChI for the pesticide fipronil (Regent) can be translated into a PNG image:

require 'rubygems'
require_gem 'rino'
require_gem 'rcdk'
require 'util'

inchi = 'InChI=1/C12H4Cl2F6N4OS/c13-5-1-4(11(15,16)17)2-6(14)8(5)24-10(22)9(7(3-21)23-24)26(25)12(18,19)20/h1-2H,22H2' #fipronil
reader = Rino::InChIReader.new
molfile1 = reader.read(inchi) # lacks 2-D atomic coordinates
molfile2 = RCDK::Util::XY.coordinate_molfile(molfile1) # has 2-D atomic coordinates

RCDK::Util::Image.molfile_to_png(molfile2, 'fipronil.png', 350, 300)

Running this code produces the image fipronil.png in your working directory:

Limitations

The technique illustrated here is subject to the same limitations as the underlying software. For Rino, this means that stereochemistry is ignored. For RCDK, this means that implicit hydrogen atoms, isotopes, and charges are omitted, and that layout of macrocycles and other complex ring systems may not subjectively appear very refined.

Other Software that Does This

To my knowledge, only one other Open Source package, BKChem, is capable of rendering InChIs as described here. BKChem's underlying InChI translation and depiction software, OASA, can also be accessed online. For comparison, OASA produces the following image for for the fipronil InChI:

The PubChem editor can also translate and render InChIs, but no source code appears to be available. PubChem's InChI translation and rendering output for fipronil is:

The Chemistry Development Kit, on which RCDK is based, was recently upgraded to support reading InChI identifiers. For some time, CDK has been able to generate 2-D atomic coordinates.

More information on InChI software can be found at Beda Kosata's InChI.info site.

The Final Word

Within certain limitations, it is quite feasible to programatically obtain a 2-D molecular image for any InChI identifier. Combining this capability with other chemical informatics software and services offers numerous possibilities to use InChI in innovative ways.

Visualizing IUPAC Names with ChemNomParse

Rich Apodaca — Mon, 11 Sep 2006 14:29:00 +0000

Nomenclature translation is the process of converting a human-readable chemical name into a machine-readable notational scheme such as a connection table. It plays a key role in linking the older chemical literature to modern information technologies, such as the Internet.

Buried deep within the Chemistry Development Kit (CDK) is a library for nomenclature translation called ChemNomParse. At the heart of ChemNomParse is a remarkable piece of software called the Java Compiler Compiler (JavaCC), a parser generator and lexical analyzer generator for Java. A FAQ on JavaCC is available here.

This tutorial demonstrates how freely-available, open source tools can be used to parse an IUPAC chemical name and generate its corresponding 2-D structure rendering. A closely-related tutorial on generating 2-D structures from SMILES strings may be helpful as background.

Ingredients

This tutorial uses Arton's Ruby Java Bridge, the installation and use of which has been outlined previously. In addition, you'll need to download Structure-CDK v0.1.2, also previously discussed. Be sure to download v0.1.2, as two upgrades have been released since the package was originally described. This tutorial has been tested on Mandriva Linux 2006.

Create a working directory called nom. From the lib directory of the Structure-CDK distribution, copy cdk-20060714.jar and structure-cdk-0.1.2.jar into your depict working directory.

Code

Create a file called depict.rb and copy the following code into it:

ENV['CLASSPATH'] = './cdk-20060714.jar:./structure-cdk-0.1.2.jar'

require 'rubygems'
require_gem 'rjb'
require 'rjb'

NomParser = Rjb::import 'org.openscience.cdk.iupac.parser.NomParser'
StructureDiagramGenerator = Rjb::import 'org.openscience.cdk.layout.StructureDiagramGenerator'
ImageKit = Rjb::import 'net.sf.structure.cdk.util.ImageKit'

class Depictor

  def initialize
    @sdg = StructureDiagramGenerator.new
  end

  def depict_png(nom, width, height, path_to_png)
    ImageKit::writePNG(nom_to_mol(nom), width, height, path_to_png)
  end

  def depict_svg(nom, width, height, path_to_svg)
    ImageKit::writeSVG(nom_to_mol(nom), width, height, path_to_svg)
  end

private

  def nom_to_mol(nom)
    @sdg.setMolecule(NomParser::generate(nom))
    @sdg.generateCoordinates

    @sdg.getMolecule
  end
end

After you save this file, you'll need to set your LD_LIBRARY_PATH on unix (or the equivalent on another OS):

$ export LD_LIBRARY_PATH=$JAVA_HOME/jre/lib/i386:$LD_LIBRARY_PATH

This tells RJB where to find Java's native libraries. Because of RJB's current design, LD_LIBRARY_PATH needs to be set from the command line, rather than from within a Ruby process.

Using the Depictor class is as simple as creating an instance and invoking depict_png or depict_svg on it:

require 'nom'

depictor = Depictor.new

depictor.depict_png('2-phenylcyclohexan-1-ol', 300, 300, 'output.png')

Executing the above code either through the Ruby interpreter (ruby) or via Interactive Ruby (irb) products a PNG image of the chiral auxiliary shown below:

Other names correctly recognized by ChemNomParse include:

phenylhexyne
2-chloro-3-phenyl-4,4-dimethylhexane
3-phenyl-1-aminopropane
1,2-difluoro-3-hydroxycyclohexene

Limitations

Many chemical names, ranging from the simple to the complicated, were not be recognized at all by ChemNomParse. Some examples are:

benzene
piperidine
1-methoxyhexane
2-methyl-5-prop-1-en-2-yl-cyclohex-2-en-1-one (carvone)

Some names were incorrectly interpreted due to misassigned locants. For example, 2-chloro-3-hydroxybutanoic acid produced the incorrectly asssigned structure shown below:

ChemNomParse can accurately recognize chemical names representing simple substitutions on basic hydrocarbon scaffolds. More complicated structures, such as heterocycles, bicyclic systems, and systems involving nested substituents do not appear to be handled at all. It is not clear to what extent these limitations reflect a small dictionary of morphemes (the basic nomenclature building blocks) versus deeper design issues.

Despite its limitations, ChemNomParse is an interesting piece of open source software for working with chemical nomenclature. From this simple tutorial, it can be seen that nomenclature translation, when combined with other capabilities such as 2-D rendering, offers many exciting possibilities.

Generating and Serving 2-D Molecular SVGs

Rich Apodaca — Sat, 09 Sep 2006 14:45:00 +0000

A previous article showed some examples of 2-D molecular rendering using Scalable Vector Graphics (SVG) embedded in a web page. This article will outline some simple steps for generating these images and publishing them on the Web.

Prerequisites

This tutorial uses Structure-CDK, a CDK add-on library written in Java. You'll need to install Sun's JDK 1.4.2 or later (or an open source alternative). Although not required, Ant makes it easy to use Structure-CDK. You'll want to make sure that your browser is SVG-enabled.

Creating a 2-D Molecular SVG File

Methylenedioxymethamphetamine (MDMA)

An SVG image like the one shown above can be created with this sequence of steps:

Download and unzip the current release of Structure-CDK.
Move into the unzipped Structure-CDK directory and run the Structure Visual Testing Framework:
```
$ cd structure-cdk-0.1.2
$ ant vis
```
From the File menu, choose Open... and use the file dialog to open a molfile. The molfiles directory contains some samples.
Resize the image to taste and choose Save as SVG... from the File menu. This writes the SVG image to a directory and filename of your choice.

Viewing the SVG File

You now have several options for viewing the SVG file. One of the simplest is to open it with the Firefox browser. Another option is to open it with the excellent, free SVG editor Inkscape. From Inkscape, you can edit your image, apply any number of special effects from the mundane to the remarkable, and save the result to disk.

Deploying the SVG File on the Web

After uploading your SVG file to a blog or other site, you may have some additional configuration to do. Because the SVG MIME type is not configured by default on all servers, you may need to do so yourself.

After uploading my first set of SVG files to my server, I tried to view them in Firefox. Instead of seeing the expected image in the browser window, I got a dialog asking if I wanted to open it with Inkscape or save it to disk.

With the help of some documentation, I was able to track the problem down to my server, which was using the MIME type "image/svg-xml" instead of "image/svg+xml". The former is the obsolete SVG MIME type, which Firefox rejects. Internet Explorer equipped with Adobe's SVG plugin, on the other hand, accepts the obsolete MIME type, rendering SVG without presenting a dialog. Web-Sniffer, which decodes header information from HTTP responses, may be useful for debugging your server's MIME type configuration.

Having configured your server's SVG MIME type as "image/svg+xml", pointing your browser to your SVG file's URL will let you view it in its full, W3C-compliant glory.

Embedding the SVG File in HTML

There are a few options for embedding an SVG image in HTML. The most universally-applicable mechanism is the <embed> tag:

<html>
  <head></head>
  <body>

  <!-- document body -->

  <embed src="url-to-svg-file.svg" TYPE="image/svg+xml" width="400" height="400" />

  </body>
</head>

Embedding SVG into HTML carries some limitations. For example, you can't interact with the SVG DOM the way you can if the SVG is inlined, or placed directly into the HTML document itself. But that's a subject for another time.

Creating and deploying 2-D molecular images as SVG documents is a straightforward process, provided that some details are taken care of. Future articles in this series will show how SVG's advanced features make it a compelling choice as a chemical informatics rendering platform.

Note: if your're viewing this article in a feed aggregator, the SVG images may have been stripped out. If so, please see the original article.

Rendering Molecules with SVG on the Web

Rich Apodaca — Thu, 07 Sep 2006 13:56:00 +0000

Scalable Vector Graphics (SVG) is an XML-based language for encoding graphical content. Unlike raster image formats such as PNG, JPEG, and GIF, SVG images can be scaled to any resolution without pixelation. Given that 2-D structure diagrams are essentially line drawings, SVG seems like a natural fit for this type of representation. SVG also boasts several advanced features that make it an especially intriguing choice.

In this first article of a series on SVG and chemical informatics, I'll start by showing some embedded SVG images of molecules (also see this demo). Later articles will discuss technical details such as writing, reading, animating, scripting, editing, annotating, and distributing 2-D structures encoded as SVG.

Now, the Bad News

SVG is a work in progress. Browser support and performance can vary widely. If you are using Firefox version 1.5 or better, you should be able to see all of the images in this article without doing anything.

Unfortunately for Internet Explorer users, Microsoft's browser lacks built-in SVG support. Still worse, IE 7 appears ready to continue this perplexing tradition. Fortunately, Adobe offers an SVG plugin for IE.

Although this page was tested in both IE 6 (with Adobe's plugin) and Firefox 1.5 (both Windows and Linux), your particular configuration may vary. Please feel free to post your experiences.

Some Simple SVG Structures

The examples below illustrate how SVG images of molecules can be embedded in an HTML document. These images just scratch the surface of what is possible. If you don't see 2-D structures, your browser may lack SVG support.

Ascorbic Acid

Alprazolam

Furosemide

DDT

Note: if your're viewing this article in a feed aggregator, the SVG images may have been stripped out. If so, please see the original article.

Humanizing Line Notations

Rich Apodaca — Sat, 02 Sep 2006 17:08:00 +0000

Line notations are useful for encoding molecular structure with computers, especially in a network environment. Because line notations are compact and ASCII-based, they can, among other purposes, be used to query popular Web search engines for chemical content on the web. Useful as line notations are for computers, they are not as useful to humans, who would much rather have a 2-D structure diagram to look at.

Depict is an example of software that generates 2-D structure renderings from a SMILES string. Behind the scenes, the software parses the SMILES string, creates a connection table, determines 2-D coordinates for its atoms, and produces a raster image of the result. Software accomplishing the same task is also available from OpenEye. In this tutorial, you'll see one way to create free Depict-like functionality from Open Source tools.

The Ingredients

This tutorial uses Arton's Ruby Java Bridge, the installation and use of which has been outlined previously. In addition, you'll need to download Structure-CDK v0.1.2, also previously discussed. Be sure to download v0.1.2, as two upgrades have been released since the package was originally discussed.This tutorial has been tested on Mandriva Linux 2006.

Create a working directory called depict. From the lib directory of the Structure-CDK distribution, copy cdk-20060714.jar and structure-cdk-0.1.2.jar into your depict working directory.

The Code

Now create a file called depict.rb and copy the following code into it:

ENV['CLASSPATH'] = './cdk-20060714.jar:./structure-cdk-0.1.2.jar'

require 'rubygems'
require_gem 'rjb'
require 'rjb'

SmilesParser = Rjb::import 'org.openscience.cdk.smiles.SmilesParser'
StructureDiagramGenerator = Rjb::import 'org.openscience.cdk.layout.StructureDiagramGenerator'
ImageKit = Rjb::import 'net.sf.structure.cdk.util.ImageKit'

class Depictor

  def initialize
    @smiles_parser = SmilesParser.new
    @sdg = StructureDiagramGenerator.new
  end

  def depict_png(smiles, width, height, path_to_png)
    ImageKit::writePNG(smi_to_mol(smiles), width, height, path_to_png)
  end

  def depict_svg(smiles, width, height, path_to_svg)
    ImageKit::writeSVG(smi_to_mol(smiles), width, height, path_to_svg)
  end

  def smi_to_mol(smiles)
    @sdg.setMolecule(@smiles_parser.parseSmiles(smiles))
    @sdg.generateCoordinates

    @sdg.getMolecule
  end
end

After you save this file, you'll need to set your LD_LIBRARY_PATH on unix (or the equivalent on another OS):

export LD_LIBRARY_PATH=$JAVA_HOME/jre/lib/i386:$LD_LIBRARY_PATH

This tells RJB where to find Java's native libraries. Because of RJB's current design, LD_LIBRARY_PATH needs to be set from the command line, rather than from within a Ruby process.

Using the Depictor class is simple. For example, to generate SVG and PNG images of desloratadine (Clarinex):

require 'depict'

depictor = Depictor.new

depictor.depict_svg('Clc4ccc3C(=C1CCNCC1)c2ncccc2CCc3c4', 300, 300, 'desloratadine.svg')
depictor.depict_png('Clc4ccc3C(=C1CCNCC1)c2ncccc2CCc3c4', 300, 300, 'desloratadine.png')

The Output

Running the above code, either with the Ruby interpreter (ruby) or with Interactive Ruby (irb) will produce an SVG and a PNG image in your depict directory containing the 2-D structure of the popular antihistamine (see image below). Scalable Vector Graphics (SVG) format is a popular, XML-based vector graphics encoding system that can be viewed with the Firefox browser and several other software packages.

The code we've used here takes advantage of convenience methods in the Structure-CDK library. However, it is possible to customize the output in several ways, including line thickness, line spacing, color scheme, and atom label height by using the library's lower-level API.

Being able to render a human-readable structure diagram from a line notation is useful in many situations. As you can see, this complex process can be accomplished quickly using Ruby, Java and open source chemical informatics libraries. Future articles will make use of this capability in building more complex chemical informatics systems.

Drawing 2-D Structures with Structure-CDK

Rich Apodaca — Mon, 28 Aug 2006 14:03:00 +0000

Rendering 2-D molecular structures is a fundamental part of chemical informatics. It's used in building end user systems, and more immediately, it can be critical for creating and debugging developer tools.

The Chemistry Development Kit (CDK) is a highly-functional chemical informatics library written in Java. Although it provides built-in 2-D rendering capabilities through the org.openscience.cdk.renderer package, I wanted something a little easier for me to customize. The result is Structure-CDK, a 37K add-on library for the CDK. This article discusses the main features of Structure-CDK with some screenshots and code.

To begin using Structure-CDK, download the current release. This package contains a complete copy of the most recent CDK release, so there is nothing else to install or download. Structure-CDK was developed with JDK-1.5.0. Because it contains no 1.5-specific features, it may work on earlier Java versions. Ant is useful, but not essential.

The packages contains an interactive viewing application, which can be invoked with the "vis" Ant task:

$ ant vis

Two types of molecules can be viewed. The first consists of those defined in org.openscience.cdk.templates.MoleculeFactory, which can be found under the Structure menu. 2-D coordinates are provided by CDK's StructureDiagramGenerator. Additionally, molecules can be opened as molfiles (File->Open), several samples of which are contained in the distribution's molfiles directory. Let's take a look at oseltamivir (Tamiflu).

This view can be changed in a couple of ways. Resizing the window automatically resizes and centers the image, while maintaining proportionality of all measurements. This feature, when used with antialiasing, results in the image staying readable regardless of its size. Additionally, Edit->Preferences produces a dialog for changing the rendering settings.

Now let's see some code that will read a molecule from a molfile and write a 2-D PNG image to disk. This can be done via the static convenience methods found in ImageKit:

import java.io.FileReader;

import org.openscience.cdk.io.MDLReader;
import org.openscience.cdk.interfaces.IMolecule;
import org.openscience.cdk.Molecule;

import net.sf.structure.cdk.util.ImageKit;
...

public void writePNG(String pathToMolfile, String pathToPNG) throws Exception
{
  MDLReader mdlReader = new MDLReader(new FileReader(pathToMolfile));
  IMolecule mol = (IMolecule) mdlReader.read(new Molecule());

  ImageKit.writePNG(mol, 300, 300, pathToPNG);
}

The above code fragment creates a 300x300 PNG image from the contents of the molfile specified by pathToMolfile.

Although several rendering features, both aesthetic and functional, are supported, some are missing. Most importantly, atom labels are only rendered without hydrogen atoms and there is no stereochemistry support. Performance has not been optimized at all. Future versions of Structure-CDK will be aimed at addressing these issues.

Given the central nature of 2-D structure rendering, it's nice to have options. Structure-CDK provides a convenient, interactive solution. Future articles will discuss the integration of Structure-CDK into more complex chemical informatics systems.