search

tilde-lab / cifplayer

Minimalistic and fast HTML5 visualization of chemical structures in CIF, POSCAR, and OPTIMADE formats
http://nanoshow.mpds.io/
MIT License
21 stars 6 forks source link
cif cifs crystal-structure crystallography optimade poscar symmetry threejs

readme

HTML5 CIF player

DOI FOSSA Status

In-browser ultra-fast and lightweight renderer of the crystallographic information files (CIF), OPTIMADE JSON, and VASP POSCAR atomic structures, written in a pure JavaScript.

In a compiled form it is only one standalone embeddable file web.js of 300 Kb (gzipped). See it online. Only a web-browser is required. After the code is loaded, no internet connection is needed.

Technical details

This app is written in the $mol framework and employs three.js for 3d-rendering and tween.js for phonon animation. Scientific formats conversion is done with matinfio.js.

Compilation is done as follows. Note that, unlike many other frontend frameworks, $mol provides the same single environment for all its projects, under the standard namespace scheme. That is, all your $mol-based code lives inside the same directory $MOL_HOME. So if you don't have $MOL_HOME yet, please create it and navigate there:

mkdir $MOL_HOME && cd $MOL_HOME

Then build with

npm exec mam optimade/cifplayer/player

This will fetch the MAM server (MAM stands for the $mol abstract modules), clone this project, and compile it inside optimade/cifplayer/player/-/ subfolder. You will need the web.js bundle, that's it.

Development is similar to above: inside the $MOL_HOME, start the MAM dev-server with

npm exec mam

and navigate to http://localhost:9080, there select optimade namespace, then cifplayer, then app. As you go through the folder structure, the selected project is being cloned and compiled on the fly, inside the corresponding subfolder of $MOL_HOME.

Integration with the other software

The compiled bundle web.js defines a web-component optimade-cifplayer-player. It can be controlled in a standard way with e.g.

const player = document.getElementsByTagName('optimade-cifplayer-player')[0].view;
player.data(structure);

Or in another $mol application natively, using a tree markup:

    <= Your_block_name $optimade_cifplayer_player
        data <= your_data_string null

Comparison with the other open-source plugin-free engines

See a detailed comparison as well as the blog post, written in 2015. As of now, it is unfortunately severely outdated.

License

FOSSA Status