Next-generation Molecular Dynamics Web Visualization

Molecular Dynamics (MD) is used in many fields of science. The visualization on the right is not a movie, it is the interactive display of actual atomic space and time dependent data of a protein generated with MD. In the example, the N- and C- terminals are shown in magenta and yellow, respectively. All the residues of type TRP are highlighted using the VDW representation. By visualizing the MD trajectory, it is clear how the residue exposed to the solvent has a much higher movility than those residues buried in the hydrophobic core of the protein. More specific details of the system and simulation can be viewed by clicking the "MD" button on the lower right corner.

HTMoL is a light-weight full-stack plugin-free application to display the three-dimensional structure and dynamics of biomolecules. HTMoL can be used as a graphical interface to access MD data located at a high performance computing cluster where simulations are generated, or as supplementary documentation for scientific research publications as a way to readily share MD results. Developed by integrating state-of-the-art web technologies ( NodeJS + WebGL + JavaScript + HTML5 + CSS3 ), HTMoL is easy to install, configure and customize on any web-server. HTMoL can be embedded inside a web page or used full-size, and it does not require any other third-party package to be installed on the client-side. It works in all popular web browsers. Chrome or FireFox highly recommended.

When the trajectory is loaded, Play-Pause or move back and forth one frame at a time. Rotate the molecules with the mouse by click & drag, zoom in or out. Show/Hide the Main Menu by clicking on the top-left corner.

HTMoL Full-Size

HTMoL Features

Full-stack solution:

Easy to install on an internet server to deploy structural and molecular dynamics data

Easy to embed in any web page with only one line of code, the browser and the GPU will do the rest

Parses atomic coordinates in PDB format

Parses popular MD trajectory formats (Gromacs XTC, Charmm DCD)

Full and flexible control through a single configuration file

Molecular representation control through a command set

Use as a GUI to access MD data located at an HPC cluster

Works in WordPress

Developed with standards in mind:

HTMoL Installation

1 - Install Node.js

Follow directions at the Node.js site for installation on a web server.

It is easier to use a Package Manager.

2 - Install HTMoL

Download and unzip the HTMoL full-stack code distribution (and MD data examples if needed) on a public accesible directory on the web server using root privileges:

Download HTMoLv3.5(i) I Accept the Terms of use

Download MD data examples(i)

At this point, you should have the following directory structure under HTMoLv3.5 (with some other files):

> js/
> local/
> pdbfiles/
> styles/
> trjfiles/
> BinServer.js
> HTMoL.html
> example.htm

3 - Configure HTMoL

The configuration is made by editing the local/config.js file. The following variables have to be set:

  • Network Variables
  • WebIP is the servername or IP address of the web server. Use 'localhost' for testing.
    NodePort is the port number where the BinServer will be listening for requests. It can be any available port. Do not use port number 80 because it is reserved for Apache by default. Sometimes you might have to enable this port for TCP/UDP transport at the network switch/router if the server is behind a firewall.
  • Data location
  • PDBDIR is where the atomic coordinates are located (pdbfiles/).
    TRJDIR is where the MD trajectories are located (trjfiles/).
  • Data files
  • pdbInicial name of the file with the atomic coordinates in PDB format.
    trjInicial name of the MD trajectory file in XTC or DCD format.
Other variables can be optionally set for further configuration. See the Documentation section.

4 - Start the BinServer

At the HTMoL directory type:

> sudo nodejs BinServer.js
> HTMoLv3.5: BinServer started on port NodePort

Verify that BinServer is active and listening:

> sudo netstat -npl | grep node
> tcp6 0 0 :::NodePort :::* LISTEN JobID/nodejs


> nc -vz WebIP NodePort
> Connection to WebIP NodePort port [tcp/*] succeeded!

5 - Optional: Embed HTMoL on a web page

Create an <iframe> element inside the body of the HTML file where you want HTMoL to be displayed (e. g. index.html). Specify the following elements:

  • URL or path to the HTMoL.html file
  • Attribute class with the value "HTMoL"
  • Attribute scrolling with the value "no"
  • Attribute dimensions of the frame
 height="500" ></iframe>

Also, HTMoL can be embeded in WordPress blog posts (and possibly in other blog platforms). An example and directions can be found here.

6 - Start sharing

The MD trajectory is now ready to be visualized embeded in http://URL_to/index.html or full screen at http://WebIP/HTMoLv3.5/HTMoL.html

If you use HTMoL, we would love to know about it, please drop us a line.

HTMoL Documentation

Parameters and Variables

HTMoL can be further configured in the local/config.js file. The following variables can be set [default value]:

  • HPC Server
  • showOpen [false] When HTMoL is used as the interface to access MD data located at a high performance computing cluster where simulations are generated, this variable enables the option to open PDB and trajectory files from the main menu
    showDownload [true] Enable the option to download the PDB and trajectory files from the main menu


    HTMoL has a set of commands implemented to control how the molecular system and trajectory are visualized ("select value; show value; color value; view value; zoom value;"). This structured language can be used in the commandsDefault parameter defined in the local/config.js file.

    MD Trajectory

    It is highly advisable to remove the solvent, e. g. water, from the trajectory file for visual clarity, file size, and transfer speed reasons.

    Some times, it is helpful to remove high-frequency movements with a low-pass filter. The final trajectory file should not be used for analysis but for visualization only.

    Cut the trajectory to the relevant part of the simulation where the specific events or process take place.

    As a good practice, always provide the MD description and simulation details.

    Frequently Asked Questions

    You can acces the FAQs list here.

    HTMoL Examples

    Ordered by system size (number of atoms found in the MD data files).
    Click images to open full-sized HTMoL.

    Amphotericin B (AmB) dimer, monomer 1 labeled as chain A, and monomer 2 labeled as chain B.
    VDW representation. Solvent not shown.
    Low-pass filtered XTC trajectory for smooth movement (visualization purposes only).
    commandsDefault="select 0:0:A;show VDW;select 0:0:B;show VDW;color atom;zoom 4;"

    Lysozyme with disulfide bridges shown.
    CPK representation. Solvent not shown. Unfiltered XTC trajectory.
    commandsDefault="show cpk;select S:0:0;show VDW;color atom;zoom 4;"

    Three Lidocaine molecules interacting with a DPPC bilayer, monomers individually labeled as chanis 1, 2, and 3.
    Phospholipid molecules labeled as chain D. Ions Na and Cl labeled as chains E and F.
    VDW and line representations. Simulation Box shown. Solvent not shown. Low-pass filtered XTC trajectory. Custom view.
    commandsDefault="select 45-66;show VDW;color red;select 23-44;show VDW;color green;
    select 1-22;show VDW;color white;select 0:0:E;show VDW;color yellow;
    select 0:0:F;show VDW;color 0.6,0.4,0.0;zoom -10;view Custom;"

    Same protein shown in the intro but in backbone representation.
    Solvent not shown. Simulation Box shown. Low-pass filtered XTC trajectory.
    commandsDefault="show trace;view UpView;zoom -6;"

    DPPC bilayer with cholesterol (chain A). Phospholipid molecules labeled as chain B.
    VDW and line representations. Simulation Box shown. Solvent not shown. Low-pass filtered DCD trajectory.
    commandsDefault="select 0:0:A;show VDW;color atom;zoom 2;"