Library name | 3Dmol |
Difficulty | Medium (intermediate JavaScript knowledge required) |
Returned value | Graphic object |
Description | WebGL accelerated JavaScript molecular graphics library. |
Link | https://github.com/3dmol/3Dmol.js |
Documentation | http://3dmol.csb.pitt.edu/doc/index.html |
License | BSD-3 |
Library implementation
- Go to ‘Tools’ menu, select ‘Add library’ (read more how to add library here)
- Give a name to the library (3DMol), add required file:
Url 1: https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.7/3Dmol-nojquery-min.js
- Add description (optional).
- Click ‘OK’.
Custom functions
There are different graphic objects offered by this library. We will use one of them for this example (read more how to add a custom function here):
- MOLA
This function is only our proposal to deal with the library, but user can define their own function(s).
Function name | DMOLA |
Arguments | – dataset |
Syntax | =DMOLA(dataset) |
Description |
Calls the library function and returns the result as an graphic object. Dataset is a data bank model and is loaded from server. |
Function body |
//create temporary container for graphic manipulations var garbageContainer; if (!document.getElementById('garbageContainer')) { garbageContainer = document.createElement('div'); garbageContainer.id = 'garbageContainer'; document.body.appendChild(garbageContainer); } else { garbageContainer = document.getElementById('garbageContainer'); } //create container element (div) for graph and set unique id property var tempUUID = Formula.CREATEUUID(16); var container = document.createElement('div'); container.id = '3DMOL_' + tempUUID; //set properties of the container container.style.width = '500px'; container.style.height = '400px'; container.style.position = 'relative'; //append graph container to the temporary container garbageContainer.appendChild(container); //create 3Dmol object and append it to the container var element = $('#3DMOL_' + tempUUID); var viewer = $3Dmol.createViewer(element); $3Dmol.download("pdb:"+dataset,viewer,{multimodel:true, frames:true},function(){ viewer.setStyle({}, {cartoon:{color:"spectrum"}}); viewer.render(); }); //return graph to the cell return container; |
Example | =DMOLA(1A01) |
Ready spreadsheet is presented below: