@ccp-nc/crystvis-js
Version:
A Three.js based crystallographic visualisation tool
90 lines (81 loc) • 3.86 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="demo.css">
<script src="demo.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div style="width: 100%; height: 100%">
<div style="float: left" id="main-app">
Loading...
</div>
<div style="float: right; width: 30%">
<table>
<caption>Input controls</caption>
<tbody>
<tr>
<td>
<input id="file-load" type="file" value="Load file">
</td>
<td>
Supercell:
<input id="scell-x" type="text" size="3">
<input id="scell-y" type="text" size="3">
<input id="scell-z" type="text" size="3">
</td>
</tr>
<tr>
<td>
<input type="button" name="" value="Load file" onclick="loadFile()">
</td>
<td>
<input id="molcryst-check" type="checkbox" name="" value="" placeholder="">Load as molecular crystal
</td>
</tr>
<tr>
<td>
<input type="button" name="" value="Show unit cell" onclick="changeDisplayed({'cell': [[0,0,0]]})">
</td>
<td>
<input type="button" name="" value="Show 5 Ang sphere" onclick="changeDisplayed({'sphere': [[0,0,0], 5.0]})">
</td>
</tr>
<tr>
<td colspan="" rowspan="" headers="">
<input id="label-check" type="checkbox" name="" value="false" onchange="changeLabels()">Show labels
</td>
<td colspan="" rowspan="" headers="">
<input id="ellipsoid-check" type="checkbox" name="" value="false" onchange="changeEllipsoids()">Show ellipsoids
</td>
</tr>
<tr>
<td>
<input id="isosurf-check" type="checkbox" name="" value="false" onchange="changeIsosurface()">Show isosurface
</td>
<td>
<input type="text" id="vdw-f" size="5" value="1.0"> Van der Waals scaling
</td>
</tr>
<tr>
<td>
<!-- message to display -- input -->
<input id="message" type="text" name="" value="Hello world!">
</td>
<td>
<!-- button to display message -->
<input type="button" name="" value="Display message" onclick="displayMessage()">
<!-- button to clear message -->
<input type="button" name="" value="Clear messages" onclick="clearMessages()">
</td>
</tr>
</tbody>
</table>
<div id='colorgrid'>
</div>
</div>
</div>
</body>
</html>