Team:SJTU-Software/Project/Tutorial

From 2014.igem.org

(Difference between revisions)
 
(133 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">
-
              
+
             <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" style="position:fixed;width:71%" >
+
                 <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:1525px;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:1525px;width:28%;background-color:#E0E0E0;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>
</li>
</li>
 +
                                     
<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">
 +
<li><a href="#start"><font face="Jokerman">How to start</font></a></li>
 +
<li><a href="#search"><font face="Jokerman">Search</font></a></li>
 +
<li><a href="#compare"><font face="Jokerman">Compare</font></a></li>
 +
                                                        <li><a href="#present"><font face="Jokerman">Present</font></a></li>
 +
<li><a href="#upload"><font face="Jokerman">Upload</font></a></li>
 +
                                                     
 +
</ul>
</li>
</li>
<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="arrow down"></span>
+
<span class="up"></span>
</div>
</div>
Line 462: 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 478: Line 485:
            
            
              
              
-
           <div  class="container2" style="height:800px;width:72%;background-color:#6F00D2;float:left; display:inline" >
+
           <div  class="container2" style="height:800px;width:72%;background-color:#E0E0E0;float:left; display:inline" >
           <div align=center >
           <div align=center >
 
 
-
     <div  class="container2" style="height:225px;width:100%;background-color: #6F00D2;margin:0 0 0 0 ">
+
     <div  class="container2" style="height:150px;width:100%;background-color:#C2FFC5;margin:0 0 0 0 ">
<div align=left  >
<div align=left  >
                           <br>
                           <br>
                           <br>
                           <br>
   
   
-
                           <div  class="container2" style="margin:-4% 0 0 0;height:225px;width:100%;float:left; display:inline" >
+
                           <div  class="container2" style="margin:-4% 0 0 0;height:150px;width:100%;float:left; display:inline" >
-
                           <p class="text"  style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">Tutorial</font></p>
+
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">Tutorial</font></p>
-
                             <p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">“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.
+
                             <p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">“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.
</font></p>
</font></p>
                           </div>
                           </div>
Line 500: Line 507:
<div align=center >
<div align=center >
 
 
-
     <div  class="container2" style="height:450px;width:100%;background-color:#408080;margin:0 0 0 0 ">
+
     <div  class="container2" style="height:525px;width:100%;background-color:#C2FFC5;margin:0 0 0 0 " id="start">
<div align=left  >
<div align=left  >
                           <br>
                           <br>
                           <br>
                           <br>
   
   
-
                           <div  class="container2" style="margin:-4% 0 0 0;height:450px;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="Microsoft YaHei" size="5px"  color="#FFFFFF">Search</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="Microsoft YaHei" size="3px"  color="#FFFFFF">This function is provide to users to search and evaluate the candidate biobricks based on keywords or part names. It can help users to decide if an existing biobrick meets their requirements before they start their experiments.<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>
 +
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>
-
The searching engine is based on a database converted from the iGEM biobrick database (Date, or version number). There are 27,093 biobricks in the database If the input are one or more keywords, the biobricks related to the keywords will be listed, sorted and displayed to the users. Advanced search mode is also provided to refine or sort the search results based.  
+
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/a/a7/Sjtu_software_tu1.jpg"></img>
-
Besides, users can search the biobrick database based on sequence similarity. If users input a DNA sequence,  the hit sequences in the database by NCBI Blastn will be returned, sorted by their E-values and displayed.
+
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">3. Double click the Easybbk.jar and start Easybbk
</font></p>
</font></p>
 +
 +
                           </div>
                           </div>
                            
                            
Line 519: Line 532:
   
   
  <div align=center>
  <div align=center>
-
     <div  class="container2" style="height:250px;width:100%;background-color:#64A600;" >
+
     <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:250px;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="Microsoft YaHei" size="5px"  color="#FFFFFF">Present</font></p>
+
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">2 Home Page<br><br></font></p>
-
                             <p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">Users could draw their biobrick system diagram using EASY BBK. With standardized biobrick icons according to the iGEM Registry, a standardized picture of a biosystem could be plotted using our tool. The result can be exported to a picture file in jpeg, bmp and png format, which could be used for the presentation in the publication, presentation or later design.</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>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424" id="search">1/2. Click each icon to enter each function
 +
</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>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Go back to home page<br>
 +
2. Input keyword or sequence<br>
 +
3. Search by keyword<br>
 +
4. Search by sequence<br>
 +
5. Display advanced search conditions<br>
 +
<br>
 +
 
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/9/92/Sjtu_software_tu4.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Adjust the weight of the 4 properties to make them add up to 100<br>
 +
2. Click “Confirm” before starting search by keyword or sequence<br>
 +
 
 +
<br></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/6b/Sjtu_software_tu5.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Forward or Back to previous or next page<br>
 +
2. Display detail information of the biobrick<br>
 +
3. Click to view the main page of the biobrick on iGEM Registry<br>
 +
4. Check to add the biobrick to “compare”<br>
 +
5. Click to view the result most related to the biobrick on Google Scholar<br>
 +
6. Go to the previous page of search results<br>
 +
7. Go to the next page of search results<br>
 +
8. After biobricks being added from “search”, click to go to “compare” the biobricks<br>
 +
</font></p>
 +
<p class="text"  style="margin:3% 60px auto"id="compare"><font face="Helvetica" size="3px"  color="#242424">
 +
<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>
 +
 
 +
<p class="text"  style="margin:3% 60px auto" id="present"><font face="Helvetica" size="3px"  color="#242424">1. Remove the biobrick below from “Compare”<br>
 +
2. Click to view the main page of the biobrick on iGEM Registry<br>
 +
3. After biobricks being viewed in “compare”, click to go back to “search” results
 +
 
 +
<br><br>
 +
</font></p>
 +
<p class="text"  style="margin:3% 60px auto"id="compare"><font face="Helvetica" size="3px"  color="#242424" >
 +
 
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >5 Present
 +
 
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">5.1 General introduction of Present Page
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/b/b6/Sjtu_software_tu7.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Basic Functions<br>
 +
2. Backbone<br>
 +
3. Components on backbone<br>
 +
4. Proteins, plasmid, virus and bacteria<br>
 +
5. Relation between biobricks<br>
 +
6. Style settings of lines above<br>
 +
7. Bio-system drawing panel<br>
 +
8. Status bar
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#242424">Basic Functions<br><br>
 +
 
 +
</font></p>
 +
<img  style="margin:1% auto auto 9%;height:150px;width:auto;" src="https://static.igem.org/mediawiki/2014/3/3b/Sjtu_software_tu8.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Discard previous work and create a new bio-system<br>
 +
2. Open previously saved XML file<br>
 +
3. Save the drawn bio-system as an XML file to further edit next time<br>
 +
4. Export the picture of the bio-system as .jpg, .bmp or .png file.<br>
 +
5. Add text to the drawing panel<br>
 +
6. Change the font, size and color of the text<br>
 +
7. Delete components on drawing panel<br>
 +
8. Undo<br>
 +
9. Redo
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
 
 +
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#242424">Components on in bio-systems<br><br></font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:250px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/68/Sjtu_software_tu9.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Promoter<br>
 +
2. Ribosome binding site (RBS)<br>
 +
3. Protein coding sequence<br>
 +
4. Terminator<br>
 +
5. Primer<br>
 +
6. Reporter<br>
 +
7. Protein 1<br>
 +
8. Protein 2<br>
 +
9. Combined protein<br>
 +
10. Plasmid<br>
 +
11. Virus<br>
 +
12. Bacteria
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#242424">Relation and backbone in bio-systems<br><br></font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:150px;width:auto;" src="https://static.igem.org/mediawiki/2014/0/04/Sjtu_software_tu10.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Inhibit<br>
 +
2. Enhance<br>
 +
3. Other relations (e.g. this could denote a coding sequence code a protein.)<br>
 +
4. Backbone<br>
 +
5. Style settings of lines above
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">5.2 Start presenting your bio-system
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1<SUP>st</SUP>: Draw backbone<br>
 +
</font></p>
 +
 
 +
<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>
 +
Step 2. Click anywhere on drawing panel to add a "Backbone"<br>
 +
Step 3. Stretch the "Backbone"<br>
 +
Step 4. Drag the "Backbone" to anywhere on drawing panel<br><br>
 +
 
 +
2<SUP>nd</SUP>: Add a component to backbone
 +
<br>
 +
</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>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Promoter" icon<br>
 +
Step 2. Click anywhere on drawing panel to add a "Promoter"<br>
 +
Step 3. Drag the "Promote" near "Backbone"<br>
 +
Step 4. Release the mouth to make the "Promoter" automatically become part of the sequence
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<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>
 +
</font></p>
 +
 
 +
<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>
 +
2. Stretch the "Backbone" to a suitable length<br>
 +
3. Drag the "Backbone" to anywhere on drawing panel
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">4<SUP>th</SUP>: Add proteins to bio-system
 +
<br>
 +
</font></p>
 +
 
 +
<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>
 +
Step 2. Click anywhere on drawing panel to add proteins
 +
 
 +
<br>
 +
<br>
 +
</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
 +
<br>
 +
</font></p>
 +
 
 +
<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>
 +
Step 2. Click here<br>
 +
Step 3. Click here<br>
 +
Step 4. Click here (More clicks could be done until you get your desired shape of this relation.)
 +
<br>
 +
<br>
 +
</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
 +
<br>
 +
</font></p>
 +
 
 +
<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>
 +
Step 2. Click anywhere on drawing panel to add text<br>
 +
Step 3. Click to change the font, size and color of the text
 +
 
 +
<br>
 +
<br>
 +
</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
 +
<br>
 +
</font></p>
 +
 
 +
<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>
 +
Step 2. Click any component on drawing panel to delete it
 +
<br>
 +
<br>
 +
</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
 +
<br>
 +
</font></p>
 +
 
 +
<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>
 +
Step 2. Input a part name<br>
 +
Step 3. Click “Set” to search this part out from database<br>
 +
Step 4. Click “OK” to set the detail of the component
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">9<SUP>th</SUP>: Upload the presented biobrick
 +
<br>
 +
</font></p>
 +
 
 +
<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
 +
 
 +
<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>
 +
</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>
 +
 
 +
<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
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<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>
 +
2. Click to submit the biobrick to Easy BBK database<br>
 +
3. Click to submit the biobrick to Registry
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
                           </div>
                           </div>
                            
                            
Line 532: Line 827:
</div>
</div>
</div>
</div>
-
<div align=center>
+
 
-
    <div  class="container2" style="height:200px;width:100%;background-color:#9F4D95;" >
+
-
<div align=left style="margin:0 0 0 0 ">
+
-
                          <br>
+
-
                          <br>
+
-
 
+
-
                          <div  class="container2" style="margin:-4% 0 0 0;height:200px;width:100%;float:left; display:inline" >
+
-
                          <p class="text"  style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">Upload</font></p>
+
-
                            <p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">Here, users could not only upload their self-created biobricks to our database, but also submit their form filled out in our software to the Registry to upload their self-created biobricks.</font></p>
+
-
                          </div>
+
-
                         
+
-
                        </div>
+
-
</div>
+
-
</div>
+
-
<div align=center>
+
-
    <div  class="container2" style="height:200px;width:100%;background-color:#D94600;" >
+
-
<div align=left style="margin:0 0 0 0 ">
+
-
                          <br>
+
-
                          <br>
+
-
  <div  class="container2" style="margin:-4% 0 0 0;height:200px;width:28%;float:left; display:inline;" >
+
-
                            <img  style="margin:10% auto auto 20%;height:150px;width:auto" src="https://static.igem.org/mediawiki/2014/e/ef/Sjtu_software_compare.png"></img>
+
-
                          </div>
+
-
                          <div  class="container2" style="margin:-4% 0 0 0;height:200px;width:72%;float:left; display:inline" >
+
-
                          <p class="text"  style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">Compare</font></p>
+
-
                            <p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">Multiple biobricks can be selected and compared. You can search and get multiple (up to three) biobricks, and compare them side by side. </font></p>
+
-
                          </div>
+
-
                        </div>
+
-
</div>
+
-
</div>
+
           </div>           
           </div>           
           </div>
           </div>
Line 568: 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:150px;width:68%;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%;">       
<a href="http://www.sjtu.edu.cn"target="_blank">     
<a href="http://www.sjtu.edu.cn"target="_blank">     
<img  style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/7/77/Sjtu_software_SJTU_Logo.png"></img></a></div>
<img  style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/7/77/Sjtu_software_SJTU_Logo.png"></img></a></div>
 +
 +
<div  style="float:left;margin:3% auto auto 4%;">     
<div  style="float:left;margin:3% auto auto 4%;">     
<a href="http://life.sjtu.edu.cn"target="_blank">         
<a href="http://life.sjtu.edu.cn"target="_blank">         
Line 578: Line 847:
<div  style=" float:left;margin:3% auto auto 4%;">  
<div  style=" float:left;margin:3% auto auto 4%;">  
-
<a href="http://skmml.sjtu.edu.cn/"target="_blank">        
+
<a href="http://www.seiee.sjtu.edu.cn/"target="_blank">        
-
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/2/28/Sjtu_software_%E5%BE%AE%E7%94%9F%E7%89%A9%E4%BB%A3%E8%B0%A2%E9%87%8D%E7%82%B9%E5%AE%9E%E9%AA%8C%E5%AE%A4logo.png"></img></a></div>
+
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/5b/Sjtu_software_seiee.png"></img></a></div>
 +
         
 +
 
<div  style="float:left;margin:3% auto auto 4%;">  
<div  style="float:left;margin:3% auto auto 4%;">  
-
<a href="http://apex.sjtu.edu.cn/"target="_blank">
+
<a href="http://bme.sjtu.edu.cn/"target="_blank">
-
<img  style=height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/52/Sjtu_software_lablogo.png"></img></a></div>
+
<img  style=height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/3/31/Sjtu_software_sbe.jpg"></img></a></div>
<div  style=" float:left;margin:3% auto auto 4%;">  
<div  style=" float:left;margin:3% auto auto 4%;">  
-
<a href="http://www.seiee.sjtu.edu.cn/"target="_blank">        
+
<a href="http://skmml.sjtu.edu.cn/"target="_blank">        
-
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/5b/Sjtu_software_seiee.png"></img></a></div>
+
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/2/28/Sjtu_software_%E5%BE%AE%E7%94%9F%E7%89%A9%E4%BB%A3%E8%B0%A2%E9%87%8D%E7%82%B9%E5%AE%9E%E9%AA%8C%E5%AE%A4logo.png"></img></a></div>
-
          </div>
+
 
-
             <div  class="container2" style="height:150px;width:32%;background-color: #272727;float:left; display:inline;" >
+
 
-
<div align=right style="margin:-3px ">
+
 
 +
 
 +
             <div  class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" >
 +
<div align=center style="margin:-10px ">
                           <br>
                           <br>
                           <br>
                           <br>
-
  <p class="container2"  style="margin:2% 5% auto"><font face="SimSun" size="4px"  color="#FFFFFF">SJTU-Software</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">Shanghai Jiao Tong University</font></p>
+
                           <p class="container2" style="margin:0 5% auto"><font face="MoolBoran" size="5px"  color="#FFFFFF">SJTU-Software,Shanghai,China</font></p>
-
                          <p class="container2" style="margin:0 5% auto"> <font face="SimSun" size="4px"  color="#FFFFFF">800, Dongchuan Road</font></p>
+
                            
-
                           <p class="container2" style="margin:0 5% auto"> <font face="SimSun" size="4px"  color="#FFFFFF">200240 Shanghai, China</font></p>
+
                            
                            
                         </div>
                         </div>

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