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/.
|