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.
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
Follow directions at the Node.js site for installation on a web server.
It is easier to use a Package Manager.
or from npm Package Manager:
> git clone https://github.com/tripplab/HTMoL.git
You can optionally download a copy of MD data expamples
> npm i htmol
HTMoL configuration is made by editing the
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 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.
pdbInicialname of the file with the atomic coordinates in PDB format.
trjInicialname of the MD trajectory file.
trjFormatformat of the MD trajectory file (Options: XTC, DCD, NC).
At the HTMoL directory type:
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.
> node BinServer.js
> HTMoL 3.5.4: BinServer started on port NodePort
Now, verify that BinServer is active and listening:
> netstat -npl | grep node
> tcp6 0 0 :::NodePort :::* LISTEN JobID/nodejs
> nc -vz WebIP NodePort
> Connection to WebIP NodePort port [tcp/*] succeeded!
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
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 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.
commandsDefaultDefine 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 MD start time in picoseconds.
md_dt[0.002] MD timestep in picoseconds.
nstxtcout 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 Width of bonds
LigthPWR[0.5] Intensity of lighting
mxSize maximum trajectory file size in bytes. 20999999 is about 20 Mb
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
select[none] A range of atoms by PDB index or defined as
atom_type:residue_type:chain. Here are some examples:
select 3-6Selects atoms with index 3 through 6 in the PDB file
select 0:0:0Selects all atoms
select 0:0:1Selects all atoms of the first chain
select 0:0:ASelects all atoms of the chain with label "A"
select 0:3:2Selects all atoms of the third residue in the second chain
select 0:THR:0Selects all residues of type "THR" in all chains
select C:ALA:BSelects the atom type "C" of residues type "ALA" of chain with label "B"
select 4-23,N:GLY:3Selects 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.jsfile in the
zoom 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.
Membrane with Cholesterol
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;
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;"