search

nglviewer / ngl

WebGL protein viewer
http://nglviewer.org/ngl/
MIT License
657 stars 168 forks source link

How can I load a trajectory DCD file, with topology specified through a PDB? #963

Closed razvanmarinescu closed 1 year ago

razvanmarinescu commented 1 year ago

I can load a static PDB file in NGL, but how can I load the associated DCD trajectory data, so I can play the animation in the browser? I only saw an example online with a gromacs file that had both trajectory and topology data in one file (whereas my trajectory and topology are in separate files).

I have the following setup that loads a static PBD:

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
  </head>
  <body>
      <script src="https://cdn.jsdelivr.net/gh/arose/ngl@v0.10.4-1/dist/ngl.js"></script>
        <script>
              document.addEventListener("DOMContentLoaded", function () {
                var stage = new NGL.Stage("viewport");
                stage.loadFile("bstate.pdb", {defaultRepresentation: true});
              });
  </script>
    <div id="viewport" style="width:400px; height:300px;"></div>
  </body>
</html>

How do I add the DCD trajectory? Thanks!

ppillot commented 1 year ago

stage.loadFile() returns a Promise that resolves with a component object. You can use the addTrajectory command to load a trajectory. something along those lines:

document.addEventListener("DOMContentLoaded", function () {
        var stage = new NGL.Stage("viewport");
         stage.loadFile("bstate.pdb", {defaultRepresentation: true})
         .then((o) => {
             o.addTrajectory("my_file.dcd");
        });
});

There are some examples of how to use a trajectoryPlayer in the MDsrv repo, for example: https://github.com/nglviewer/mdsrv/blob/master/mdsrv/webapp/embedded.html

razvanmarinescu commented 1 year ago

Thank you so much Paul! I'll try that.

Do you also have a minimal working example for having a start/stop button, together with a slider of animation progress? Your example works, but it's currently static and not playing, and I think it's because the MD trajectory animation doesn't start automatically. I tried to setup from this example, but it doesn't work.

ppillot commented 1 year ago

The trajectory player is the way to go. Unfortunately, I don't have code that I am at liberty to share, but you can find an example in the NGL web application: https://github.com/nglviewer/ngl/blob/4ab8753c38995da675e9efcae2291a298948ccca/examples/js/gui.js#L2133

But maybe for your purpose you may use the NGL viewer directly? You can check this guide for how to load a trajectory in the NGL web application: https://nglviewer.org/mdsrv/loading.html

And the NGL viewer can be accessed from: http://nglviewer.org/ngl/