Team:HFUT CHINA/user guide.html

From 2014.igem.org

(Difference between revisions)
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-family: Arial, Helvetica, sans-serif;
+
font-size: 150%;
font-size: 150%;
}
}
-
.STYLE3 {
+
.STYLE3 { font-family: Arial, Helvetica, sans-serif;
-
font-family: Arial, Helvetica, sans-serif;
+
font-size: 110%;
-
font-size: 100%;
+
font-weight: bold;
font-weight: bold;
}
}
-
.STYLE5 {font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
+
.STYLE5 {font-family: Arial, Helvetica, sans-serif; font-size: 110%; }
-
.STYLE6 {
+
.STYLE6 { font-family: Arial, Helvetica, sans-serif;
-
font-family: Arial, Helvetica, sans-serif;
+
font-weight: bold;
font-weight: bold;
-
font-size: 120%;
+
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 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 & Algorithm</a></li>
+
                         <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/Tutorial.html">Tutorial</a></li>
                         <li><a href="https://2014.igem.org/Team:HFUT_CHINA/Tutorial.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>
-
<body>
+
<div class="content_bg1">
-
<h1 align="center" class="STYLE1">BioFunctional Designer User Gudie</h1>
+
<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">&nbsp;</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>&nbsp;</p>
<h2 class="STYLE6">Breif Introduction</h2>
<h2 class="STYLE6">Breif Introduction</h2>
-
 
+
<p class="STYLE6">&nbsp;</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">&nbsp;</p>
<h2 class="STYLE6">Interface Introduction</h2>
<h2 class="STYLE6">Interface Introduction</h2>
 +
<p class="STYLE6">&nbsp;</p>
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/FaceIntro.png" alt="User Interface" /></p>
+
<p><img src="https://static.igem.org/mediawiki/2014/2/26/Hfut-faceIntro.png" alt="User Interface" /></p>
-
<p class="STYLE5"> Here is the interface of te BioFunctional Designer.
+
<p>&nbsp;</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">&nbsp;</p>
<h2 class="STYLE6">Function and Features</h2>
<h2 class="STYLE6">Function and Features</h2>
-
 
+
<p class="STYLE6">&nbsp;</p>
<h2 class="STYLE6">Operation Manual</h2>
<h2 class="STYLE6">Operation Manual</h2>
-
 
+
<p class="STYLE6">&nbsp;</p>
<h4 class="STYLE3">Type your model function</h4>
<h4 class="STYLE3">Type your model function</h4>
-
 
+
<p class="STYLE3">&nbsp;</p>
-
<p 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"> 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">&nbsp;</p>
<h3 class="STYLE3">Create new project</h3>
<h3 class="STYLE3">Create new project</h3>
-
 
+
<p class="STYLE3">&nbsp;</p>
-
<p 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"> 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">&nbsp;</p>
<h3 class="STYLE3">Open existent project</h3>
<h3 class="STYLE3">Open existent project</h3>
-
 
+
<p class="STYLE3">&nbsp;</p>
-
<p class="STYLE5"> Click the Open button, choose the already saved project, and you can continue your work.</p>
+
<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">&nbsp;</p>
<h3 class="STYLE3">Save project file</h3>
<h3 class="STYLE3">Save project file</h3>
-
 
+
<p class="STYLE3">&nbsp;</p>
-
<p 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"> 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">&nbsp;</p>
<h3 class="STYLE3">Search BioBrick</h3>
<h3 class="STYLE3">Search BioBrick</h3>
 +
<p class="STYLE3">&nbsp;</p>
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/search.png" alt="do search" /></p>
+
<p><img src="https://static.igem.org/mediawiki/2014/c/ce/Hfut-search.png" alt="do search" /></p>
-
 
+
-
<p 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>&nbsp;</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">&nbsp;</p>
<h3 class="STYLE3">Put BioBrick into your design</h3>
<h3 class="STYLE3">Put BioBrick into your design</h3>
 +
<p class="STYLE3">&nbsp;</p>
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/drapBioBrick.png" alt="drag" /></p>
+
<p><img src="https://static.igem.org/mediawiki/2014/d/d7/Hfut-drapBioBrick.png" alt="drag" /></p>
-
<p 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>&nbsp;</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">&nbsp;</p>
-
<p> <img src="/Users/Bowen/Desktop/iGEM_Screenshot/dragResult.png" alt="drag" /></p>
+
<p> <img src="https://static.igem.org/mediawiki/2014/5/5a/Hfut-dragResult.png" alt="drag" /></p>
 +
<p>&nbsp;</p>
<h3 class="STYLE6">Add recommended BioBrick</h3>
<h3 class="STYLE6">Add recommended BioBrick</h3>
 +
<p class="STYLE6">&nbsp;</p>
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/addRecommend.png" alt="addRecommend" /></p>
+
<p><img src="https://static.igem.org/mediawiki/2014/b/bb/Hfut-addRecommend.png" alt="addRecommend" /></p>
-
 
+
-
<p 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>&nbsp;</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">&nbsp;</p>
<h3 class="STYLE3">Get BioBrick Information</h3>
<h3 class="STYLE3">Get BioBrick Information</h3>
 +
<p class="STYLE3">&nbsp;</p>
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/showInfo.png" alt="info" /></p>
+
<p><img src="https://static.igem.org/mediawiki/2014/4/48/Hfut-showInfo.png" alt="info" /></p>
-
 
+
-
<p 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>&nbsp;</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">&nbsp;</p>
<h3 class="STYLE3">Get relevant BioBrick</h3>
<h3 class="STYLE3">Get relevant BioBrick</h3>
-
 
+
<p class="STYLE3">&nbsp;</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">&nbsp;</p>
<h3 class="STYLE3">Delete BioBrick</h3>
<h3 class="STYLE3">Delete BioBrick</h3>
-
 
+
<p class="STYLE3">&nbsp;</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">&nbsp;</p>
<h2 class="STYLE6">Keyboard Manual</h2>
<h2 class="STYLE6">Keyboard Manual</h2>
-
 
+
<p class="STYLE6">&nbsp;</p>
<h3 class="STYLE3">Global</h3>
<h3 class="STYLE3">Global</h3>
-
 
+
<p class="STYLE3">&nbsp;</p>
 +
<ul>
 +
  <li>
 +
    <p class="STYLE5">Tab      ---- switch among different area.</p>
 +
  </li>
 +
  </ul>
 +
<p>&nbsp;</p>
 +
<ul>
 +
  <li>
 +
    <p class="STYLE5"> Tab order:</p>
 +
    </li>
 +
  </ul>
 +
<p>&nbsp;</p>
<ul>
<ul>
-
<li><p class="STYLE5">Tab      ---- switch among different area.</p>
+
  <li>
-
 
+
    <pre><code>  1. function input field.
-
<p class="STYLE5">  Tab order:</p>
+
-
 
+
-
<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">&nbsp;</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>&nbsp;</p>
<h3 class="STYLE3">Design Panel</h3>
<h3 class="STYLE3">Design Panel</h3>
-
 
+
<p class="STYLE3">&nbsp;</p>
 +
<ul>
 +
  <li class="STYLE5">
 +
    <div align="justify">d      ---- delete the chosen BioBrick from the design.</div>
 +
  </li>
 +
  </ul>
 +
<p>&nbsp;</p>
 +
<ul>
 +
  <li class="STYLE5">
 +
    <div align="justify">j      ---- move the select cursor up.</div>
 +
    </li>
 +
  </ul>
 +
<p>&nbsp;</p>
 +
<ul>
 +
  <li class="STYLE5">
 +
    <div align="justify">k      ---- move the select cursor down.</div>
 +
      </li>
 +
  </ul>
 +
<p>&nbsp;</p>
<ul>
<ul>
-
<li class="STYLE5">d      ---- delete the chosen BioBrick from the design.</li>
+
  <li class="STYLE5">
-
<li class="STYLE5">j      ---- move the select cursor up.</li>
+
    <div align="justify">Enter  ---- choose the select reommended BioBrick.</div>
-
<li class="STYLE5">k      ---- move the select cursor down.</li>
+
        </li>
-
<li class="STYLE5">Enter  ---- choose the select reommended BioBrick.</li>
+
</ul>
</ul>
 +
</div>
 +
</div>
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 11:53, 17 October 2014

HFUT_CHINA

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

 

User Interface

 

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

 

do search

 

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

 

drag

 

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.

 

drag

 

Add recommended BioBrick

 

addRecommend

 

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

 

info

 

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.