Demo of PV. PV demo image

In [1]:
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

The above is a WebGL-based rendering of PDB 1r6a.

In [ ]: