Getting started with PV¶
Getting the PV source-code¶
The simplest way to get PV into your website is by downloading one of the release tarballs from github.com. The release tarballs contain the self-contained development and minified code for PV which can directly be integrated into your website.
Installing with bower¶
To install PV with bower, change to your project directory and type the following:
bower install bio-pv
Bower support has only been added to versions 1.8 and newer, so it won’t be possible to use this method of installation for older versions.
Installing from git¶
Alternatively, you can clone the github repository of PV. This approach is only recommended if you are planning to make changes to PV itself. Otherwise it’s simpler to either download one of the release tarballs or install through bower.
git clone https://github.com/biasmv/pv cd pv
The minified version of PV is checked into the git repository (
bio-pv.min.js). You may either use this file directly, or create it from the sources. In the case of the latter, you will need Grunt and NPM installed on your system. Use the following commands to build:
# setup dev environment for PV npm install --setup-dev # runs grunt and applies some additional name mangling to the source scripts/make.sh
Upon success, bio-pv.min.js is placed in the project’s top-level folder.
Setting up a small website¶
The following minimal example shows how to include PV in a website for protein structure visualisation. For that purpose, we will create a small index.html file containing the bare-minimum required to run PV. The example does not depend on any external library. But of course it is also possible to combine PV with jQuery or other popular JS libraries.
In case you want to recreate the example, create a directory for the index.html file and change into that directory.
The index.html file¶
The page is essentially a bare-bone HTML page which includes the pv.min.js file. In the preamble, we define a meta element to prevent page scrolling and load the PV library.
Now on to the interesting part. First, we initialise the viewer with custom settings. The width and height of the viewer are initialized to 600 pixels with antialising enabled and a medium detail level. These settings have been tested on a variety of devices and are known to work well for typical proteins.
Most of the work happens in loadMethylTransferase. This function will be called when the DOMContentLoaded event fires and we will use it to populate the WebGL viewer with a nice protein structure.
Running the Example¶
Before running the example, we have to make sure that the pv.min.js file and the PDB file for the methyl transferase are in the right location. The easiest is to copy the pv.min.js file from the release tarball and fetch the PDB file for 1r6a from the PDB website. Then serve the files using Python’s SimpleHTTPServer:
python -m SimpleHTTPServer
And visit the localhost:8000 with a WebGL-enabled browser.