Difference between revisions of "Team:SEU/Software"

Line 19: Line 19:
 
             width: 100%;
 
             width: 100%;
 
             padding: 0;
 
             padding: 0;
−
             margin: -12px 0 0;
+
             /*margin: -12px 0 0;*/
 
         }
 
         }
 
         #top_title{
 
         #top_title{
Line 32: Line 32:
 
         background-color: transparent !important;
 
         background-color: transparent !important;
 
       }
 
       }
−
 
+
      .diagramWhole{
 +
            width:100%;
 +
            height:920px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
 +
           
 +
        }
 +
      .diagram{
 +
            /*width:1320px;*/
 +
            width:100%;
 +
            height:920px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
 +
        }
 +
        .sequence{
 +
            /*width:1320px;*/
 +
            width:100%;
 +
            height:620px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
 +
           
 +
        }
 +
        .inputDiagram { 
 +
            border:0px; 
 +
            /*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>
 
</style>
−
    <!-- Mobile Specific Metas================================================== -->
 
−
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
  
−
     <!-- CSS==================================================================== -->
+
     <meta charset="utf-8">
−
  <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/CSS?action=raw&ctype=text/css"/>
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
        <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/STYLE?action=raw&ctype=text/css"/>
+
    <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">
  
−
    <!-- Custom Fonts=========================================================== -->
 
−
        <link href="https://2019.igem.org/Template:SEU/Font?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
−
<script src="https://2019.igem.org/Template:SEU/JS?action=raw&ctype=text/css" type="text/javascript"></script>
 
  
−
    <!-- Style_CSS============================================================== -->
 
−
<div class="wrap-body">
 
−
<div class="header">
 
−
<div id='cssmenu' >
 
−
<ul>
 
−
  <li class='has-sub'><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="active"><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 clearfix">
 
−
      <div id="main-content">
 
−
        <div class="wrap-content">
 
−
          <article>
 
−
            <div class="art-header">
 
−
              <h1 class="entry-title">Software</h1>
 
−
            </div>
 
−
            <div class="art-content">
 
  
−
              <div class="excerpt"><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum exercitation ullamco laboris nisi ut aliquip.</p></div>
+
 
−
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+
        <header id="header">
−
              <blockquote><p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet vultatup duista.</p></blockquote>
+
            <div class="container-fluid"style="position:fixed;">
−
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril.</p>
+
                <div class="navbar">
−
              <h2>Heading 1</h2>
+
                    <a href="https://2019.igem.org/Team:SEU" id="logo" title="SEU">
−
              <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse lorem ipsum dolor sit amet.</p>
+
                        SEU
−
              <h2>Heading 2</h2>
+
                    </a>
−
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo.</p>
+
                    <div class="navigation-row">
−
              <h2>Heading 3</h2>
+
                        <nav id="navigation">
−
              <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum hendrerit in vulputate velit esse molestie.</p>
+
                            <button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button>
−
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+
                            <div class="nav-box navbar-collapse">
−
              <p><code>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</code></p>
+
                                <ul class="navigation-menu nav navbar-nav navbars" id="nav">
−
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
                                    <li><a href="https://2019.igem.org/Team:SEU">  Home  </a></li>
−
              <div class="note">
+
                                    <li><a href="https://2019.igem.org/Team:SEU/Team">    Team    </a>
−
                <ol>
+
                                        <div class="popList">
−
                <li>Lorem ipsum</li>
+
                                            <a href="https://2019.igem.org/Team:SEU/Team">Team Members</a>
−
                <li>Sit amet vultatup nonumy</li>
+
                                            <a href="https://2019.igem.org/Team:SEU/Collaborations">Collaborations</a>
−
                <li>Duista sed diam</li>
+
                                        </div>
−
                </ol>
+
                                    </li>
−
                <div class="clear"></div>
+
                                    <li data-menuanchor="slide02" class="active"><a href="https://2019.igem.org/Team:SEU/Description">  Project  </a>
−
              </div>
+
                                        <div class="popList">
−
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
                                            <a href="https://2019.igem.org/Team:SEU/Description">Description</a>
−
              <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.</p>
+
                                            <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>
 
             </div>
−
          </article>
+
         </header>
−
         </div>
+
−
      </div>
+
−
    </div>
+
−
  </section>
+
  
 +
        <!-- <video autoplay muted loop id="BGVideo"> 
 +
          <source src="https://static.igem.org/mediawiki/2019/b/bf/T--SEU--BGVideo.mp4" type="video/mp4">
 +
        </video> -->     
  
−
  <section class="content-box boxstyle-1 box-3">
 
−
  <div class="zerogrid">
 
−
  <div class="row wrap-box"><!--Start Box-->
 
−
  <div class="row">
 
−
  <div class="col-4-4">
 
−
  <div class="wrap-col post">
 
−
  <a class="button" href="a.html">Return to TEAM</a>
 
−
  </div>
 
−
  </div>
 
−
  </div>
 
−
  </div>
 
−
  </div>
 
−
  </section>
 
−
<hr class="line">
 
−
</div>
 
−
<script>
 
−
const el=document.getElementById('my-real-content');
 
−
document.body.appendChild(el);
 
−
</script>
 
  
 +
 +
        <div id="fullpage" class="fullpage-default">
 +
            <div class="section animated-row" data-section="slide02">
 +
                <div class="section-inner">
 +
                    <div class="about-section">
 +
                        <div class="row justify-content-center">
 +
                            <div class="col-md-10 wide-col-laptop">
 +
                                <div class="row">
 +
                                    <div class="col-md-10">
 +
                                        <br><br><br><br>
 +
                                        <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">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 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:80%"><br><br>
 +
                                        <center>
 +
                                        Number:
 +
                                        <input type="text" id="number" name="number" value="">
 +
                                        <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
 +
                                        <div id="alreadySubmit"></div>
 +
                                        <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button>
 +
                                        <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>
 +
                                    </div>
 +
                                    <div class="col-md-10">
 +
                                    <body>
 +
 +
                                        <center>
 +
                                           
 +
                                                <div class="diagram" id="words">
 +
                                                    <canvas id="canvas"  width="2500" height="25000"></canvas><br>
 +
                                                    <!-- <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> -->
 +
 +
                                                </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>

Revision as of 03:06, 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: