-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlayout.html
128 lines (109 loc) · 3.62 KB
/
layout.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
126
127
128
<!DOCTYPE html>
<meta charset="utf-8">
<style>
div.tooltip {
position: absolute;
text-align: centre;
width: 150px;
height: 38px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
svg {
position: absolute;
}
text {
pointer-events: none;
}
</style>
<html>
<head>
<script src="js_downloads/d3.v2.min.js"></script>
<script src="js_downloads/d3-color.v1.min.js"></script>
<script src="js_downloads/d3-interpolate.v1.min.js"></script>
<script src="js_downloads/d3-scale-chromatic.v1.min.js"></script>
<style type="text/css">
#arrow{
stroke-width:1;
stroke-dasharray:0;
}
</style>
</head>
<body>
<h2> Example to read and display layout of SBML file</h2>
<input class="inputFile" type="file" id="sbmlFile" size="50" onchange="extLoadXMLDoc()"><br>
<label> Stimulus: </label>
<input class="form" type="text" id="Stimulus" size="80" onKeyPress="selectItems(event)"><br>
<label> Readout: </label>
<input class="form" type="text" id="Readout" size="80" onKeyPress="selectItems(event)"><br>
<label> Subset: </label>
<input class="form" type="text" id="Subset" size="80" onKeyPress="setSubset(event)"><br>
<label> Delete: </label>
<input class="form" type="text" id="Delete" size="80" onKeyPress="removeItems(event)"><br>
<p id="ErrMsg"> Err Msg </p>
<button onclick="clearSelected()"> Clear All Selections </button > <br>
<input type="checkbox" id="isZoomedOut" name="isZoomedOut" value="false" onclick="toggleZoom()" >
<label for="isZoomedOut" style = "background-color: grey"> Zoom in/out </label>
<input type = "checkbox" id="showProxies" name = "showProxies" value = "false" onclick="toggleProxies()">
<label for="showProxies"> Show Proxies </label>
<input type = "checkbox" id="autoPositionDisplay" name = "autoPositionDisplay" value = "false" onclick="toggleAutoPositionDisplay()">
<label for="autoPositionDisplay"> Auto position </label>
<input type = "checkbox" id="positionEnzWithParent" name = "positionEnzWithParent" value = "false" onclick="togglePositionEnzWithParent()">
<label for="positionEnzWithParent"> Enzymes with parent </label>
<p>
<script type="text/javascript" src="lwidget.js"> </script>
<script>
function errorCallback( msg ) {
document.getElementById("ErrMsg").innerHTML = msg;
}
function extLoadXMLDoc() {
apiSetErrorCallback( errorCallback );
var fobj = document.getElementById("sbmlFile");
if ( 'files' in fobj ) {
if (fobj.files.length > 0) {
var fn = "models/" + fobj.files[0].name;
loadXMLDoc( fn );
}
}
}
function selectItems( event ) {
if (event.keyCode == 13) {
apiSelect( event.srcElement.value );
document.getElementById("ErrMsg").innerHTML = "Selected: " + event.srcElement.value;
}
}
function setSubset( event ) {
if (event.keyCode == 13) {
apiSetSubset( event.srcElement.value );
document.getElementById("ErrMsg").innerHTML = "Subset: " + event.srcElement.value;
}
}
function removeItems( event ) {
if (event.keyCode == 13) {
apiRemoveItems( event.srcElement.value );
document.getElementById("ErrMsg").innerHTML = "Removed: " + event.srcElement.value;
}
}
function clearSelected() {
apiClearSelected();
}
function toggleZoom() {
// Stupid Javascript doesn't pass the state.
apiSetZoom( document.getElementById("isZoomedOut").checked );
}
function toggleProxies() {
apiSetProxies( document.getElementById("showProxies").checked );
}
function toggleAutoPositionDisplay() {
apiSetAutoPositionDisplay( document.getElementById("autoPositionDisplay").checked );
}
function togglePositionEnzWithParent() {
apiSetPositionEnzWithParent( document.getElementById("positionEnzWithParent").checked );
}
</script>
</body>
<html>