How do I create web pages using the Chem3D ActiveX Control? – Revvity Signals

Date Posted: 2018-12-10
Product: Chem3D

Problem:

How do I create web pages using the Chem3D ActiveX Control?

Solution:

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)
ˇˇ

Parameter	R/O	Default value	Meaning
src	Required	ˇˇ	The data URL that will be displayed in this Chem3D ActiveX Control
width	Optional	200	The width of the Chem3D ActiveX Control Window
height	Optional	200	The height of the Chem3D ActiveX Control Window
displaytype	Optional	*	Set the display type of model.
bgcolor	Optional	*	Set the background color.
name	Optional	N/A	A name to identify this object in the page. You will use it to refer this Chem3D ActiveX control when programming it
ligandtype	Optional	*	Set the ligand display type of macro-molecule.

* 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:

keyword	Equivalent parameter	Meaning
SRC	src	The data URL that will be displayed in this Chem3D ActiveX Control
WIDTH	width	The width of the Chem3D ActiveX Control Window
HEIGHT	height	The height of the Chem3D ActiveX Control Window
DISPLAYTYPE	displaytype	Set the display type of model. See below table.
BGCOLOR	bgcolor	Set the background color.
NAME	name	A name to identify this object in the page. You will use it to refer this Chem3D ActiveX control when programming it
LIGANDTYPE	ligandtype	Set the ligand display type of macro-molecule.

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:

WHERE: The best place is between <Head> and </Head>.

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

ˇˇ

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!