Team:HFUT CHINA/user guide.html

From 2014.igem.org

(Difference between revisions)
 
(3 intermediate revisions 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>
+
<!--
-
h1,
+
.STYLE1 { font-family: Arial, Helvetica, sans-serif;
-
h2,
+
font-size: 150%;
-
h3,
+
-
h4,
+
-
h5,
+
-
h6,
+
-
p,
+
-
blockquote {
+
-
    margin: 0;
+
-
    padding: 0;
+
}
}
-
body {
+
.STYLE3 { font-family: Arial, Helvetica, sans-serif;
-
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
+
font-size: 110%;
-
    font-size: 13px;
+
font-weight: bold;
-
    line-height: 18px;
+
-
    color: #737373;
+
-
    background-color: white;
+
-
    margin: 10px 13px 10px 13px;
+
}
}
-
table {
+
.STYLE5 {font-family: Arial, Helvetica, sans-serif; font-size: 110%; }
-
margin: 10px 0 15px 0;
+
.STYLE6 { font-family: Arial, Helvetica, sans-serif;
-
border-collapse: collapse;
+
font-weight: bold;
-
}
+
font-size: 125%;
-
td,th {
+
-
border: 1px solid #ddd;
+
-
padding: 3px 10px;
+
-
}
+
-
th {
+
-
padding: 5px 10px;
+
-
}
+
-
 
+
-
a {
+
-
    color: #0069d6;
+
-
}
+
-
a:hover {
+
-
    color: #0050a3;
+
-
    text-decoration: none;
+
-
}
+
-
a img {
+
-
    border: none;
+
-
}
+
-
p {
+
-
    margin-bottom: 9px;
+
-
}
+
-
h1,
+
-
h2,
+
-
h3,
+
-
h4,
+
-
h5,
+
-
h6 {
+
-
    color: #404040;
+
-
    line-height: 36px;
+
-
}
+
-
h1 {
+
-
    margin-bottom: 18px;
+
-
    font-size: 30px;
+
-
}
+
-
h2 {
+
-
    font-size: 24px;
+
-
}
+
-
h3 {
+
-
    font-size: 18px;
+
-
}
+
-
h4 {
+
-
    font-size: 16px;
+
-
}
+
-
h5 {
+
-
    font-size: 14px;
+
-
}
+
-
h6 {
+
-
    font-size: 13px;
+
-
}
+
-
hr {
+
-
    margin: 0 0 19px;
+
-
    border: 0;
+
-
    border-bottom: 1px solid #ccc;
+
-
}
+
-
blockquote {
+
-
    padding: 13px 13px 21px 15px;
+
-
    margin-bottom: 18px;
+
-
    font-family:georgia,serif;
+
-
    font-style: italic;
+
-
}
+
-
blockquote:before {
+
-
    content:"\201C";
+
-
    font-size:40px;
+
-
    margin-left:-10px;
+
-
    font-family:georgia,serif;
+
-
    color:#eee;
+
-
}
+
-
blockquote p {
+
-
    font-size: 14px;
+
-
    font-weight: 300;
+
-
    line-height: 18px;
+
-
    margin-bottom: 0;
+
-
    font-style: italic;
+
-
}
+
-
code, pre {
+
-
    font-family: Monaco, Andale Mono, Courier New, monospace;
+
-
}
+
-
code {
+
-
    background-color: #fee9cc;
+
-
    color: rgba(0, 0, 0, 0.75);
+
-
    padding: 1px 3px;
+
-
    font-size: 12px;
+
-
    -webkit-border-radius: 3px;
+
-
    -moz-border-radius: 3px;
+
-
    border-radius: 3px;
+
-
}
+
-
pre {
+
-
    display: block;
+
-
    padding: 14px;
+
-
    margin: 0 0 18px;
+
-
    line-height: 16px;
+
-
    font-size: 11px;
+
-
    border: 1px solid #d9d9d9;
+
-
    white-space: pre-wrap;
+
-
    word-wrap: break-word;
+
-
}
+
-
pre code {
+
-
    background-color: #fff;
+
-
    color:#737373;
+
-
    font-size: 11px;
+
-
    padding: 0;
+
-
}
+
-
sup {
+
-
    font-size: 0.83em;
+
-
    vertical-align: super;
+
-
    line-height: 0;
+
-
}
+
-
* {
+
-
-webkit-print-color-adjust: exact;
+
-
}
+
-
@media screen and (min-width: 914px) {
+
-
    body {
+
-
        width: 854px;
+
-
        margin:10px auto;
+
-
    }
+
-
}
+
-
@media print {
+
-
body,code,pre code,h1,h2,h3,h4,h5,h6 {
+
-
color: black;
+
-
}
+
-
table, pre {
+
-
page-break-inside: avoid;
+
-
}
+
}
}
 +
.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">
-
<h1><a href="index.html"><img src="https://static.igem.org/mediawiki/2014/0/0e/Hfut-Logo.png" alt=""></a></h1>
+
<h1><a href="https://2014.igem.org/Team:HFUT_CHINA"><img src="https://static.igem.org/mediawiki/2014/0/0e/Hfut-Logo.png" alt=""></a></h1>
</div>
</div>
<div >
<div >
Line 180: 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">Examples</a></li>
+
                         <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://2014.igem.org/Team:HFUT_CHINA/Download.html">Download</a></li>
+
                         <li><a href="https://github.com/igemsoftware/HFUT_CHINA_2014.git">Download</a></li>
                     </ul>
                     </ul>
Line 190: 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/user_guide.html">Tutorial</a></li>
                        
                        
Line 219: 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>
-
</body>
+
</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">&nbsp;</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>
 +
<p class="STYLE6">&nbsp;</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>
 +
<p class="STYLE6">&nbsp;</p>
-
<title>BioFunctional Designer User Gudie</title>
+
<p><img src="https://static.igem.org/mediawiki/2014/2/26/Hfut-faceIntro.png" alt="User Interface" /></p>
-
 
+
-
 
+
-
<body>
+
-
<h1>BioFunctional Designer User Gudie</h1>
+
-
 
+
-
<p><strong>Biofunctional Desginer</strong> is a CAD tool for Synthetic Biology design</p>
+
-
 
+
-
<h2>Breif Introduction</h2>
+
-
 
+
-
<p>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>
+
-
 
+
-
<h2>Interface Introduction</h2>
+
-
 
+
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/FaceIntro.png" alt="User Interface" /></p>
+
-
<p> 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>
 +
<p class="STYLE6">&nbsp;</p>
 +
<h2 class="STYLE6">Operation Manual</h2>
 +
<p class="STYLE6">&nbsp;</p>
 +
<h4 class="STYLE3">Type your model function</h4>
 +
<p class="STYLE3">&nbsp;</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>
 +
<p class="STYLE3">&nbsp;</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>
 +
<p class="STYLE3">&nbsp;</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>
 +
<p class="STYLE3">&nbsp;</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>
 +
<p class="STYLE3">&nbsp;</p>
-
<h2>Function and Features</h2>
+
<p><img src="https://static.igem.org/mediawiki/2014/c/ce/Hfut-search.png" alt="do search" /></p>
-
<h2>Operation Manual</h2>
+
<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>
 +
<p class="STYLE3">&nbsp;</p>
-
<h4>Type your model function</h4>
+
<p><img src="https://static.igem.org/mediawiki/2014/d/d7/Hfut-drapBioBrick.png" alt="drag" /></p>
-
<p> 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>&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>
-
<h3>Create new project</h3>
+
<p> <img src="https://static.igem.org/mediawiki/2014/5/5a/Hfut-dragResult.png" alt="drag" /></p>
-
<p> 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>&nbsp;</p>
 +
<h3 class="STYLE6">Add recommended BioBrick</h3>
 +
<p class="STYLE6">&nbsp;</p>
-
<h3>Open existent project</h3>
+
<p><img src="https://static.igem.org/mediawiki/2014/b/bb/Hfut-addRecommend.png" alt="addRecommend" /></p>
-
<p> Click the Open button, choose the already saved project, and you can continue your work.</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>
 +
<p class="STYLE3">&nbsp;</p>
-
<h3>Save project file</h3>
+
<p><img src="https://static.igem.org/mediawiki/2014/4/48/Hfut-showInfo.png" alt="info" /></p>
-
 
+
-
<p>  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>
+
-
 
+
-
<h3>Search BioBrick</h3>
+
-
 
+
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/search.png" alt="do search" /></p>
+
-
 
+
-
<p>  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>
+
-
 
+
-
<h3>Put BioBrick into your design</h3>
+
-
 
+
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/drapBioBrick.png" alt="drag" /></p>
+
-
 
+
-
<p>  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>  <img src="/Users/Bowen/Desktop/iGEM_Screenshot/dragResult.png" alt="drag" /></p>
+
-
 
+
-
<h3>Add recommended BioBrick</h3>
+
-
 
+
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/addRecommend.png" alt="addRecommend" /></p>
+
-
 
+
-
<p>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>
+
-
 
+
-
<h3>Get BioBrick Information</h3>
+
-
 
+
-
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/showInfo.png" alt="info" /></p>
+
-
 
+
-
<p>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>
+
-
 
+
-
<h3>Get relevant BioBrick</h3>
+
-
 
+
-
<p>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>
+
-
 
+
-
<h3>Delete BioBrick</h3>
+
-
 
+
-
<p>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>
+
-
 
+
-
<h2>Keyboard Manual</h2>
+
-
 
+
-
<h3>Global</h3>
+
 +
<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>
 +
<p class="STYLE3">&nbsp;</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>
 +
<p class="STYLE3">&nbsp;</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>
 +
<p class="STYLE6">&nbsp;</p>
 +
<h3 class="STYLE3">Global</h3>
 +
<p class="STYLE3">&nbsp;</p>
<ul>
<ul>
-
<li><p>Tab      ---- switch among different area.</p>
+
  <li>
-
 
+
    <p class="STYLE5">Tab      ---- switch among different area.</p>
-
<p> Tab order:</p>
+
  </li>
-
 
+
  </ul>
-
<pre><code>  1. function input field.
+
<p>&nbsp;</p>
 +
<ul>
 +
  <li>
 +
    <p class="STYLE5"> Tab order:</p>
 +
    </li>
 +
  </ul>
 +
<p>&nbsp;</p>
 +
<ul>
 +
  <li>
 +
    <pre><code>  1. function input field.
   2. search input field.
   2. search input field.
   3. search area.
   3. search area.
Line 325: 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>
-
 
+
<p class="STYLE3">&nbsp;</p>
-
<h3>Search Area</h3>
+
-
 
+
<ul>
<ul>
-
<li>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>
-
<h3>Design Panel</h3>
+
<p>&nbsp;</p>
-
 
+
<h3 class="STYLE3">Design Panel</h3>
 +
<p class="STYLE3">&nbsp;</p>
<ul>
<ul>
-
<li>d      ---- delete the chosen BioBrick from the design.</li>
+
  <li class="STYLE5">
-
<li>j      ---- move the select cursor up.</li>
+
    <div align="justify">d      ---- delete the chosen BioBrick from the design.</div>
-
<li>k      ---- move the select cursor down.</li>
+
  </li>
-
<li>Enter  ---- choose the select reommended BioBrick.</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>
 +
  <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

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.