forked from CIDARLAB/GridTLI-GUI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
2.html
159 lines (150 loc) · 6.12 KB
/
2.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GridTLI GUI</title>
<!-- load script that controls grid functions -->
<script type="text/javascript" src="gridfunctions.js"></script>
<!-- load custom stylesheet -->
<link rel="stylesheet" href="style.css"></link>
<!-- load paper.js -->
<script type="text/javascript" src="paper-full.js"></script>
<!-- load script that defines the canvas -->
<script type="text/javascript" src="canvas.js"></script>
</head>
<body>
<nav>
<img src="phoenix_banner.png">
<br>
<na0><font color="#eee8aa" size="4">GridTLI</font></na0>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">GridTLI</a></li>
<li><a href="#">STL</a></li>
</ul>
</nav>
<div id="tools">
<label>
<input type="radio" name="tool" class="btn" value="select" id="select">
<img src="icon-mouse.png" id="select" onClick="selectLine.activate()">
</label>
<label>
<input type="radio" name="tool" class="btn" value="pencil" id="pencil" checked>
<img src="icon-pencil.png" id="pencil" onClick="drawLine.activate()">
</label>
<label>
<input type="radio" name="tool" class="btn" value="segment" id="segment">
<img src="icon-segment.png" id="dot" onClick="drawPoints.activate()">
</label>
<label>
<input type="radio" name="tool" class="btn" value="eraser" id="eraser">
<img src="icon-eraser.png" id="eraser" onClick="deleteLines.activate()">
</label>
<label>
<input type="radio" name="tool" class="btn" value="move" id="move">
<img src="icon-move.png" id="move" onClick="movePoints.activate()">
</label>
</div>
<div id="tab">
<article id="drawingGrid">
<canvas id="myCanvas"></canvas>
<p class="rotate" id="axisLabel">Y Label</p>
</article>
<div id="threshold">
<h3>Graph Values</h3>
<article class="spatial">
<article class="graphLabels">
<p>Spatial:</p>
</article>
<article class="graphValues">
<input type="text" id="smin" value="X_min"
onblur="if (this.value == '') {this.value = 'X_min';}"
onfocus="if (this.value == 'X_min') {this.value = '';}" />
<br>
<input type="text" id="smax" value="X_max"
onblur="if (this.value == '') {this.value = 'X_max';}"
onfocus="if (this.value == 'X_max') {this.value = '';}" />
</article>
</article>
<article class="temporal">
<article class="graphLabels">
<p>Temporal:</p>
</article>
<article class="graphValues">
<input type="text" id="tmax" value="Y_max"
onblur="if (this.value == '') {this.value = 'Y_max';}"
onfocus="if (this.value == 'Y_max') {this.value = '';}" />
</article>
</article>
<h3 class="thresh">Threshold Values</h3>
<article class="spatial">
<article class="threshLabels">
<p>Spatial:</p>
</article>
<article class="threshValues">
<input type="text" id="sThresh" value="Xt"
onblur="if (this.value == '') {this.value = 'Xt';}"
onfocus="if (this.value == 'Xt') {this.value = '';}" />
</article>
</article>
<article class="temporal">
<article class="threshLabels">
<p>Temporal:</p>
</article>
<article class="threshValues">
<input type="text" id="tThresh" value="Yt"
onblur="if (this.value == '') {this.value = 'Yt';}"
onfocus="if (this.value == 'Yt') {this.value = '';}" />
</article>
</article>
<article class="cluster">
<article class="threshLabels">
<p>Cluster:</p>
</article>
<article class="threshValues">
<input type="text" id="cluster" value="Ct"
onblur="if (this.value == '') {this.value = 'Ct';}"
onfocus="if (this.value == 'Ct') {this.value = '';}" />
</article>
</article>
<button type="button" id="changeVals" onClick="changeValues()">Run</button>
</div>
</div>
<!--this section helps me check the javascript function that "run" gathers the values-->
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<!--<div class="sidebar-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit nisl, finibus id
sodales nec, pretium at turpis. Nulla lacinia velit vel velit auctor dapibus. Proin
pretium nisl et tristique luctus. Proin malesuada nunc tempus lacus varius porttitor.
Etiam viverra orci in semper venenatis. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Nunc id mi a nulla commodo mattis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum elit sapien,
lacinia non justo ut, semper bibendum purus. Proin ac arcu in felis cursus eleifend
sed eu neque. Morbi aliquet laoreet tempor. Morbi vel sodales urna, id tempus augue.
Donec eu leo sit amet lectus accumsan venenatis eget in dolor. Vivamus lectus augue,
gravida sed viverra nec, interdum dignissim dui. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Donec dignissim orci at nisi
laoreet, ut hendrerit sapien luctus.</p>
<p>Nunc sit amet augue ut enim fermentum dictum. Nullam quis lacinia magna. Maecenas
luctus odio magna. Praesent eget volutpat tellus. Nam viverra sapien justo, eu
volutpat massa mattis vitae. Quisque nec commodo nisi. Sed a aliquet lectus.</p>
<p>Ut egestas hendrerit quam, in porttitor felis ultricies vel. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mattis
ipsum eu nisl tempus, in pulvinar est cursus. Quisque convallis orci urna. Suspendisse
odio lorem, blandit auctor lorem id, tincidunt rutrum risus. Nam non elementum leo, ac
malesuada est. Vivamus nec semper orci.</p>
</div>-->
<!--<input type="text" id="xtmin" value="1"><br>
<input type="text" id="xtmax" value="1"><br>
<input type="text" id="ytmax" value="1"><br>
<input type="text" id="ct" value="1"><br>
<input id="xrange" value="1" style="width: 300px"><br>
<input id="yrange" value="1" style="width: 300px"><br>-->
<!-- tool buttons -->
<div id="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong></div>
</body>
</html>