Overview   Integration   Scripting    Gallery      News      Contact     Download     Home 

Integration within an HTML document

Java applets are intended to be included in HTML documents, loaded from a Web Server and displayed onto a Client Computer.

Applet Tag Syntax

Chemis3D can be quickly embedded in HTML pages using the APPLET tag syntax.

Basically the <APPLET> tag is used to identify the applet controlling class (CODE=Chemis3D.class) and the size of the display area (WIDTH=.. HEIGHT=.. ). When a Java-enabled browser reads this tags, it loads the class files, reserves display area, and launches an instance of the applet.

The Applet syntax also includes the tags ARCHIVE,CODEBASE and NAME :
The ARCHIVE tag identifies the name of the java archive (Chemis3D.jar #30Ko) gathering all applet classes in one single file.
The CODEBASE tag is used to set the path to the server directory where the applet archive is hosted (the path is relative to the directory where the embbeding HTML page is hosted).
The NAME tag is an optional tag used to identify the applet in the document and make possible to communicate with other applets and with scripts Javascript.

<APPLET CODE=Chemis3D.class ARCHIVE="Chemis3D.jar" CODEBASE="../Models" NAME="C3D"
 WIDTH=256 HEIGHT=256>
<PARAM NAME="model" VALUE="DNA3.zip">
<PARAM NAME="format"  VALUE="x-pdb">
<PARAM NAME="display" VALUE="ball">
<PARAM NAME="options" VALUE="labels on">
<PARAM NAME="color" VALUE="residue">
<PARAM NAME="rotation" VALUE="x,3">
<PARAM NAME="animation" VALUE="on,80">
<PARAM NAME="select" VALUE="angle 7,8,9">
<PARAM NAME="scale" VALUE="1.5">
<PARAM NAME="back" VALUE="#ffffff">
<PARAM NAME="light" VALUE="0,8,8">
// Chemical datafile name and path
// Chemical data format(x-xyz/x-mol/x-pdb)
// Rendering style (wire/stick/ball-stick/ball/backbone)
// Active options (hydrogen heteroatoms labels fastmove,on/off)
// Color schemes (cpk/residue/shapely/group/chain/temperature/0-31)
// Spin direction and speed (x/y/z/off, speed)
// Multi-model animation (on/off) and frames rate or model ID (fps/mid)
// Active selection tools (identity/angle/torsion/highlight serial)
// Scalefactor (0<>4)
// Background Color(#hex) or Image(*.jpeg/*.gif)
// Light intensity and direction (0-255, -16< x,y < 16)

The lines enclosed by the applet tag <APPLET> are declaration of parameter tags <PARAM NAME=.. VALUE=..>
These tags are used to pass informations and configure the applet.
With Chemis3D, these tags define the chemical structure to be displayed, its rendering style and the general appearance of the applet's content (Detailed functions of the parameters are listed below).

In order to simplify HTML embedding, Chemis3D may be also customized with a single inline parameter gathering all the selected parameters.

<APPLET CODE=Chemis3D.class ARCHIVE="Chemis3D.jar" CODEBASE="../Models" NAME="C3D"
 WIDTH=256 HEIGHT=256>
<PARAM NAME="inline" VALUE="model=Dna3.txt;format=x-pdb;style=ball;color=residue">
The inline parameter value has a generic syntax of the type :

Detailed List of Parameters

Name : model
Description : name of the molecule datafile and path or URL to it

Value : *.mol / *.pdb / *.xyz / *.txt / *.zip / *.gz
Examples: caffeine.xyz , ../Models/insulin.pdb , ../Models/Proteins/hemoglobine.zip

Comments :
The path is the relative path starting from the embedding document to the datafile.

Name : format
Description : name of the molecular data format.
Supported formats are MDL molfile (*.mol); Proteine Data Bank (*.pdb) and MSC Xmol (*.xyz)

Value : x-mol / x-pdb / x-xyz
Default : x-mol

Comments :
To avoid the definition of specific chemical MIME types by the host server, the format parameter is used to specify the molecular data format and enables the download of data in common text format (*.txt) or compressed format (*.zip,*.gz).
If absent the chemical file format is deduced from the data file extension of the model parameter (*.pdb, *.xyz, *.mol).

Name : display
Description :set rendering style.

Value : wireframe / stick / ball-stick / ball / backbone
Default : wireframe

Comments :
In ball display, size of balls are set according to the Van der Walls radius of the corresponding Element.
The backbone style is only enable with proteins and nucleic acids (PDB Models)

This parameter use a public applet's method setDisplay() wich is open for javascript calls (see scripting section).

Name : options
Description : View/Mask Hydrogens, Hetero atoms (in PDB structures) or labels or active fastmove

Value :hydrogens/heteroatoms/labels/fastmove - on/off
Default : hydrogens on, labels off.

Comments :
fastmove (wireframe on move) is set to improve speed rendering in macromolecular display,
When fastmove is enabled and molecule not colored by element (cpk atom), ball display of each atom have an average radius of 1.7 Angstrum. When fastmove is disabled or molecule colored by atom, balls size are set according to the corresponding Element Van der Walls radius.

This parameter use a public applet's method setOptions() wich is open for javascript calls (see scripting section).

Name : color
Description : color the model according to element properties, appartenance and position

Value : cpk / residue / shapely / group / chain / temperature / structure / 0-31.
Default : cpk

Comments :
The different color schemes are : cpk (Atom type), residue (amino acid or nucleotide properties), shapely (Rasmol-like residues shapes), group (residue position in sequence), chain, temperature (B factor), 0-31 (user plain color)
The residue, shapely, group, temperature and structure colorschemes are only enable with PDB models.
> See color tables

This parameter use a public applet's method setColor() wich is open for javascript calls (see scripting section).

Name : rotation (or spin)
Description : Spin direction and speed

Value : x/y/z/off, speed
Examples : x,3 ; x ; off
Default :off.

Comments :
x/y/z set spin direction, off stop rotation.
speed is an optional value (0 - 10).

This parameter use a public applet's method setSpin() wich is open for javascript calls (see scripting section).

Name : animation
Description : play animation of a multi-model chemical file

Value :on/off,fps/mid
Example : on,100
Default :off,0 (no animation all models displayed)

Comments :
Enable multimodel file (*.xyz,*.pdb) display as animation of fps frames per second (fps default rate is 10).
If animation is set to off the applet may display all models (cumulative frame) or a static frame corresponding to the model (frame) number mid.

This parameter use a public applet's method setAnimation() wich is open for javascript calls (see scripting section).

Name : select
Description : active selection tools on starting

Value :identity/distance/angle/torsion/highlight atoms serial numbers
Example : identity 28, distance 12,30 angle 28,29,30 ; highlight 28-48 57,58

Comments :
A specific distance, angle or torsion may be display on starting by setting atoms serials (angle requires 3 serials, torsion 4), if no serials angle or dihedre are simply ready to be selected.
highlight is a special option highlighting specific atoms or regions of the molecule defined by a rasmol-like subscript.

This parameter use a public applet's method setSelect() wich is open for javascript calls (see scripting section).

Name : scale
Description : scale representation.

Value :0.1 - 4
Default :1

Comments :
Value is 1 when the molecule fitted 90% of the applet frame.

Name : back
Description : Background Image or Color

Value : *.gif / *.jpeg / *.jpg / #hhhhhh
Default : black color #000000 .

Comments :
Supported image format are GIF and JPEG.
Color must be in hexadecimal format #hhhhhh (h = 0,..,F).

Name : light
Description : Ambient light intensity and direction for sphere shading

Value :intensity,xdir,ydir
Default : 0,8,8

Comments :
intensity value range from 0 (smooth light) to 255 (overexposure).
xdir, ydir are optional terms setting spotlight direction (-16> xdir,ydir <16) .

Name : inline
Description : Enable 'parameterization' via a single inline command

Value : parmeter1_name=parameter1_value;parameter2_name=parameter2_value; ....
Example : model=Dna.txt;format=x-pdb;style=ball;scale=1.0;color=atom;back=prot.jpeg

Comments :
This parameter use a public applet's method setModel() wich is open for javascript calls (see scripting section).