Integrate Molmil

This page is also available in: 日本語
It is possible to integrate molmil on your own website. The following example is a simple webpage including the required JavaScript to load and initialize molmil:

<html>
  <head>
    <script>  
      function initViewer() {
        var canvas = document.getElementById("molmilViewer");
        molmil.autoSetup();
        molmil.loadPDB(canvas.getAttribute("data-pdbid"), null, null, canvas.molmilViewer);
      }
    </script>
  </head>
  
  <body onload="initViewer();">
    <center>
      <h1 id="mm_title">Molmil viewer</h1>
      <h3>Integration test page</h3>
      <span class="molmil_UI_container">
        <canvas id="molmilViewer" data-pdbid="1crn" width="600" height="400" style="display: block; border: 1px solid #DDD;"></canvas>
      </span>
    </center>
  </body>
  <script src="https://pdbj.org/molmil2/molmil.js"></script>
</html>

The above example downloads molmil (line 24) and loads the structure (identified by data-pdbid="1crn" in line 20) with PDBID 1crn via the initViewer JavaScript function (link 6) using PDBj's rest service (line 10) for PDB entry files.
Screenshot for page produced from the above code
Alternatively, it is also possible to integrate molmil using a simple iframe and using molmil commands to load and visualize the molecule of choice, e.g.:

  <iframe src="https://pdbj.org/molmil2#fetch 1crn; show sticks, sidechain; cartoon_color group, all; orient;" width="600" height="400" style="border: 1px solid #ddd;"></iframe>

This produces the following:

Created: 2015-12-08 (last edited: 3 weeks ago)2021-05-26
MenuPDBj@FacebookPDBj@TwitterPDBj@YouTubewwPDB Foundation
wwPDBRCSB PDBPDBeBMRBAdv. SearchSearch help

178747

PDB entries from 2021-06-09