How to use a script to program the Chem3D ActiveX/Plugin

Like other ActiveX/Plugin, the Chem3D control can be driven by a script in a web page or by a separate program .  This example shows how to use a script in a web page to drive the control, but it is also possible to drive the control from another  programming language such as C#, or VB.  This example uses JavaScript, but it is also possible to use VBScript.

We will start with the code generated in our previous example:

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

Here, the model is displayed using the "Cylindrical Bonds" mode.  Adding this code will allow the user to change the display type to "Sticks" mode:

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

 
<script language="javascript">
   function onShowAsSticks()
  {
      my3dobj.setDisplayType(1);
   }
</script>
<input type=button value="Show as Sticks" onclick="onShowAsSticks()">

</BODY>
</HTML>

Here, we have created a JavaScript function, onShowAsSticks().  The variable "my3dobj" is a reference to the Chem3D ActiveX/Plugin object that was created above.

NOTE: In order to refer to the Chem3D object you create, you must specify the *id* parameter.

setDisplayType is the method used to set the display type for the Chem3D ActiveX/Plugin.  For this parameter, the number 1 means *Sticks*.  The other values can be found in the documentation.

We have created a button so that the user can change the value.  When the user clicks on the button, onShowAsSticks() is called.  This function changes the display mode of the control.

Here is a more detailed example that will allow the user to select from several display modes:

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

 
<script language="javascript">
   function onSelectModelType()
   {
       my3dobj.setDisplayType(modeltype.selectedIndex);
   }
</script>
<SELECT id="modeltype" name="modeltype" onchange="onSelectModelType()">
   <OPTION>Wire Frame</OPTION>
   <OPTION>Sticks</OPTION>
   <OPTION>Ball and Sticks</OPTION>
   <OPTION>Cylindrical Bonds</OPTION>
   <OPTION>Space Filling</OPTION>
   <OPTION>Ribbons</OPTION>
   <OPTION>Cartoons</OPTION>
</SELECT>

</BODY>
</HTML>

Try some more examples, and have fun!