Team:HFUT CHINA/user guide.html

From 2014.igem.org

(Difference between revisions)
Line 14: Line 14:
<style type="text/css">
<style type="text/css">
-
h1,
+
<!--
-
h2,
+
.STYLE1 {
-
h3,
+
font-family: Arial, Helvetica, sans-serif;
-
h4,
+
font-size: 150%;
-
h5,
+
-
h6,
+
-
p,
+
-
blockquote {
+
-
    margin: 0;
+
-
    padding: 0;
+
}
}
-
body {
+
.STYLE3 {
-
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
+
font-family: Arial, Helvetica, sans-serif;
-
    font-size: 13px;
+
font-size: 100%;
-
    line-height: 18px;
+
font-weight: bold;
-
    color: #737373;
+
-
    background-color: white;
+
-
    margin: 10px 13px 10px 13px;
+
}
}
-
table {
+
.STYLE5 {font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
-
margin: 10px 0 15px 0;
+
.STYLE6 {
-
border-collapse: collapse;
+
font-family: Arial, Helvetica, sans-serif;
-
}
+
font-weight: bold;
-
td,th {
+
font-size: 120%;
-
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;
+
-
}
+
}
}
 +
-->
</style>
</style>
-
 
</head>
</head>
Line 231: Line 100:
<div class="clear"></div>
<div class="clear"></div>
-
</body>
 
-
 
-
 
-
<title>BioFunctional Designer User Gudie</title>
 
-
 
<body>
<body>
-
<h1>BioFunctional Designer User Gudie</h1>
+
<h1 align="center" class="STYLE1">BioFunctional Designer User Gudie</h1>
-
<p><strong>Biofunctional Desginer</strong> is a CAD tool for Synthetic Biology design</p>
+
<p><span class="STYLE3">Biofunctional Desginer</span><span class="STYLE5"> is a CAD tool for Synthetic Biology design</span></p>
-
<h2>Breif Introduction</h2>
+
<h2 class="STYLE6">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>
+
<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>
-
<h2>Interface Introduction</h2>
+
<h2 class="STYLE6">Interface Introduction</h2>
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/FaceIntro.png" alt="User Interface" /></p>
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/FaceIntro.png" alt="User Interface" /></p>
-
<p>  Here is the interface of te BioFunctional Designer.
+
<p 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>
-
<h2>Function and Features</h2>
+
<h2 class="STYLE6">Function and Features</h2>
-
<h2>Operation Manual</h2>
+
<h2 class="STYLE6">Operation Manual</h2>
-
<h4>Type your model function</h4>
+
<h4 class="STYLE3">Type your model function</h4>
-
<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 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>
-
<h3>Create new project</h3>
+
<h3 class="STYLE3">Create new project</h3>
-
<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 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>
-
<h3>Open existent project</h3>
+
<h3 class="STYLE3">Open existent project</h3>
-
<p>  Click the Open button, choose the already saved project, and you can continue your work.</p>
+
<p class="STYLE5">  Click the Open button, choose the already saved project, and you can continue your work.</p>
-
<h3>Save project file</h3>
+
<h3 class="STYLE3">Save project file</h3>
-
<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>
+
<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>
-
<h3>Search BioBrick</h3>
+
<h3 class="STYLE3">Search BioBrick</h3>
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/search.png" alt="do search" /></p>
<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>
+
<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>
-
<h3>Put BioBrick into your design</h3>
+
<h3 class="STYLE3">Put BioBrick into your design</h3>
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/drapBioBrick.png" alt="drag" /></p>
<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 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>  <img src="/Users/Bowen/Desktop/iGEM_Screenshot/dragResult.png" alt="drag" /></p>
<p>  <img src="/Users/Bowen/Desktop/iGEM_Screenshot/dragResult.png" alt="drag" /></p>
-
<h3>Add recommended BioBrick</h3>
+
<h3 class="STYLE6">Add recommended BioBrick</h3>
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/addRecommend.png" alt="addRecommend" /></p>
<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>
+
<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>
-
<h3>Get BioBrick Information</h3>
+
<h3 class="STYLE3">Get BioBrick Information</h3>
<p><img src="/Users/Bowen/Desktop/iGEM_Screenshot/showInfo.png" alt="info" /></p>
<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>
+
<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>
-
<h3>Get relevant BioBrick</h3>
+
<h3 class="STYLE3">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>
+
<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>
-
<h3>Delete BioBrick</h3>
+
<h3 class="STYLE3">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>
+
<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>
-
<h2>Keyboard Manual</h2>
+
<h2 class="STYLE6">Keyboard Manual</h2>
-
<h3>Global</h3>
+
<h3 class="STYLE3">Global</h3>
<ul>
<ul>
-
<li><p>Tab      ---- switch among different area.</p>
+
<li><p class="STYLE5">Tab      ---- switch among different area.</p>
-
<p>  Tab order:</p>
+
<p class="STYLE5">  Tab order:</p>
<pre><code>  1. function input field.
<pre><code>  1. function input field.
Line 329: Line 193:
-
<h3>Search Area</h3>
+
<h3 class="STYLE3">Search Area</h3>
<ul>
<ul>
-
<li>a      ---- add the selected BioBrick to the desing.</li>
+
<li class="STYLE5">a      ---- add the selected BioBrick to the desing.</li>
</ul>
</ul>
-
<h3>Design Panel</h3>
+
<h3 class="STYLE3">Design Panel</h3>
<ul>
<ul>
-
<li>d      ---- delete the chosen BioBrick from the design.</li>
+
<li class="STYLE5">d      ---- delete the chosen BioBrick from the design.</li>
-
<li>j      ---- move the select cursor up.</li>
+
<li class="STYLE5">j      ---- move the select cursor up.</li>
-
<li>k      ---- move the select cursor down.</li>
+
<li class="STYLE5">k      ---- move the select cursor down.</li>
-
<li>Enter  ---- choose the select reommended BioBrick.</li>
+
<li class="STYLE5">Enter  ---- choose the select reommended BioBrick.</li>
</ul>
</ul>
-
 
</body>
</body>
</html>
</html>

Revision as of 11:17, 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.

Retrieved from "http://2014.igem.org/Team:HFUT_CHINA/user_guide.html"