Chem viewer widget can be embedded in web page to display molecules and other chem objects. Just like using <img src="url"> tag to display an image file, chem viewer can load and display a molecule file with ease:
<span id="viewer2D1" style="display:block" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(libs/benzene.mol)" data-predefined-setting="basic" data-auto-size="true"></span>
Note the "data-chem-obj" attribute, url refers to a external chem file. If the web server is properly configurated and a proper MIME type ("chemical/x-mdl-molfile" for MOL format file) is returned for .mol file, the molecule will be displayed in browser. The result:
You can even add a caption to it:
<span style="display:block" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(libs/benzene.mol)" data-predefined-setting="basic" data-auto-size="true" data-caption="Benzene"></span>
The molecule can also be embedded inline, e.g. Just remove style="display:block" attribute. Of course, you can change vertical alignment by usual CSS vertical-align property: , or change zoom level: . HTML code of the last viewer is:
<span id="viewer2D4" style="vertical-align:middle" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(libs/pyrrole.mol)" data-predefined-setting="basic" data-auto-size="true" data-zoom="0.5"></span>
All the viewers above are set with attribute data-auto-size to true, so the widge size is calculated and set by molecule. You can also turn off auto-size and set size of widget explicitly by CSS, e.g.:
<span style="display:block;border:1px solid black;width:300px;height:300px" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(libs/acenaphthylene.mol)" data-predefined-setting="basic" data-caption="acenaphthylene"></span>
result (here a border is added to show the actual dimension of viewer):
If you want molecule and other chem object full fill the viewer, just set data-autofit attribute to true:
<span style="display:block;border:1px solid black;width:300px;height:300px" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(libs/acenaphthylene.mol)" data-predefined-setting="basic" data-autofit="true" data-caption="acenaphthylene"></span>
Web page readers can interact with viewer widget defaultly, including zoom, move and save object. If those interactions are considered unneeded, you can disable it easily:
<span style="display:block" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(libs/pyrrole.mol)" data-predefined-setting="static" data-auto-size="true"></span>
3D viewer is similiar to 2D viewer with a little difference: it can not be auto-sized for some consideration, you must set its size explicitly. e.g.:
<span style="display:block;width:400px;height:400px" data-widget="Kekule.ChemWidget.Viewer3D" data-chem-obj="url(libs/chemFiles/3D/taxol.mol)" data-predefined-setting="basic" data-caption="taxol"></span>
Embedding it inline is also possible:
Besides using external chem file, you can even store chem object data inside a web page itself. Kekule.js supports storing chem formatted data inside an HTML tag (usually a <script> tag) with id. For example, the following code stores a mol2000 format molecule data inside a <script> tag:
<script id="CycloHex-Chair" type="chemical/x-mdl-molfile">
Chem3D Core 12.011231217083D
18 18 0 0 0 0 0 0 0 0999 V2000
0.7368 -0.1051 1.2731 C 0 0 0 0 0 0 0 0 0 0 0 0
-0.7093 -0.5794 1.1576 C 0 0 0 0 0 0 0 0 0 0 0 0
-1.4630 0.1738 0.0648 C 0 0 0 0 0 0 0 0 0 0 0 0
-0.7367 0.0965 -1.2754 C 0 0 0 0 0 0 0 0 0 0 0 0
0.7095 0.5709 -1.1599 C 0 0 0 0 0 0 0 0 0 0 0 0
1.4632 -0.1823 -0.0672 C 0 0 0 0 0 0 0 0 0 0 0 0
1.2695 -0.7476 2.0094 H 0 0 0 0 0 0 0 0 0 0 0 0
0.7291 0.9576 1.6037 H 0 0 0 0 0 0 0 0 0 0 0 0
-0.7142 -1.6658 0.9159 H 0 0 0 0 0 0 0 0 0 0 0 0
-1.2177 -0.3847 2.1284 H 0 0 0 0 0 0 0 0 0 0 0 0
-2.4763 -0.2728 -0.0479 H 0 0 0 0 0 0 0 0 0 0 0 0
-1.5302 1.2440 0.3629 H 0 0 0 0 0 0 0 0 0 0 0 0
-0.7429 -0.9588 -1.6287 H 0 0 0 0 0 0 0 0 0 0 0 0
-1.2643 0.7610 -1.9959 H 0 0 0 0 0 0 0 0 0 0 0 0
1.2229 0.4034 -2.1332 H 0 0 0 0 0 0 0 0 0 0 0 0
0.7010 1.6519 -0.8949 H 0 0 0 0 0 0 0 0 0 0 0 0
1.5578 -1.2505 -0.3650 H 0 0 0 0 0 0 0 0 0 0 0 0
2.4647 0.2883 0.0523 H 0 0 0 0 0 0 0 0 0 0 0 0
1 2 1 0
1 6 1 0
1 7 1 0
1 8 1 0
2 3 1 0
2 9 1 0
2 10 1 0
3 4 1 0
3 11 1 0
3 12 1 0
4 5 1 0
4 13 1 0
4 14 1 0
5 6 1 0
5 15 1 0
5 16 1 0
6 17 1 0
6 18 1 0
M END
</script>
Note the id and type attributes are essential to refer to resource and recognize the format. Then, viewer widget can load it by id:
<span style="display:block;width:300px;height:200px" data-widget="Kekule.ChemWidget.Viewer3D" data-chem-obj="url(#CycloHex-Chair)" data-predefined-setting="basic"></span>
Or even embed JSON format data inside viewer's tag directly:
<span style="display:block;width:300px;height:200px" data-widget="Kekule.ChemWidget.Viewer3D" data-predefined-setting="basic"
data-chem-obj='{"ctab":{"nodes":[{"__type__":"Kekule.Atom","coord3D":{"x":-0.3586,"y":0,"z":-0.1337,"__type__":"object"}
... (more JSON
data)...
"__type__":"Kekule.StructureConnectionTable"},"__type__":"Kekule.Molecule"}' ></span>
With Kekule.js, molecule and even other chemical object can be drawn from raw data directly on web page. To web page authors, the annoying process of converting chemical file into image is totally unessential now. To web page readers, since the raw data is retained, they can save chemical object to file and get ready-to-use data immediately. Keeping the raw data is also quite helpful for automated processing system to analysis chemical information.