-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmesher.html
131 lines (111 loc) · 4.69 KB
/
mesher.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4ENPKNR99W"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4ENPKNR99W');
</script>
<link rel="stylesheet" href="styles.css">
<script src="geometry.js"></script>
<script src="cdt.js"></script>
<title>2D Constrained Delaunay Triangulation in JavaScript</title>
<meta name="description" content="A web app for generating constrained Delaunay triangulations online."/>
<meta name="keywords" content="Delaunay triangulation,mesh,JavaScript">
</head>
<body>
<div class="block nav_panel" id="div_controls" style="width:300px; height:100%; position:relative">
<div class="nav_panel_tile" style="text-align:center;">
<div style="font-size:25px;"><b>CDT-JS</b></div>
<div style="font-size:15px;">Constrained Delaunay Triangulation
<br>in JavaScript</div>
</div>
<hr style="margin-top:10px; margin-bottom:10px;">
<div class="nav_panel_tile">
<button id="btngenrandomvertex" class="small" onClick="genRandVertices()">Generate random vertices</button>
</div>
<div class="nav_panel_tile">
<span><input type="radio" id="radiouniform" name="randtype" value="uniform" checked>Uniform</input>
<input type="radio" name="randtype" value="normal">Normal</input></span>
<br>
Count: <input class="small" type="number" id="txtnumrandvertex" min="0" step="50" value="100">
</div>
<div class="nav_panel_tile" style="margin-top:10px;">
<button id="btngenrandomedges" class="small" onClick="genRandEdges()">Generate random edge constraints</button>
</div>
<div class="nav_panel_tile">
Count: <input class="small" type="number" id="txtnumrandedges" min="0" step="10" value="10">
</div>
<!-- <div class="nav_panel_tile">
<button id="btnbench" class="small" onClick="benchmark()">Benchmark</button>
</div> -->
<hr style="margin-top:10px; margin-bottom:10px;">
<div>
Load vertices from file:
<br>
<input type="file" id="filevertex" onChange="readVertices()">
</div>
<div style="margin-top:10px">
Load constrained edges from file:
<br>
<input type="file" id="fileedge" onChange="readEdges()">
</div>
<hr style="margin-top:10px; margin-bottom:10px;">
<div class="nav_panel_tile">
<button id="btntriangulate" class="big" onClick="triangulate()">Triangulate!</button>
</div>
<div class="nav_panel_tile" style="margin-top:5px">
<button id="btnreset" class="small" onClick="reset()">Reset</button>
</div>
<div class="nav_panel_tile" style="margin-top:5px">
<button id="btnloadinput" class="small" onClick="loadInputData()">Reload input data</button>
</div>
<div style="display:table; margin-top:5px; margin-left:auto; margin-right:auto">
<input type="checkbox" id="checkboxConstrain" checked onclick="triangulate()">Edge constraints active</input>
<br>
<input type="checkbox" id="checkboxShowVertices" checked>Show vertices</input>
</div>
<hr style="margin-top:10px; margin-bottom:10px;">
<div id="vertexinfo">Vertex list:</div>
<textarea id="txtvertices" class="list" rows="15" title="Enter a list of (x,y) coordinates"></textarea>
<br>
<div id="edgeinfo">Constrained edge list:</div>
<textarea id="txtedges" class="list" rows="15" title="Each edge is specified by the indices to its end vertices"></textarea>
<br>
<div id="tri_list_info">Triangle list:</div>
<textarea id="txttriangles" class="list" rows="15"
title="Each triangle is defined by the 3 indices to its vertices in the input vertex list"></textarea>
</div>
<div class="block" id="div_content" style="width:calc(100% - 322px); position:absolute;">
<div style="height:calc(80vh + 2px);">
<canvas id="main_canvas" style="width:100%; height:80vh; position:absolute; border-bottom:2px solid #444444;"></canvas>
</div>
<div id="div_infopanel">
<div class="block tri_info info_panel" id="div_tri_info">
<div id="coorddisplay"><b>Coordinates:</b> (0,0)</div>
<div id="zoomdisplay"><b>Zoom factor:</b> 0.8</div>
<br>
<div>
<div style="display:inline-block; width:180px">Locate vertex by index:</div>
<input id="txtlocatevertex" class="small" type="number" oninput="locateVertex()" min=0></input>
</div>
<br>
<div>
<div style="display:inline-block; width:180px">Locate triangle by index:</div>
<input id="txtlocatetriangle" class="small" type="number" oninput="locateTriangle()" min=0></input>
</div>
<br>
<div id="div_info"></div>
</div
><div class="block log info_panel" id="div_log">
<b>Log:</b>
<br><br>
</div>
</div>
</div>
</body>
</html>