kemia.github.com/smiles.html at master · kemia/kemia.github.com · 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Kemia Smiles Demo</title>
<!--
<script src="build/kemia-advanced.js"></script>
<script src="build/kemia-simple.js"></script>
 -->
<script src="build/kemia-whitespace-only.js"></script>
<link rel="stylesheet" href="css/kemia.css" />
<link rel="stylesheet"	href="css/demo.css" />

  <style>
  .modal-dialog-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #FFF;
  }

  .modal-dialog {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    background-color: #AAF;
    border: 2px solid #99c0ff;
  }

  .modal-dialog-title {
    position:relative;
    background: #C3D9FF;
    padding: 4px;
    font: bold 11px verdana;
    cursor: default;
  }

  .modal-dialog-content {
    background: #E8EEF7;
    padding: 12px 18px 12px 18px;  font: normal 12px verdana;
    font: normal 12px verdana;
  }

  .modal-dialog-userInput {
    font: normal 12px verdana;
    width: 90%;
  }

  .modal-dialog-buttons {
    background: #E8EEF7;
    padding: 4px;
    font: normal 12px verdana;
    text-align: right;
  }

  .modal-dialog-buttons button {
    margin: 5px;
  }
  </style>

<script>
var mol_renderer;
function initPage(){
	mol_renderer = new kemia.controller.ReactionEditor(goog.dom.getElement('kemia'),{background : {color : 'white'}});
}

var promptHandler = function(smiles) {
  if (smiles != null) {
    var timer = goog.now();
    var mol=kemia.io.smiles.parse(smiles);
    kemia.layout.CoordinateGenerator.generate(mol);
    mol_renderer.setModels([mol]);
    goog.dom.setTextContent(goog.dom.getElement('perf'), (goog.now() - timer) + 'ms');
  }
}

var prompt = new goog.ui.Prompt(
  'Enter SMILES to draw',
  'SMILES (default is Glutathione disulphide)',
  promptHandler);
</script>
</head>

<body onload="initPage();">
<h1>Kemia</h1>
<fieldset>
<legend>SMILES parsing - Coordinate Generation</legend>
  <p>
  <a href="#" onclick="prompt.setDefaultValue('N[C@@H](CCC(=O)N[C@@H](CSSC[C@H](NC(=O)CC[C@H](N)C(O)=O)C(=O)NCC(O)=O)C(=O)NCC(O)=O)C(O)=O');prompt.setVisible(true);">
    Enter SMILES
  </a>
  </p>
<br>
<div id="kemia" style="width: 100%; height: 400px"></div>
<br>
</fieldset>
  <div id="perf"></div>
<br>

</body>
</html>