Creating web pages using the Chem3D ActiveX/Plugin

It is easy to create web pages that use the Chem3D ActiveX/Plugin.  The control can be embedded in a web page by using the HTML <OBJECT> and <EMBED> tag:

<!-- ActiveX -->
<object classid="clsid:b19a6c27-ce23-4d91-832d-00579fd48859">
<param name=src value="sample.c3xml">
</object>


<!-- Plugin -->
<embed type="chemical/x-chem3d" name=ax3d width=400 height=300 src= "sample.c3xml" rotation=y1 contextmenu=true>

There is also a JavaScript file that makes it simpler to use the control. The JavaScript file provides two functions:

function c3d_insert3d(src, width, height, displaymode, backgroundcolor, name, dataurl, ligandmode, toolbar, rotationbar, contextmenu, backgroundeffect, fittowindow, rotation, mimetype)
 
Parameter R/O Default value Meaning
src Required The data URL that will be displayed in this Chem3D ActiveX/Plugin
width Optional 200 The width of the Chem3D ActiveX/Plugin Window
height Optional 200 The height of the Chem3D ActiveX/Plugin Window
displaymode Optional * The display type of model
backgroundcolor Optional * The background color
name Optional N/A A name to identify this object in the page.  It will be used to refer this Chem3D ActiveX/Plugin when programming it
dataurl Optional * Similar to the "src" parameter
ligandmode Optional * The ligand display mode of macro-molecule
toolbar Optional * Where to show toolbar or hide toolbar
rotationbar Optional true Whether to show rotation bars
contextmenu Optional true Whether to show context menu
backgroundeffect Optional * Whether to show background effect
fittowindow Optional * Whether to resize the model to fit the window
rotation Optional 0 Rotate mode to show a demo
mimetype Optional *  

* Files saved in a Chem3D format will have their own settings.  Other file formats will use the default settings.


function c3d_insert3dStr(tagStr)

This function acts as the previous one, but takes all parameters in one string.  Because in this function call the order of parameters is not restricted as the previous one, it gives you more flexibility.  We recommend you to use this function all the time.  There are several samples below.

SRC specifies the model file that will be displayed in the ActiveX/Plugin window.  Any of the file formats listed below can be used:

File Format Name File Extensions
Chem3D XML .C3XML
Chem3D 8.0 .C3D; .C3T
Chem3D 3.2 .C3D
Alchemy .ALC; .MOL
Cart Coords 1 .CC1
Cart Coords 2 .CC2
CCDB .CCD; .DAT
ChemDraw .CDX; .CHM
ChemDraw XML .CDXML
Chemical Markup Language .cml; .xml
Conn Table .CT; .CON
Gamess Input .INP
Gaussian Input .GJC; .GJF
Gaussian Checkpoint .FCHK; .FCH
Gaussian Cube .CUB
Int Coords .INT
ISIS Sketch .SKC
ISIS Transportable Graphics .TGF
MacroModel .MCM; .DAT; .OUT
MDL MolFile .MOL
mmCIF .CIF
MSI ChemNote .MSM
MOPAC Input .MOP; .DAT; .MPC; .ZMT
MOPAC Graph .GPT
Protein Data Bank .PDB; .ENT
SDFile .SDF
SMDFile .SMD
SYBYL .SML
SYBYL2 .MOL2; .SM2; .ML2
SMILES .SMI

When using PDBID, the SRC value should look like this:

src='pdbid:101m[:notcached]'

notcached keyword is optional.  When this is used, the data will not be cached by the browser.

When using DATA, the SRC value should look like this:

src='data:[{mimetype},]{actual data}'

All available mime types are listed in the mimetype page.

DISPLAYMODE specifies the display type of the model.

DISPLAYTYPE Meaning
0 WF WireFrame Wire Frame
1 ST Sticks Sticks
2 BS Ball&Sticks Ball and Sticks
3 CB CylindricalBonds Cylindrical Bonds
4 SF SpaceFilling Space Filling
5 RI Ribbons Ribbons
6 CA Cartoons Cartoons

BACKGROUNDCOLOR specifies the background color of the window.  Like other HTML tags, we support both customized color name and exact color value.  All color names supported by Chem3D are listed in this page.

There are two steps to using the JavaScript file:

(1) To include this JavaScript file, the following text must be included in the web page:

<script language="javascript" src="/jslib/chem3d.js"></script>

The best place for this is between <Head> and </Head>.

(2) To call either of the two functions, use code like this:

<script language="javascript"> c3d_insert3d("/chem3d_models/mymodel.c3d", 'SF'); </script>

<script language="javascript"> c3d_insert3dStr("src='/chem3d_models/mymodel.c3d' displaytype='SpaceFilling'"); </script>

NOTE: The c3d_insert3dStr() is better to use in most cases because the parameters' order can be changed and it is easier to find the parameters' meaning.  Another usage of this function is to simplify the process of upgrading old Plugin pages to ActiveX/Plugin pages.

Here is a complete example page:

<HTML>
<HEAD>
<TITLE>My First Chem3D Model Page</TITLE>
<script language="javascript" src="/jslib/chem3d.js"></script>
</HEAD>
<BODY>
<script language="javascript"> c3d_insert3dStr("src='/chem3d_models/mymodel.c3d' width=400 height=300 name='my3dobj'"); </script>
</BODY>
</HTML>

Be sure that chem3d.js is in http://yourwebsite/jslib/ and mymodel.c3d in http://yourwebsite/chem3d_models/.