-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
More changes to improve formatting (mostly the control buttons)
- Loading branch information
1 parent
ba00cbe
commit 4225e68
Showing
3 changed files
with
249 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>JSAV</title> | ||
|
|
||
| <!-- JQuery and JQuery-UI --> | ||
| <link href="external/jquery.css" rel="stylesheet" /> | ||
| <script type='text/javascript' src='external/jquery-1.10.2.min.js'></script> | ||
| <script type='text/javascript' src='external/jquery-ui-1.10.4.custom.min.js'></script> | ||
|
|
||
| <!-- JSAV --> | ||
| <link href="JSAV.css" rel="stylesheet" /> | ||
| <script type='text/javascript' src='JSAV.js'></script> | ||
|
|
||
| <!-- If using tooltipster --> | ||
| <link href="external/tooltipster-master/css/tooltipster.css" rel="stylesheet" /> | ||
| <script type='text/javascript' src='external/tooltipster-master/js/jquery.tooltipster.min.js'></script> | ||
| <script> | ||
| function enableTooltipster() | ||
| { | ||
| $(document).ready(function() { | ||
| $('.tooltip').tooltipster(); | ||
| }); | ||
| } | ||
| enableTooltipster(); | ||
| </script> | ||
| <!-- END --> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <script type='text/javascript'> | ||
| var MySeqs = []; | ||
|
|
||
| MySeqs.push({ id :"id1b1.L", sequence :"SASSSVNYMYACREFGHIKLMNPTRSTVWY"}); | ||
| MySeqs.push({ id :"id1a.L", sequence :"SASSSTNYMYACDEFGHIKLMNPQRSTVWY"}); | ||
| MySeqs.push({ id :"id2b1.L", sequence :"SASSTCNYMTACDEEGHIKLMNP-RSTCWY"}); | ||
| MySeqs.push({ id :"id2a.L", sequence :"SASSSCNYMTLCDEHGHIKLMNP-RSTCWY"}); | ||
| MySeqs.push({ id :"id2a1.L", sequence :"SASSSCNYMTLCDEHGHIKLMNPQRSTCWY"}); | ||
| MySeqs.push({ id :"id1.L", sequence :"SASSSVNYMYACDEFGHIKLMNPQRSTVWY"}); | ||
| MySeqs.push({ id :"id1b.L", sequence :"SASSSVNYMYACREFGHIKLMNPQRSTVWY"}); | ||
| MySeqs.push({ id :"id1a1.L", sequence :"SASSSTNYMYLCDEFGHIKLMNPQRSTVWY"}); | ||
| MySeqs.push({ id :"id2.L", sequence :"SASSSCNYMTACDEHGHIKLMNP-RSTCWY"}); | ||
| MySeqs.push({ id :"id2b.L", sequence :"SASSTCNYMTACDEHGHIKLMNP-RSTCWY"}); | ||
| </script> | ||
|
|
||
| <h1>JavaScript Sequence Alignment Viewer (JSAV)</h1> | ||
| <p>JSAV is a JavaScript program to display and sort a sequence | ||
| alignment. The sorting method chooses a representative sequence (one | ||
| which is most similar to all the other sequences) placing that first | ||
| in the list. To add to the sorted list, it iteratively chooses the | ||
| sequences that are most similar to the last one in the list and, of | ||
| those chooses the sequence most similar to the representative | ||
| sequence.</p> | ||
|
|
||
| <p>Sequences are:</p> | ||
| <script type='text/javascript'> | ||
| function myAction(divId, sequences) | ||
| { | ||
| var seqString = ""; | ||
| for(var i=0; i<sequences.length; i++) | ||
| { | ||
| seqString += ">" + sequences[i].id + "\n"; | ||
| seqString += sequences[i].sequence + "\n"; | ||
| } | ||
| alert(seqString); | ||
| } | ||
|
|
||
| var MyOptions = Array(); | ||
| MyOptions.sortable = true; | ||
| MyOptions.selectable = true; | ||
| MyOptions.deletable = true; | ||
| MyOptions.border = false; | ||
| MyOptions.highlight = [3,5,10,14]; | ||
| MyOptions.submit = "http://www.bioinf.org.uk/cgi-bin/echo.pl"; | ||
| MyOptions.submitLabel = "Submit"; | ||
| MyOptions.action = "myAction"; | ||
| MyOptions.actionLabel = "Process"; | ||
| MyOptions.toggleDotify = true; | ||
| MyOptions.toggleDotifyLabel = "Dotify"; | ||
| MyOptions.toggleNocolour = true; | ||
| MyOptions.toggleNocolourLabel = "Nocolour"; | ||
| MyOptions.fasta = true; | ||
| MyOptions.fastaLabel = "Export"; | ||
| MyOptions.consensus = true; | ||
| MyOptions.colourScheme = "zappo"; | ||
| MyOptions.selectColour = true; | ||
| MyOptions.callback = "enableTooltipster"; | ||
| MyOptions.colourChoices = ["Taylor", "Clustal", "Zappo", "HPhob"]; | ||
|
|
||
| printJSAV('sequenceDisplay', MySeqs, MyOptions); | ||
| </script> | ||
|
|
||
| <p>Input to the JavaScript is simply an array of sequences in | ||
| the form:</p> | ||
| <pre> | ||
| sequences[0] = { id :"id1b1.L", sequence :"SASSSVNYMYACREFGHIKLMNPTRSTVWY"}; | ||
| </pre> | ||
| <p>and the display and sorter is created with</p> | ||
| <pre> | ||
| printJSAV('sequenceDisplay', sequences, options); | ||
| sequenceDisplay - div in which to display the viewer | ||
| sequences - array of sequence objects | ||
| options - an object describing options | ||
| </pre> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |