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-WindowFollow directions at the Node.js site for installation on a web server.
It is easier to use a Package Manager.
> 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
HTMoL configuration is made by editing the local/config.js
file.
The following variables have to be set:
WebIP
[127.0.0.1] is the servername or IP address of the web server. Use 'localhost' for testing.
NodePort
[3000] is the port number where the BinServer will be listening for requests.
It can be any available port with a number greater than 1024 (lower values require root access, which is not advisable).
Note, do not use port number 80 because it is usually 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.
PDBDIR
[pdbfiles/] is where the atomic coordinates are located.
TRJDIR
[trjfiles/] is where the MD trajectories are located.
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 (Options: XTC, DCD, NC).
At the HTMoL directory type:
> node BinServer.js
> HTMoL 3.5.4: BinServer started on port NodePort
If you get a mesage like
"Error: listen EACCES" or "Error: listen EADDRINUSE", you might have to try
a different port number (NodePort). Find one that is open and not in use by other service.
A functional port depends on your server configuration, so you might have to try several
numbers before finding one that works.Now, 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!
http://WebIP/HTMoL/HTMoL.html
http://URL_to/index.html
:Create an <iframe> element inside the body of the HTML file where you want HTMoL to be displayed. Specify the following elements:
<iframe
src="http://WebIP/HTMoL/HTMol.html"
class="HTMoL"
scrolling="no"
width="600"
height="500" ></iframe>
HTMoL can be further configured in the local/config.js
file.
The following variables can be set [default value]:
autoplay
[true] How to start the MD visualization: (true|false).
RepresentacionInicial
['SpheresBonds'] Equivalent to CPK. Do not change the representation here, use the 'show' command below.
radius
[0.01] SpheresBonds radius.
SphereResolution
[5] value has to be >3, use 5 for low resolution, 16 for high resolution. This has an impact in GPU performance.
AxisBool
[false] Draw Axis (X red, Y green, Z blue) and Box (yellow): (true|false). To draw the Simulation Box, the dimensions
need to be specified with the command CRYST1 in the PDB file.
commandsDefault
Define a combination of representations, views and zoom level (see Commands Section below).
The example shown here uses the following commands:
"select 1-9;show VDW;color 1.0,0.0,1.0;select 3540-3549;show VDW;color 1.0,1.0,0.0;select 0:TRP:0;show VDW;color atom;select none;view BackView;zoom 3;"
tinit
[0] MD start time in picoseconds.
md_dt
[0.002] MD timestep in picoseconds.
nstxtcout
[10000] Output frequency saved in trajectory file.
MDTitle
["MD Title"] Provide a title for the MD.
MDdescription
[" <p>Summary: </p>
<p>PDB ID: <a href='https://www.rcsb.org/pdb/explore/explore.do?structureId=PDBID' target='_blank'>PDBID</a></p>
<p>Simulation: </p>
<p>Published in Journal Volume:Pages (Year) DOI: <a href='http://dx.doi.org/my_doi' target='_blank'>my_doi</a></p> "]
Provide the Summary, PDB ID, Simulation details, Publication link, etc. Each section should be inside a <p></p> block. HTML code allowed.
LineW
[2] Width of bonds
LigthPWR
[0.5] Intensity of lighting
mxSize
[20999999] maximum trajectory file size in bytes. 20999999 is about 20 Mb
NoPaso
[100] number of atoms to process in block in the GPU, value has to be <200 due to JavaScript float arrays capacity. Float32Array is used for vertex, and Uint16Array for index
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.
select
[none] A range of atoms by PDB index or defined as atom_type:residue_type:chain
. Here are some examples: select 3-6
Selects atoms with index 3 through 6 in the PDB file select 0:0:0
Selects all atoms select 0:0:1
Selects all atoms of the first chain select 0:0:A
Selects all atoms of the chain with label "A" select 0:3:2
Selects all atoms of the third residue in the second chain select 0:THR:0
Selects all residues of type "THR" in all chains select C:ALA:B
Selects the atom type "C" of residues type "ALA" of chain with label "B" select 4-23,N:GLY:3
Selects atoms with index 4 through 23 in the PDB file, and atoms type "N" of residues type "GLY" of third chain show
[cpk] Options: vdw, cpk (set radius=0.3), lines, trace. color
[atom] Options: atom, red, white, green, blue, magenta, yellow. Advanced: it can also be defined by setting the RGB values of the desired color.
Each of the three components has to be comma separated and be in the (0.0-1.0) range.view
[FrontView] Options: FrontView, LeftView, RightView, UpView, DownView. Advanced: a "Custom" view can be defined at the js/ButtonsFunctions.js
file
in the UserSetView
function.zoom
[0] Positive integer to zoom in, negative integer to zoom out. 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.
System |
# Atoms |
HTMoL |
MDsrv+NGL |
AmB |
156 |
||
Lysozyme |
1,960 |
||
DPPC |
3,281 |
||
Enzyme |
3,549 |
||
Membrane with Cholesterol |
20,258 |
commandsDefault="select 0:0:A;show VDW;
select 0:0:B;show VDW;color atom;zoom 4;"
commandsDefault="show cpk;select S:0:0;
show VDW;color atom;zoom 4;"
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;"
commandsDefault="show trace;view UpView;
zoom -6;"