-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
125 lines (117 loc) · 3.58 KB
/
demo.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
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Ketcher demo</title>
<style>
body {
width: 80%;
margin: 0 auto;
}
button {
margin: 10px;
}
iframe {
width: 100%;
height: 550px;
border: none;
overflow: hidden;
}
#source, #show {
width: 40%;
height: 300px;
float: left;
border: solid 1px black;
overflow: auto;
}
#show {
float: right;
padding: 0;
margin: 0;
}
#show li {
margin: 0 auto;
width: 90%;
height: 100px;
list-style: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var initialMolecule = [
"",
" Ketcher 02151213522D 1 1.00000 0.00000 0",
"",
" 6 6 0 0 0 999 V2000",
" -1.1750 1.7500 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0",
" -0.3090 1.2500 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0",
" -0.3090 0.2500 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0",
" -1.1750 -0.2500 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0",
" -2.0410 0.2500 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0",
" -2.0410 1.2500 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0",
" 1 2 1 0 0 0",
" 2 3 2 0 0 0",
" 3 4 1 0 0 0",
" 4 5 2 0 0 0",
" 5 6 1 0 0 0",
" 6 1 2 0 0 0",
"M END"
].join("\n");
</script>
<script>
jQuery(function ($) {
$('#ketcher-frame').on('load', function () {
var ketcher = this.contentWindow.ketcher,
source = $('#source'),
show = $('#show');
$('#get-smiles').click(function () {
source.val(ketcher.getSmiles());
});
$('#get-molfile').click(function () {
source.val(ketcher.getMolfile());
});
$('#load-structure').click(function () {
ketcher.setMolecule(source.val());
});
$('#load-fragment').click(function () {
ketcher.addFragment(source.val());
});
$('#render').click(function () {
var molfile = source.val();
if ($.trim(molfile).indexOf('\n') == -1)
alert("Please, input Molfile");
else
ketcher.showMolfile($('<li>').appendTo(show)[0], molfile, {
bondLength: 20,
autoScale: true,
autoScaleMargin: 20,
debug: true
});
});
ketcher.setMolecule(initialMolecule);
ketcher.editor.on('change', function() {
source.val(ketcher.getMolfile());
});
});
});
</script>
</head>
<body>
<h1>Ketcher example</h1>
<iframe id="ketcher-frame" src="ketcher.html?api_path=https://lifescience.opensource.epam.com/v2" scrolling="no">
</iframe>
<h1>Ketcher interaction example</h1>
<div>
<textarea id="source"></textarea>
<ul id="show"></ul>
<menu>
<button id="get-smiles">Get SMILES</button>
<button id="get-molfile">Get Molfile</button>
<button id="render">Render Row</button>
<button id="load-structure">Load structure</button>
<button id="load-fragment">Load fragment</button>
</menu>
</div>
</body>
</html>