A pure JavaScript wrapper combining BioJS MSA and PV.
To use, import the required scripts and CS into your HTML page:
<head>
<link href="/lib/msa/msa.css" rel="stylesheet">
<link href="/lib/pv-msa/pv-msa.css" rel="stylesheet">
</head>
...
<script src="/lib/pv/bio-pv.min.js"></script>
<script src="/lib/msa/msa.min.js"></script>
<script src="/lib/pv-msa/pv-msa.js"></script>
Somewhere in your HTML file, create an empty div that will be used to house the protein viewer:
<div id="viewer"></div>
In you JavaScript, create the protein viewer and load the structure and sequence into it:
// create the viewer
var viewer = new PV("viewer");
viewer.render();
// create a structure object
var seq1 = new Structure(
"target001", // id
"target001", // name
"VLSPADKTNVKAAWGKVGAHAG--EYGAEALERMFLSFPTTKTYFP---HFDLSHGSAQVKGHGKKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTPAVHASLDKFLASVSTVLTSKYR", // sequence
"/lib/data/target001.pdb", // URL for PDB file
"red", // color
1,
false
)
// add structure to viewer
viewer.addStructure(seq1, true);Note: you will need to have npm and node installed for the demo to work.
An example of how to use PV-MSA can be found in index.html. To run a demo, install express using the following command:
npm install
Once express is installed, you can easily run the demo by executing:
npm start