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.
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_HOMEThen build with
npm exec mam optimade/cifplayer/playerThis 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 mamand 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.
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
See a detailed comparison as well as the blog post, written in 2015. As of now, it is unfortunately severely outdated.
