Team:SJTU-Software/Project/Tutorial
From 2014.igem.org
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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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=" | + | <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> | </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