xtal.js/map_viewer.html at master · natechols/xtal.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html lang="en">
<head>
  <title>Electron density viewer</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/viewer.css">

	<!-- third-party dependencies -->
	<script src="js/dependencies/jquery-2.1.0.min.js"></script>
	<script src="js/dependencies/jquery-ui-1.10.4.min.js"></script>

	<script src="js/dependencies/Detector.js"></script>
	<script src="js/dependencies/three.min.js"></script>
	<script src="js/dependencies/three.TrackballControls.js"></script>

	<script src="js/dependencies/DAT.GUI.min.js"></script>
	<script src="js/dependencies/hoverIntent.min.js"></script>
	<script src="js/dependencies/sprintf.js"></script>

  <script src="http://js.leapmotion.com/leap-0.4.3.js"></script>

	<!-- app-specific code -->
	<script src="js/xtal.js"></script>
	<script src="js/xtal.model.js"></script>
	<script src="js/xtal.display.js"></script>
	<script src="js/xtal.cif.js"></script>
	<script src="js/xtal.marchingcubes.js"></script>
	<script src="js/xtal.viewer.js"></script>
	<script src="js/xtal.viewer_gui.js"></script>

</head>
<body>
	<div id="Viewer" style="position: absolute; left:0px; top:0px;"></div>

<!--
	<div class="controlBox" id="featureBox">
	  <div id="featuresBoxInner">
			<div class="controlMargin" id="featuresMargin">
				<div class="controlHeader" id="featureHandle">Important features</div>
			</div>
	 		<div class="popUp" id="featureList"></div>
	  </div>
	</div>
-->

	<div class="centeredControls" id="loadControls">
      <form action="javascript:requestFromServer();" id="pdbIdFetch">
		    <div class="controlItem" id="pdbFetch">
		      	Load PDB ID: <input type="text" id="pdbIdInput" style="width:50px;" />
		      	<input type="submit" style="display:none" />
		    </div>
      </form>
	</div>

	<div class="controlButton" id="loadControlsButton">
	  <div class="controlMargin" id="loadControlsBtnMargin">
	    <div class="controlItem" id="loadControlsShow">Load structure...</div>
	  </div>
	</div>

	<script>
		init_gui();
		$(function() {
      XV = new XtalViewer("Viewer", null, true, true);
      draw_selection_console(XV);
			XV.animate();
			if (!getQuery(XV)) {
        XV.load_pdb("data/1mru.pdb", "1mru");
        XV.load_dsn6_map("data/1mru.omap", "2mFo-Dfc", 0);
        XV.animate();
			}
      XV.enable_leap_motion();
		});
	</script>
</body>
</html>