Difference between revisions of "RubberBandSelection"
(→Configurable options) |
m (Adding flash movie.) |
||
(17 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | "Rubber-band", or drag-selection is a user-interface feature of GBrowse 1.69 and later. It a javascript/DHTML-based feature that works in all major web browsers and is turned on by default. The purpose of this page is to describe how to control features of the rubber-band selection via the GBrowse configuration-file. | |
+ | The video below is a demonstration of using the mouse to navigate in GBrowse 2.0 | ||
− | < | + | <oflash file=[[File:Rubberband1.swf]] width=500 height=275 /> |
+ | ==User interface== | ||
+ | * To activate rubber-band selection, click and drag (without releasing the mouse button) on the ruler for the overview, regionview, or details panel. | ||
+ | * A highlighted region, as depicted above, will appear. | ||
+ | * If configured, the menu appears when the mouse button is release. | ||
− | =Configurable options= | + | ==Configurable options== |
− | + | ||
<table border=1 bgcolor=lightyellow> | <table border=1 bgcolor=lightyellow> | ||
<tr bgcolor=lightsteelblue> | <tr bgcolor=lightsteelblue> | ||
Line 59: | Line 63: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>width</td> |
<td>160px</td> | <td>160px</td> | ||
<td> | <td> | ||
Line 68: | Line 72: | ||
<pre> | <pre> | ||
− | + | # Advanced feature: an example of a customized popup menu for rubber band selection | |
− | + | ||
− | + | ||
− | # Advanced feature: an example of a customized popup | + | |
[OVERVIEW SELECT MENU] | [OVERVIEW SELECT MENU] | ||
width = 100 | width = 100 | ||
Line 146: | Line 147: | ||
</tr> | </tr> | ||
</table> | </table> | ||
+ | </pre> | ||
− | + | ||
+ | Configuration for submitter plugin (used in above menu). | ||
+ | *the key/value pairs can be anything (that corresponds to the remote web services' parameters) | ||
+ | *the '''''url''''' option is required to handle the submission | ||
+ | *the '''''extra_html''''' option can be used to specify form elements, etc | ||
+ | |||
+ | <pre> | ||
[Submitter:plugin] | [Submitter:plugin] | ||
submitter = [UCSC_BLAT] | submitter = [UCSC_BLAT] | ||
Line 190: | Line 198: | ||
[[Category:Javascript]] | [[Category:Javascript]] | ||
[[Category:Documentation]] | [[Category:Documentation]] | ||
− |
Latest revision as of 23:05, 8 October 2012
"Rubber-band", or drag-selection is a user-interface feature of GBrowse 1.69 and later. It a javascript/DHTML-based feature that works in all major web browsers and is turned on by default. The purpose of this page is to describe how to control features of the rubber-band selection via the GBrowse configuration-file.
The video below is a demonstration of using the mouse to navigate in GBrowse 2.0
<oflash file=File:Rubberband1.swf width=500 height=275 />
User interface
- To activate rubber-band selection, click and drag (without releasing the mouse button) on the ruler for the overview, regionview, or details panel.
- A highlighted region, as depicted above, will appear.
- If configured, the menu appears when the mouse button is release.
Configurable options
Options | Values | Description |
---|---|---|
autoSubmit | 1 or 0 |
|
marginTop | 5px |
How far the select area text (indicating the size of the selected region) will be placed from the top of the select box. This value must be a positive integer, 'px' is mandatory. |
background | web-color or hex |
The background color of the select box. Any valid web color name or hex code is accepted. |
opacity | 0-1 |
The degree of transparency of the select box in all modern web browsers except Konqueror. The opacity value should be a float between 0 and 1, where 1 is opaque. |
fontColor | web-color or hex |
The color of the text select area text. Any valid web color name or hex code is accepted. |
border | '1px solid black' |
The select area border style, using CSS syntax. |
width | 160px |
The width of the menu, if applicable |
# Advanced feature: an example of a customized popup menu for rubber band selection [OVERVIEW SELECT MENU] width = 100 html = <table style="width:100%"> <tr> <th style="background:lightgrey"> Overview </span> </th> </tr> <tr> <td> <span style="color:blue;cursor:pointer" onclick="SelectArea.prototype.clearAndSubmit()"> Zoom </span> </td> </tr> <tr> <td> <span style="color:blue;cursor:pointer" onclick="SelectArea.prototype.cancelRubber()"> Cancel </span> </td> </tr> </table> [DETAIL SELECT MENU] width = 250 html = <table style="width:100%"> <tr> <th style="background:lightgrey;cell-padding:5"> SELECTION <span style="right:0px;position:absolute;color:blue;cursor:pointer" onclick="SelectArea.prototype.cancelRubber()"> [X] </span> </th> </tr> <tr> <td> <span style="color:blue;cursor:pointer" onclick="SelectArea.prototype.clearAndSubmit()"> Zoom in </span> </td> </tr> <tr> <td> <span style="color:blue;cursor:pointer" onclick="SelectArea.prototype.clearAndRecenter()"> Recenter on this region </span> </td> </tr> <tr> <td onmouseup="SelectArea.prototype.cancelRubber()"> <a href="?plugin=FastaDumper;plugin_action=Go;name=SELECTION" target="_BLANK"> Dump selection as FASTA </a> </td> </tr> <tr> <td onmouseup="SelectArea.prototype.cancelRubber()"> <a href="?name=SELECTION;plugin=Submitter;plugin_do=Go;Submitter.target=UCSC_BLAT" target="_BLANK"> Submit selection to UCSC BLAT </a> </td> </tr> <tr> <td onmouseup="SelectArea.prototype.cancelRubber()"> <a href="?name=SELECTION;plugin=Submitter;plugin_do=Go;Submitter.target=NCBI_BLAST" target="_BLANK"> Submit selection to NCBI BLAST </a> </td> </tr> </table>
Configuration for submitter plugin (used in above menu).
- the key/value pairs can be anything (that corresponds to the remote web services' parameters)
- the url option is required to handle the submission
- the extra_html option can be used to specify form elements, etc
[Submitter:plugin] submitter = [UCSC_BLAT] url = http://genome.ucsc.edu/cgi-bin/hgBlat seq_label = userSeq output = hyperlink type = DNA extra_html = Genome: <SELECT name=org> <OPTION VALUE="Human">Human</OPTION> <OPTION VALUE="Chimp">Chimp</OPTION> <OPTION VALUE="Rhesus">Rhesus</OPTION> <OPTION VALUE="Mouse">Mouse</OPTION> <OPTION VALUE="Stickleback">Stickleback</OPTION> <OPTION VALUE="Medaka">Medaka</OPTION> <OPTION VALUE="C. intestinalis">C. intestinalis</OPTION> <OPTION VALUE="S. purpuratus">S. purpuratus</OPTION> <OPTION VALUE="D. persimilis">D. persimilis</OPTION> <OPTION VALUE="D. virilis">D. virilis</OPTION> <OPTION VALUE="D. mojavensis">D. mojavensis</OPTION> <OPTION VALUE="D. grimshawi">D. grimshawi</OPTION> <OPTION VALUE="A. gambiae">A. gambiae</OPTION> <OPTION VALUE="A. mellifera">A. mellifera</OPTION> <OPTION SELECTED VALUE="S. cerevisiae">S. cerevisiae</OPTION> <OPTION VALUE="SARS">SARS</OPTION> </SELECT> [NCBI_BLAST] confirm = 1 url = http://www.ncbi.nlm.nih.gov/blast/Blast.cgi seq_label = QUERY PAGE = Nucleotides PROGRAM = blastn DATABASE = nr CLIENT = web CMD = put