Difference between revisions of "Team:SEU/tool"

 
(15 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<!-- 解决官网bug的 CSS -->
 
<!-- 解决官网bug的 CSS -->
 
<style>
 
<style>
−
 
 
         /*消除官网坑爹样式*/
 
         /*消除官网坑爹样式*/
 
         body {
 
         body {
Line 20: Line 19:
 
             width: 100%;
 
             width: 100%;
 
             padding: 0;
 
             padding: 0;
−
             margin: -12px 0 0;
+
             /*margin: -12px 0 0;*/
 
         }
 
         }
 
         #top_title{
 
         #top_title{
Line 33: Line 32:
 
         background-color: transparent !important;
 
         background-color: transparent !important;
 
       }
 
       }
−
 
+
      .diagramWhole{
−
</style>
+
             width:100%;
−
<meta charset="UTF-8">
+
             height:920px;
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
−
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
−
    <title>Tool</title>
+
−
    <style type="text/css">
+
−
        .diagram{
+
−
             width:1080px;
+
−
             height:620px;
+
 
             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;
 
              
 
              
 +
        }
 +
      .diagram{
 +
            /*width:1320px;*/
 +
            width:100%;
 +
            height:920px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
 
         }
 
         }
 
         .sequence{
 
         .sequence{
−
             width:540px;
+
             /*width:1320px;*/
 +
            width:100%;
 
             height:620px;
 
             height:620px;
 
             border:1px solid #666;
 
             border:1px solid #666;
Line 57: Line 60:
 
             margin:10px auto 0;
 
             margin:10px auto 0;
 
             overflow:auto;
 
             overflow:auto;
−
             float: left;
+
             float: center;
 
              
 
              
 
         }
 
         }
−
    </style>
+
        .inputDiagram { 
−
     <!-- Mobile Specific Metas================================================== -->
+
            border:0px; 
−
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
            /*background-image:url(images/long-input.png);  */
 +
            background-repeat:no-repeat; 
 +
            background-position-x:right; 
 +
            padding-left:3px; 
 +
            padding-right:3px; 
 +
            height:18px; 
 +
            font-size:11px; 
 +
            width:70px; 
 +
        } 
 +
        .buttonBackpropagation{
 +
          border: 0;
 +
          width: 162.5px;
 +
          height: 155px;
 +
          background: url(https://static.igem.org/mediawiki/2019/d/d1/T--SEU--backpropagation.png);
 +
          background-repeat:no-repeat; 
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          font-size: 0px;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonBackpropagation:hover{
 +
        border: 9px;
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
      }
 +
        .buttonInputLayer{
 +
          border: 0;
 +
          width: 162.5px;
 +
          height: 155px;
 +
          background: url(https://static.igem.org/mediawiki/2019/7/79/T--SEU--inputLayer.png);
 +
          background-repeat:no-repeat; 
 +
          font-size: 0px;
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonInputLayer:hover{
 +
        background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
        }
 +
        .buttonActivation{
 +
          border: 0;
 +
          width: 162.5px;
 +
          height: 155px;
 +
          background: url(https://static.igem.org/mediawiki/2019/c/c7/T--SEU--activation.png);
 +
          background-repeat:no-repeat; 
 +
          font-size: 0px;
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonActivation:hover{
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
        }
 +
</style>
 +
 
 +
     <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
 +
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900" rel="stylesheet">
 +
    <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">
 +
 
 +
 
 +
 
  
−
    <!-- CSS==================================================================== -->
+
        <header id="header">
−
  <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/CSS?action=raw&ctype=text/css"/>
+
            <div class="container-fluid"style="position:fixed;">
−
        <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/STYLE?action=raw&ctype=text/css"/>
+
                <div class="navbar">
 +
                    <a href="https://2019.igem.org/Team:SEU" id="logo" title="SEU">
 +
                        SEU
 +
                    </a>
 +
                    <div class="navigation-row">
 +
                        <nav id="navigation">
 +
                            <button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button>
 +
                            <div class="nav-box navbar-collapse">
 +
                                <ul class="navigation-menu nav navbar-nav navbars" id="nav">
 +
                                    <li><a href="https://2019.igem.org/Team:SEU">  Home  </a></li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Team">    Team    </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Team">Team Members</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Collaborations">Collaborations</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li data-menuanchor="slide02" class="active"><a href="https://2019.igem.org/Team:SEU/Description">  Project  </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Description">Description</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Design">Design</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Experiments">Experiments</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Notebook">Notebook</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Contribution">Contribution</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Results">Results</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Demonstrate">Demonstrate</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Improve">Improve</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Attributions">Attributions</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Parts">    Parts    </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Parts">Parts Overview</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Basic_Part">Basic Parts</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Composite_Part">Composite Parts</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Part_Collection">Part Collection</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Safety">  Safety  </a></li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Human_Practices">Human Practices</a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Human_Practices">Human Practices</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Public_Engagement">Public Engagement</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Entrepreneurship">    Awards    </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Entrepreneurship">Entrepreneurship</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Hardware">Hardware</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Measurement">Measurement</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Model">Model</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Plant">Plant</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Software">Software</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://igem.org/2019_Judging_Form?team=SEU">Judging Form</a></li>
 +
                                </ul>
 +
                            </div>
 +
                        </nav>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </header>
  
−
    <!-- Custom Fonts=========================================================== -->
+
        <!-- <video autoplay muted loop id="BGVideo">
−
        <link href="https://2019.igem.org/Template:SEU/Font?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
+
          <source src="https://static.igem.org/mediawiki/2019/b/bf/T--SEU--BGVideo.mp4" type="video/mp4">
−
<!-- <script src="https://2019.igem.org/Template:SEU/JS?action=raw&ctype=text/javascript" type="text/javascript"></script> -->
+
        </video> -->    
−
<script src="https://2019.igem.org/Template:SEU/toolJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
  
−
    <!-- Style_CSS============================================================== -->
 
−
<div class="wrap-body">
 
−
<div class="header">
 
−
<div id='cssmenu' >
 
−
<ul>
 
−
  <li class="active"><a href='https://2019.igem.org/Team:SEU'><span>Home</span></a></li>
 
−
  <li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Team'><span>TEAM</span></a>
 
−
  <ul>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Team'><span>Team Members</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Collaborations'><span>Collaborations</span></a>
 
−
</li>
 
−
  </ul>
 
−
  </li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Description'><span>PROJECT</span></a>
 
−
<ul>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Description'><span>Description</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Design'><span>Design</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Experiments'><span>Experiment</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Notebook'><span>Notebook</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Contribution'><span>Contribution</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Results'><span>Results</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Demonstrate'><span>Demonstrate</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Improve'><span>Improve</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Attributions'><span>Attributions</span></a>
 
−
</li>
 
−
</ul>
 
−
</li>
 
−
  <li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Parts'><span>PARTS</span></a>
 
−
<ul>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Parts'><span>Parts Overview</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Basic_Part'><span>Basic Parts</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Composite_Part'><span>Composite Parts</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Part_Collection'><span>Part Collection</span></a>
 
−
</li>
 
−
</ul>
 
−
</li>
 
−
  <li><a href='https://2019.igem.org/Team:SEU/Safety'><span>SAFETY</span></a></li>
 
−
  <li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Human_Practices'><span>HUMAN PRACTICES</span></a>
 
−
<ul>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Human_Practices'><span>Human Practices</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Public_Engagement'><span>Education & Engagement</span></a>
 
−
</li>
 
−
</ul>
 
−
</li>
 
−
<li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Entrepreneurship'><span>AWARDS</span></a>
 
−
<ul>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Entrepreneurship'><span>Entrepreneurship</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Hardware'><span>Hardware</span></a>
 
−
</li>
 
−
<li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Measurement'><span>Measurement</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Model'><span>Model</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Plant'><span>Plant</span></a>
 
−
</li>
 
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Software'><span>Software</span></a>
 
−
</li>
 
−
</ul>
 
−
</li>
 
−
<li><a href="https://igem.org/2019_Judging_Form?team=SEU"><span>JUDGING FORM</span></a>
 
−
</ul
 
−
></div>
 
−
</div>
 
−
<!--////////////////////////////////////Container-->
 
−
<section id="container">
 
−
<div class="wrap-container" id="my-real-content">
 
−
<!--------------------content-box-1-------------------->
 
−
<section class="content-box boxstyle-1 box-1">
 
−
<div class="zerogrid">
 
−
<div class="row wrap-box"><!--Start Box-->
 
−
<div class="col-1-2">
 
−
<div class="wrap-col">
 
−
<center>
 
−
Number:
 
−
<input type="text" id="number" name="number" value="">
 
−
<button onclick="clearCanvas();draw();" type="submit">Submit</button>
 
  
−
</center>
 
−
</div>
 
−
</div>
 
  
−
<div class="col-1-2">
+
        <div id="fullpage" class="fullpage-default">
−
<div class="wrap-col">
+
            <div class="section animated-row" data-section="slide02">
−
<div class="row">
+
                <div class="section-inner">
−
<div class="t-center" style="padding-top: 60px!important;">
+
                    <div class="about-section">
−
<div class="header">
+
                        <div class="row justify-content-center">
−
<div class="wrapper">
+
                            <div class="col-md-10 wide-col-laptop">
−
  <!--Welcome to Wiki of SEU!-->
+
                                <div class="row">
−
  <h1>Welcome to <span class="color-blue">Wiki of SEU!</span></h1>
+
                                    <div class="col-md-10">
−
</div>
+
                                        <br><br><br><br>
−
</div>
+
                                        <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>Your team has been approved and you are ready to start the iGEM season! </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>
−
<!--more details button to team members-->
+
                                        <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>
−
<a href='https://2019.igem.org/Team:SEU/Description' class="button" >More Details</a>
+
                                        <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
−
                                                        </div>
+
                                        <center>
−
  </div>
+
                                        Number:
−
</div>
+
                                        <input type="text" id="number" name="number" value="">
−
</div>
+
                                        <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
−
</div>
+
                                        <div id="alreadySubmit"></div>
−
</div>
+
                                        <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button>
−
</div>
+
                                        <button onclick="clearCanvas();drawSubNeuron([2*DNAseperate,2*DNAseperate]);" class="buttonActivation">Click to show: Activation</button>
−
</section>
+
                                        <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" class="buttonBackpropagation">Click to show: Backpropagation</button><br>
−
  <script>
+
                                        </center>
 +
                                    </div>
 +
                                    <div class="col-md-10">
 +
                                    <body>
  
−
  </script>
+
                                        <center>
−
<body>
+
                                           
−
        <div class="diagram" id="words">
+
                                                <div class="diagram" id="words">
−
            <canvas id="canvas"  width="2000" height="20000"></canvas>
+
                                                    <canvas id="canvas"  width="2500" height="25000"></canvas><br>
−
            <!-- <script type="text/javascript">draw();</script> -->
+
                                                    <!-- <script type="text/javascript">draw();</script> -->
  
−
        </div>
+
                                                </div>
−
        <div class="sequence" id="sequence">
+
−
          <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
+
−
            <!-- <script type="text/javascript">draw();</script> -->
+
  
−
        </div>
+
                                                <button onclick="windowSeq();">Download Sequences</button>
 +
                                                <div class="sequence" id="sequence">
 +
                                                  <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
 +
                                                    <!-- <script type="text/javascript">draw();</script> -->
  
−
</body>
+
                                                </div>
 +
                                           
 +
                                        </center>
 +
                                    </body>
 +
                                   
 +
                                    </div>
 +
                                   
 +
                                  </div>                     
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </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/toolJS?action=raw&ctype=text/javascript" 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: