Chemis3D - Javascript Interaction

Chemis3D Scripting

Applets may be customized by Javascript commands embedded in web pages.

Chemis3D supports JavaScript-Java communication technology (LiveConnect) which gives the document a greater control over the applet's behaviour. This capability enables the creation of complex user interactions controlled by web page elements.

Dynamic Control

Javascript calls to the applet public methods enables the modification of the applet's content and appearence from any parts of the embedding document or any parent document. A typical application of Dynamic HTML control is the design of advanced interactive interfaces using forms, imagemaps, or dynamic menus.

	There is a Java applet here. To use it, you need a Java aware browser with Java enabled.
	Rotate Scale Translate

Note

LiveConnect technology is supported by Internet Explorer 4-5.5 and Netscape 4.0.
LiveConnect technology is also supported by browsers running Sun Java Plug-in 1.3 and 1.4 (IE6, Netscape7, Opera7)

How To

1) Embedding of the applet in the HTML document.
To enable JavaScript-Java communication, the applet must be identified by the document with the applet tag NAME


											<APPLET CODE=Chemis3D.class  CODEBASE="../Mole" ARCHIVE="Chemis3D.jar"

NAME="C3DApplet1"


											  WIDTH=256 HEIGHT=256>
											
      <PARAM NAME="model"  VALUE="epoxy.zip">
											
      <PARAM NAME="format"  VALUE="x-xyz">
											
</APPLET>

2) Modification of the applet's content and appearence can be done by javascript calls to the applet's public methods.
Chemis3D provide 8 public methods :

setModel()
setDisplay(), setColor(), setOptions(), setSelect(), setSpin(), setAnimation()
setMouse()

The setModel() method is the most useful since it enables parameter modifications in only one call.


													 document.C3DApplet1.setModel(script)

The script argument is a string command line gathering selected parameters name and value (like with the inline parameter).


								parameter1_name=parameter1_value;parameter2_name=parameter2_value;...

Examples:


															document.C3DApplet1.setModel('model=DNA.zip;format=x-pdb;display=ball;color=cpk')


															document.C3DApplet1.setModel('display=backbone')


															document.C3DApplet1.setModel('color=residue;animation=on,15')

Notes :

Each parameter may be modified independently. The non-modificated parameters keep their old values.
LiveConnect technology works well with IE4-6, Netscape 4, Netscape 7.
However Netscape 6 using Java Plug-in 1.2 display only partial support of javascript-java communication capabilities. For security reasons download of new chemical model into the applet using setModel() method is denied.

The method setDisplay(style) enables changes in the style rendering.
style is a string similar to the possible value of the display parameter : "wireframe","ball", "ball-stick", "stick", "backbone"
The method setOptions(option(s) on/off)active selected options.
option is a string similar to the possible value of the option parameter : "hydrogens", "heteroatoms", "labels", "fastmove"
The method setColor(colour)enables changes in the color rendering.
colour is a string similar to the possible value of the color parameter : "cpk", "residue", "shapely", "group", "chain", "temperature", "structure", "0-31"
The method setSelect(tool, atoms serial)active/display selction tools.
tool is a string similar to the possible value of the select parameter : "identity", "angle", "torsion", "highlight"
serials are atoms serial number required to display distance (2 serials), angle (3 serials), dihedre (4 serials) or highlight (x serials). If missing the selected tool is simply ready to use.
The methods setSpin(direction,speed) and setAnimation(on/off,frame rate/frameId) enable changes in the spin and animation activities in a way similar to the relative applet parameters spin and animate
The method setMouse(mouseMode)enables changes in the manipulating mode.
mouseMode is a string of the type "rotate3D", "translate", "zoom", "rotateXY"

3) The applet call is connected with an HTML element (A ,IMG, FORM..) directly or via a JavaScript event (onClick,
onChange, onMouseOver).
In addition a javascript function may also be used to relay the call.

Examples:


											 <A HREF=
   javascript:document.C3DApplet1.setModel('model=DNA.zip;format=x-pdb')>B-DNA</A>


											<SCRIPT LANGUAGE="javascript" Type="text/javascript">
											
<!-- hide
											
    function toApplet(script) {
											
       document.C3DApplet1.setModel(script);
     }
											
// end -->
</SCRIPT>
											
...
											
<IMG SRC="DNA.gif" WIDTH=100 HEIGHT=20 BORDER=0 ALT="Click for a 3D Model" 
											
      onClick="toApplet('model=DNA.zip;format=x-pdb;display=stick')">

Some script codes

Javascript calling function :


												<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!-- hide
												

     function toApplet(myscript) {
												
        document.C3DApplet1.setModel(myscript);
												
	       }
												
// end -->
												
</SCRIPT>

Image map control:


												<IMG SRC="Map1.gif" USEMAP="#MapMenu1"  WIDTH=120 HEIGHT=360 ALT="3D View">
												
<MAP NAME="MapMenu1">
												
   <AREA SHAPE="rect" COORDS="0,0,120,120" 
												
  HREF="javascript:toApplet('model=Cafeine.txt;format=x-mol;display=ball;spin=Z')">
												
   <AREA SHAPE="rect" COORDS="0,121,120,240" 
												
  HREF="javascript:toApplet('model=VitaminC.txt;format=x-mol;display=stick')">
												
   <AREA SHAPE="rect" COORDS="0,241,120,360" 
												
  HREF="javascript:toApplet('model=Aspirin.txt;format=x-xyz;back=Prot.jpeg')">
												
</MAP>

Pull down menu:


												<FORM NAME="achoice">
												
 <SELECT NAME="menu1" SIZE="1" 
												
   onChange="toApplet(achoice.menu1.options[achoice.menu1.selectedIndex].value)">
												
  <OPTION SELECTED
												
   VALUE="model=H2O.txt;format=x-mol;display=ball;back=Chemis.gif">Water
												
 </OPTION>
												
  <OPTION SELECTED
												
   VALUE="model=ChlorophyllA.txt;format=x-mol;display=ball-stick;spin=x">Chlorophyll
												
  </OPTION>
												
  <OPTION SELECTED
												
   VALUE="model=Insulin.txt;format=x-pdb;display=ball;back=#ffffff;spin=off">Insulin 
												
  </OPTION>
												
  <OPTION SELECTED
												
   VALUE="model=ADNA.zip;format=x-pdb;display=stick;color=chain;back=#000000">SyntDNA
												
  </OPTION>
												
 </SELECT>
												
</FORM>

Radio Button :


												<FORM NAME="manipulateform"> 
												
  <INPUT TYPE=radio NAME="manipulate" VALUE="rotate3D" CHECKED 
												
  Onclick="javascript:document.C3DApplet1.setMouse(this.value)"> <B>Rotate</B>    
												
  <INPUT TYPE=radio NAME="manipulate" VALUE="zoom" 
												
  Onclick="javascript:document.C3DApplet1.setMouse(this.value)"> <B>Scale</B>    
												
  <INPUT TYPE=RADIO NAME="manipulate" VALUE="translate" 
												
  Onclick="javascript:document.C3DApplet1.setMouse(this.value)"> <B>Translate</B>  
												
</FORM>

Input Button :


												<FORM NAME="buttonform"> 
												
  <INPUT TYPE=button  VALUE="Stop" 
												
  OnClick="javascript:toApplet('spin=off;animation=off')">
												
</FORM>