Jmol JavaScript Object/JME

Integration of JSME into JSmol

JSME, the JavaScript Molecule Editor by Peter Ertl, evolved from the former JME applet. It allows the user to draw a molecular structure in 2D. The JSmol object library includes the capability to pass information back and forth between JSME and JSmol in a seamless manner. The "information panel" that JSmol library implements can be set up to also hold the JSME object, allowing tight integration. Alternatively, JSME and JSmol objects can be set side-by-side on a web page, and communication between both objects can be handled by the page developer.

Creating and inserting JSME

(Note that although the syntax is reminiscent of the former Java applets, no Java is currently involved here)

The name of the unique Jmol object is literal, cannot be changed. On the contrary, the myJME, myJmol, JmeInfo, JmolInfo names used in these examples are user-declared variables and may be different.

There are two ways of inserting JSME using the JSmol library:

Independent JSME

The JSME panel takes a space of its own in the page.

To create and insert the JSME object, use:

Jmol.getJMEApplet("myJME", JmeInfo);

Where the JmeInfo variable must include at least:

• height: 350
• width: 300

And the JSME panel will be inserted at the point of execution of this JavaScript code. If this code is to be included elsewhere, you can specify a target div where the JSME panel will be included, by adding this:

• divId: "targetId"

JSME interlinked with JSmol

In this mode, the JSME panel shares the space in the page with a JSmol panel; only one is displayed at a time and their contents (2D vs. 3D) are automatically interconverted to match.

To create and insert the JSmol and JSME objects, use:

Jmol.getApplet("myJmol", JmolInfo);
Jmol.getJMEApplet("myJME", JmeInfo, myJmol);

Where the JmeInfo variable must include at least:

• height: 350
• width: 300
• visible: true for the JSME panel to be displayed initially

The 3rd argument is a pointer to the associated JSmol object, that will contain this JSME panel as a 2D input option inside its Info panel. User interface controls (like buttons or links) may be implemented in the page for switching between 2D (JSME) and 3D (Jsmol) displays.

Other parameters that may be included in the JmeInfo variable are:

• options: "comma-delimited list"
  • rbutton, norbutton - show / hide R button
  • hydrogens, nohydrogens - display / hide hydrogens
  • query, noquery - enable / disable query features
  • autoez, noautoez - automatic generation of SMILES with E,Z stereochemistry
  • nocanonize - SMILES canonicalization and detection of aromaticity supressed
  • nostereo - stereochemistry not considered when creating SMILES
  • reaction, noreaction - enable / disable reaction input
  • multipart - possibility to enter multipart structures
  • number - possibility to number (mark) atoms
  • depict - the applet will appear without editing butons,this is used for structure display only
  • ...and more, all documented at Peter Ertl's site

JSME-specific methods

All the following functions must be applied to the unique Jmol object (this name is literal, cannot be changed). The myJME name used in these examples is, in contrast, a user-declared variable and may be different.

For retrieving data from JSME:

Jmol.jmeGetFile(myJME, true) // molecular data in the JME format
Jmol.jmeGetFile(myJME, false) // molecular data in the MOL format
Jmol.jmeSmiles(myJME, withStereoChemistry) // molecular data in the SMILES format

For loading structures into JSME:

Jmol.jmeReadMolecule(myJME, jmeOrMolData) 

sends data as a string either in JME or MOL formats, depending on the presence of newline characters in that string

Note: Feeding SMILES data into JSME is possible, but not currently implemented in the JSmol library. You can achieve it using a call to an internal function:

myJME._applet.readGenericMolecularInput( smilesData );

For other tasks:

Jmol.jmeOptions(myJME, options)
Jmol.jmeReset(myJME)

Contributors

AngelHerraez