index.html

<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>