mtviz.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" name="mtViz2" content="Visualization for mitochondrial genomes">
    <title>mtviz2</title>
    <script type="text/javascript" src="./lib/protovis-r3.2.js"></script>
    <script type="text/javascript" src="./lib/SaveAs.js"></script>
    <script type="text/javascript" src="./lib/html5slider.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="parsers.js"></script>
    <script type="text/javascript" src="utility.js"></script>
    <script type="text/javascript" src="vis.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <ul id="jsddm">
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Files</a>
        <ul>
          <li>BED File<input type="file" id="input" onchange="handle(this, parseBED)"></li>
          <li>Annotations<input type="file" id="input" onchange="handle(this, parseData)"></li>
        </ul>
      </li>

      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Mode</a>
        <ul>
          <li><a href="javascript:void(0)" onclick="switch_mode(modes.RING)">Ring</a></li>
          <li><a href="javascript:void(0)" onclick="switch_mode(modes.BAR)">Bar</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Annotation</a>
        <ul>
          <li>Enable<input type="checkbox" name="anno_enable"
                   onchange="conf.update(this.name, this.checked);" checked/>
          </li>
          <!-- <li>Offset -->
          <!--   <input type="number" min="1"  max="100" value="10" name="anno_offset" step="1" -->
          <!--          onchange="conf.update(this.name, this.value);" /> -->
          <!-- </li> -->
          <!-- <li>Size -->
          <!--   <input type="number" min="1"  max="100" value="10" name="anno_size" step="1" -->
          <!--          onchange="conf.update(this.name, this.value);" /> -->
            
          <!-- </li> -->
        </ul>
      </li>
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Bars</a>
        <ul>
          <li>Barsize
            <input type="range" min="10" max="100" name="barsize" value="30"
                   onchange="conf.update(this.name, this.value);" />
          </li>
          <li>Width
            <input type="range" min="200" max="1000" name="width" value="800"
                   onchange="conf.update(this.name, this.value);" />
          </li>
          <li>Shift
            <input type="range" min="0"  max="100" value="0" name="shift"
                   onchange="conf.update(this.name, this.value);" />
          </li>
          <li>
            Filter Small Elements
            <input type="checkbox" name="filter_smalls"
                   onchange="conf.update(this.name, this.checked);"/>
          </li>
          <li>Line number
            <input type="number" min="1"  max="5" value="1" name="lines" step="1"
                   onchange="conf.update(this.name, this.value);" />
          </li>
        </ul>
      </li>
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Color and Border</a>
        <ul>
          <li>
            Value Ticks
            <input type="checkbox" name="value_ticks"
                   onchange="conf.update(this.name, this.checked);" checked="yes"/>
          </li>
          <li>
            Fat strand borders
            <input type="checkbox" name="fat_strands"
                   onchange="conf.update(this.name, this.checked);"/>
          </li>
          <li>Bordercolor
            <select name="border_colour" onchange="conf.update(this.name, this.value);" >
              <option value="white">White</option>
              <option value="black">Black</option>
            </select>
          </li>
          <li>
            Size: <input name="border_size" type="number" min="0" step="1"
                         onchange="conf.update(this.name, this.value)"/>
          </li>
          <li> Color
            <select name="color" onchange="conf.set_color(this.value)">
              <option value="full">Full</option>
              <option value="gene">Gene coding</option>
              <option value="bw">Greyscale</option>
              <option value="none">None</option>
              <option value="blue">Just Blue</option>
            </select>
          </li>
        </ul>
      </li>
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Font</a>
        <ul>
          <li>Size
            <select name="font_size" onchange="conf.update(this.name, this.value)">
              <option>10</option>
              <option>12</option>
              <option>14</option>
              <option>16</option>
              <option>18</option>
            </select>
          </li>
          <li>
            <select name="font_family" onchange="conf.update(this.name, this.value)">
              <option value="Times New Roman">Times New Roman</option>
              <option value="Georgia">Georgia</option>
              <option value="Arial">Arial</option>
              <option value="Verdana">Verdana</option>
              <option value="Courier New">Courier New</option>
              <option value="Lucida Console">Lucida Console</option>
            </select>
          </li>
        </ul>
      </li>
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Marker</a>
        <ul>
          <li>
          <form onsubmit="conf.add_marker(this.start.value, this.end.value, this.name.value); return false;">
            Start: <input name="start" type="number" min="1" value="1" step="1"/> <br/>
            End: <input name="end" type="number" min="1" value="50" step="1"/> <br />
            Name: <input type="text" name="name" placeholder="Name"/> <br />
            <input type="submit" value="Add Marker" />
          </form>
          </li>
        </ul>
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Caption</a>
        <ul>
          <li><input type="text" name="caption_heading" placeholder="Heading"
                     onchange="conf.update(this.name, this.value)"/>
          </li>
          <li><input type="text" name="caption_add" placeholder="Additional"
                     onchange="conf.update(this.name, this.value)"/>
          </li>
          <li><input type="text" name="caption_pic" placeholder="Picture URL"
                     onchange="conf.update(this.name, this.value)"/>
          </li>
          <li>Picture width in px
            <input type="number" min="0" value="100" name="caption_pic_width" step="10"
                   onchange="conf.update(this.name, this.value);" />
          </li>
          <li>Picture height in px
            <input type="number" min="0"  value="100" name="caption_pic_height" step="10"
                   onchange="conf.update(this.name, this.value);" />
          </li>
        </ul>
      </li>
      <li><a href="javascript:void(0)" onclick="exportSVG()">Export SVG</a></li>
      <li><a href="javascript:void(0)" onclick="hide_sub(this);">
          <div class="arrow-right"></div>Examples</a>
        <ul>
          <li>
            <a href="javascript:void(0)" onclick="pantheraRing();">Panthera Tigris (Ring)</a>
          </li>
          <li>
            <a href="javascript:void(0)" onclick="astroBar();">Astropecten Polyacanthus (Bars)</a>
          </li>
        </ul>
    </ul>

    <div id="vis">
      <div id="fig"></div>
    </div>
  </body>
</html>