HTMoL

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. If you do not see the molecule, maybe your browser does not support WebGL.

HTMoL Full-Window

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

Clone source code from GitHub:
> git clone https://github.com/tripplab/HTMoL.git
or from npm Package Manager:
> npm i htmol
You can optionally download a copy of MD data expamples Download

3 - Configure HTMoL

HTMoL 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.
    trjFormat format of the MD trajectory file (XTC|DCD|NC).
Other variables can be optionally set for further configuration. See the Documentation section.

4 - Start the BinServer

At the HTMoL directory type:

> nodejs BinServer.js
	
> HTMoL 3.5.3: BinServer started on port NodePort

Verify that BinServer is active and listening:

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

or

> 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
<iframe
 src="http://WebIP/HTMoL/HTMol.html"
 class="HTMoL"
 scrolling="no"
 width="600"
 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-window at http://WebIP/HTMoL/HTMoL.html

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

    Commands

    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

    You may remove explicit solvent (e. g. water) and cut the trajectory file to the relevant part of the simulation where the specific events or process take place for visual clarity, decrease storage file size, and increase transfer speed.

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

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

    Frequently Asked Questions

    You can acces the FAQs list here.

    Benchmarking

    This is the data set used to characterize and compare HTMoL with similar applications. Tools are installed side-by-side in the same server, streaming the same data files. Modern browsers can measure the display frame rate and show the FPS count. In Chrome (v65) go to View-Developer-Developer Tools-Rendering-FPS meter, and in Firefox (v59) go to Tools-Web Developer-Performance-Start Recording. A new tab will open by clicking on a link, loading a specific system. To estimate the tool performance, look at the FPS while the MD dynamics are playing after one full trajectory cycle. The higher the value, the greater the performance.


    System

    # Atoms

    HTMoL

    MDsrv+NGL

    AmB

    156

    open

    open

    Lysozyme

    1,960

    open

    open

    DPPC

    3,281

    open

    open

    Enzyme

    3,549

    open

    open

    Membrane with Cholesterol

    20,258

    open

    open


    HTMoL Examples

    Ordered by system size. Click images to open full-size HTMoL in a new tab.

    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 anesthetic 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;"


    NaCl in water (chains B,C, and A respectively).
    Low-pass filtered XTC trajectory.

    commandsDefault="show cpk;select 0:1:A;
    color yellow;select 0:0:B;show VDW;
    color 0.59,0.23,0.93;select 0:0:C;
    show VDW;color green;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;"