Easy Jmol Web Pages using the Jmol Export to Web Function

By Jonathan Gutow, July 2008 (updated: January 2013)
Jmol versions 14.1.5 or greater, NOW GENERATE JSmol (pure javascript no java necessary) PAGES
To learn more about JSmol capabilities see the Jmol wiki
External Website, Opens in New

The export to web function in Jmol automatically generates some simple web pages that display views you design within the Jmol application. You can edit the pages created using a standard web editor to change the text and add features, such as pictures and tables. These automatically generated pages are also a good starting point for more complicated pages that require some hand coding. There are also some alternative packages for generating Jmol based web pages that require additional software or operate from servers.  At present the "export to web..." function provides two simple templates:

Pop-in: this template allows you to create a page with multiple images of your Jmol views.  When a user clicks on one of these pictures, it becomes a live JSmol/Jmol applet that can be rotated, zoomed etc.

Cartoon of Pop-in Page

Figure 1: Cartoon of the Pop-in style page.

ScriptButton: this template displays a single JSmol/Jmol applet on the right side of the browser window.  On the left side is a scrolling region with buttons that allow the user to select the view.

Caortoon of Script
                Button Page

Figure 2: Cartoon of the Scriptbutton style page.

Possible future enhancements include: 1) addition of optional buttons that do common things to Jmol views, such as spin the molecule or change the background color; 2) a new template for a table of Jmol applets; and 3) other requests as they are made by users.

To create pages with either of these formats start Jmol and open a file containing the molecular information you want to view. Jmol reads many file formats including .pdb, .cif, .mol, gaussian and gamess output files. For this tutorial I will use the gamess .log output file from an optimization of the geometry of staggered ethane. If you wish to follow along download the file (you may need to right-click, ctrl-click on a one button mouse, and select "save as.." to prevent your browser from displaying it. You can also copy and paste from the browser into a text document): ethane-staggered-3-21G.log.  Many of the pages in this tutorial were generated using the Jmol Export to Web function.

Getting Started (Starting Jmol and opening a file):
Skip to making a web page if you already have Jmol and can load structures into it.
Initial view on openning Jmol
Figure 3: The initial view upon opening Jmol.
  1. If you haven't, Download Jmol: Get the latest stable version from the Jmol web site (www.jmol.orgExternal
          Website, Opens in New Window). Once there follow the download links. Once downloaded you will have to "unzip" the compressed file.
  2. Make sure you have a Java Virtual Machine (JVM) Installed:  This was the default on MacOS X and recent Windows XP/Vista systems, but on the newest versions you may need to install it.  Most Linux systems require you to install the JVM.  To perform an installation follow the instructions for your particular system.  The Oracle JavaExternal Website, Opens in New Window system is recommended although OpenJavaExternal Website, Opens in New Window also works.
  3. Launching Jmol: On your computer find the file, Jmol.jar. 
  4. Opening a file: In the file menu select "Open..." Use the open file dialog to navigate to the directory your file is stored in. Select the file and click "Open". If the file is of a type that Jmol can read a picture of a molecule should appear.

Make a Web Page

  1. Familiarize yourself with Jmol. If you already know how to make Jmol display measurements, orbitals, change atom size and things like that skip to step 2. Otherwise try these links on getting Jmol to display the molecule the way you want ( External Website, Opens in New Window indicates an external web site that will open in a new window): Zoom | Rotate | Set Spinning | Change Atom Size | Change Bond Size | Make and Show Measurements | Make Cartoon Views of Biomolecules | Displaying Orbitals | Viewing and Animating Vibrations |Using Commands in the Script Window | Navigating within a Multiframe (multi-image) File | Adding Your Own Text | Bob Hanson's Scripting Documentation External Website, Opens in New Window | Much more about Jmol and its capabilities (the Jmol Wiki) External Website, Opens in New Window.
  2. Make web pages using the Jmol Web Page Maker dialog.
    PopIn dialog
    Figure 4: The Pop-In tab from the Export to Web (Jmol Web Page Maker) dialog.

Last Update: March 12, 2018
Expires: --
By J. Gutow