forked from heliotropical-gits/ThompsonTetrahedron-WebApp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (184 loc) · 6.8 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
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
<!DOCTYPE html>
<!-- copyright 2020 Frederic Houlle-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta license> Licensed under GNU-GPL-3.0-or-later
<title>Thompson Tetrahedron Applet</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<script type='module' src='scripts/thompson_tetrahedron_app.js'></script>
<script src='scripts/jscolor.js'></script>
<noscript>
<div class="warning-no-script">
"Your browser does not support javascript, or you've disabled scripts using e.g. NoScript. Please enable scripts to use the Thompson Tetrahedron."
</div>
</noscript>
<div class="header monospace">
<div id="info">
<div class="toggler" id="info-toggle">
<span id="info-toggle-text"> < hide help</span>
</div>
<div id="info-inner">
<p>Mouse left click to rotate.</p>
<p>Mouse right click to pan.</p>
<p>Mouse wheel to zoom / unzoom. </p>
<p>Click on any line to display its <br>corresponding vector information.</p>
<p>Click the same line a second time to <br> display the opposite vector information.</p>
<p>Click the same line a third time <br> to remove it.</p>
<p>Twinned Burgers' Vectors are only <br> provided in Thompson Notation.<br>Assume (d) = (111) as mirror plane.</p>
</div>
</div>
<div id="mobile-info">
<p>Drag to rotate, pinch to zoom.</p>
<p>Drag with two fingers to pan.</p>
<p>Tap lines for info.</p>
</div>
<div id="basis-warning">
<span style="color: red;"> Warning: The coordinates basis you defined is not right-handed and does not conserve orientation. </span>
</div>
<div id="settings-outer">
<div class="toggler" id="settings-toggle">
<span id="settings-toggle-text"> > hide settings</span>
</div>
<div id="settings-sub">
<ul>
<li class="cr boolean">
<div>
<span class="property-name">Show Coordinates Axis</span>
<div>
<input type="checkbox" id="show-coordinates-axis" checked="checked">
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show Tetrahedron Faces</span>
<div>
<input type="checkbox" id="show-faces" checked="checked">
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show Lines</span>
<div>
<input type="checkbox" id="show-lines" checked="checked">
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show Inner a/3 Vectors</span>
<div>
<input type="checkbox" id="show-inner-lines">
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show Twinning Tetrahedron (TT) Faces</span>
<div>
<input type="checkbox" id="show-twinning-tetrahedron">
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show TT Lines</span>
<div>
<input type="checkbox" id="show-twinning-tetrahedron-lines">
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show TT a/3 Vectors</span>
<div>
<input type="checkbox" id="show-twinning-tetrahedron-inner-lines">
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Text style: Serif or Sans-Serif</span>
<div>
<button type="button" id="serif-button">serif</button>
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show Point Labels / TT Labels </span>
<div>
<input type="checkbox" id="show-text" checked="checked">
<input type="checkbox" id="show-twinning-text">
</div>
<div>
<button type="button" id="clear-labels-button">clear vector labels</button>
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Show Plane Info</span>
<div>
<input type="checkbox" id="show-plane-info" >
</div>
</div>
</li>
<li>
<div>
<span class="property-name">Coordinates Basis</span>
<div>
<form>
<label style="color: red;">x</label>
<input type="text" id="xx" name="xx" value=1 maxlength=2><input type="text" id="xy" name="xy" value=0 maxlength=2><input type="text" id="xz" name="xz" value=0 maxlength=2><br>
<label style="color: green;">y</label>
<input type="text" id="yx" name="yx" value=0 maxlength=2><input type="text" id="yy" name="yy" value=1 maxlength=2><input type="text" id="yz" name="yz" value=0 maxlength=2><br>
<label style="color: blue;">z</label>
<input type="text" id="zx" name="zx" value=0 maxlength=2><input type="text" id="zy" name="zy" value=0 maxlength=2><input type="text" id="zz" name="zz" value=1 maxlength=2><br>
</form>
<button type="button" id="apply-button">Apply</button>
</div>
</div>
</li>
<li>
<div>
<span class="property-name">View Type</span><br>
<button type="button" id="camera-switch">Perspective</button>
</div>
<div>
<span class="property-name">Align View To Direction</span><br>
<button type="button" id="align-xy">xy</button>
<button type="button" id="align-yz">yz</button>
<button type="button" id="align-zx">zx</button>
</div>
</li>
<li>
<div>
<span class="property-name">Background Color</span><br>
<span>(HEX code, see <a href=https://htmlcolorcodes.com/color-picker/#>here</a>.)</span>
<input type="text" id="background-color" value=#ffffff> <button type="button" id="background-color-apply">Apply</button>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer monospace">
<button type="button" id="export-png" alt="export .png">export .png</button><br>
<span class="footer-text">Thompson tetrahedron web app by <a href="http://www.gmp.ww.uni-erlangen.de/people_show.php?id_p=69">Frédéric Houllé</a></span><br>
<span class="footer-text">Git <a href="https://github.com/Richowl/ThompsonTetrahedron-WebApp">here</a>, © 2020 Frédéric Houllé</span><br>
<span class="footer-text">Licensed under GPL-3.0-or-later</span><br>
<span class="footer-text">Powered by <a href="https://threejs.org">three.js</a></span><br>
<span class="footer-text">Requires IE version > 8, or any other modern web browser</span>
</div>
</body>
</html>