Difference between revisions of "Team:TUDelft/Main-Useful Utilities"

 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
    <main class="row">
+
<main class="row">
−
      <style>
+
        <style>
−
        /* PLOTFIT */
+
            /* PLOTFIT */
  
−
#placeholder {
+
            #placeholder {
−
    margin-top: 1em;
+
                margin-top: 1em;
−
}
+
            }
  
−
textarea {
+
            textarea {
−
    white-space: pre;
+
                white-space: pre;
−
}
+
            }
  
−
.seperators input {
+
            .seperators input {
−
    font-size: 30px;
+
                font-size: 30px;
−
    width: 30px;
+
                width: 30px;
−
    height: 30px;
+
                height: 30px;
−
    padding: 6px 11px 14px;
+
                padding: 6px 11px 14px;
−
}
+
            }
  
−
.seperators input[type="checkbox"] {
+
            .seperators input[type="checkbox"] {
−
    margin-top: -1px;
+
                margin-top: -1px;
−
    vertical-align: middle;
+
                vertical-align: middle;
−
}
+
            }
  
−
.seperators input[type="text"] {
+
            .seperators input[type="text"] {
−
    margin-right: 10px;
+
                margin-right: 10px;
−
    font-family: monospace, monospace;
+
                font-family: monospace, monospace;
−
}
+
            }
  
−
.warning {
+
            .warning {
−
    color: orangered;
+
                color: orangered;
−
}
+
            }
  
−
.warning:before {
+
            .warning:before {
−
    content: "Warning: "
+
                content: "Warning: "
−
}
+
            }
  
−
.error {
+
            .error {
−
    color: red;
+
                color: red;
−
}
+
            }
  
−
.error:before {
+
            .error:before {
−
    content: "Error (program terminated): "
+
                content: "Error (program terminated): "
−
}
+
            }
  
−
.message {
+
            .message {
−
    color: limegreen;
+
                color: limegreen;
−
}
+
            }
  
−
.container.progress {
+
            .container.progress {
−
    cursor: progress;
+
                cursor: progress;
−
}
+
            }
  
−
.result {
+
            .result {
−
    font-size: 20px;
+
                font-size: 20px;
−
}
+
            }
  
−
.legend table {
+
            .legend table {
−
    width: auto;  
+
                width: auto;
−
}
+
            }
  
−
.browser-default[type="checkbox"] {
+
            .browser-default[type="checkbox"] {
−
    position: static;
+
                position: static;
−
    opacity: 1;
+
                opacity: 1;
−
    pointer-events: inherit;
+
                pointer-events: inherit;
−
}
+
            }
  
−
textarea {
+
            textarea {
−
    height: 5rem;
+
                height: 5rem;
−
    margin: 1em 0;
+
                margin: 1em 0;
−
}
+
            }
  
 
         </style>
 
         </style>
Line 78: Line 78:
 
         <script src="https://2017.igem.org/Team:TUDelft/js/targetfinder?action=raw&ctype=text/javascript"></script>
 
         <script src="https://2017.igem.org/Team:TUDelft/js/targetfinder?action=raw&ctype=text/javascript"></script>
 
         <div class="topper">
 
         <div class="topper">
−
<img src="https://static.igem.org/mediawiki/2017/c/ca/T--TUDelft--2017_Useful_Utilities.png" />
+
            <img src="https://static.igem.org/mediawiki/2017/c/ca/T--TUDelft--2017_Useful_Utilities.png" />
−
</div>
+
        </div>
−
    <div class="col m1"></div>
+
        <div class="col m1"></div>
−
   
+
 
−
            <div class="col m10 s12">
+
        <div class="col m10 s12">
−
                <h1>Plot Bacteria Growth Curves</h1>
+
            <h1>Plot Bacteria Growth Curves</h1>
−
                <div class="row">
+
            <div class="row">
−
                    <div class="col s6">
+
                <div class="col s6">
−
                      
+
 
−
                        <p>
+
                     <p>
−
                            Insert here a comma seperated value file with your data of the growing bacteria. One collumn or row should contain the time and the other one the number of bacteria.
+
                        Insert here a comma seperated value file with your data of the growing bacteria. One collumn or row should contain the time and the other one the number of bacteria.
−
                        </p>
+
                    </p>
−
                        <form>
+
                    <form>
−
                            <div class="seperators">
+
                        <div class="seperators">
−
                                Value seperator:
+
                            Value seperator:
−
                                <input class="browser-default" type="text" name="value_seperator" value="," maxlength="1"> Decimal seperator: <input class="browser-default" type="text" name="decimal_seperator" value="." maxlength="1"> <input class="browser-default" type="checkbox" name="thousands_usage"> I use a thousands seperator: <input class="browser-default" type="text" name="thousands_seperator" value="." maxlength="1"></div>
+
                            <input class="browser-default" type="text" name="value_seperator" value="," maxlength="1"> Decimal seperator: <input class="browser-default" type="text" name="decimal_seperator" value="." maxlength="1"> <input class="browser-default" type="checkbox" name="thousands_usage"> I use a thousands seperator: <input class="browser-default" type="text" name="thousands_seperator" value="." maxlength="1"></div>
−
                            <textarea rows="2" style="width: 100%" name="data">
+
                        <textarea rows="2" style="width: 100%" name="data">1.00,1.18,1.37,1.55,1.73,1.92,2.10,2.29,2.47,2.65,2.84,3.02,3.20,3.39,3.57,3.76,3.94,4.12,4.31,4.49,4.67,4.86,5.04,5.22,5.41,5.59,5.78,5.96,6.14,6.33,6.51,6.69,6.88,7.06,7.24,7.43,7.61,7.80,7.98,8.16,8.35,8.53,8.71,8.90,9.08,9.27,9.45,9.63,9.82,10.00
−
                    1.00,1.18,1.37,1.55,1.73,1.92,2.10,2.29,2.47,2.65,2.84,3.02,3.20,3.39,3.57,3.76,3.94,4.12,4.31,4.49,4.67,4.86,5.04,5.22,5.41,5.59,5.78,5.96,6.14,6.33,6.51,6.69,6.88,7.06,7.24,7.43,7.61,7.80,7.98,8.16,8.35,8.53,8.71,8.90,9.08,9.27,9.45,9.63,9.82,10.00
+
1.00,1.40,1.87,2.41,3.01,3.68,4.42,5.22,6.10,7.04,8.05,9.12,10.27,11.48,12.76,14.10,15.51,16.99,18.54,20.16,21.84,23.59,25.41,27.30,29.25,31.27,33.36,35.51,37.73,40.02,42.38,44.81,47.30,49.86,52.49,55.18,57.95,60.78,63.67,66.64,69.67,72.77,75.94,79.17,82.48,85.85,89.28,92.79,96.36,100.00</textarea>
−
                    1.00,1.40,1.87,2.41,3.01,3.68,4.42,5.22,6.10,7.04,8.05,9.12,10.27,11.48,12.76,14.10,15.51,16.99,18.54,20.16,21.84,23.59,25.41,27.30,29.25,31.27,33.36,35.51,37.73,40.02,42.38,44.81,47.30,49.86,52.49,55.18,57.95,60.78,63.67,66.64,69.67,72.77,75.94,79.17,82.48,85.85,89.28,92.79,96.36,100.00</textarea>
+
                        <input class="btn teal" type="btn" value="Plot" onclick="plot(this.form.elements); return false;">
−
                            <input class="btn teal" type="btn" value="Plot" onclick="plot(this.form.elements); return false;">
+
                    </form>
−
                        </form>
+
                </div>
−
                    </div>
+
                <div id="alert">
−
                    <div id="alert">
+
                    <!-- placeholder for alerts -->
−
                        <!-- placeholder for alerts -->
+
                </div>
−
                    </div>
+
                <div class="col s6">
−
                    <div class="col s6">
+
                    <div id="placeholder" style="height: 300px;"></div>
−
                        <div id="placeholder" style="height: 300px;"></div>
+
                    <div id="results">
−
                        <div id="results">
+
                        <!-- placeholder for results -->
−
                            <!-- placeholder for results -->
+
−
                        </div>
+
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
             <div class="col m1"></div>
+
             <div class="row">
−
   
+
                <h1>Target Finder</h1>
−
        <div class="row">
+
                <p>Paste your DNA sequence or fasta file here and get some potentials targets for the your crRNA:</p>
−
        <div class="col m1"></div>
+
                <form action="">
−
        <div class="col s12 m10">
+
                    <textarea name="DNA" id="" cols="30" rows="10">
−
           
+
TCAGCGCCGATCCGCATTCGCCGCTTGCTGCTTCGCCAGCGTCGCATCGAAA
−
                        <h1>Target Finder</h1>
+
GCCTTCTCCGCCAGATCGACCTGGCGTGACAATTCGTTCGGATCGACAAAGG
−
                        <p>Paste your DNA sequence or fasta file here and get some potentials targets for the your crRNA:</p>
+
CGTCGGTGGCACCCGCCTGCGCCCTGGCGCGTTTTTCATCGAGCGCGAAAGC
−
                        <form action="">
+
CTCGGCGTGGAAGCTCAGGAAGATATCTGCCTTCAACGCGCGGAGTTTCGCA
−
                            <textarea name="DNA" id="" cols="30" rows="10">
+
AAGCTGGCACGGAAATCGGCGGCGGCGTTCGGATAATTTATATTATTGATAA
−
    TCAGCGCCGATCCGCATTCGCCGCTTGCTGCTTCGCCAGCGTCGCATCGAAA
+
GATTTTGGCCGGCGACACTGATACTCGATGTGAAGATCACATTCTTGCTGCC
−
    GCCTTCTCCGCCAGATCGACCTGGCGTGACAATTCGTTCGGATCGACAAAGG
+
AATGCGGGTCGTCCAGCTCGTCGCGCCTTTTGTATGGCCGGGTGTCAGGATG
−
    CGTCGGTGGCACCCGCCTGCGCCCTGGCGCGTTTTTCATCGAGCGCGAAAGC
+
GCGACGAGCGCGATCGGGCCGAGCGTCAGCCGGTCGCCGTCGCCGATCACAC
−
    CTCGGCGTGGAAGCTCAGGAAGATATCTGCCTTCAACGCGCGGAGTTTCGCA
+
GATCGACCTTCACTGCCGGAAAGTCCGCGATATCGGTGCGGCCGATGGTGGT
−
    AAGCTGGCACGGAAATCGGCGGCGGCGTTCGGATAATTTATATTATTGATAA
+
ACCTGCTTCGAGATCGGGCTTGTCCGCAACGTTTGCGACCATTTGCGCGCCG
−
    GATTTTGGCCGGCGACACTGATACTCGATGTGAAGATCACATTCTTGCTGCC
+
GTCAGCCGCTTGAGTTCGGCCAGTCCACCGGCGTGATCGACATGCGAATGGT
−
    AATGCGGGTCGTCCAGCTCGTCGCGCCTTTTGTATGGCCGGGTGTCAGGATG
+
TGCTGAGCAGATATTTCACATCGGACAGTTTGAAGCCCAGTTTGCGGATGTT
−
    GCGACGAGCGCGATCGGGCCGAGCGTCAGCCGGTCGCCGTCGCCGATCACAC
+
CGCGGCGATCAGCGGCGCGCTTTCCGGCAGAGCGCCGTCGATCAGCACATGG
−
    GATCGACCTTCACTGCCGGAAAGTCCGCGATATCGGTGCGGCCGATGGTGGT
+
CCGCGCGGCCCGGCGATCAGATAGGCCGAAAGCCCGCTGGTGCCGACATAAA
−
    ACCTGCTTCGAGATCGGGCTTGTCCGCAACGTTTGCGACCATTTGCGCGCCG
+
GAGATTGCCGGTGATGCGGAATGGCTCGCGCGGCCCGTTCCATTTCGCGCGC
−
    GTCAGCCGCTTGAGTTCGGCCAGTCCACCGGCGTGATCGACATGCGAATGGT
+
TGCTCGGCCGATTGGGCGAGGGCGCCGGATGGGGCTGTCATGGCGAGCGCGG
−
    TGCTGAGCAGATATTTCACATCGGACAGTTTGAAGCCCAGTTTGCGGATGTT
+
ATGCGAGCAGTATCAGGGGGCGCAT
−
    CGCGGCGATCAGCGGCGCGCTTTCCGGCAGAGCGCCGTCGATCAGCACATGG
+
                                    </textarea>
−
    CCGCGCGGCCCGGCGATCAGATAGGCCGAAAGCCCGCTGGTGCCGACATAAA
+
                    <input class="btn teal" type="btn" value="Find" onclick="find(this.form.elements); return false;">
−
    GAGATTGCCGGTGATGCGGAATGGCTCGCGCGGCCCGTTCCATTTCGCGCGC
+
                </form>
−
    TGCTCGGCCGATTGGGCGAGGGCGCCGGATGGGGCTGTCATGGCGAGCGCGG
+
                <p>The potential targets:</p>
−
    ATGCGAGCAGTATCAGGGGGCGCAT
+
                <pre class="DNA" style="height: 200px; overflow-y: auto;"></pre>
−
                            </textarea>
+
            </div>
−
                            <input class="btn teal" type="btn" value="Find" onclick="find(this.form.elements); return false;">
+
−
                        </form>
+
−
                        <p>The potential targets:</p>
+
−
    <pre class="DNA" style="height: 200px; overflow-y: auto;"></pre>
+
 
         </div>
 
         </div>
−
            <div class="col m1"></div>
+
        <div class="col m1"></div>
−
        </div>
+
 
−
       
+
     </main></html>
−
     </main>
+
−
    </html>
+

Latest revision as of 14:46, 14 December 2017

Plot Bacteria Growth Curves

Insert here a comma seperated value file with your data of the growing bacteria. One collumn or row should contain the time and the other one the number of bacteria.

Value seperator: Decimal seperator: I use a thousands seperator:

Target Finder

Paste your DNA sequence or fasta file here and get some potentials targets for the your crRNA:

The potential targets: