A pure JavaScript wrapper combining BioJS MSA and PV.
To use, import the required scripts and CS into your HTML page:
<head>
<link href="proxy.php?url=https%3A%2F%2Fgithub.com.%2Flib%2Fmsa%2Fmsa.css" rel="stylesheet">
<link href="proxy.php?url=https%3A%2F%2Fgithub.com.%2Flib%2Fpv-msa%2Fpv-msa.css" rel="stylesheet">
</head>
...
<script src="proxy.php?url=https%3A%2F%2Fgithub.com.%2Flib%2Fpv%2Fbio-pv.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com.%2Flib%2Fmsa%2Fmsa.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com.%2Flib%2Fpv-msa%2Fpv-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