Product: Chem3D
How do I create web pages using the Chem3D ActiveX Control?
It's very easy to create pages with the Chem3D ActiveX Control. What you need to use is the HTML <OBJECT> tag:
| <OBJECT CLASSID="clsid:9277934e-a149-4bbe-86ab-ed37ebf719e4"> <SPAN STYLE="color:red">Chem3D ActiveX control failed to load! -- Please check browser security settings.</SPAN> <PARAM NAME=SRC VALUE="sample.c3d"> </OBJECT> |
To simplify your job, we have created a javascript file, chem3d.js, that comes with some versions of our Suite. There are two functions in this javascript file that you can use in your web pages:
| function c3d_insert3d(src, width, height, displaytype,
bgcolor, name, ligandtype) ˇˇ
* If using C3D document, document setting will be used; if using other
file formats, preference setting in local machines will be used. |
ˇˇ
| function c3d_insert3dStr(tagStr)
There are only one parameter in this function. But this function is
far powerful than the first one. You can put following keywords in
this parameter:
NOTE: the keywords aren't case-sensitive. So you can lower-case, upper-case or capitalized words. |
SRC specifies the model file that will be displayed in the ActiveX window. All file formats (listed in following table) supported by Chem3D can be put here.
| File Type | File Extension Name |
| Chem3D | C3XML |
| Chem3D 8.0 | C3D |
| Alchemy | ALC, MOL |
| Cart Coords 1 | CC1 |
| Cart Coords 2 | CC2 |
| CCDB | CCD |
| ChemDraw | CDX, CHM |
| Connection Table | CT, CON |
| Gamess Input | INP |
| Tinker MM2 Input | XYZ |
| Tinker MM3 Input | XYZ |
| Tinker MM3 (Proteins) Input | XYZ |
| Gaussian Input | GJC, GJF |
| Gaussian Checkpoint | FCHK, FCH |
| Gaussian Cube | CUB |
| Int Coords | INT |
| MacroModel | MCM, DAT, OUT |
| MDL MolFile | MOL |
| MSI ChemNote | MSM |
| MOPAC Input | MOP, DAT, MPC, ZMT |
| MOPAC Graph | GPT |
| Protein DB | PDB, ENT |
| mmCIF | CIF |
| SMD FIle | SMD |
| SYBYL | SML |
| SYBYL2 | SM2, ML2 |
| PDBID | Use pdb id as data source |
| DATA | Directly use data |
When using PDBID, the SRC value should like this:
| src='pdbid:101m[:notcached]' |
notcached keyword is optional. When using it, it always get new data.
When using DATA, the SRC value should like this:
| src='data:{mimetype},{actual data}' |
DISPLAYTYPE specifies the display type of models. It can be anyone listed below:
| 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 |
BGCOLOR specifies the background color of displaying window. Like other HTML tag, we support both customized color name and exact color value. We supported following customized color names:
| BGCOLOR | Exact Value (#RGB) |
| aqua | #00ffff |
| black | #000000 |
| blue | #0000ff |
| fuchsia | #ff00ff |
| gray | #808080 |
| green | #008000 |
| lime | #00ff00 |
| maroon | #800000 |
| navy | #000080 |
| olive | #808000 |
| purple | #800080 |
| red | #ff0000 |
| silver | #c0c0c0 |
| teal | #008080 |
| white | #ffffff |
| yellow | #ffff00 |
Now what you need to do is to (1) include this javascript file; (2) call either of the two functions.
(1) To include this javascript file, you just include following text in your page:
| <script language="javascript" src="/jslib/chem3d.js"></script> |
WHERE: The best place is between <Head> and </Head>.
(2) To call either of the two functions, you can 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: You may ask which function you should use. Basically it's up to you. But I recommend you to use the second one, for you can change the parameters' order and it's more easy to find the parameters' meaning.
How simple it is! Here is a full sample 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> |
To get this page to work, be sure chem3d.js is in http://yourwebsite/jslib/ and mymodel.c3d in http://yourwebsite/chem3d_models/.
OK. You already know how to do that. Enjoy it!