Fast Client-Side Chemical Structure Rendering with ChemWriter
Many developers of chemistry Web applications face the frustrating problem of displaying chemical structure images. There are a handful of approaches, none of them especially easy to implement - until recently.
ChemWriter 3 now offers a solution to this problem with its high-performance Image
component. Image
gives you the ability to display full-color chemical structure images with just a few lines of HTML.
Like Editor
, Image
is deployed unobtrusively:
<html>
<head>
<title>Show a Blank ChemWriter Editor</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js"></script>
</head>
<body>
<div style="width: 300px; height: 150px;">
<div data-chemwriter-ui="image"
data-chemwriter-src="http://chemwriter.com/data/structure-3.mol">
</div>
</div>
</body>
</html>
Also like Editor
, the source file can be loaded from inline data. This mode is especially helpful when many structures are displayed on the same page.
<html>
<head>
<title>Show a Blank ChemWriter Editor</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js"></script>
</head>
<body>
<div style="width: 300px; height: 150px;">
<div data-chemwriter-ui="image"
data-chemwriter-data="[NO NAME]\n CHEMW2 02061315242D \nCreated with ChemWriter - http://chemwriter.com\n 12 12 0 0 1 0 999 V2000\n 5.6944 -5.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 6.5605 -6.0278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.4265 -5.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.4265 -4.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 6.5605 -4.0278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 5.6944 -4.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.2925 -4.0278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1585 -4.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.0246 -4.0278 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 8.2925 -3.0278 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 4.8284 -4.0278 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 4.8284 -6.0278 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 7 10 1 4 0 0 0\n 6 11 1 0 0 0 0\n 1 12 1 0 0 0 0\nM END\n">
</div>
</div>
</body>
</html>
The ChemWriter Image
component offers many advantages over other methods, including:
- There's nothing to install or maintain on your server.
- There's no need to store or manage image files. Caching issues disappear.
- Changing image size is trivial.
- Expanded views of large or complex structures can be easily achieved.
See the ChemWriter Developer Guide for additional examples.