NGL@1.0.0-beta.7 Home Manual Reference Source
Gallery

Embedding

For embedding the viewer into other websites a single JavaScript file is available ngl.js. See below for CDNs to provide this file.

Example

The following code creates a viewer and loads the structure of PDB entry 1CRN from the RCSB PDB. The result can be seen and edited online here. For more information on how to control the viewer see the API reference, starting with the Stage class.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="path/to/ngl.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var stage = new NGL.Stage("viewport");
      stage.loadFile("rcsb://1crn", {defaultRepresentation: true});
    });
  </script>
  <div id="viewport" style="width:400px; height:300px;"></div>
</body>
</html>

Concept

The main object in NGL is the stage. By using the stage.loadFile method, component objects, containing structur or volume data, can be added to the stage. Finally representation objects, like "cartoon" or "surface", are added to the component for showing the data.

// create a `stage` object
var stage = new NGL.Stage("viewport");
// load a PDB structure and consume the returned `Promise`
stage.loadFile("rcsb://1CRN").then(function (component) {
  // add a "cartoon" representation to the structure component
  component.addRepresentation("cartoon");
  // provide a "good" view of the structure
  component.autoView();
});

Element

If the size of your DOM element (here "viewport") is not know upon calling the Stage constructor make sure that you call stage.handleResize() when the size is known or has changed.

CDN

Instead of hosting the ngl.js file yourself you can point to the Unpkg or RawGit CDN.

Latest stable/untagged version released on NPM:

Latest development version released on NPM:

Specific Version