forked from ampawd/interactive-geometry
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
209 lines (200 loc) · 8.98 KB
/
index.html
File metadata and controls
209 lines (200 loc) · 8.98 KB
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
<!DOCTYPE html>
<html>
<head>
<title>| Interactive Geometry</title>
<meta charset="UTF-8">
<link type='text/css' rel="stylesheet" href="assets/css/jquery-ui.css">
<link type='text/css' rel="stylesheet" href='assets/css/app.css' />
<link type='text/css' rel='stylesheet' href='assets/css/spectrum.css' />
</head>
<body>
<div id='ui-wrap'>
<div id="top-tools-container">
<div class="top-tool move" data-tool-type="transformer">
<div class="active-subtool">
<img src="assets/images/move_button.png" class="top-tool-img" alt="move">
<span class="active-subtool-help"></span>
</div>
<div class="sub-tools">
<div class="sub-tool displaynone">
<span class="tool-help">Select shape then transform</span>
</div>
</div>
</div>
<div class="top-tool measures" data-tool-type="constructor">
<div class="active-subtool ruler">
<img src="assets/images/ruler_button.png" class="top-tool-img" alt="ruler">
<span class="active-subtool-help"></span>
</div>
<div class="sub-tools">
<div class="sub-tool ruler">
<img src="assets/images/ruler_button.png" class="top-tool-img" alt="ruler">
<span class="tool-help">Select or click on 2 arbitary points</span>
</div>
<div class="sub-tool protractor">
<img src="assets/images/protractor_button.png" class="top-tool-img" alt="protractor">
<span class="tool-help">Select or click on 3 arbitary points</span>
</div>
</div>
</div>
<div class="top-tool point" data-tool-type="constructor">
<div class="active-subtool freepoint">
<img src="assets/images/point_button.png" class="top-tool-img" alt="point">
<span class="active-subtool-help"></span>
</div>
<div class="sub-tools">
<div class="sub-tool freepoint">
<img src="assets/images/point_button.png" class="top-tool-img" alt="point">
<span class="tool-help">Click on the graphics view</span>
</div>
<div class="sub-tool midpoint">
<img src="assets/images/midpoint_button.png" class="top-tool-img" alt="midpoint">
<span class="tool-help">Select or click on 2 arbitary points</span>
</div>
</div>
</div>
<div class="top-tool line" data-tool-type="constructor">
<div class="active-subtool linethrpoints">
<img src="assets/images/line_button.png" class="top-tool-img" alt="line">
<span class="active-subtool-help"></span>
</div>
<div class="sub-tools">
<div class="sub-tool linethrpoints">
<img src="assets/images/line_button.png" class="top-tool-img" alt="line">
<span class="tool-help">Select or click on 2 points</span>
</div>
<div class="sub-tool ray">
<img src="assets/images/ray_button.png" class="top-tool-img" alt="ray">
<span class="tool-help">Select or click on existing ray starting point then second point</span>
</div>
<div class="sub-tool segment">
<img src="assets/images/segment_button.png" class="top-tool-img" alt="segment">
<span class="tool-help">Select or click on 2 points</span>
</div>
<!--<div class="sub-tool fixedsegment">
<img src="assets/images/fixedsegment_button.png" class="top-tool-img" alt="fixedsegment" />
</div>-->
<div class="sub-tool vector">
<img src="assets/images/vector_button.png" class="top-tool-img" alt="vector">
<span class="tool-help">Select or click on 2 points</span>
</div>
<div class="sub-tool parallelline">
<img src="assets/images/parallelline_button.png" class="top-tool-img" alt="parallelline">
<span class="tool-help">Select point and his parallel line or any side of the polygon</span>
</div>
<div class="sub-tool perpendicularline">
<img src="assets/images/perpendicularline_button.png" class="top-tool-img" alt="perpendicularline">
<span class="tool-help">Select point and his perpendicular line or any side of the polygon</span>
</div>
<div class="sub-tool angle_bisector">
<img src="assets/images/angle_bisectorline_button.png" class="top-tool-img" alt="angle_bisectorline">
<span class="tool-help">Select or click on 3 points</span>
</div>
</div>
</div>
<div class="top-tool polygon" data-tool-type="constructor">
<div class="active-subtool freepolygon">
<img src="assets/images/triangle_button.png" class="top-tool-img" alt="polygon">
<span class="active-subtool-help"></span>
</div>
<div class="sub-tools">
<div class="sub-tool freepolygon">
<img src="assets/images/triangle_button.png" class="top-tool-img" alt="polygon">
<span class="tool-help">Select or click on points then click on first point again</span>
</div>
<div class="sub-tool regpolygon">
<img src="assets/images/regpolygon_button.png" class="top-tool-img" alt="regpolygon">
<span class="tool-help">Enter number of vertices then select or click for center and drag to choose the side</span>
</div>
</div>
</div>
<div class="top-tool circle" data-tool-type="constructor">
<div class="active-subtool circlethrpoint">
<img src="assets/images/circle_button.png" class="top-tool-img" alt="circle">
<span class="active-subtool-help"></span>
</div>
<div class="sub-tools">
<div class="sub-tool circlethrpoint">
<img src="assets/images/circle_button.png" class="top-tool-img" alt="circle">
<span class="tool-help">Select or click the circle center then drag for radius</span>
</div>
<div class="sub-tool circleradcenter">
<img src="assets/images/circleradcenter_button.png" class="top-tool-img" alt="circleradcenter">
<span class="tool-help">Enter radius then choose the circle center</span>
</div>
</div>
</div>
<div class="top-tool _3DShape" data-tool-type="constructor">
<div class="active-subtool sphererad">
<img src="assets/images/sphere_button.png" class="top-tool-img" alt="sphererad">
<span class="active-subtool-help"></span>
</div>
<div class="sub-tools">
<div class="sub-tool sphererad">
<img src="assets/images/sphere_button.png" class="top-tool-img" alt="sphererad">
<span class="tool-help">Enter radius then choose the sphere center</span>
</div>
<div class="sub-tool box">
<img src="assets/images/box_button.png" class="top-tool-img" alt="box">
<span class="tool-help">Enter x y and z value sizes</span>
</div>
<div class="sub-tool cylinder">
<img src="assets/images/cylinder_button.png" class="top-tool-img" alt="cylinder">
<span class="tool-help">Select or click the sphere center then drag for radius</span>
</div>
</div>
</div>
<!--<div class="buttons redoBtn">
<span id="redoBtn">↷</span >
</div>
<div class="buttons undoBtn">
<span id="undoBtn">↶</span>
</div>-->
<div class="buttons reloadBtn">
<span id="reloadBtn">↺</span>
</div>
<div id="botom-tools-container">
<div><button id="selected-shape-delete-btn">Delete</button></div>
<div id="shape-attribs">
<span>
<input type="text" id="selected-shape-colorpicker" />
<label id="selected-shape"></label>
</span>
<div id="selected-shape-opacity">
<div id="selected-shape-opacity-slider"></div>
<input type="text" id="selected-shape-opacity-amount" readonly />
</div>
</div>
<div id="projection_change" title="change 3D projection">
<select id="projection_select" disabled="true">
<option value="ortho">Orthographic</option>
<option selected=selected value="persp">Perspective</option>
</select>
</div>
<div id="view-change" title="change view">
<label for="3dview-checkbox" id="view_change_label">
<img src="assets/images/3d_view.png" alt="3d_view">
<input type="checkbox" value="" id="3dview-checkbox" />
</label>
</div>
</div>
</div>
</div>
<div id="render-canvases">
<canvas id='canvas2d'></canvas>
<canvas id='canvas2DOverlay' width="1" height="1"></canvas>
</div>
<script type='text/javascript' src='assets/js/lib/jquery.js'></script>
<script type='text/javascript' src='assets/js/lib/jquery-ui.js'></script>
<script type='text/javascript' src='assets/js/lib/spectrum.js'></script>
<script type='text/javascript' src='assets/js/lib/three.min.js'></script>
<script type='text/javascript' src='assets/js/app/dssgeometry.js'></script>
<script type='text/javascript' src='assets/js/lib/utils.js'></script>
<script type='text/javascript' src='assets/js/lib/math.js'></script>
<script type='text/javascript' src='assets/js/lib/shapes.js'></script>
<script type='text/javascript' src='assets/js/lib/engine.js'></script>
<script type='text/javascript' src='assets/js/lib/tools.js'></script>
<script type='text/javascript' src='assets/js/app/app.js'></script>
<script type='text/javascript' src='assets/js/app/main.js'></script>
</body>
</html>