Team:SJTU-Software/Project/Tutorial

From 2014.igem.org

(Difference between revisions)
 
(28 intermediate revisions not shown)
Line 7: Line 7:
<p>
<p>
-
<style type="text/css"> body {background-color:#E0E0E0; background-attachment:fixed} </style>
+
<style type="text/css"> body {background-color:#BEBEBE; background-attachment:fixed; width:1366px;height:auto;align:center} </style>  
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script>
Line 386: Line 386:
   </head>
   </head>
<body class="background"  bgcolor="yellow">
<body class="background"  bgcolor="yellow">
-
             <img src="https://static.igem.org/mediawiki/2014/6/60/Igemlogo_300px.png" style="width:100px; height:100px; position:fixed; top:10px; right:50px;"></img>
+
             <a href="http://www.igem.org/Main_Page" target=blank><img src="https://static.igem.org/mediawiki/2014/6/60/Igemlogo_300px.png" style="width:100px; height:100px; position:fixed; top:10px; right:50px;"></img></a>
  <div class="container" style="position:relative;z-index:3" >
  <div class="container" style="position:relative;z-index:3" >
-
 
+
            <ul id="nav">
-
            <ul id="nav" >
+
                 <li><a href="https://2014.igem.org/Team:SJTU-Software"><font face="Jokerman">Home</font></a></li>
-
                 <li><a href="https://2014.igem.org/Team:SJTU-Software">Home</a></li>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview"><font face="Jokerman">Software</font></a>
-
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview">Software</a>
+
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview">Overview</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview"><font face="Jokerman">Overview</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial">Tutorial</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman">Tutorial</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy">User Study</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman">User Study</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo">Demo</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman">Demo</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download">Download</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman">Download</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Database">Document</a>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Document</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database">Database</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Database</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/AssessmentModel">A M</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/AssessmentModel"><font face="Jokerman">Assessment Model</font></a></li>
-
                         <li><a href="#">C D</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Conponent"><font face="Jokerman">Conponents</font></a></li>
-
                         <li><a href="#">F D</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/FutureDevelopment"><font face="Jokerman">For Future</font></a></li>
-
                         <li><a href="#">E S S</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Event"><font face="Jokerman">Events</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a class="hsubs" href="">Requirement</a>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Requirement</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal">Medal</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Medal</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Collaboration">Collaboration</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Acknowledgement"><font face="Jokerman">Acknowledgement</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Notebook">Notebook</a></li>
+
                       
 +
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/HumanPractice"><font face="Jokerman">Human Practice</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Team</a>
+
                 <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Team</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Member</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Member</font></a></li>
-
                        <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Join Us</a></li>
+
                     
-
                        <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Sponsor</a></li>
+
                     </ul>
                     </ul>
                 </li>
                 </li>
Line 428: Line 427:
         </div>
         </div>
-
 
<div align="center">
<div align="center">
-
     <div class="container2" style="height:10225px;width:71%;margin:0 0 0 0">
+
     <div class="container2" style="height:11175px;width:71%;margin:4.3% 0 0 0">
           <div align=left>
           <div align=left>
-
           <div  class="container2" style="height:10225px;width:28%;background-color:#636363;float:left; display:inline" >
+
           <div  class="container2" style="height:11175px;width:28%;background-color:#636363;float:left; display:inline" >
           <div id="content" >
           <div id="content" >
<ul id="expmenu-freebie" style="position:fixed;" >
<ul id="expmenu-freebie" style="position:fixed;" >
Line 441: Line 439:
<li>
<li>
<div class="header" >
<div class="header" >
-
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Overview" ><font color=#ffffff>Overview</font></a></span>
+
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Overview" ><font face="Jokerman" color=#ffffff>Overview</font></a></span>
<span class="arrow up"></span>
<span class="arrow up"></span>
</div>
</div>
Line 449: Line 447:
<li>
<li>
<div class="header">
<div class="header">
-
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font color=#ffffff>Tutorial</font></a></span>
+
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman" color=#ffffff>Tutorial</font></a></span>
<span class="arrow up"></span>
<span class="arrow up"></span>
</div>
</div>
                                                 <ul class="menu">
                                                 <ul class="menu">
-
<li><a href="#start">How to start</a></li>
+
<li><a href="#start"><font face="Jokerman">How to start</font></a></li>
-
<li><a href="#search">Search</a></li>
+
<li><a href="#search"><font face="Jokerman">Search</font></a></li>
-
<li><a href="#compare">Compare</a></li>
+
<li><a href="#compare"><font face="Jokerman">Compare</font></a></li>
-
                                                         <li><a href="#present">Present</a></li>
+
                                                         <li><a href="#present"><font face="Jokerman">Present</font></a></li>
-
<li><a href="#upload">Upload</a></li>
+
<li><a href="#upload"><font face="Jokerman">Upload</font></a></li>
                                                        
                                                        
</ul>
</ul>
Line 464: Line 462:
<li>
<li>
<div class="header">
<div class="header">
-
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font color=#ffffff>User Study</font></a></span>
+
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman" color=#ffffff>User Study</font></a></span>
<span class="up"></span>
<span class="up"></span>
</div>
</div>
Line 471: Line 469:
<li>
<li>
<div class="header">
<div class="header">
-
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font color=#ffffff>Demo</font></a></span>
+
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman" color=#ffffff>Demo</font></a></span>
</div>
</div>
</li>
</li>
                                         <li>
                                         <li>
<div class="header">
<div class="header">
-
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font color=#ffffff>Download</font></a></span>
+
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman" color=#ffffff>Download</font></a></span>
</div>
</div>
</li>
</li>
Line 515: Line 513:
   
   
                           <div  class="container2" style="margin:-4% 0 0 0;height:525px;width:100%;float:left; display:inline" >
                           <div  class="container2" style="margin:-4% 0 0 0;height:525px;width:100%;float:left; display:inline" >
-
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">2.2.1 How to start EASY BBK</font></p>
+
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">1 How to start EASY BBK</font></p>
                             <p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Software environment: Java SE Development Kit 6 and later version.<br>
                             <p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Software environment: Java SE Development Kit 6 and later version.<br>
1. Download EASY BBK from github<br>
1. Download EASY BBK from github<br>
-
2. Download the latest JDK from <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target=blank>http://www.oracle.com/technetwork/java/javase/downloads/index.html</a><br>
+
2. Download the latest JDK from <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target=blank>http://www.oracle.com/technetwork/java/javase/downloads/index.html</a><br>(Later versions of our software(released before 21st Oct.) will not require users to install JDK before start EasyBBK)
</font></p>
</font></p>
Line 534: Line 532:
   
   
  <div align=center>
  <div align=center>
-
     <div  class="container2" style="height:9900px;width:100%;background-color:#C2FFC5;" >
+
     <div  class="container2" style="height:10500px;width:100%;background-color:#C2FFC5;" >
<div align=left style="margin:0 0 0 0 ">
<div align=left style="margin:0 0 0 0 ">
                           <br>
                           <br>
                           <br>
                           <br>
   
   
-
                           <div  class="container2" style="margin:-4% 0 0 0;height:9900px;width:100%;float:left; display:inline" >
+
                           <div  class="container2" style="margin:-4% 0 0 0;height:10500px;width:100%;float:left; display:inline" >
-
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">2.2.2 Home Page<br><br></font></p>
+
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">2 Home Page<br><br></font></p>
                             <img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/0/03/Sjtu_software_tu2.jpg"></img>
                             <img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/0/03/Sjtu_software_tu2.jpg"></img>
Line 546: Line 544:
</font></p>
</font></p>
-
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">2.2.3 Search<br><br></font></p>
+
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">3 Search<br><br></font></p>
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/8/85/Sjtu_software_tu3.jpg"></img>
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/8/85/Sjtu_software_tu3.jpg"></img>
Line 582: Line 580:
-
  <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >2.2.4 Compare<br><br></font></p>
+
  <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >4 Compare<br><br></font></p>
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/9/91/Sjtu_software_tu6.jpg"></img>
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/9/91/Sjtu_software_tu6.jpg"></img>
Line 596: Line 594:
</font></p>
</font></p>
-
  <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >2.2.5 Present
+
  <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >5 Present
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">2.2.5.1 General introduction of Present Page
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">5.1 General introduction of Present Page
</font></p>
</font></p>
Line 606: Line 604:
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Basic Functions<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Basic Functions<br>
-
2. Components on backbone<br>
+
2. Backbone<br>
-
3. Proteins, plasmid, bacteriophage and chassis<br>
+
3. Components on backbone<br>
-
4. Relation between biobricks<br>
+
4. Proteins, plasmid, virus and bacteria<br>
-
5. Backbone<br>
+
5. Relation between biobricks<br>
6. Style settings of lines above<br>
6. Style settings of lines above<br>
7. Bio-system drawing panel<br>
7. Bio-system drawing panel<br>
Line 671: Line 669:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">2.2.5.2 Start presenting your bio-system
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">5.2 Start presenting your bio-system
</font></p>
</font></p>
Line 679: Line 677:
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/6e/Sjtu_software_tu11.jpg"></img>
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/6e/Sjtu_software_tu11.jpg"></img>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the “Backbone” icon<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Backbone" icon<br>
-
Step 2. Click anywhere on drawing panel to add a “Backbone”<br>
+
Step 2. Click anywhere on drawing panel to add a "Backbone"<br>
-
Step 3. Stretch the “Backbone”<br>
+
Step 3. Stretch the "Backbone"<br>
-
Step 4. Drag the “Backbone” to anywhere on drawing panel<br><br>
+
Step 4. Drag the "Backbone" to anywhere on drawing panel<br><br>
2<SUP>nd</SUP>: Add a component to backbone
2<SUP>nd</SUP>: Add a component to backbone
Line 698: Line 696:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">3<SUP>nd</SUP>: Adjust the position of the components or backbones already existing on the drawing panel
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">3<SUP>rd</SUP>: Adjust the position of the components or backbones already existing on the drawing panel
<br>
<br>
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/4/46/Sjtu_software_tu13.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Drag the "Protein Coding Sequence" to a suitable position<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Drag the "Protein Coding Sequence" to a suitable position<br>
Line 716: Line 714:
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/a/af/Sjtu_software_tu14.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Protein 2" icon<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Protein 2" icon<br>
Line 725: Line 723:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">5<SUP>th</SUP>:Draw a relation between components
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">5<SUP>th</SUP>: Draw a relation between components
<br>
<br>
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/66/Sjtu_software_tu15.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Inhibit" icon<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Inhibit" icon<br>
Line 739: Line 737:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">6<SUP>th</SUP>:Add text to drawing panel
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">6<SUP>th</SUP>: Add text to drawing panel
<br>
<br>
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/a/a1/Sjtu_software_tu16.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the “Text” icon<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the “Text” icon<br>
Line 753: Line 751:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">7<SUP>th</SUP>:Delete a component on drawing panel
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">7<SUP>th</SUP>: Delete a component on drawing panel
<br>
<br>
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/3/33/Sjtu_software_tu17.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click this icon<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click this icon<br>
Line 765: Line 763:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">8<SUP>th</SUP>:Set the detail of the component on drawing panel
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">8<SUP>th</SUP>: Set the detail of the component on drawing panel
<br>
<br>
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/5/5f/Sjtu_software_tu18.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Double click any component on backbone<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Double click any component on backbone<br>
Line 780: Line 778:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">9<SUP>th</SUP>:On finishing presenting the bio-system (Using 2013 Buenos Aires as example)
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">9<SUP>th</SUP>: Upload the presented biobrick
<br>
<br>
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/5/5c/Sjtu_software_tu19.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424" >By setting the detail on all the biobricks on a single backbone, user can choose to upload the biobrick to Registry or Easy BBK database. The upload form will be automatically filled out.<br>
 +
Step 1. Double click the backbone of the biobrick<br>
 +
Step 2. Click "OK" to confirm to upload the biobrick<br>
 +
Step 3. Go to "upload" to check the filled out form
-
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424" id="upload">Step 1. Save the drawn bio-system as an XML file to further edit next time<br>
 
-
Step 2. Export the picture of the bio-system as .jpg, .bmp or .png file.<br>
 
-
Step 3. Open previously saved XML file continue drawing
 
<br>
<br>
 +
<br>
 +
</font></p>
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">10<SUP>th</SUP>: On finishing presenting the bio-system (Using 2013 Buenos Aires as example)
<br>
<br>
</font></p>
</font></p>
-
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >2.2.6 Upload<br><br></font></p>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/2/24/Sjtu_software_tu20.jpg"></img>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424" >Step 1. Save the drawn bio-system as an XML file to further edit next time<br>
 +
Step 2. Export the picture of the bio-system as .jpg, .bmp or .png file.<br>
 +
Step 3. Open previously saved XML file continue drawing</font></p>
 +
<p id="upload">
 +
<br>
 +
<br>
 +
</p>
 +
 
 +
<p class="text"  style="margin:5% 60px auto" ><font face="Helvetica" size="5px"  color="#242424" >6 Upload<br><br></font></p>
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/9/9f/Sjtu_software_tu21.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Input information of biobrick
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Input information of biobrick
<br>
<br>
Line 800: Line 813:
</font></p>
</font></p>
-
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/60/Sjtu_software_tu22.jpg"></img>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Input iGEM user name and password<br>
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Input iGEM user name and password<br>
2. Click to submit the biobrick to Easy BBK database<br>
2. Click to submit the biobrick to Easy BBK database<br>
Line 822: Line 835:
      
      
<div align=center>
<div align=center>
-
     <div  class="container2" style="height:150px;width:71%;background-color: #272727;" >
+
     <div  class="container2" style="height:150px;width:71%;background-color: #272727;margin:0.5% " >
           <div  class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" >
           <div  class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" >
  <div  style=" float:left;margin:3% auto auto 4%;">       
  <div  style=" float:left;margin:3% auto auto 4%;">       
Line 854: Line 867:
                           <br>
                           <br>
                           <br>
                           <br>
-
  <p class="container2"  style="margin:0% 5% auto"><font face="SimSun" size="4px"  color="#FFFFFF">iGemdry2014@163.com</font></p>
+
  <p class="container2"  style="margin:0% 5% auto"><font face="MoolBoran" size="5px"  color="#FFFFFF">iGemdry2014@163.com</font></p>
-
                           <p class="container2" style="margin:0 5% auto"><font face="SimSun" size="4px"  color="#FFFFFF">SJTU-Software,Shanghai,China</font></p>
+
                           <p class="container2" style="margin:0 5% auto"><font face="MoolBoran" size="5px"  color="#FFFFFF">SJTU-Software,Shanghai,China</font></p>
                            
                            
                            
                            

Latest revision as of 20:09, 17 October 2014




Tutorial

“Easy BBK(An Easy Biobrick Blueprint's pacKage)" has four main function: "search", "compare", "present", and "upload". This part will guide users about how to use this software tool.



1 How to start EASY BBK

Software environment: Java SE Development Kit 6 and later version.
1. Download EASY BBK from github
2. Download the latest JDK from http://www.oracle.com/technetwork/java/javase/downloads/index.html
(Later versions of our software(released before 21st Oct.) will not require users to install JDK before start EasyBBK)

3. Double click the Easybbk.jar and start Easybbk



2 Home Page

1/2. Click each icon to enter each function

3 Search

1. Go back to home page
2. Input keyword or sequence
3. Search by keyword
4. Search by sequence
5. Display advanced search conditions

1. Adjust the weight of the 4 properties to make them add up to 100
2. Click “Confirm” before starting search by keyword or sequence

1. Forward or Back to previous or next page
2. Display detail information of the biobrick
3. Click to view the main page of the biobrick on iGEM Registry
4. Check to add the biobrick to “compare”
5. Click to view the result most related to the biobrick on Google Scholar
6. Go to the previous page of search results
7. Go to the next page of search results
8. After biobricks being added from “search”, click to go to “compare” the biobricks


4 Compare

1. Remove the biobrick below from “Compare”
2. Click to view the main page of the biobrick on iGEM Registry
3. After biobricks being viewed in “compare”, click to go back to “search” results

5 Present

5.1 General introduction of Present Page

1. Basic Functions
2. Backbone
3. Components on backbone
4. Proteins, plasmid, virus and bacteria
5. Relation between biobricks
6. Style settings of lines above
7. Bio-system drawing panel
8. Status bar

Basic Functions

1. Discard previous work and create a new bio-system
2. Open previously saved XML file
3. Save the drawn bio-system as an XML file to further edit next time
4. Export the picture of the bio-system as .jpg, .bmp or .png file.
5. Add text to the drawing panel
6. Change the font, size and color of the text
7. Delete components on drawing panel
8. Undo
9. Redo

Components on in bio-systems

1. Promoter
2. Ribosome binding site (RBS)
3. Protein coding sequence
4. Terminator
5. Primer
6. Reporter
7. Protein 1
8. Protein 2
9. Combined protein
10. Plasmid
11. Virus
12. Bacteria

Relation and backbone in bio-systems

1. Inhibit
2. Enhance
3. Other relations (e.g. this could denote a coding sequence code a protein.)
4. Backbone
5. Style settings of lines above

5.2 Start presenting your bio-system

1st: Draw backbone

Step 1. Click the "Backbone" icon
Step 2. Click anywhere on drawing panel to add a "Backbone"
Step 3. Stretch the "Backbone"
Step 4. Drag the "Backbone" to anywhere on drawing panel

2nd: Add a component to backbone

Step 1. Click the "Promoter" icon
Step 2. Click anywhere on drawing panel to add a "Promoter"
Step 3. Drag the "Promote" near "Backbone"
Step 4. Release the mouth to make the "Promoter" automatically become part of the sequence

3rd: Adjust the position of the components or backbones already existing on the drawing panel

1. Drag the "Protein Coding Sequence" to a suitable position
2. Stretch the "Backbone" to a suitable length
3. Drag the "Backbone" to anywhere on drawing panel

4th: Add proteins to bio-system

Step 1. Click the "Protein 2" icon
Step 2. Click anywhere on drawing panel to add proteins

5th: Draw a relation between components

Step 1. Click the "Inhibit" icon
Step 2. Click here
Step 3. Click here
Step 4. Click here (More clicks could be done until you get your desired shape of this relation.)

6th: Add text to drawing panel

Step 1. Click the “Text” icon
Step 2. Click anywhere on drawing panel to add text
Step 3. Click to change the font, size and color of the text

7th: Delete a component on drawing panel

Step 1. Click this icon
Step 2. Click any component on drawing panel to delete it

8th: Set the detail of the component on drawing panel

Step 1. Double click any component on backbone
Step 2. Input a part name
Step 3. Click “Set” to search this part out from database
Step 4. Click “OK” to set the detail of the component

9th: Upload the presented biobrick

By setting the detail on all the biobricks on a single backbone, user can choose to upload the biobrick to Registry or Easy BBK database. The upload form will be automatically filled out.
Step 1. Double click the backbone of the biobrick
Step 2. Click "OK" to confirm to upload the biobrick
Step 3. Go to "upload" to check the filled out form

10th: On finishing presenting the bio-system (Using 2013 Buenos Aires as example)

Step 1. Save the drawn bio-system as an XML file to further edit next time
Step 2. Export the picture of the bio-system as .jpg, .bmp or .png file.
Step 3. Open previously saved XML file continue drawing



6 Upload

1. Input information of biobrick

1. Input iGEM user name and password
2. Click to submit the biobrick to Easy BBK database
3. Click to submit the biobrick to Registry



iGemdry2014@163.com

SJTU-Software,Shanghai,China

back to top