Team:HFUT CHINA/user guide.html
From 2014.igem.org
(One intermediate revision not shown) | |||
Line 12: | Line 12: | ||
<script type="text/javascript" src="https://2014.igem.org/Team:HFUT_CHINA/webwidget_menu_dropdown.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:HFUT_CHINA/webwidget_menu_dropdown.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
<script type="text/javascript" src="https://2014.igem.org/Team:HFUT_CHINA/head_slide.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:HFUT_CHINA/head_slide.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
<!-- | <!-- | ||
- | .STYLE1 { | + | .STYLE1 { font-family: Arial, Helvetica, sans-serif; |
- | + | ||
font-size: 150%; | font-size: 150%; | ||
} | } | ||
- | .STYLE3 { | + | .STYLE3 { font-family: Arial, Helvetica, sans-serif; |
- | + | font-size: 110%; | |
- | font-size: | + | |
font-weight: bold; | font-weight: bold; | ||
} | } | ||
- | .STYLE5 {font-family: Arial, Helvetica, sans-serif; font-size: | + | .STYLE5 {font-family: Arial, Helvetica, sans-serif; font-size: 110%; } |
- | .STYLE6 { | + | .STYLE6 { font-family: Arial, Helvetica, sans-serif; |
- | + | ||
font-weight: bold; | font-weight: bold; | ||
- | font-size: | + | font-size: 125%; |
} | } | ||
+ | .STYLE12 {font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #000000; } | ||
--> | --> | ||
</style> | </style> | ||
</head> | </head> | ||
- | |||
- | |||
<body class="body_background"> | <body class="body_background"> | ||
<div class="wrap"> | <div class="wrap"> | ||
+ | <div class="wrapper"> | ||
<div class="header"> | <div class="header"> | ||
<div class="logo"> | <div class="logo"> | ||
Line 49: | Line 45: | ||
<li><a href="https://2014.igem.org/Team:HFUT_CHINA/Overview.html">Overview</a></li> | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Overview.html">Overview</a></li> | ||
- | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Examples.html"> | + | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Examples.html">Results</a></li> |
<li><a href="https://2014.igem.org/Team:HFUT_CHINA/Future_Work.html">Future Work</a></li> | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Future_Work.html">Future Work</a></li> | ||
- | <li><a href="https:// | + | <li><a href="https://github.com/igemsoftware/HFUT_CHINA_2014.git">Download</a></li> |
</ul> | </ul> | ||
Line 59: | Line 55: | ||
<ul> | <ul> | ||
<li><a href="https://2014.igem.org/Team:HFUT_CHINA/Devblogs.html">Devblogs</a></li> | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Devblogs.html">Devblogs</a></li> | ||
- | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Database&Algorithm.html">Database | + | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Database&Algorithm.html">Database</a></li> |
- | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/ | + | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/user_guide.html">Tutorial</a></li> |
Line 88: | Line 84: | ||
<li><a href="https://2014.igem.org/Team:HFUT_CHINA/Member.html">Member</a></li> | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Member.html">Member</a></li> | ||
<li><a href="https://2014.igem.org/Team:HFUT_CHINA/Contact_us.html">Contact us</a></li> | <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Contact_us.html">Contact us</a></li> | ||
- | |||
</ul></li> | </ul></li> | ||
+ | <div id="igem"> | ||
<div id="igem"><a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/5/50/Hfut-Pic5.png" width="50" height="38" id="igemimg"></a></div> | <div id="igem"><a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/5/50/Hfut-Pic5.png" width="50" height="38" id="igemimg"></a></div> | ||
- | + | </div> | |
</ul> | </ul> | ||
- | |||
</div> | </div> | ||
<div style="clear: both"></div> | <div style="clear: both"></div> | ||
- | |||
</div> | </div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
- | < | + | <div class="content_bg1"> |
- | < | + | <div class="wrap"> |
- | + | <div class="wrapper"> | |
+ | <div class="main"> | ||
+ | <div class="details"> | ||
+ | <h2 class="style"><span class="STYLE12">BioFunctional Designer User Gudie</span></h2> | ||
+ | <div ></div> | ||
+ | <div class="det-para"> | ||
+ | |||
+ | <div align="center" class="STYLE2"><img src="https://static.igem.org/mediawiki/2014/e/ee/Hfut-B7caedead8d0bebbaf4d2384e0bfe387.jpg" width="785" height="115"> </div> </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <p align="center" class="STYLE1"> </p> | ||
<p><span class="STYLE3">Biofunctional Desginer</span><span class="STYLE5"> is a CAD tool for Synthetic Biology design</span></p> | <p><span class="STYLE3">Biofunctional Desginer</span><span class="STYLE5"> is a CAD tool for Synthetic Biology design</span></p> | ||
- | + | <p> </p> | |
<h2 class="STYLE6">Breif Introduction</h2> | <h2 class="STYLE6">Breif Introduction</h2> | ||
- | + | <p class="STYLE6"> </p> | |
- | <p class="STYLE5">The BioFunctional Designer is an assistant design tool for Synthetic Biology design, which determinded to help the user design model swifter. The user can design Synthetic Bioloby model in an esay way. Most of the operation is drag and drop, the user can also user keyboard do all the work as well.</p> | + | <p align="justify" class="STYLE5">The BioFunctional Designer is an assistant design tool for Synthetic Biology design, which determinded to help the user design model swifter. The user can design Synthetic Bioloby model in an esay way. Most of the operation is drag and drop, the user can also user keyboard do all the work as well.</p> |
- | + | <p align="justify" class="STYLE5"> </p> | |
<h2 class="STYLE6">Interface Introduction</h2> | <h2 class="STYLE6">Interface Introduction</h2> | ||
+ | <p class="STYLE6"> </p> | ||
- | <p><img src="/ | + | <p><img src="https://static.igem.org/mediawiki/2014/2/26/Hfut-faceIntro.png" alt="User Interface" /></p> |
- | <p class="STYLE5"> | + | <p> </p> |
+ | <p align="justify" class="STYLE5"> Here is the interface of te BioFunctional Designer. | ||
In the top left is the function input field, where the user can type the function of the model. With a series of buttons on the top, the user can create new file, open file, save the design progress or export the result as an image. The software would do the error correction if the user click the check button. Design panel, the immense panel in the middle, is the place where the user do their works. On the left of the design panel is the search area, where users can search the BioBrick by keywords(name or type). When a BioBrick label is clicked, the information will be presented on the right side of the design panel. If you click a BioBrick in the Design panel by the right key, some relevant BioBricks will be presented on the top of the BioBrick information. On the bottom, there are some BioBricks you uesd. Meanwhile, some usable BioBrick will be presented behind your current design model, with different color, just like the code autofill in a software IDE.</p> | In the top left is the function input field, where the user can type the function of the model. With a series of buttons on the top, the user can create new file, open file, save the design progress or export the result as an image. The software would do the error correction if the user click the check button. Design panel, the immense panel in the middle, is the place where the user do their works. On the left of the design panel is the search area, where users can search the BioBrick by keywords(name or type). When a BioBrick label is clicked, the information will be presented on the right side of the design panel. If you click a BioBrick in the Design panel by the right key, some relevant BioBricks will be presented on the top of the BioBrick information. On the bottom, there are some BioBricks you uesd. Meanwhile, some usable BioBrick will be presented behind your current design model, with different color, just like the code autofill in a software IDE.</p> | ||
- | + | <p align="justify" class="STYLE5"> </p> | |
<h2 class="STYLE6">Function and Features</h2> | <h2 class="STYLE6">Function and Features</h2> | ||
- | + | <p class="STYLE6"> </p> | |
<h2 class="STYLE6">Operation Manual</h2> | <h2 class="STYLE6">Operation Manual</h2> | ||
- | + | <p class="STYLE6"> </p> | |
<h4 class="STYLE3">Type your model function</h4> | <h4 class="STYLE3">Type your model function</h4> | ||
- | + | <p class="STYLE3"> </p> | |
- | <p class="STYLE5"> | + | <p align="justify" class="STYLE5"> Type the target model's function int the function input field (on the top left corner). The function you typed will be presented in the result image.</p> |
- | + | <p align="justify" class="STYLE5"> </p> | |
<h3 class="STYLE3">Create new project</h3> | <h3 class="STYLE3">Create new project</h3> | ||
- | + | <p class="STYLE3"> </p> | |
- | <p class="STYLE5"> | + | <p align="justify" class="STYLE5"> Click the New button, choose the project path and type the project name, a new project will be established. The project file will be save to the project path. The file name will be the project name.</p> |
- | + | <p align="justify" class="STYLE5"> </p> | |
<h3 class="STYLE3">Open existent project</h3> | <h3 class="STYLE3">Open existent project</h3> | ||
- | + | <p class="STYLE3"> </p> | |
- | <p class="STYLE5"> | + | <p align="justify" class="STYLE5"> Click the Open button, choose the already saved project, and you can continue your work.</p> |
- | + | <p align="justify" class="STYLE5"> </p> | |
<h3 class="STYLE3">Save project file</h3> | <h3 class="STYLE3">Save project file</h3> | ||
- | + | <p class="STYLE3"> </p> | |
- | <p class="STYLE5"> | + | <p align="justify" class="STYLE5"> Click the Save button, your work progress will be saved. The project can be saved automatically when you opening a new project, so you don't need to worry about lost of your work.</p> |
- | + | <p align="justify" class="STYLE5"> </p> | |
<h3 class="STYLE3">Search BioBrick</h3> | <h3 class="STYLE3">Search BioBrick</h3> | ||
+ | <p class="STYLE3"> </p> | ||
- | <p><img src="/ | + | <p><img src="https://static.igem.org/mediawiki/2014/c/ce/Hfut-search.png" alt="do search" /></p> |
- | + | ||
- | + | ||
+ | <p> </p> | ||
+ | <p align="justify" class="STYLE5"> Type the keyword in the search input field (left side). The result list will go above the input field. The result will adjust to you input, you don't need to press enter, just type what you want.</p> | ||
+ | <p align="justify" class="STYLE5"> </p> | ||
<h3 class="STYLE3">Put BioBrick into your design</h3> | <h3 class="STYLE3">Put BioBrick into your design</h3> | ||
+ | <p class="STYLE3"> </p> | ||
- | <p><img src="/ | + | <p><img src="https://static.igem.org/mediawiki/2014/d/d7/Hfut-drapBioBrick.png" alt="drag" /></p> |
- | <p class="STYLE5"> | + | <p> </p> |
+ | <p align="justify" class="STYLE5"> When the target BioBrick is found, drag and drop it into the design panel. (The largest area), it will be added to your design chain.</p> | ||
+ | <p align="justify" class="STYLE5"> </p> | ||
- | <p> | + | <p> <img src="https://static.igem.org/mediawiki/2014/5/5a/Hfut-dragResult.png" alt="drag" /></p> |
+ | <p> </p> | ||
<h3 class="STYLE6">Add recommended BioBrick</h3> | <h3 class="STYLE6">Add recommended BioBrick</h3> | ||
+ | <p class="STYLE6"> </p> | ||
- | <p><img src="/ | + | <p><img src="https://static.igem.org/mediawiki/2014/b/bb/Hfut-addRecommend.png" alt="addRecommend" /></p> |
- | + | ||
- | + | ||
+ | <p> </p> | ||
+ | <p align="justify" class="STYLE5">When you change you design, the program will get the recommended BioBrick from the server, automatically. Click one and the BioBrick will be added to your design.</p> | ||
+ | <p align="justify" class="STYLE5"> </p> | ||
<h3 class="STYLE3">Get BioBrick Information</h3> | <h3 class="STYLE3">Get BioBrick Information</h3> | ||
+ | <p class="STYLE3"> </p> | ||
- | <p><img src="/ | + | <p><img src="https://static.igem.org/mediawiki/2014/4/48/Hfut-showInfo.png" alt="info" /></p> |
- | + | ||
- | + | ||
+ | <p> </p> | ||
+ | <p align="justify" class="STYLE5">Move your mouse to a BioBrick, the information will be presented besides you mouse. Click a BioBrick, the information will be presented on the BioBrick Information area(right side, grey block).</p> | ||
+ | <p align="justify" class="STYLE5"> </p> | ||
<h3 class="STYLE3">Get relevant BioBrick</h3> | <h3 class="STYLE3">Get relevant BioBrick</h3> | ||
- | + | <p class="STYLE3"> </p> | |
- | <p class="STYLE5">Move your mouse to a BioBrick, click the right button, and all the relevant BioBrick will be presented on the right side (light blue area).</p> | + | <p align="justify" class="STYLE5">Move your mouse to a BioBrick, click the right button, and all the relevant BioBrick will be presented on the right side (light blue area).</p> |
- | + | <p align="justify" class="STYLE5"> </p> | |
<h3 class="STYLE3">Delete BioBrick</h3> | <h3 class="STYLE3">Delete BioBrick</h3> | ||
- | + | <p class="STYLE3"> </p> | |
- | <p class="STYLE5">If you made a mistake in you design and you want to delete a BioBrick, click the BioBrick and press d, the BioBrick will disappear.</p> | + | <p align="justify" class="STYLE5">If you made a mistake in you design and you want to delete a BioBrick, click the BioBrick and press d, the BioBrick will disappear.</p> |
- | + | <p align="justify" class="STYLE5"> </p> | |
<h2 class="STYLE6">Keyboard Manual</h2> | <h2 class="STYLE6">Keyboard Manual</h2> | ||
- | + | <p class="STYLE6"> </p> | |
<h3 class="STYLE3">Global</h3> | <h3 class="STYLE3">Global</h3> | ||
- | + | <p class="STYLE3"> </p> | |
+ | <ul> | ||
+ | <li> | ||
+ | <p class="STYLE5">Tab ---- switch among different area.</p> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <p> </p> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <p class="STYLE5"> Tab order:</p> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <p> </p> | ||
<ul> | <ul> | ||
- | <li> | + | <li> |
- | + | <pre><code> 1. function input field. | |
- | + | ||
- | + | ||
- | <pre><code> 1. function input field. | + | |
2. search input field. | 2. search input field. | ||
3. search area. | 3. search area. | ||
Line 189: | Line 218: | ||
8. export button. | 8. export button. | ||
9. save button. | 9. save button. | ||
- | </code></pre></li> | + | </code> |
+ | </pre> | ||
+ | </li> | ||
</ul> | </ul> | ||
- | |||
- | |||
<h3 class="STYLE3">Search Area</h3> | <h3 class="STYLE3">Search Area</h3> | ||
- | + | <p class="STYLE3"> </p> | |
<ul> | <ul> | ||
- | <li class="STYLE5">a ---- add the selected BioBrick to the desing.</li> | + | <li class="STYLE5"> |
- | </ul> | + | <div align="justify">a ---- add the selected BioBrick to the desing.</div> |
- | + | </li> | |
- | + | </ul> | |
+ | <p> </p> | ||
<h3 class="STYLE3">Design Panel</h3> | <h3 class="STYLE3">Design Panel</h3> | ||
- | + | <p class="STYLE3"> </p> | |
+ | <ul> | ||
+ | <li class="STYLE5"> | ||
+ | <div align="justify">d ---- delete the chosen BioBrick from the design.</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <p> </p> | ||
+ | <ul> | ||
+ | <li class="STYLE5"> | ||
+ | <div align="justify">j ---- move the select cursor up.</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <p> </p> | ||
+ | <ul> | ||
+ | <li class="STYLE5"> | ||
+ | <div align="justify">k ---- move the select cursor down.</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <p> </p> | ||
<ul> | <ul> | ||
- | <li class="STYLE5" | + | <li class="STYLE5"> |
- | < | + | <div align="justify">Enter ---- choose the select reommended BioBrick.</div> |
- | + | </li> | |
- | + | ||
</ul> | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 13:21, 17 October 2014
BioFunctional Designer User Gudie
Biofunctional Desginer is a CAD tool for Synthetic Biology design
Breif Introduction
The BioFunctional Designer is an assistant design tool for Synthetic Biology design, which determinded to help the user design model swifter. The user can design Synthetic Bioloby model in an esay way. Most of the operation is drag and drop, the user can also user keyboard do all the work as well.
Interface Introduction
Here is the interface of te BioFunctional Designer. In the top left is the function input field, where the user can type the function of the model. With a series of buttons on the top, the user can create new file, open file, save the design progress or export the result as an image. The software would do the error correction if the user click the check button. Design panel, the immense panel in the middle, is the place where the user do their works. On the left of the design panel is the search area, where users can search the BioBrick by keywords(name or type). When a BioBrick label is clicked, the information will be presented on the right side of the design panel. If you click a BioBrick in the Design panel by the right key, some relevant BioBricks will be presented on the top of the BioBrick information. On the bottom, there are some BioBricks you uesd. Meanwhile, some usable BioBrick will be presented behind your current design model, with different color, just like the code autofill in a software IDE.
Function and Features
Operation Manual
Type your model function
Type the target model's function int the function input field (on the top left corner). The function you typed will be presented in the result image.
Create new project
Click the New button, choose the project path and type the project name, a new project will be established. The project file will be save to the project path. The file name will be the project name.
Open existent project
Click the Open button, choose the already saved project, and you can continue your work.
Save project file
Click the Save button, your work progress will be saved. The project can be saved automatically when you opening a new project, so you don't need to worry about lost of your work.
Search BioBrick
Type the keyword in the search input field (left side). The result list will go above the input field. The result will adjust to you input, you don't need to press enter, just type what you want.
Put BioBrick into your design
When the target BioBrick is found, drag and drop it into the design panel. (The largest area), it will be added to your design chain.
Add recommended BioBrick
When you change you design, the program will get the recommended BioBrick from the server, automatically. Click one and the BioBrick will be added to your design.
Get BioBrick Information
Move your mouse to a BioBrick, the information will be presented besides you mouse. Click a BioBrick, the information will be presented on the BioBrick Information area(right side, grey block).
Get relevant BioBrick
Move your mouse to a BioBrick, click the right button, and all the relevant BioBrick will be presented on the right side (light blue area).
Delete BioBrick
If you made a mistake in you design and you want to delete a BioBrick, click the BioBrick and press d, the BioBrick will disappear.
Keyboard Manual
Global
-
Tab ---- switch among different area.
-
Tab order:
-
1. function input field. 2. search input field. 3. search area. 4. design area. 5. new button. 6. open button. 7. check button. 8. export button. 9. save button.
Search Area
-
a ---- add the selected BioBrick to the desing.
Design Panel
-
d ---- delete the chosen BioBrick from the design.
-
j ---- move the select cursor up.
-
k ---- move the select cursor down.
-
Enter ---- choose the select reommended BioBrick.