Team:SJTU-Software/Project/Tutorial

From 2014.igem.org

(Difference between revisions)
Line 487: Line 487:
   
   
                           <div  class="container2" style="margin:-4% 0 0 0;height:175px;width:100%;float:left; display:inline" >
                           <div  class="container2" style="margin:-4% 0 0 0;height:175px;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="#FFFFFF">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="#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.
</font></p>
</font></p>
                           </div>
                           </div>
Line 506: Line 506:
   
   
                           <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="Microsoft YaHei" size="5px"  color="#FFFFFF">2.2.1 How to start EASY BBK</font></p>
+
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#FFFFFF">2.2.1 How to start EASY BBK</font></p>
-
                             <p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">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="#FFFFFF">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>
Line 514: Line 514:
<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>
<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>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">3. Double click the Easybbk.jar and start Easybbk
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">3. Double click the Easybbk.jar and start Easybbk
</font></p>
</font></p>
Line 531: Line 531:
   
   
                           <div  class="container2" style="margin:-4% 0 0 0;height:5850px;width:100%;float:left; display:inline" >
                           <div  class="container2" style="margin:-4% 0 0 0;height:5850px;width:100%;float:left; display:inline" >
-
                           <p class="text"  style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">2.2.2 Home Page<br><br></font></p>
+
                           <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#FFFFFF">2.2.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>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">1/2. Click each icon to enter each function
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1/2. Click each icon to enter each function
</font></p>
</font></p>
-
<p class="text"  style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">2.2.3 Search<br><br></font></p>
+
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#FFFFFF">2.2.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>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Go back to home page<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1. Go back to home page<br>
2. Input keyword or sequence<br>
2. Input keyword or sequence<br>
3. Search by keyword<br>
3. Search by keyword<br>
Line 552: Line 552:
<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>
<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="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Adjust the weight of the 4 properties to make them add up to 100<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">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>
2. Click “Confirm” before starting search by keyword or sequence<br>
Line 559: Line 559:
<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>
<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="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Forward or Back to previous or next page<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1. Forward or Back to previous or next page<br>
2. Display detail information of the biobrick<br>
2. Display detail information of the biobrick<br>
3. Click to view the main page of the biobrick on iGEM Registry<br>
3. Click to view the main page of the biobrick on iGEM Registry<br>
Line 570: Line 570:
</font></p>
</font></p>
-
  <p class="text"  style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">2.2.4 Compare<br><br></font></p>
+
  <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#FFFFFF">2.2.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>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Remove the biobrick below from “Compare”<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1. Remove the biobrick below from “Compare”<br>
2. Click to view the main page of the biobrick on iGEM Registry<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
3. After biobricks being viewed in “compare”, click to go back to “search” results
Line 581: Line 581:
</font></p>
</font></p>
-
  <p class="text"  style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">2.2.5 Present
+
  <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#FFFFFF">2.2.5 Present
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">2.2.5.1 General introduction of Present Page
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#FFFFFF">2.2.5.1 General introduction of Present Page
</font></p>
</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>
<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="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Basic Functions<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1. Basic Functions<br>
2. Components on backbone<br>
2. Components on backbone<br>
3. Proteins, plasmid, bacteriophage and chassis<br>
3. Proteins, plasmid, bacteriophage and chassis<br>
Line 602: Line 602:
</font></p>
</font></p>
-
<p class="text"  style="margin:4% 60px auto"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">Basic Functions<br><br>
+
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#FFFFFF">Basic Functions<br><br>
</font></p>
</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>
<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="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Discard previous work and create a new bio-system<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1. Discard previous work and create a new bio-system<br>
2. Open previously saved XML file<br>
2. Open previously saved XML file<br>
3. Save the drawn bio-system as an XML file to further edit next time<br>
3. Save the drawn bio-system as an XML file to further edit next time<br>
Line 622: Line 622:
-
<p class="text"  style="margin:4% 60px auto"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">Components on in bio-systems<br><br></font></p>
+
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#FFFFFF">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>
<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="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Promoter<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1. Promoter<br>
2. Ribosome binding site (RBS)<br>
2. Ribosome binding site (RBS)<br>
3. Protein coding sequence<br>
3. Protein coding sequence<br>
Line 643: Line 643:
</font></p>
</font></p>
-
<p class="text"  style="margin:4% 60px auto"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">Relation and backbone in bio-systems<br><br></font></p>
+
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#FFFFFF">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>
<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="Microsoft YaHei" size="3px"  color="#FFFFFF">1. Inhibit<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1. Inhibit<br>
2. Enhance<br>
2. Enhance<br>
3. Other relations (e.g. this could denote a coding sequence code a protein.)<br>
3. Other relations (e.g. this could denote a coding sequence code a protein.)<br>
Line 656: Line 656:
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">2.2.5.2 Start presenting your bio-system
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#FFFFFF">2.2.5.2 Start presenting your bio-system
</font></p>
</font></p>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">1<SUP>st</SUP>: Draw backbone<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">1<SUP>st</SUP>: Draw backbone<br>
</font></p>
</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>
<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="Microsoft YaHei" size="3px"  color="#FFFFFF">Step 1. Click the “Backbone” icon<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">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>
Line 675: Line 675:
<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/d/d2/Sjtu_software_tu12.jpg"></img>
-
<p class="text"  style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">Step 1. Click the “Promoter” icon<br>
+
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#FFFFFF">Step 1. Click the “Promoter” icon<br>
Step 2. Click anywhere on drawing panel to add a “Promoter”<br>
Step 2. Click anywhere on drawing panel to add a “Promoter”<br>
Step 3. Drag the “Promoter” to “Backbone” to automatically become part of the sequence<br>
Step 3. Drag the “Promoter” to “Backbone” to automatically become part of the sequence<br>
Line 687: Line 687:
</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>

Revision as of 20:43, 16 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.



2.2.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

3. Double click the Easybbk.jar and start Easybbk



2.2.2 Home Page

1/2. Click each icon to enter each function

2.2.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

2.2.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

2.2.5 Present

2.2.5.1 General introduction of Present Page

1. Basic Functions
2. Components on backbone
3. Proteins, plasmid, bacteriophage and chassis
4. Relation between biobricks
5. Backbone
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

2.2.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 “Promoter” to “Backbone” to automatically become part of the sequence
Step 4. Drag the “Backbone” to anywhere on drawing panel



iGemdry2014@163.com

SJTU-Software,Shanghai,China

back to top