Blog

Signals Blog

Browser-Based Chemical Structure Depiction: ChemWriter Geometry Parameters

All small-molecule software applications require a means for depicting chemical structures. In the early days of the Web, the only way to show structures was to generate raster images on a server and display them through the <img> tag. This approach is still widely-used, despite disadvantages.

ChemWriter offers another way: structure images are generated dynamically from molfiles in the browser with JavaScript.

Geometry Parameters

The ChemWriter Painter component supports three geometry-related customizations:

All three of these parameters are expressed in terms of the median bond length. This relative definition of geometry parameters means that structure features will retain their proportionality regardless of magnification. In other words, structures will maintain their appearance regardless of magnification. Furthermore, knowing the final display magnification is completely unnecessary when styling structure images.

Examples

We can display an albuterol structure image with thin bond lines (5% of the median bond length):

chemwriter.loadPainter('painter', {
  lineWidth: 0.05,
  molfile: '[NO NAME]\n  CHEMW2  0416111749132D                              \nCreated with ChemWriter - http://metamolecular.com/chemwriter/\n 17 17  0  0  1  0            999 V2000\n   -7.2576   -2.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.3916   -3.1833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -5.5256   -2.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -5.5256   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.3916   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -7.2576   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.6596   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.7936   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.9276   -1.1834    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.0615   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.1955   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.0615   -2.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.1955   -2.1833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.6596   -0.1834    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n   -8.1236   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -8.9896   -1.6833    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n   -8.1236   -3.1833    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\n  4  7  1  0  0  0  0\n  7  8  1  0  0  0  0\n  8  9  1  0  0  0  0\n  9 10  1  0  0  0  0\n 10 11  1  0  0  0  0\n 10 12  1  0  0  0  0\n 10 13  1  0  0  0  0\n  7 14  1  1  0  0  0\n  6 15  1  0  0  0  0\n 15 16  1  0  0  0  0\n  1 17  1  0  0  0  0\nM  END\n'
});
 

And this HTML will display the same image with thicker bond lines (15% of the median bond length):

chemwriter.loadPainter('painter', {
  lineWidth: 0.15,
  molfile: '[NO NAME]\n  CHEMW2  0416111749132D                              \nCreated with ChemWriter - http://metamolecular.com/chemwriter/\n 17 17  0  0  1  0            999 V2000\n   -7.2576   -2.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.3916   -3.1833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -5.5256   -2.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -5.5256   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.3916   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -7.2576   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.6596   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.7936   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.9276   -1.1834    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.0615   -1.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.1955   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.0615   -2.6833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.1955   -2.1833    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.6596   -0.1834    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n   -8.1236   -1.1834    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -8.9896   -1.6833    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n   -8.1236   -3.1833    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\n  4  7  1  0  0  0  0\n  7  8  1  0  0  0  0\n  8  9  1  0  0  0  0\n  9 10  1  0  0  0  0\n 10 11  1  0  0  0  0\n 10 12  1  0  0  0  0\n 10 13  1  0  0  0  0\n  7 14  1  1  0  0  0\n  6 15  1  0  0  0  0\n 15 16  1  0  0  0  0\n  1 17  1  0  0  0  0\nM  END\n'
});
 

The lineOffset and atomLabelHeight parameters work in much the same way.