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:
- lineWidth The width of bond lines.
- lineOffset The distance between parallel multiple bond lines.
- atomLabelHeight The height of atom labels.
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.