-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhsv.html
116 lines (105 loc) · 4.82 KB
/
hsv.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<!--
This page is a simple demonstration of using either JSME or 3DMol.js and
AngularJS to display a multi-mol SDF and associated data.
Copyright David Cogrove, CozChemIx Limited 2017
Distributed under the BSD license, contained in the file license.txt in
the same directory as this file.
JSME : Peter Ertl's molecule editor
http://peter-ertl.com/jsme
B. Bienfait and P. Ertl, JSME: a free molecule editor in JavaScript,
J. Cheminformatics 5:24 (2013))
3Dmol.js :
http://3dmol.csb.pitt.edu
Nicholas Rego and David Koes
3Dmol.js: molecular visualization with WebGL
Bioinformatics (2015) 31 (8): 1322-1324 doi:10.1093/bioinformatics/btu829
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>HSV - the HTML SDF Viewer</title>
<script type="text/javascript" language="javascript" src="./Javascript/ThirdParty/JSME_2017-02-26/jsme/jsme.nocache.js"></script>
<!-- AngularJS (version 1) -->
<script src="./Javascript/ThirdParty/angular.min.js"></script>
<!-- JQuery - possibly included by AngularJS, but certainly needed by bootstrap -->
<script src="./Javascript/ThirdParty/jquery.min.js"></script>
<!-- bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./Javascript/ThirdParty/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="./Javascript/ThirdParty/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="./Javascript/ThirdParty/bootstrap.min.js"></script>
<!-- Font Awesome icons, for the carets in the table sorting -->
<link rel="stylesheet" href="./Javascript/ThirdParty/font-awesome.min.css">
<!-- the 3Dmol.js WebGL 3D molecule viewer -->
<script src="./Javascript/ThirdParty/3Dmol-nojquery.js"></script>
<!-- moment.js - date processing -->
<script type="text/javascript" language="javascript" src="./Javascript/ThirdParty/moment-with-locales.min.js"></script>
<!-- table with fixed headers, just the contents scroll -->
<script type="text/javascript" language="javascript" src="./Javascript/ThirdParty/fixed-table-header.min.js"></script>
</head>
<body>
<h2 align="center">Simple SDF Browser</h2>
<div class="container">
<div ng-app="hsvApp" ng-controller="hsvCtrl">
Select SDF to display : <input type="file" accept=".sdf,.mol" read-sdf="parseSDF($fileContent)" />
<div class="row">
<div class="col-md-8">
<div id="jsme_container" ng-show="curr_dims === 2"></div>
<div id="threedmol_container" ng-show="curr_dims === 3"></div>
</div>
<div class="col-md-4" ng-if="mol_tagged_data">
<ul>
<li ng-repeat="tag in all_sdf_tags">{{tag}} : {{mol_tagged_data[mol_index[mol_counter]][tag]}}</li>
</ul>
</div>
</div>
<div ng-show="mol_tagged_data">
<div class="row">
<button ng-click="firstMolCounter(10)">First</button>
<button ng-click="decrementMolCounter(10)">10th Previous</button>
<button ng-click="decrementMolCounter(1)">Previous</button>
<button ng-click="incrementMolCounter(1)">Next</button>
<button ng-click="incrementMolCounter(10)">10th Next</button>
<button ng-click="lastMolCounter()">Last</button>
</div>
<div id="hsv-table-container">
<table class="table table-striped table-bordered">
<thead fix-head>
<tr>
<th ng-repeat="tag in all_sdf_tags" ng-click="sortColumn(tag)">{{tag}}
<span ng-show="descending_sort" class="fa fa-caret-down"></span>
<span ng-show="!descending_sort" class="fa fa-caret-up"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mol_ind in mol_index">
<td ng-class="{danger: mol_tagged_data[mol_index[mol_counter]].Number==mol_tagged_data[mol_ind].Number}"
ng-repeat="tag in all_sdf_tags"
ng-click="setMolCounter(mol_tagged_data[mol_ind].Number)">
{{mol_tagged_data[mol_ind][tag]}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" src="./Javascript/hsvApp/hsvApp.js"></script>
<script type="text/javascript" language="javascript" src="./Javascript/hsvApp/hsvCtrl.js"></script>
<script type="text/javascript" language="javascript" src="./Javascript/hsvApp/hsvDir.js"></script>
<link rel="stylesheet" href="./Javascript/hsvApp/hsv.css">
<script>
//this function will be called after the JavaScriptApplet code has been loaded.
function jsmeOnLoad() {
jsmeApplet = new JSApplet.JSME("jsme_container", "100%", "100%",{"options": "hydrogens, depict"});
}
</script>
</body>
</html>