Difference between revisions of "Team:Vanderbilt/Software/User Guide"

Line 1: Line 1:
 
{{Template:Vanderbilt_Header}}
 
{{Template:Vanderbilt_Header}}
 +
{{Template:Vanderbilt_Navbar}}
 +
{{Template:Vanderbilt_Style}}
 +
 
<html>
 
<html>
<style>
 
.btn {
 
  -webkit-border-radius: 0 !important;
 
    -moz-border-radius: 0 !important;
 
          border-radius: 0 !important;
 
background-color: #3e0812;
 
color: #9e515e;
 
}
 
a:link {
 
    text-decoration: none;
 
color: #9e515e;
 
}
 
a:visited {
 
    text-decoration: none;
 
color: #9e515e;
 
}
 
 
.chosen {
 
background-color: #220006;
 
color: #3e0812;
 
}
 
 
 
</style>
 
  
 
<div id="breadcrumb_container" class="container" style="position:fixed; top:88px; z-index:2;">
 
<div id="breadcrumb_container" class="container" style="position:fixed; top:88px; z-index:2;">
Line 36: Line 15:
 
</div>
 
</div>
 
</div>
 
</div>
 
</html>
 
{{Template:Vanderbilt_Navbar}}
 
<html>
 
  
 
<script>
 
<script>
Line 45: Line 20:
 
</script>
 
</script>
  
 
+
<div class="row">
<style>
+
<div class="col-md-10 col-md-offset-1" style="background-color: #44111a; height: 100%;">
 
+
html, body {
+
  height: 100%;
+
  background-color: #3e0812;
+
}
+
 
+
body {
+
  position: relative;
+
  height: 100%;
+
}
+
 
+
.footer {
+
  position: absolute;
+
  bottom: 0;
+
  width: 100%;
+
  /* Set the fixed height of the footer here */
+
  background-color: #3e0812;
+
  left: 0;
+
}
+
 
+
.row-height {
+
  display: table;
+
  table-layout: fixed;
+
  height: 100%;
+
  width: 100%;
+
}
+
 
+
@keyframes dnaFadeInOut {
+
  0%  {opacity:1;}
+
  17%  {opacity:1;}
+
  25%  {opacity:0;}
+
  92%  {opacity:0;}
+
  100% {opacity:1;}
+
}
+
 
+
@-o-keyframes dnaFadeInOut {
+
  0%  {opacity:1;}
+
  17%  {opacity:1;}
+
  25%  {opacity:0;}
+
  92%  {opacity:0;}
+
  100% {opacity:1;}
+
}
+
@-moz-keyframes dnaFadeInOut {
+
  0%  {opacity:1;}
+
  17%  {opacity:1;}
+
  25%  {opacity:0;}
+
  92%  {opacity:0;}
+
  100% {opacity:1;}
+
}
+
@-webkit-keyframes dnaFadeInOut {
+
  0%  {opacity:1;}
+
  17%  {opacity:1;}
+
  25%  {opacity:0;}
+
  92%  {opacity:0;}
+
  100% {opacity:1;}
+
}
+
 
+
.dnaStrand img:nth-of-type(1) {
+
  -webkit-animation-delay: 6s;
+
  -moz-animation-delay: 6s;
+
  -o-animation-delay: 6s;
+
  animation-delay: 6s;
+
}
+
.dnaStrand img:nth-of-type(2) {
+
  -webkit-animation-delay: 4s;
+
  -moz-animation-delay: 4s;
+
  -o-animation-delay: 4s;
+
  animation-delay: 4s;
+
}
+
.dnaStrand img:nth-of-type(3) {
+
  -webkit-animation-delay: 2s;
+
  -moz-animation-delay: 2s;
+
  -o-animation-delay: 2s;
+
  animation-delay: 2s;
+
}
+
.dnaStrand img:nth-of-type(4) {
+
  -webkit-animation-delay: 0;
+
  -moz-animation-delay: 0;
+
  -o-animation-delay: 0;
+
  animation-delay: 0;
+
}
+
 
+
.dnaStrand {
+
  position: relative;
+
  width: 100%;
+
  height: 100%;
+
}
+
 
+
.dnaStrand img {
+
  position: absolute;
+
  height: 95%;
+
  width: 95%;
+
  vertical-align: top;
+
}
+
 
+
.dnaStrand img {
+
  -webkit-animation-name: dnaFadeInOut;
+
  -webkit-animation-timing-function: ease-in-out;
+
  -webkit-animation-iteration-count: infinite;
+
  -webkit-animation-duration: 8s;
+
 
+
  -moz-animation-name: dnaFadeInOut;
+
  -moz-animation-timing-function: ease-in-out;
+
  -moz-animation-iteration-count: infinite;
+
  -moz-animation-duration: 8s;
+
 
+
  -o-animation-name: dnaFadeInOut;
+
  -o-animation-timing-function: ease-in-out;
+
  -o-animation-iteration-count: infinite;
+
  -o-animation-duration: 8s;
+
 
+
  animation-name: dnaFadeInOut;
+
  animation-timing-function: ease-in-out;
+
  animation-iteration-count: infinite;
+
  animation-duration: 8s;
+
}
+
 
+
 
+
.grid {
+
  background-color: #5f212c;
+
}
+
 
+
/* clear fix */
+
.grid:after {
+
  content: '';
+
  display: block;
+
  clear: both;
+
}
+
 
+
/* ---- .element-item ---- */
+
 
+
/* 6 columns, percentage width */
+
.grid-item,
+
.grid-sizer {
+
  width: 16.666%;
+
  margin: 0px;
+
}
+
 
+
.grid-item {
+
  float: left;
+
  background: #0D8;
+
  border: 10px solid #44111a;
+
  width: 33.333%;
+
  margin: 0px;
+
  text-align: center;
+
}
+
 
+
.grid-item--widthFull { width:100%; }
+
 
+
.grid-item img {
+
  display: block;
+
  max-width: 100%;
+
  margin: 0px;
+
}
+
 
+
.grid-textbox-top {
+
  border-left: 0px;
+
  border-top: 0px;
+
  border-right: 0px;
+
  border-bottom: 5px solid #44111a;
+
  line-height: 100%;
+
  vertical-align: middle;
+
}
+
 
+
.grid-textbox-mid {
+
  border-right: 0px;
+
  border-left: 0px;
+
  border-top: 5px solid #44111a;
+
  border-bottom: 5px solid #44111a;
+
  line-height: 100%;
+
  vertical-align: middle;
+
}
+
 
+
.grid-textbox-bot {
+
  border-right: 0px;
+
  border-left: 0px;
+
  border-top: 5px solid #44111a;
+
  border-bottom: 0px;
+
  line-height: 100%;
+
  vertical-align: middle;
+
}
+
 
+
  .carousel-inner > .item > img,
+
  .carousel-inner > .item > a > img {
+
      width: 100%;
+
      margin: auto;
+
  }
+
 
+
</style>
+
 
+
<div class="row" style="height: 100%; min-height: 100%;">
+
<div class="row-height">
+
<div class="col-lg-1 hidden-sm" style="height:100%" id="dnaStrand1">
+
  <br>
+
  <div class="dnaStrand" alt="dna strand">
+
  <img src="https://static.igem.org/mediawiki/2015/a/a6/Vanderbilt_2015_dna_strand_1.png"/>
+
  <img src="https://static.igem.org/mediawiki/2015/d/d1/Vanderbilt_2015_dna_strand_2.png"/>
+
  <img src="https://static.igem.org/mediawiki/2015/2/2a/Vanderbilt_2015_dna_strand_3.png"/>
+
  <img src="https://static.igem.org/mediawiki/2015/f/f4/Vanderbilt_2015_dna_strand_4.png"/>
+
  </div>
+
</div>
+
 
+
<div class="col-md-10" style="background-color: #44111a; height: 100%;">
+
 
   <p>A sequence to be optimized is input into the text field on the left hand pane of the GUI.  Under the two panes there are a number of knobs, sliders, and text input fields. Those user interfaces are used to change the weighting factors, mutability factors, and types of DNA hotspots to optimize for. Then a “GO!” button is pressed to initiate the algorithm. After the algorithms are finished running, an optimized sequence is presented in the right hand pane. This optimized sequence will have the hotspots to changed highlighted. When a hotspot is selected, additional information about why it was flagged by the algorithms will be displayed. </p>   
 
   <p>A sequence to be optimized is input into the text field on the left hand pane of the GUI.  Under the two panes there are a number of knobs, sliders, and text input fields. Those user interfaces are used to change the weighting factors, mutability factors, and types of DNA hotspots to optimize for. Then a “GO!” button is pressed to initiate the algorithm. After the algorithms are finished running, an optimized sequence is presented in the right hand pane. This optimized sequence will have the hotspots to changed highlighted. When a hotspot is selected, additional information about why it was flagged by the algorithms will be displayed. </p>   
 
<!-- footer -->
 
<div class="row" style="margin:0; border: 0; width: 100%;">
 
  <div class="col-lg-2" style="height:100%">
 
    <h3><font color="#7e1d2e">Team</font></h3>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Team/About"><font color="#9e515e">About</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Team/Members"><font color="#9e515e">Members</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Team/Attributes"><font color="#9e515e">Attributes</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Team/Sponsors"><font color="#9e515e">Sponsors</font></a>
 
    <br>
 
  </div>
 
  <div class="col-lg-2" style="height:100%">
 
    <h3><font color="#7e1d2e">Project</font></h3>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Project/Background"><font color="#9e515e">Background</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Project/Sequence"><font color="#9e515e">Sequence</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Project/Circuit"><font color="#9e515e">Circuit</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Project/Organism"><font color="#9e515e">Organism</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Project/Nanopore"><font color="#9e515e">Nanopore</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Project/Achievements"><font color="#9e515e">Achievements</font></a>
 
    <br>
 
  </div>
 
  <div class="col-lg-2" style="height:100%">
 
    <h3><font color="#7e1d2e">Parts</font></h3>
 
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Parts/Part_Collection"><font color="#9e515e">Part Collection</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Parts/Optimized_RFPs"><font color="#9e515e">Optimized RFPs</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Parts/Visualizing_Evolution"><font color="#9e515e">Visualizing Evolution</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Parts/Repair Enzymes"><font color="#9e515e">Repair Enzymes</font></a>
 
    <br>
 
  </div>
 
  <div class="col-lg-2" style="height:100%">
 
    <h3><font color="#7e1d2e">Notebook</font></h3>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Notebook/May"><font color="#9e515e">May</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Notebook/June"><font color="#9e515e">June</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Notebook/July"><font color="#9e515e">July</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Notebook/August"><font color="#9e515e">August</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Notebook/September"><font color="#9e515e">September</font></a>
 
    <br>
 
  </div>
 
  <div class="col-lg-2" style="height:100%">
 
    <h3><font color="#7e1d2e">Practices</font></h3>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Practices/Safety"><font color="#9e515e">Safety</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Practices/Collaborations"><font color="#9e515e">Collaborations</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Practices/Real_World_Applications"><font color="#9e515e">Applications</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Practices/Interlab"><font color="#9e515e">Interlab</font></a>
 
    <br>
 
  </div>
 
  <div class="col-lg-2" style="height:100%">
 
    <h3><font color="#7e1d2e">Software</font></h3>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Software/Development"><font color="#9e515e">Development</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Software/User_Guide"><font color="#9e515e">User Guide</font></a>
 
    <br>
 
    <a href="https://2015.igem.org/Team:Vanderbilt/Software/Stats"><font color="#9e515e">Statistics</font></a>
 
    <br>
 
  </div>
 
 
</div>
 
</div>
  <br>
 
<!-- /footer -->
 
 
 
</div>
 
</div>
  
<div class="col-lg-1 hidden-sm" style="height:100%;" id="dnaStrand2">
+
</html>
  <br>
+
{{Template:Vanderbilt_Footer}}
  <div class="dnaStrand" alt="dna strand">
+
<html>
  <img src="https://static.igem.org/mediawiki/2015/a/a6/Vanderbilt_2015_dna_strand_1.png"/>
+
  <img src="https://static.igem.org/mediawiki/2015/d/d1/Vanderbilt_2015_dna_strand_2.png"/>
+
  <img src="https://static.igem.org/mediawiki/2015/2/2a/Vanderbilt_2015_dna_strand_3.png"/>
+
  <img src="https://static.igem.org/mediawiki/2015/f/f4/Vanderbilt_2015_dna_strand_4.png"/>
+
  </div>
+
</div>
+
 
+
</div>
+
</div>
+
  
 
</html>
 
</html>

Revision as of 03:52, 20 November 2015

Vanderbilt iGEM 2015

A sequence to be optimized is input into the text field on the left hand pane of the GUI. Under the two panes there are a number of knobs, sliders, and text input fields. Those user interfaces are used to change the weighting factors, mutability factors, and types of DNA hotspots to optimize for. Then a “GO!” button is pressed to initiate the algorithm. After the algorithms are finished running, an optimized sequence is presented in the right hand pane. This optimized sequence will have the hotspots to changed highlighted. When a hotspot is selected, additional information about why it was flagged by the algorithms will be displayed.