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

(Created page with "<html> <main class="row contribution"> <div class="topper> <img src="https://static.igem.org/mediawiki/2017/c/ca/T--TUDelft--2017_Useful_Utilities.png" /> </div> </main> </html>")
 
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<main class="row contribution">
+
<main class="row">
−
<div class="topper>
+
        <style>
−
<img src="https://static.igem.org/mediawiki/2017/c/ca/T--TUDelft--2017_Useful_Utilities.png" />
+
            /* PLOTFIT */
−
</div>
+
 
−
</main>
+
            #placeholder {
−
</html>
+
                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" />
 +
        </div>
 +
        <div class="col m1"></div>
 +
 
 +
        <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 class="row">
 +
                <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>
 +
        <div class="col m1"></div>
 +
 
 +
    </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: