-
Notifications
You must be signed in to change notification settings - Fork 54
/
Copy pathindex.html
101 lines (96 loc) · 4.11 KB
/
index.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
<!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>poly2tri tester</title>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script type="text/javascript" src="bower_components/purl/purl.js"></script>
<script type="text/javascript" src="bower_components/kineticjs/kinetic-v4.7.4.min.js"></script>
<script type="text/javascript" src="dist/poly2tri.min.js"></script>
<style type="text/css" media="screen">
html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: arial,verdana,helvetica,sans-serif;
font-size: 12px;
}
#control {
float: right;
width: 400px;
height: 100%;
background-color: #eee;
overflow: auto;
padding: 0;
margin: 0;
}
#content {
z-index: 0;
padding: 0;
margin: 0;
position: absolute;
top: 10px;
right: 410px;
left: 10px;
bottom: 10px;
}
.wrapper {
width: 100%;
margin-bottom: 1.5em;
padding: 0;
}
.wrapper textarea {
margin: 5px;
width: 380px;
}
.info {
color: #777;
}
</style>
<script type="text/javascript" src="tests/index.js"></script>
</head>
<body>
<div id="control">
<form>
<div class="wrapper">
<label for="preset">Load preset data:</label>
<select id="preset"></select>
<input id="btnTriangulate" type="button" value="Triangulate!">
<address id="attribution"></address>
<div class="info">(<span id="triangles_size">0</span> triangles computed)</div>
</div>
<div class="wrapper">
<input id="draw_constraints" type="checkbox" value="drawConstraints" checked="checked">
<label for="draw_constraints">Draw constraints</label>
</div>
<div class="wrapper">
<label for="poly_contour">Contour of the polygon (any separator between coordinates):</label>
<textarea id="poly_contour" rows="7" cols="50"></textarea>
<div class="info">(<span id="contour_size">0</span> points parsed)</div>
</div>
<div class="wrapper">
<label for="poly_holes">Holes in the polygon (at least one blank line between each hole):</label>
<textarea id="poly_holes" rows="5" cols="50"></textarea>
<div class="info">(<span id="holes_size">0</span> holes parsed)</div>
</div>
<div class="wrapper">
<label for="poly_points">Steiner points (any separator between coordinates):</label>
<textarea id="poly_points" rows="5" cols="50"></textarea>
<div class="info">(<span id="points_size">0</span> points parsed)</div>
</div>
<div class="wrapper">
Pointer in drawing coords: {x: <span id="pointer_x"></span>, y: <span id="pointer_y"></span>}
<br>
<em>Drag to Pan. Use wheel to zoom on pointer.</em>
</div>
</form>
<address>
Powered by <a href="https://github.com/r3mi/poly2tri.js.git">poly2tri.js</a>
v<span id="version">???</span>
</address>
</div>
<div id="content">
</div>
</body>
</html>