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

Line 1: Line 1:
 
<html>
 
<html>
−
<main class="row contribution">
+
    <main class="row">
−
<div class="topper">
+
      <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>
 +
        <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>
−
</main>
+
    <div class="col m1"></div>
−
</html>
+
   
 +
            <div class="col m10 s12">
 +
                <h1>Plot Bacteria Growth Curves</h1>
 +
                <div class="row">
 +
                    <div class="col s6">
 +
                   
 +
                        <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.
 +
                        </p>
 +
                        <form>
 +
                            <div class="seperators">
 +
                                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>
 +
                            <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>
 +
                    </div>
 +
                    <div id="alert">
 +
                        <!-- placeholder for alerts -->
 +
                    </div>
 +
                    <div class="col s6">
 +
                        <div id="placeholder" style="height: 300px;"></div>
 +
                        <div id="results">
 +
                            <!-- placeholder for results -->
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="col m1"></div>
 +
   
 +
        <div class="row">
 +
        <div class="col m1"></div>
 +
        <div class="col s12 m10">
 +
           
 +
                        <h1>Target Finder</h1>
 +
                        <p>Paste your DNA sequence or fasta file here and get some potentials targets for the your crRNA:</p>
 +
                        <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>
 +
                        <p>The potential targets:</p>
 +
    <pre class="DNA" style="height: 200px; overflow-y: auto;"></pre>
 +
        </div>
 +
            <div class="col m1"></div>
 +
        </div>
 +
       
 +
    </main>
 +
    </html>

Revision as of 03:54, 2 November 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: