Note: You are currently viewing documentation for Moodle 3.6. Up-to-date documentation for the latest stable version of Moodle is likely available here: Jmol filter.

Jmol filter

From MoodleDocs
An example of the Jmol filter in action

Jmol (Jsmol) is open-source software for interactive 3D viewing of chemical structures. It can easily be embedded into a webpage... including a Moodle page.

The Moodle Jmol filter makes it incredibly simple for teachers to embed these viewers into teaching material (quizzes, discussion messages, etc).

Originally, Jmol was a developed as a Java applet, requiring no additional capability on your Web server, but requiring both Java and a JavaScript-enabled browser for the user. Unfortunately, more recent Java applet support by browsers has suffered from security and functionality issues. Microsoft Edge and Google Chrome no longer support Java and support is being phased out for Safari, Opera and Firefox.

As a result, the Jmol developers have created JSmol, an HTML5 canvas version of the Jmol applet that uses JavaScript. JSmol opens up the use of Jmol in PC, Mac, and Linux systems without Java installed or with Java disabled, as well as tablets and smart phones (both iOS and Android). No hardware-based graphics acceleration is used, allowing JSmol to run in any web browser that supports HTML5 standards.

JSmol allows rendering, scripting and interaction with the models just as Jmol does, since the source code is shared by both. Note that JSmol is not a different program to Jmol: it is Jmol, just compiled into JavaScript instead of Java (thanks to the Java2Script software).

In most circumstances, the Jmol filter defaults to using JSmol, the JavaScript/HTML5 version, for maximum cross-platform compatability.

If Internet Explorer 8 is used, the filter switches to the Jmol Java applet. Also, if certain chemical structure file-types (e.g. .pse or .pdb.zip) are used with browsers that don't fully support binary file-handling by JavaScript, the Jmol Java applet is also used. That said, most recent browser versions now support binary file-handling by JavaScript.

Where the Java applet is required, recent versions of the filter use the self-signed applet, to minimise the security warnings/blocks generated by recent Java releases.

There is also an experimental WebGL version of Jmol, known as GLmol. This has good performance on hardware/software that supports WebGL but currently does not support all the features of JSmol.

The Jmol filter provides the end-user with menu options to switch between JSmol (JavaScript), Jmol (Java) and GLmol (WebGL). JSmol (the default) offers the widest cross-platform support though, for very large chemical structures, Jmol or GLmol offer faster performance.

Recent versions of the filter also have a Performance menu to adjust the rendering quality and improve performance on more limited client systems, mobiles etc.

The Jmol filter is very useful for including a molecule viewer in a variety of situations - e.g. in a Label, a Forum discussion, or a Quiz question.


How to use

  1. Upload a molecule data file to the Moodle server. (This is important - Jmol refuses to display data files held on other servers, so you can't just link to a file that exists somewhere else on the web.)
  2. Simply create a link to the molecule file, wherever you want the molecule viewer to appear.

In more detail:

  • use the Moodle text editor (inside a course topic, label, HTML block, forum posting, quiz question etc) to add the text for a link, eg 'water'
  • click-and drag to select the text link
  • use the Insert Web Link button and enter the URL of the resource (already uploaded into the course's Files folder). The editor may 'scramble' things, particularly if you use additional parametes (below) and you may find it best to use HTML Source ([<>] button) view. So default usage of the Jmol filter, for a structure water.pdb, in course 7 of your.moodle.ac.uk might use the code:
<a title="Jmol" href="http://your.moodle.ac.uk/moodle/file.php/7/water.pdb">water</a>

  • Parameters can be added to the end of the URL to specify certain display options. Add:

?s=150 to set the viewer's size at 150 pixels. The default is 350 px.

Note that the end-user can also resize the viewer by mouse click-and-drag on the bottom-right corner. There is also a toggle button to display the viewer full-screen.

?c=0 to hide the controls.

?c=1 to force 'default' controls for small inorganic or organic chemical structures.

?c=2 to force crystallographic controls for display of unit cells, crystal packing and polyhedra for data fies that support these.

?c=3 to controls for display of biological macromolecules such as proteins or nucleic acids.

If these are not explicitly set, the filter defaults to controls appropriate for the structure file-type. c=3 for .pdb (Protein Database) and .pdb.gz files, c=2 for .cif (Crystalllographic Information Files) and c=0 for everything else.

?i=0 results in the interactive structure being displayed directly (i.e. with no cover image). This may result in page load delays if, say, multiple Jmol objects are present in a Moodle page.

?i=1 results with the initial loading of a cover image. A mouse click on the cover image then loads/activates the interactive object.

You can combine parameters e.g. ?c=0&s=150. The relative order of parameters not important.

<a title="Jmol" href="http://your.moodle.ac.uk/moodle/file.php/7/water.pdb?c=0&s=150">water</a>

  • If you wish to run extra Jmol script upon intialisation, write JMOLSCRIPT{} straight after the link, and put your code inside the braces. For example:
<a title="Jmol" href="http://your.moodle.ac.uk/moodle/file.php/7/water.pdb">water</a>JMOLSCRIPT{rotate x 15; zoom 50; set axes on;}

The title tag is also essential for the filter to operate.

Jmol Help