Load MD trajectory in html/js

[pguillem]

Hello,

Is there an example html/js template that I could use to load an MD trajectory into a viewport?.

Ideally just providing a path to an XTC traj and pdb topology. Maybe even have some controls available (decimation, representations, etc), like the ones in the examples?

Is MDSrv necesary to move across frames on demand? or the viewport loads the entire trajectory?

Thanks in advance. Pedro

[fredludlow]

You've probably already found the example here: http://nglviewer.org/ngl/?script=parser/xtc The code for is here: https://github.com/nglviewer/ngl/blob/master/examples/scripts/parser/xtc.js

stage.loadFile('data://md.gro').then(function (o) {
  o.addRepresentation('cartoon')
  o.autoView()

  NGL.autoLoad('data://md.xtc').then(function (frames) {
    o.addTrajectory(frames)
  })
})

Another super-minimal way of doing it: https://github.com/nglviewer/ngl/issues/271

NGL doesn't provide UI itself, if you wanted to do this within a simple standalone interface you'd need to provide the HTML and hook it up (with or without a framework like React/Vue etc). In terms of handling the frames, you can get a sense of how that example is implemented from this part of the webapp demo:

https://github.com/nglviewer/ngl/blob/2011e08b6798a068860e1ab775b46c146ddb5272/examples/js/gui.js#L1969

Specifically, the NGL.TrajectoryPlayer class