{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Demo of [PV](http://biasmv.github.io/pv/). ![PV demo image](http://biasmv.github.io/pv/1r6a.png)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script type=\"text/javascript\">\n",
       "require.config({\n",
       "    packages: [\n",
       "        {\n",
       "            name: 'pv',\n",
       "            location: 'https://zmughal.github.io/pv-js-serve/',\n",
       "            main: 'pv'\n",
       "        }\n",
       "    ]\n",
       "});\n",
       "\n",
       "</script>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       " <div id=\"pvgl\" style=\"margin-left: auto; width:300px; height: 300px;\"></div> "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<script type=\"text/javascript\">\n",
       "function load_pdb(pdb_id) {\n",
       "    require( [\"pv\"], function(pv) {\n",
       "        var pvObj = pv.Viewer(document.getElementById('pvgl'), \n",
       "                           { quality : 'high', width: 'auto', height : 'auto',\n",
       "                             antialias : true, outline : true});\n",
       "\n",
       "        var structure;\n",
       "\n",
       "        function load(pdb_id) {\n",
       "          $.get( 'http://biasmv.github.io/pv/pdbs/'+pdb_id+'.pdb' )\n",
       "              .done(\n",
       "                  function(data) {\n",
       "                        structure = pv.io.pdb(data);\n",
       "                        console.log(structure);\n",
       "                        preset();\n",
       "                        pvObj.centerOn(structure);\n",
       "                  });\n",
       "        }\n",
       "        function preset() {\n",
       "          pvObj.clear();\n",
       "          var ligand = structure.select({rnames : ['RVP', 'SAH']});\n",
       "          pvObj.ballsAndSticks('ligand', ligand);\n",
       "          pvObj.cartoon('protein', structure);\n",
       "        }\n",
       "        load(pdb_id);\n",
       "    });\n",
       "}\n",
       "\n",
       "</script>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/markdown": [
       "The above is a WebGL-based rendering of\n",
       "[PDB 1r6a](http://www.rcsb.org/pdb/explore.do?structureId=1R6A)."
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<script type=\"text/javascript\">\n",
       "load_pdb('1r6a');\n",
       "\n",
       "</script>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "IPerl->display( IPerl->js( <<'JS' ) );\n",
    "require.config({\n",
    "    packages: [\n",
    "        {\n",
    "            name: 'pv',\n",
    "            location: 'https://zmughal.github.io/pv-js-serve/',\n",
    "            main: 'pv'\n",
    "        }\n",
    "    ]\n",
    "});\n",
    "JS\n",
    "\n",
    "IPerl->display( IPerl->html( qq| <div id=\"pvgl\" style=\"margin-left: auto; width:300px; height: 300px;\"></div> | ) );\n",
    "IPerl->display( IPerl->js( <<'JS' ) );\n",
    "function load_pdb(pdb_id) {\n",
    "    require( [\"pv\"], function(pv) {\n",
    "        var pvObj = pv.Viewer(document.getElementById('pvgl'), \n",
    "                           { quality : 'high', width: 'auto', height : 'auto',\n",
    "                             antialias : true, outline : true});\n",
    "\n",
    "        var structure;\n",
    "\n",
    "        function load(pdb_id) {\n",
    "          $.get( 'http://biasmv.github.io/pv/pdbs/'+pdb_id+'.pdb' )\n",
    "              .done(\n",
    "                  function(data) {\n",
    "                        structure = pv.io.pdb(data);\n",
    "                        console.log(structure);\n",
    "                        preset();\n",
    "                        pvObj.centerOn(structure);\n",
    "                  });\n",
    "        }\n",
    "        function preset() {\n",
    "          pvObj.clear();\n",
    "          var ligand = structure.select({rnames : ['RVP', 'SAH']});\n",
    "          pvObj.ballsAndSticks('ligand', ligand);\n",
    "          pvObj.cartoon('protein', structure);\n",
    "        }\n",
    "        load(pdb_id);\n",
    "    });\n",
    "}\n",
    "JS\n",
    "\n",
    "IPerl->display( IPerl->markdown( q|The above is a WebGL-based rendering of\n",
    "[PDB 1r6a](http://www.rcsb.org/pdb/explore.do?structureId=1R6A).|) );\n",
    "\n",
    "IPerl->display( IPerl->js( <<'JS' ) );\n",
    "load_pdb('1r6a');\n",
    "JS"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "IPerl 0.009",
   "language": "perl",
   "name": "iperl"
  },
  "language": "Perl",
  "language_info": {
   "file_extension": ".pl",
   "mimetype": "text/x-perl",
   "name": "perl",
   "version": "5.26.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}