view.html

<!doctype html>
<html lang="en">
<head>
  <title>UglyMol Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <meta name="theme-color" content="#333333">
  <style>
   body { font-family: sans-serif; }
   canvas { display: block; }
   #viewer {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
   #hud {
     font-size: 15px;
     color: #ddd;
     background-color: rgba(0,0,0,0.6);
     text-align: center;
     position: absolute;
     top: 10px;
     left: 10%;
     width: 80%;
     padding: 2px 8px;
     border-radius: 5px;
     z-index: 9;
     white-space: pre-line;
   }
   #hud u { padding: 0 8px; text-decoration: none;
            border: solid; border-width: 1px 0; }
   #hud s { padding: 0 8px; text-decoration: none; opacity: 0.5; }
   #help {
     display: none;
     font-size: 16px;
     color: #eee;
     background-color: rgba(0,0,0,0.7);
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     cursor: default;
     padding: 5px;
     border-radius: 5px;
     z-index: 9;
     white-space: pre-line;
   }
   #inset {
     width: 200px;
     height: 200px;
     background-color: #888;
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: 2;
     display: none;
   }
   a { color: #59C; }
  </style>

  <script src="uglymol.js"></script> <!--DEV--><!--
  <script src="/uglymol.js"></script>
  -DEV-->
  <script src="src/wasm/mtz.js"></script> <!--DEV--><!--
  <script src="/wasm/mtz.js"></script>
  -DEV-->

</head>
<body style="background-color: black">
  <div id="viewer"></div>
  <header id="hud" onmousedown="event.stopPropagation();"
                   ondblclick="event.stopPropagation();"
                   onkeydown="event.stopPropagation();"></header>
  <footer id="help"></footer>
  <div id="inset"></div>
  <script>
    V = new UM.Viewer({viewer: "viewer", hud: "hud", help: "help"});
    G = null;
    function load_from_pdbe(id, callback) {
      V.load_pdb('https://www.ebi.ac.uk/pdbe/entry-files/pdb' + id + '.ent', {},
                 function () {
          UM.load_maps_from_mtz(G, V,
            'https://www.ebi.ac.uk/pdbe/coordinates/files/' + id + '_map.mtz',
            null, callback);
      });
    }
    function load(use_pdbe) {
      var pdbid = document.getElementById('pdbid').value.toLowerCase();
      var callback = function () {
        V.hud('Model and maps for ' + pdbid + ' are loaded.<br/>' +
              'You may also add <input type="submit" value="PDB-REDO model" ' +
              'onclick="return load_pdb_redo(\'' + pdbid + '\');"/><br/>' +
              'Reload the page to remove all the models and maps.<br/>' +
              'H shows help',
              'HTML');
      };
      if (use_pdbe) load_from_pdbe(pdbid, callback);
      else V.load_from_rcsb(pdbid, callback);
    }
    function load_pdb_redo(id) {
      var url = 'https://pdb-redo.eu/db/' + id + '/' + id + '_final.pdb';
      V.load_pdb(url, {stay: true}, function () {
      V.hud('Reload the page to remove all the models and maps.\n' +
            'V hides one of the models. H shows help.');
      });
    }
    function setup(Module) {
      G = Module;
      //V.set_pdb_and_map_dropzone(V.renderer.domElement);
      UM.set_pdb_and_mtz_dropzone(G, V, V.renderer.domElement);
      var id_match = window.location.href.match(/[?&]id=([^&#]+)/);
      if (id_match) {
        load_from_pdbe(id_match[1].toLowerCase());
      } else {
        V.hud(
      'Drag and drop your pdb and map or mtz files to this window.' +
      '\nAlternatively, use PDB code to load files <input type="text"' +
      ' size="5" maxlength="4" minlength="4" pattern="[0-9][0-9a-zA-Z]{3}"' +
      ' value="4UN4" id="pdbid" required' +
      ' onkeypress="if (event.keyCode === 13) load(true);"/> ' +
      '<input type="submit" value="from PDBe" onclick="return load(true);"/> ' +
    //'<input type="submit" value="from RCSB" onclick="return load(false);"/>' +
      '\nReload the page to remove all the models and maps.' +
      '\n<a href="#" onclick="V.toggle_help();return false;">H shows help.</a>',
      'HTML');
      }
    }
    GemmiMtz().then(setup);
  </script>
</body>
</html>