Difference between revisions of "Team:SEU/tool"

 
(14 intermediate revisions by 2 users not shown)
Line 34: Line 34:
 
       .diagramWhole{
 
       .diagramWhole{
 
             width:100%;
 
             width:100%;
−
             height:620px;
+
             height:920px;
 
             border:1px solid #666;
 
             border:1px solid #666;
 
             background:#fff;
 
             background:#fff;
Line 43: Line 43:
 
         }
 
         }
 
       .diagram{
 
       .diagram{
−
             width:60%;
+
             /*width:1320px;*/
−
             height:620px;
+
            width:100%;
 +
             height:920px;
 
             border:1px solid #666;
 
             border:1px solid #666;
 
             background:#fff;
 
             background:#fff;
 
             margin:10px auto 0;
 
             margin:10px auto 0;
 
             overflow:auto;
 
             overflow:auto;
−
             float: left;
+
             float: center;
−
           
+
 
         }
 
         }
 
         .sequence{
 
         .sequence{
−
             width:40%;
+
             /*width:1320px;*/
 +
            width:100%;
 
             height:620px;
 
             height:620px;
 
             border:1px solid #666;
 
             border:1px solid #666;
Line 59: Line 60:
 
             margin:10px auto 0;
 
             margin:10px auto 0;
 
             overflow:auto;
 
             overflow:auto;
−
             float: left;
+
             float: center;
 
              
 
              
 
         }
 
         }
Line 73: Line 74:
 
             width:70px;   
 
             width:70px;   
 
         }   
 
         }   
−
         #buttonBackpropagation{
+
         .buttonBackpropagation{
 
           border: 0;
 
           border: 0;
 
           width: 162.5px;
 
           width: 162.5px;
Line 81: Line 82:
 
           background-size: 100%;
 
           background-size: 100%;
 
           border: 0px solid #4abe43;
 
           border: 0px solid #4abe43;
 +
          font-size: 0px;
 +
          cursor: pointer;
 
           /*border-radius: 50%;*/
 
           /*border-radius: 50%;*/
 
         }
 
         }
−
         #buttonInputLayer{
+
         .buttonBackpropagation:hover{
 +
        border: 9px;
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
      }
 +
        .buttonInputLayer{
 
           border: 0;
 
           border: 0;
 
           width: 162.5px;
 
           width: 162.5px;
Line 89: Line 98:
 
           background: url(https://static.igem.org/mediawiki/2019/7/79/T--SEU--inputLayer.png);
 
           background: url(https://static.igem.org/mediawiki/2019/7/79/T--SEU--inputLayer.png);
 
           background-repeat:no-repeat;   
 
           background-repeat:no-repeat;   
 +
          font-size: 0px;
 
           background-size: 100%;
 
           background-size: 100%;
 
           border: 0px solid #4abe43;
 
           border: 0px solid #4abe43;
 +
          cursor: pointer;
 
           /*border-radius: 50%;*/
 
           /*border-radius: 50%;*/
 
         }
 
         }
−
         #buttonActivation{
+
         .buttonInputLayer:hover{
 +
        background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
        }
 +
        .buttonActivation{
 
           border: 0;
 
           border: 0;
 
           width: 162.5px;
 
           width: 162.5px;
Line 99: Line 115:
 
           background: url(https://static.igem.org/mediawiki/2019/c/c7/T--SEU--activation.png);
 
           background: url(https://static.igem.org/mediawiki/2019/c/c7/T--SEU--activation.png);
 
           background-repeat:no-repeat;   
 
           background-repeat:no-repeat;   
 +
          font-size: 0px;
 
           background-size: 100%;
 
           background-size: 100%;
 
           border: 0px solid #4abe43;
 
           border: 0px solid #4abe43;
 +
          cursor: pointer;
 
           /*border-radius: 50%;*/
 
           /*border-radius: 50%;*/
 +
        }
 +
        .buttonActivation:hover{
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 
         }
 
         }
 
</style>
 
</style>
Line 112: Line 135:
 
     <link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
     <link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
     <link href="https://2019.igem.org/Template:SEU/Home_CSS2?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
     <link href="https://2019.igem.org/Template:SEU/Home_CSS2?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
 +
 +
  
 
         <header id="header">
 
         <header id="header">
Line 178: Line 204:
 
         </header>
 
         </header>
  
−
         <video autoplay muted loop id="BGVideo">   
+
         <!-- <video autoplay muted loop id="BGVideo">   
 
           <source src="https://static.igem.org/mediawiki/2019/b/bf/T--SEU--BGVideo.mp4" type="video/mp4">
 
           <source src="https://static.igem.org/mediawiki/2019/b/bf/T--SEU--BGVideo.mp4" type="video/mp4">
−
         </video>       
+
         </video> -->       
  
  
Line 189: Line 215:
 
                     <div class="about-section">
 
                     <div class="about-section">
 
                         <div class="row justify-content-center">
 
                         <div class="row justify-content-center">
−
                             <div class="col-md-8 wide-col-laptop">
+
                             <div class="col-md-10 wide-col-laptop">
 
                                 <div class="row">
 
                                 <div class="row">
−
                        <div class="row justify-content-center">
 
 
                                     <div class="col-md-10">
 
                                     <div class="col-md-10">
 
                                         <br><br><br><br>
 
                                         <br><br><br><br>
 
                                         <h1>User Instruction</h1>
 
                                         <h1>User Instruction</h1>
 
                                         <p align="left">This is a webpage tool which showcases DNA reactions utilized to synthesize a neural network and generates corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be implemented by combining such objects.</p>
 
                                         <p align="left">This is a webpage tool which showcases DNA reactions utilized to synthesize a neural network and generates corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be implemented by combining such objects.</p>
−
                                         <p align="left">To use this tool, users should firstly specify the number of inputs to a neuron by typing the value in the <b>Number</b> frame and click <b>Submit</b>. </p>
+
                                         <p align="left">To use this tool, users should firstly specify the number of inputs to a neuron by typing the value in the <b>Number</b> frame and click <b>Submit</b>. After clicking the <b>Submit</b> button, sequences will be generated and showed in the lower diagram. Users can also click the <b>Download Sequences</b> button to download the generated sequences as a .txt file.</p>
−
                                         <p align="left">By cliking on the three buttons below the <b>Number</b> frame, both reactions and sequences utilized in the three parts of the neuron will be shown. In the result diagram below, topology of DNA sequences will be shown on the left and sequences of all single strand DNA will be shown on the right.</p>
+
                                         <p align="left">By cliking on the three figures below the <b>Number</b> frame, reactions utilized in the three parts of the neuron will be shown respectively. Structures of DNA strands will be given in the upper diagram.</p>
−
                                         <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:50%"><br><br>
+
                                         <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
 
                                         <center>
 
                                         <center>
−
                                         Input Number:
+
                                         Number:
 
                                         <input type="text" id="number" name="number" value="">
 
                                         <input type="text" id="number" name="number" value="">
−
                                         <button onclick="clearCanvas();draw();" type="submit">Submit</button><br><br>
+
                                         <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
−
                                         <button onclick="clearCanvas();drawWeightedSum([50,50]);showSeq();" type="button" id="buttonInputLayer"></button>
+
                                        <div id="alreadySubmit"></div>
−
                                         <button onclick="clearCanvas();drawSubNeuron([50,50]);showSeq();" type="subNeuron" id="buttonActivation"></button>
+
                                         <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button>
−
                                         <button onclick="clearCanvas();drawBackprop([50,50]);showSeq();" type="button" id="buttonBackpropagation"></button><br>
+
                                         <button onclick="clearCanvas();drawSubNeuron([2*DNAseperate,2*DNAseperate]);" class="buttonActivation">Click to show: Activation</button>
 +
                                         <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" class="buttonBackpropagation">Click to show: Backpropagation</button><br>
 
                                         </center>
 
                                         </center>
 
                                     </div>
 
                                     </div>
Line 212: Line 238:
  
 
                                         <center>
 
                                         <center>
−
                                             <div class="diagramWhole">
+
                                              
 
                                                 <div class="diagram" id="words">
 
                                                 <div class="diagram" id="words">
−
                                                     <canvas id="canvas"  width="1000" height="10000"></canvas>
+
                                                     <canvas id="canvas"  width="2500" height="25000"></canvas><br>
 
                                                     <!-- <script type="text/javascript">draw();</script> -->
 
                                                     <!-- <script type="text/javascript">draw();</script> -->
  
 
                                                 </div>
 
                                                 </div>
 +
 +
                                                <button onclick="windowSeq();">Download Sequences</button>
 
                                                 <div class="sequence" id="sequence">
 
                                                 <div class="sequence" id="sequence">
 
                                                   <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
 
                                                   <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
Line 223: Line 251:
  
 
                                                 </div>
 
                                                 </div>
−
                                             </div>
+
                                              
 
                                         </center>
 
                                         </center>
 
                                     </body>
 
                                     </body>
 +
                                   
 
                                     </div>
 
                                     </div>
−
                                     </div>
+
                                      
−
                                    <div class="col-md-10">
+
−
                                        <figure class="about-img animate" data-animate="fadeInUp"><img src="https://static.igem.org/mediawiki/2019/5/5b/T--SEU--descrip.png" class="rounded" alt=""></figure>
+
−
                                    </div>
+
 
                                   </div>                       
 
                                   </div>                       
 
                                 </div>
 
                                 </div>
Line 239: Line 265:
 
             </div>
 
             </div>
 
      
 
      
−
     <script src="https://2019.igem.org/Template:SEU/Home_JS?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
     <!-- <script src="https://2019.igem.org/Template:SEU/Home_JS?action=raw&ctype=text/javascript" type="text/javascript"></script> -->
 
     <script src="https://2019.igem.org/Template:SEU/toolJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
     <script src="https://2019.igem.org/Template:SEU/toolJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
     <!-- <script src="mainMess.js" type="text/javascript"></script> -->
 
     <!-- <script src="mainMess.js" type="text/javascript"></script> -->
 
</html>
 
</html>

Latest revision as of 02:45, 2 October 2019





User Instruction

This is a webpage tool which showcases DNA reactions utilized to synthesize a neural network and generates corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be implemented by combining such objects.

To use this tool, users should firstly specify the number of inputs to a neuron by typing the value in the Number frame and click Submit. After clicking the Submit button, sequences will be generated and showed in the lower diagram. Users can also click the Download Sequences button to download the generated sequences as a .txt file.

By cliking on the three figures below the Number frame, reactions utilized in the three parts of the neuron will be shown respectively. Structures of DNA strands will be given in the upper diagram.



Number: