-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.html
297 lines (276 loc) · 13.7 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
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE HTML>
<html>
<head>
<title>Order Types</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style_demo.css" title="style" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body onload="afterLoading()">
<div id="main">
<div id="header">
<div id="menubar">
<ul id="menu">
<li><a href="/index.html">Home</a></li>
<li><a href="/tutorial.html">Tutorial</a></li>
<li><a href="/glossary.html">Glossary</a></li>
<li class="selected"><a href="/demo.html">Interactive Demo</a></li>
<li><a href="/implementation.html">Implementation details</a></li>
</ul>
</div>
</div>
<div id="site_content">
<div id="errorBox">
<span id="errorMsg">
<!-- fill in with code -->
</span>
</div>
<div id="content">
<a href="#instructions_div">
<div style="margin-top: 10px; margin-bottom: 10px;"><b>Instructions below</b>
</div>
</a>
<div id="search_container">
<div id="search_left_div">
<h4><b>Search by <select onchange="changeSearchType(this)">
<option value="entry_index">Direct entry index</option>
<option value="property">Property</option>
</select></b></h4>
<div id="search_parameters">
<div id="index_search_div" style="margin-top: 5px;">
<label for="idx">Number of points composing the order type: </label>
<select id="ptnb">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select><br />
<label for="idx">Index of the order type in the set :</label>
<input type="number" id="idx" min="1" max="1" value="1" class="clean_spacing" />
<input type="button" value="Preview order type" id="pvw" /><br />
<input type="button" value="Previous" id="prev" class="clean_spacing" />
<input type="button" value="Next" id="next" class="clean_spacing" />
<input type="button" value="Equivalent" id="equiv" class="clean_spacing" />
</div>
<div id="property_search_div" style="margin-top: 5px; display: none;">
<label>Search by: </label>
<select onChange="changeSearchProperty(this)" class="clean_spacing">
<option value="nb_points_CH">Number of points on the convex hull</option>
<option value="nb_conv_layers">Number of convex layers</option>
</select>
<div id="nb_points_CH_div">
<label>Number of points composing the order type: </label>
<select id="nb_extreme_points_n" class="clean_spacing">
<option value="3" default>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="any">Any</option>
</select><br />
<label>Number of points on the convex hull: </label>
<input id="nb_points_CH_count" type="number" min="3" class="clean_spacing"><br>
<button id="propExtremSearch">Search</button>
</div>
<div id="nb_conv_layers_div" style="display: none;" class="clean_spacing">
<label>Number of convex layers: </label>
<input id="nb_conv_layers_count" type="number"><br>
<button id="propLayersSearch" class="clean_spacing">Search</button>
</div>
<!-- other property divs -->
</div>
</div>
</div>
<div id="search_right_div">
<div id="search_result" style="display: none;">
<h4><b>Result</b></h4>
<span id="res_nb_extrem_points_total" class="clean_spacing">Found _ entries corresponding to the
search</span> <br>
<span>Display search result number:</span>
<input id="res_nb_extrem_points_current" type="number" value="1" min="1" class="clean_spacing">
<button id="res_nb_extrem_points_go" class="clean_spacing">Go</button><br>
<button id="res_nb_extrem_points_prev" class="clean_spacing">Previous</button>
<button id="res_nb_extrem_points_next" class="clean_spacing">Next</button>
</div>
</div>
</div>
</div>
<div id="canvas_container">
<div id="canvas-holder1">
<!-- canvas 1 -->
</div>
<div id="arrow_holder">
<button id="arrow_button" type="button">></button>
</div>
<div id="canvas-holder2">
<!-- canvas 2 -->
</div>
</div>
<div id="dispOpts">
<div id="dispOptA">
<input type="button" value="Magnify" id="magni" style="float: right" class="clean_spacing" />
<input type="button" value="Clear canvas" id="clr" style="float: right" class="clean_spacing" />
<h4><b>Canvas A display options:</b></h4>
<input type="checkbox" id="showchA" />
<label for="showchA"> Show convex hull</label><br />
<input type="checkbox" id="showcgA" />
<label for="showcgA"> Show fully connected graph</label><br />
<input type="checkbox" id="showclA" />
<label for="showclA"> Show convex layer(s)</label><br />
<input type="checkbox" id="showlm" />
<label for="showlm"> Show λ-matrix</label><br />
<span id="lmatrix" style="display: none;"></span>
</div>
<div id="dispOptB">
<h4><b>Canvas B display options:</b></h4>
<input type="checkbox" id="showchB" />
<label for="showchB"> Show Convex Hull(s)</label><br />
<input type="checkbox" id="showcgB" />
<label for="showcgB"> Show fully connected graph(s)</label><br />
<input type="checkbox" id="showclB" />
<label for="showclB"> Show convex layer(s)</label><br />
<dl id="checkboxes">
<dt id="visib" class="clean_spacing">Point set visibility:</dt>
<dd>
<div id="set0">
<input type="checkbox" id="chk0" class="clean_spacing" /><label for="chk0">Point set 1<input
type="color" id="col0" style="margin-left: 5px;" value="#000000" /><button type="button" id="del0"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set1">
<input type="checkbox" id="chk1" class="clean_spacing" /><label for="chk1">Point set 2<input
type="color" id="col1" style="margin-left: 5px;" value="#000000" /><button type="button" id="del1"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set2">
<input type="checkbox" id="chk2" class="clean_spacing" /><label for="chk2">Point set 3<input
type="color" id="col2" style="margin-left: 5px;" value="#000000" /><button type="button" id="del2"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set3">
<input type="checkbox" id="chk3" class="clean_spacing" /><label for="chk3">Point set 4<input
type="color" id="col3" style="margin-left: 5px;" value="#000000" /><button type="button" id="del3"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set4">
<input type="checkbox" id="chk4" class="clean_spacing" /><label for="chk4">Point set 5<input
type="color" id="col4" style="margin-left: 5px;" value="#000000" /><button type="button" id="del4"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set5">
<input type="checkbox" id="chk5" class="clean_spacing" /><label for="chk5">Point set 6<input
type="color" id="col5" style="margin-left: 5px;" value="#000000" /><button type="button" id="del5"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set6">
<input type="checkbox" id="chk6" class="clean_spacing" /><label for="chk6">Point set 7<input
type="color" id="col6" style="margin-left: 5px;" value="#000000" /><button type="button" id="del6"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set7">
<input type="checkbox" id="chk7" class="clean_spacing" /><label for="chk7">Point set 8<input
type="color" id="col7" style="margin-left: 5px;" value="#000000" /><button type="button" id="del7"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set8">
<input type="checkbox" id="chk8" class="clean_spacing" /><label for="chk8">Point set 9<input
type="color" id="col8" style="margin-left: 5px;" value="#000000" /><button type="button" id="del8"
style="float: right;">
☒
</button></label>
</div>
</dd>
<dd>
<div id="set9">
<input type="checkbox" id="chk9" class="clean_spacing" /><label for="chk9">Point set 10<input
type="color" id="col9" style="margin-left: 5px;" value="#000000" /><button type="button" id="del9"
style="float: right;">
☒
</button></label>
</div>
</dd>
</dl>
</div>
</div>
<div id="instructions_div" name="instructions_div" style="margin-top: 30px;">
<h3>How to use the demo</h3>
<ul>
<li><b>The two canvases</b></li>
<p>
The center piece of the demo page are the two canvases. The left canvas is the working canvas. It is used
to lookup or modify a set. Once satisfied with the content of the left canvas use the arrow to transfer its
content to the right canvas. It serves as a buffer for multiple sets so they can be compared and can contain
upto 10 of them. <br>
The canvases offer some additional functionality such as displaying the convex hull or layers, the complete
graph, the natural λ-matrix, magnification, selection of specific sets. <br>
The sets in the right canvas can be enabled or disabled and deleted from the list. You can also change the
colour of a set for distinguishability purposes.
</p>
<li><b>Search specific entries of the database</b></li>
<p>
You can load a specific entry of the database with the search by <b>Direct entry index</b> option. Simply
specify the size of the points set and its index. Use the magnification if the points are to close to each
other. You can load the neigbouring sets with the <b>Previous</b> and <b>Next</b> buttons.
</p>
<li><b>Search the database by properties</b></li>
<p>
You can search for sets corresponding to some properties in the search by <b>Property</b> section. Two
properties are available at this time: searching by the number of extreme points and the number of convex
layers. You can cycle through the result set with the <b>Previous</b> and <b>Next</b> buttons.
</p>
<li><b>Draw point sets and search for their equivalent</b></li>
<p>
Finally, you can add points manually to the left canvas (upto 9). If the left canvas contains three or more
points you can load up the set from the database that has the same natural λ-matrix from the Search
by
<b>Direct entry index</b> section by clicking on <b>Equivalent</b>.
</p>
</ul>
</div>
</div>
</div>
</body>
</html>