forked from smrtalec95/UnitCellVisualizer
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
207 lines (182 loc) · 8.57 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<html>
<head>
<title>Lattice Structures</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="crystal.css">
<script type="text/javascript" src="dist/main.js"></script>
</head>
<body>
<div id="simulation">
<canvas id="canvas" width="900px" height="675"></canvas>
<div id="hcpHighlightTypeSelector">
<label style="display: flex; justify-content: space-between;">
<input id="hcpHighlightTypeHorizontal" type="radio" name="hcp-highlight-type" value="horizontal">
<img width="100" src="resources/hcp-horizontal-icon.png">
</label>
<label style="display: flex; justify-content: space-between;">
<input id="hcpHighlightTypeVertical" type="radio" name="hcp-highlight-type" value="vertical">
<img width="60" src="resources/hcp-vertical-icon.png">
</label>
<label style="display: flex; justify-content: space-between;">
<input id="hcpHighlightTypeNone" type="radio" name="hcp-highlight-type" value="vertical" checked>
<p style="padding: 10px; font-family: Arial; font-size: 20px;">None</p>
</label>
</div>
<div id="hcpRingAndLevelSelector">
<div>
<p><label>
<input id="hcpShowRing-0" type="checkbox" checked>
Ring 0
</label></p>
<p><label>
<input id="hcpShowRing-1" type="checkbox" checked>
Ring 1
</label></p>
<p><label>
<input id="hcpShowRing-2" type="checkbox" checked>
Ring 2
</label></p>
</div>
<div style="border-top: 1px solid #444;">
<p><label>
<input id="hcpShowLevel--1" type="checkbox" checked>
Level -1
</label></p>
<p><label>
<input id="hcpShowLevel-0" type="checkbox" checked>
Level 0
</label></p>
<p><label>
<input id="hcpShowLevel-1" type="checkbox" checked>
Level 1
</label></p>
<p><label>
<input id="hcpShowLevel-2" type="checkbox" checked>
Level 2
</label></p>
</div>
</div>
<div id="viewModeSelector">
<p><label style="display: flex; justify-content: space-between;">
<input id="unitCellViewMode" type="radio" name="view-mode" value="unitCell">
Unit Cell
</label></p>
<p><label style="display: flex; justify-content: space-between;">
<input id="layerViewMode" type="radio" name="view-mode" value="layer" checked>
Layer
</label></p>
<p><label style="display: flex; justify-content: space-between;">
<input id="coordViewMode" type="radio" name="view-mode" value="coord">
Coordination
</label></p>
<p><label style="display: flex; justify-content: space-between;">
<input id="singleViewMode" type="radio" name="view-mode" value="single">
Single
</label></p>
</div>
<div id="expansionSliderContainer">
<div id="expansionSliderLabel">Expansion</div>
<input type="range" min="0" max="1" value="0" step="0.001" class="slider" id="expansionSlider">
</div>
<div id="controlContainer">
<p><h5>Lattice Structures</h5></p>
<select id="crystalSelector">
<option value="-1" disabled>--- Select a Lattice ---</option>
<option value="0" selected>Simple Cubic</option>
<option value="1">Body-Centered Cubic</option>
<option value="2">Face-Centered Cubic</option>
<option value="3">Sodium Chloride</option>
<option value="4">Calcium Fluoride</option>
<option value="6">HCP</option>
</select>
<center>
<p>
<button id="jokes">Amuse me</button>
<button id="instructions">Key Controls</button>
</p>
<p>
<button id="legend">Legend</button>
<button id="about">About...</button>
</p>
</center>
</div>
<div id="crystalType">Simple Cubic</div>
<div id="legendText">
<center>
<p id="Ca"><strong>Calcium</strong></p>
<p id="F"><strong>Fluoride</strong></p>
<p id="Na"><strong>Sodium</strong></p>
<p id="Cl"><strong>Chloride</strong></p>
</center>
</div>
</div>
<button id="color" style="display: none;">Coloring</button>
<center><div id="aboutText">
<button id="closeAbout">X</button>
<center><h1>About</h1></center>
<p>
This is a Unit Cell Visualization simulation designed for use in
CHEM 124/127 at Cal Poly. The simulation is designed with student
interaction in mind, and provides many features to facilitate
student's understanding of concepts relative to lattice structures.
</p>
<p>
This is an open source project. It is developed in JavaScript,
using WebGL for all graphics. The project's code is open source
and currently resides
<a href="https://github.com/i-yam-jeremy/UnitCellVisualizer">on Github</a>.
</p>
<center><h1>Contributors</h1></center>
<h2>Dr. Zahra Alghoul</h2>
<p>
Initial project specifications, and Chemistry knowledge. Ensured the
simulation's displays were accurate to their real world
counterparts. Specified simulation features.
</p>
<h2>Dr. Zoe Wood</h2>
<p>
Initial project specifications, and Graphics
knowledge. Oversaw Corbin's work on the simulation as his senior
project advisor, as well as oversaw Alec's work on the simulation
as his final project for CPE 471, Into to Computer Graphics.
</p>
<h2>Dr. Gregory Scott</h2>
<p>
Oversaw Jeremy's work and contributed to the dissemination.
</p>
<h2>Corbin Gruber</h2>
<p>
Initial project design and implementation. Created initial design
for the simulation. Implementation and testing. Created the SC, BCC,
and FCC simulations, along with expand, contract, rotations,
zooming, translucency, inspection, and layering views. Original
control schema involving primarily keystroke controls, along with
mouse movement for rotating the views.
</p>
<h2>Alec James</h2>
<p>
Updated project design and implementation. Added on
Sodium Chloride and Calcium Fluoride along with all features
implemented by Corbin in the simple crystal types. Added on
coordination number views for the simple crystal types. Updated
control schema using buttons and dropdowns for easier navigation
and control, as well as improved zooming and expand/contract controls.
Added option to change lattice coloring to deactivated, colored
fractional atoms (on FCC), and deactivate ions (for NaCl and CaF2).
</p>
<h2>Jeremy Berchtold</h2>
<p>
Added HCP lattice with custom controls allowing users to better inspect the cells by showing/hiding some.
Improved UI/UX by using fullscreen viewport with overlays.
Reduced the number of key commands and replaced with visual controls to improve
ease of use. Added expansion slider to control expansion with a visual control. Fixed
FCC coloring to show layering. Implemented FCC layering along the 111 plane.
</p>
<center><h1>Citation</h1></center>
<p>Corbin Gruber, Alec James, Jeremy T. Berchtold, Zoe J. Wood, Gregory E. Scott, and Zahra Alghoul</p>
<p>Journal of Chemical Education 2020 97 (7), 2020-2024</p>
<p>DOI: <a href="https://doi.org/10.1021/acs.jchemed.9b01207">10.1021/acs.jchemed.9b01207</a></p>
<button id="return">Return</button>
</div></center>
</body>
</html>