Demo of PV.
IPerl->display( IPerl->js( <<'JS' ) );
require.config({
packages: [
{
name: 'pv',
location: 'https://zmughal.github.io/pv-js-serve/',
main: 'pv'
}
]
});
JS
IPerl->display( IPerl->html( qq| <div id="pvgl" style="margin-left: auto; width:300px; height: 300px;"></div> | ) );
IPerl->display( IPerl->js( <<'JS' ) );
function load_pdb(pdb_id) {
require( ["pv"], function(pv) {
var pvObj = pv.Viewer(document.getElementById('pvgl'),
{ quality : 'high', width: 'auto', height : 'auto',
antialias : true, outline : true});
var structure;
function load(pdb_id) {
$.get( 'http://biasmv.github.io/pv/pdbs/'+pdb_id+'.pdb' )
.done(
function(data) {
structure = pv.io.pdb(data);
console.log(structure);
preset();
pvObj.centerOn(structure);
});
}
function preset() {
pvObj.clear();
var ligand = structure.select({rnames : ['RVP', 'SAH']});
pvObj.ballsAndSticks('ligand', ligand);
pvObj.cartoon('protein', structure);
}
load(pdb_id);
});
}
JS
IPerl->display( IPerl->markdown( q|The above is a WebGL-based rendering of
[PDB 1r6a](http://www.rcsb.org/pdb/explore.do?structureId=1R6A).|) );
IPerl->display( IPerl->js( <<'JS' ) );
load_pdb('1r6a');
JS