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

Line 1: Line 1:
−
<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 77:
 
         <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>
 
     </main>
−
    </html>
 

Revision as of 14:41, 14 December 2017

<main class="row"> 

       <style>
           /* PLOTFIT */

           #placeholder {
               margin-top: 1em;
           }

           textarea {
               white-space: pre;
           }

           .seperators input {
               font-size: 30px;
               width: 30px;
               height: 30px;
               padding: 6px 11px 14px;
           }

           .seperators input[type="checkbox"] {
               margin-top: -1px;
               vertical-align: middle;
           }

           .seperators input[type="text"] {
               margin-right: 10px;
               font-family: monospace, monospace;
           }

           .warning {
               color: orangered;
           }

           .warning:before {
               content: "Warning: "
           }

           .error {
               color: red;
           }

           .error:before {
               content: "Error (program terminated): "
           }

           .message {
               color: limegreen;
           }

           .container.progress {
               cursor: progress;
           }

           .result {
               font-size: 20px;
           }

           .legend table {
               width: auto;
           }

           .browser-default[type="checkbox"] {
               position: static;
               opacity: 1;
               pointer-events: inherit;
           }

           textarea {
               height: 5rem;
               margin: 1em 0;
           }

       </style>
       <script src="https://2017.igem.org/Team:TUDelft/js/numeric?action=raw&ctype=text/javascript"></script>
       <script src="https://2017.igem.org/Team:TUDelft/js/jqueryflot?action=raw&ctype=text/javascript"></script>
       <script src="https://2017.igem.org/Team:TUDelft/js/plotfit?action=raw&ctype=text/javascript"></script>
       <script src="https://2017.igem.org/Team:TUDelft/js/targetfinder?action=raw&ctype=text/javascript"></script>

           <img src="T--TUDelft--2017_Useful_Utilities.png" />

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. 

                   <form>

                           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">
                       <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.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;">
                   </form>

Target Finder

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

               <form action="">
                   <textarea name="DNA" id="" cols="30" rows="10">
                                               TCAGCGCCGATCCGCATTCGCCGCTTGCTGCTTCGCCAGCGTCGCATCGAAA
                                               GCCTTCTCCGCCAGATCGACCTGGCGTGACAATTCGTTCGGATCGACAAAGG
                                               CGTCGGTGGCACCCGCCTGCGCCCTGGCGCGTTTTTCATCGAGCGCGAAAGC
                                               CTCGGCGTGGAAGCTCAGGAAGATATCTGCCTTCAACGCGCGGAGTTTCGCA
                                               AAGCTGGCACGGAAATCGGCGGCGGCGTTCGGATAATTTATATTATTGATAA
                                               GATTTTGGCCGGCGACACTGATACTCGATGTGAAGATCACATTCTTGCTGCC
                                               AATGCGGGTCGTCCAGCTCGTCGCGCCTTTTGTATGGCCGGGTGTCAGGATG
                                               GCGACGAGCGCGATCGGGCCGAGCGTCAGCCGGTCGCCGTCGCCGATCACAC
                                               GATCGACCTTCACTGCCGGAAAGTCCGCGATATCGGTGCGGCCGATGGTGGT
                                               ACCTGCTTCGAGATCGGGCTTGTCCGCAACGTTTGCGACCATTTGCGCGCCG
                                               GTCAGCCGCTTGAGTTCGGCCAGTCCACCGGCGTGATCGACATGCGAATGGT
                                               TGCTGAGCAGATATTTCACATCGGACAGTTTGAAGCCCAGTTTGCGGATGTT
                                               CGCGGCGATCAGCGGCGCGCTTTCCGGCAGAGCGCCGTCGATCAGCACATGG
                                               CCGCGCGGCCCGGCGATCAGATAGGCCGAAAGCCCGCTGGTGCCGACATAAA
                                               GAGATTGCCGGTGATGCGGAATGGCTCGCGCGGCCCGTTCCATTTCGCGCGC
                                               TGCTCGGCCGATTGGGCGAGGGCGCCGGATGGGGCTGTCATGGCGAGCGCGG
                                               ATGCGAGCAGTATCAGGGGGCGCAT
                                   </textarea>
                   <input class="btn teal" type="btn" value="Find" onclick="find(this.form.elements); return false;">
               </form>

The potential targets:


            

        

        


   </main>