CifVis Widget Demo

Introduction

CifVis is a JavaScript library that allows you to visualize crystallographic information files (CIF) directly in a web browser. The library provides a convenient web component (<cifview-widget>) that makes it easy to display interactive 3D models of crystal structures in your web pages.

Adding a crystal structure visualization to your webpage is as simple as including the CifVis library and adding the <cifview-widget> element:

<script type="module" src="https://niolon.github.io/cifvis/dist/cifvis.alldeps.js"></script>

<cifview-widget 
    src="path/to/structure.cif"
    caption="Crystal Structure">
</cifview-widget>

Although you might consider uploading the library to your own webserver if you are after something persistent.

This demo page showcases various features of the CifVis widget and provides code examples for implementation.

Basic Usage

The CifVis widget provides several interactive features:

• Rotation: Click and drag to rotate the structure
• Zoom: Use the mouse wheel to zoom in/out
• Selection: Click on atoms or bonds to select and view details, double click on the background to deselect all selections.
• Toggle display: Use buttons at the top right to toggle hydrogens, disorder, and symmetry
• Reset view: Double right-click to reset the camera position

Loading CIF Data

You can load CIF data in two ways:

<cifview-widget 
    src="https://example.com/path/to/structure.cif"
    caption="Structure from URL">
</cifview-widget>

<cifview-widget 
    data="data_
_cell.length_a 10.5
_cell.length_b 12.3
_cell.length_c 15.2
_cell.angle_alpha 90
_cell.angle_beta 90
_cell.angle_gamma 90
# ... rest of CIF data ...
"
    caption="Structure from data string">
</cifview-widget>

Display Options

The CifVis widget provides several display options that can be controlled via attributes:

Growing symmetry

You can grow the symmetry one additional sphere using bonds or hydrogen bonds contained in the cif tables:

Setting Display Options

Set initial display options using the following attributes, if a display mode is incompatible with the given structure (say there are no anisotropic hydrogens, even though hydrogen-mode="anisotropic" was selected as start mode), the widget will automatically fall back to a valid option:

<cifview-widget 
    src="structure.cif"
    caption="My Structure"
    hydrogen-mode="constant"
    disorder-mode="all"
    symmetry-mode="bonds-yes-hbonds-no">
</cifview-widget>

Filtered Atoms

You can exclude specific atoms from the visualization using the filtered-atoms attribute. This is particularly useful for removing solvent molecules or counter-ions to focus on the main structure. Individual atoms are separated by a comma a range (inclusive) can be indicated by the > sign. The used order is determined by the atom_site table:

<cifview-widget 
    src="structure.cif"
    caption="Structure with solvent removed"
    filtered-atoms="C200,H200,C201>H218">
</cifview-widget>

Configuration Options

CifVis provides extensive configuration options through the options attribute. This attribute accepts a JSON string with various settings that control the appearance and behavior of the visualization.

{
  "elementProperties": {
    "Fe": {
      "radius": 1.4,
      "atomColor": "#FF5733",
      "ringColor": "#ffffff"
    },
    "O": {
      "atomColor": "#0088ff",
      "radius": 0.7
    }
  }
}

Complete Configuration Example

Here's a comprehensive example showing how to use the options attribute to customize various aspects of the CifVis widget:

<cifview-widget 
    src="structure.cif"
    caption="Customized Crystal Structure"
    options='{
        "camera": {
            "fov": 50,
            "initialPosition": [0, 0, 15],
            "wheelZoomSpeed": 0.001
        },
        "selection": {
            "mode": "multiple",
            "markerMult": 1.5,
            "bondMarkerMult": 2.0
        },
        "atomDetail": 4,
        "atomColorRoughness": 0.5,
        "atomColorMetalness": 0.3,
        "bondRadius": 0.08,
        "bondColor": "#555555",
        "elementProperties": {
            "Fe": {
                "atomColor": "#FF5733",
                "radius": 1.4,
                "ringColor": "#ffffff"
            },
            "O": {
                "atomColor": "#0088ff",
                "radius": 0.7
            }
        }
    }'>
</cifview-widget>