Difference between revisions of "Team:HFUT-China"

 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html lang="en">
 
<html lang="en">
 +
 
<head>
 
<head>
−
<meta charset="UTF-8">
+
    <meta charset="UTF-8">
−
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
−
<title>HFUT-China</title>
+
    <title>HFUT-China</title>
−
<link rel="stylesheet" type="text/css" href="css/index.css">
+
    <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/indexcss?action=raw&ctype=text/css">
−
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/ghcss?action=raw&ctype=text/css">
+
    <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/ghcss?action=raw&ctype=text/css">
−
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/bootstrapcss?action=raw&ctype=text/css">
+
    <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/bootstrapcss?action=raw&ctype=text/css">
−
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/onepagecss?action=raw&ctype=text/css" >
+
    <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/onepagecss?action=raw&ctype=text/css">
−
<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/jqjs?
+
    <script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/jqjs?
 
action=raw&ctype=text/javascript"></script>
 
action=raw&ctype=text/javascript"></script>
−
<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/btsjs?
+
    <script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/btsjs?
 
action=raw&ctype=text/javascript"></script>
 
action=raw&ctype=text/javascript"></script>
−
<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/onepagejs?
+
    <script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/onepagejs?
 
action=raw&ctype=text/javascript"></script>
 
action=raw&ctype=text/javascript"></script>
−
<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/snapsvg?
+
    <script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/snapsvg?
 
action=raw&ctype=text/javascript"></script>
 
action=raw&ctype=text/javascript"></script>
−
<script>
+
    <script>
−
      if($('.firstHeading'))$('.firstHeading').remove();
+
    if ($('.firstHeading')) $('.firstHeading').remove();
 
     </script>
 
     </script>
−
<style>
+
    <style>
−
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/
+
    #contentSub,
−
 
+
    #contentcontainer,
−
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
    #footer-box,
−
width: 100%;  
+
    #sitesub,
−
height: 100%;
+
    #catlinks,
−
border: 0px;
+
    #search-controls,
−
background-color: transparent;
+
    #p-logo,
−
margin: 0px;
+
    .h3,
−
padding: 0px;
+
    .printfooter,
−
}
+
    .firstHeading,
−
/* disable IGEM's style */
+
    .visualClear {
−
/*
+
        display: none;
−
#bodyContent{
+
    }
−
width: 100%;
+
    /*-- hides default wiki settings --*/
−
height: 100%;
+
   
−
}*/
+
    #globalWrapper,
−
/*
+
    #content {
 +
        width: 100%;
 +
        height: 100%;
 +
        border: 0px;
 +
        background-color: transparent;
 +
        margin: 0px;
 +
        padding: 0px;
 +
    }
 +
    #bodyContent, #mw-content-text {
 +
        width: 100%;
 +
        height: 100%;
 +
line-height:normal;
 +
    }
 +
    /*
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6 {
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6 {
 
border-bottom: none;
 
border-bottom: none;
Line 53: Line 67:
 
font-size: 100%;
 
font-size: 100%;
 
}*/
 
}*/
−
 
+
    </style>
−
</style>
+
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
<nav id="globalheader" class="globalheader" role="navigation" aria-label="Global Navigation">
+
    <nav id="globalheader" class="globalheader" role="navigation" aria-label="Global Navigation">
 
         <div id="gh-content" class="gh-content">
 
         <div id="gh-content" class="gh-content">
 
             <ul class="gh-nav-list navbar-nav">
 
             <ul class="gh-nav-list navbar-nav">
Line 63: Line 77:
 
                     <a href="https://2015.igem.org/Team:HFUT-China" class="gh-tab-link">
 
                     <a href="https://2015.igem.org/Team:HFUT-China" class="gh-tab-link">
 
                         <div class="gh-logo">
 
                         <div class="gh-logo">
−
                                <img src="https://static.igem.org/mediawiki/2015/e/eb/Logo_white_small.png" alt="35x35" class="img-rounded" style="width: 35px;height: 35px;">
+
                            <img src="https://static.igem.org/mediawiki/2015/e/eb/Logo_white_small.png" alt="35x35" class="img-rounded" style="width: 35px;height: 35px;">
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
 
                 </li>
 
                 </li>
−
                 <li class="gh-tab"><a href="#" class="gh-tab-link">Software</a></li>
+
                 <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Software" class="gh-tab-link">Software</a></li>
−
<li class="gh-tab"><a href="#" class="gh-tab-link">Design</a></li>
+
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Design" class="gh-tab-link">Design</a></li>
−
<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Description" class="gh-tab-link">Description</a></li>
+
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Description" class="gh-tab-link">Description</a></li>
−
<li class="gh-tab"><a href="#" class="gh-tab-link">Documents</a></li>
+
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Documents" class="gh-tab-link">Documents</a></li>
−
<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Practices" class="gh-tab-link">Human Practices</a></li>
+
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Practices" class="gh-tab-link">Human Practices</a></li>
−
<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Collaborations" class="gh-tab-link">Collaborations</a></li>
+
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Collaborations" class="gh-tab-link">Collaborations</a></li>
−
<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Team" class="gh-tab-link">Team</a></li>
+
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Team" class="gh-tab-link">Team</a></li>
−
<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Attributions" class="gh-tab-link">Attributors</a></li>
+
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Attributions" class="gh-tab-link">Attributors</a></li>
−
             </ul> <!-- ul.gh-nav-list -->
+
             </ul>
−
         </div> <!-- div#gh-content -->
+
            <!-- ul.gh-nav-list -->
−
     </nav> <!-- nav#globalheader -->
+
         </div>
−
<div class="container main">
+
        <!-- div#gh-content -->
−
<section class="intro brief">
+
     </nav>
−
<figure class="title-logo"></figure>  
+
    <!-- nav#globalheader -->
−
<div class="title">BioDesigner</div>
+
    <div class="container main">
−
<div class="slogn">All you want, right here</div>
+
        <section class="intro brief">
−
<div class="presentation box inline-box">
+
            <figure class="logo-back"></figure>
−
<div class="left-trigger"><button id="left"></button></div>
+
            <div class="b-title">
−
<div class="big-img">
+
                <div class="title">BioDesigner</div>
−
<figure class="project">
+
                <div class="slogn">All you want, right here</div>
−
</figure>
+
            </div>
−
</div>
+
        </section>
−
<div class="right-trigger"><button id="right"></button></div>
+
        <section class="intro desc">
−
</div>
+
            <div class="desc jumbotron">
−
</section>
+
                <div class="desc-title">What is BioDesigner</div>
−
<section class="intro desc">
+
                <p class="desc-words">BioDesigner is a smart assistant tool for Synthetic Biology design. Helping Synthetic Biologists to make creative products is BioDesigner's purpose. With this idea, BioDesigner presents all valuable information to users. Also by improving BioBricks’ searching process, recommending practical BioBricks during the design process, and simulating Biobricks’ reaction process, BioDesigner leads Synthetic Biology design to a new level.</p>
−
<div class="desc jumbotron">
+
            </div>
−
<div class="desc-title">What is BioDesigner</div>
+
            <div class="img-logo">
−
<p class="desc-words">BioDesigner is a smart assistant tool for Synthetic Biology design. Helping Synthetic Biologist make more creative products is BioDesigner's final purpose. With this idea, BioDesigner presents all valuable informations to the user. Also by improving the BioBrick searching process and providing practical BioBrick during the design process, BioDesigner leads Synthetic Biology design to a new level. </p>
+
                <svg id="test" width="100%" height="100%" viewBox="0 0 200 200"></svg>
−
</div>
+
            </div>
−
<div class="img-logo">
+
        </section>
−
<svg id="test" width="100%" height="100%" viewBox="0 0 200 200"></svg>
+
        <section class="intro search">
−
</div>
+
            <div class="search-anim">
−
</section>
+
                <svg id="search" width="100%" height="100%" viewBox="0 0 500 500">
−
<section class="intro search">
+
                </svg>
−
<div class="search-anim">
+
            </div>
−
<svg id="search" width="100%" height="100%" viewBox="0 0 500 500">
+
            <div class="func-desc jumbotron">
−
+
                <div class="func-title">Search</div>
−
</svg>
+
                <div class="func-subtitle">Search BioBricks, but more than BioBricks</div>
−
</div>
+
                <p class="func-words">Searching for a part is the most fundamental step in Synthetic Biology. With BioDesigner's powerful search tool, users can search parts by typing what they want, and the custom-built result will be presented to them. Besides, what BioDesigner can do is more than that. Lots of valuable information will also be presented to users, like basic information, especially parts quality evaluation score, as well as parts' related papers. By integrating lots of information together, users can get more than a BioBrick.</p>
−
<div class="func-desc jumbotron">
+
            </div>
−
+
        </section>
−
<div class="func-title">Search</div>
+
        <section class="intro recommend">
−
<div class="func-subtitle">Search BioBricks, but more than BioBricks</div>
+
            <div class="recommend-anim">
−
<p class="func-words">Searching for a part is the most fundamental step in Synthetic Biolody. With BioDesigner's powerful search tool, you can search parts by typing what you what, and the costum-built result will be presented to you. But what BioDesigner can do is more than that. Lots of valuable information will also be presented to the user, like some basic information, and most important one, is a parts' related papers. By collecting lots of information together, user can get more than BioBricks.</p>
+
                <svg id="recommend" width="100%" height="100%" viewBox="0 0 500 500">
−
</div>
+
                </svg>
−
</section>
+
            </div>
−
<section class="intro recommend">
+
            <div class="func-desc jumbotron">
−
<div class="recommend-anim">
+
                <div class="func-title">Recommendation</div>
−
<svg id="recommend" width="100%" height="100%" viewBox="0 0 500 500">
+
                <div class="func-subtitle">Select in selection, not Search in ocean</div>
−
+
                <p class="func-words">Selecting a part from tons of candidates is always a pain point to every Synthetic Biology researcher. BioDesigner is the assistant that can simplify this task. Based on users' current design, BioDesigner can narrow down the scope and provide useful parts as a recommendation to users. Also, by analyzing part's function, the recommendation will adjust to users’ design according to users’ specific function need. BioDesigner can also providing system level recommendation by showing users the relations between various proteins and genes. With BioDesigner’s fantastic recommendation function, selecting a part won't be that hard.</p>
−
</svg>
+
            </div>
−
</div>
+
        </section>
−
<div class="func-desc jumbotron">
+
        <section class="intro simulation">
−
<div class="func-title">Recommendation</div>
+
            <div class="simu-anim">
−
<div class="func-subtitle">Select in selection, not Search in ocean</div>
+
                <svg id="simulation" width="100%" height="100%" viewBox="0 0 500 500">
−
<p class="func-words">The decision of a part is always a pain point to every Synthetic Biology researcher. BioDesigner is the assistant which can help users make that decision. By analyzing users' design with lots of datas, BioDesigner can provide useful parts as a recommendation to the user. Also, by lots of data analyze of part's function, the recommendation will adjust to your design. BioDesigner can also show you relations between different proteins and genes. With lots of hard working, by providing all those valuable informations, the decision of part won't be that hard.</p>
+
                </svg>
−
</div>
+
            </div>
−
</section>
+
            <div class="simu-desc jumbotron">
−
<section class="intro simulation">
+
                <div class="simu-title">Simulation</div>
−
<div class="simu-anim">
+
                <div class="simu-subtitle">Tell how it works, before you do your works</div>
−
<svg id="simulation" width="100%" height="100%" viewBox="0 0 500 500">
+
                <p class="simu-words">Traditionally, testing a Synthetic Biology design is done by lots of biological experiments, which can be an extremely time-consuming process. By using SSA algorithm, BioDesigner can show users a glance of how the design will perform. With BioDesigner's interactive simulator, user can check the amount of a certain compound at any time, or during any time period.</p>
−
+
            </div>
−
</svg>
+
        </section>
−
</div>
+
    </div>
−
<div class="func-desc jumbotron">
+
    <!-- div.container-fluid -->
−
<div class="func-title">Simulation</div>
+
    <script type="text/javascript">
−
<div class="func-subtitle">Tell how it works, before you do your works</div>
+
    window.image_index = 0;
−
<p class="func-words">Traditionally, the test of a Synthetic Biology design is by doing lots of experiments, which can be a extremely time-consuming process. By using SSA algorithm, BioDesigner can show a glance of how the design will performed to the user. With BioDesigner's interactive simulator, user can check amount of a certain compound at any time, or during any time period.</p>
+
    window.total_image = 3;
−
</div>
+
    </script>
−
</section>
+
    <script type="text/javascript">
−
</div><!-- div.container-fluid -->
+
    $(document).ready(function() {
−
<script type="text/javascript">
+
−
window.image_index = 0;
+
−
window.total_image = 3;
+
−
</script>
+
−
<script type="text/javascript">
+
−
$(document).ready(function(){
+
  
−
$('.main').onepage_scroll({
+
        $('.main').onepage_scroll({
−
sectionContainer: "section",
+
            sectionContainer: "section",
−
easing: "ease",
+
            easing: "ease",
−
animationTime: 1000,
+
            animationTime: 1000,
−
pagination: true,
+
            pagination: true,
−
afterMove: function(index) {
+
            afterMove: function(index) {
−
drawContent(index);
+
                drawContent(index);
−
},
+
            },
−
loop: false,
+
            loop: false,
−
keyboard: true,
+
            keyboard: true,
−
direction: "vertical"
+
            direction: "vertical"
−
})
+
        })
−
});
+
    });
−
</script>
+
    </script>
−
<script type="text/javascript">
+
    <script type="text/javascript">
−
$(document).on({
+
    $(document).on({
−
click:function(){
+
        click: function() {
−
window.image_index -= 1;
+
            window.image_index -= 1;
−
if (window.image_index < 0){
+
            if (window.image_index < 0) {
−
window.image_index = window.total_image - 1;
+
                window.image_index = window.total_image - 1;
−
}
+
            }
−
var image_width = $('figure.project').width();
+
            var image_width = $('figure.project').width();
−
var new_width = image_width * window.image_index;
+
            var new_width = image_width * window.image_index;
−
var pos_str = '-' + new_width + 'px 0px';
+
            var pos_str = '-' + new_width + 'px 0px';
−
console.log(pos_str);
+
            console.log(pos_str);
−
$('figure.project').css('background-position', pos_str);
+
            $('figure.project').css('background-position', pos_str);
−
}
+
        }
−
},'button#left');
+
    }, 'button#left');
−
</script>
+
    </script>
−
<script type="text/javascript">
+
    <script type="text/javascript">
−
$(document).on({
+
    $(document).on({
−
click:function(){
+
        click: function() {
−
window.image_index += 1;
+
            window.image_index += 1;
−
if (window.image_index >= window.total_image){
+
            if (window.image_index >= window.total_image) {
−
window.image_index = 0;
+
                window.image_index = 0;
−
}
+
            }
−
var image_width = $('figure.project').width();
+
            var image_width = $('figure.project').width();
−
var new_width = image_width * window.image_index;
+
            var new_width = image_width * window.image_index;
−
var pos_str = '-' + new_width + 'px 0px';
+
            var pos_str = '-' + new_width + 'px 0px';
−
console.log(pos_str);
+
            console.log(pos_str);
−
$('figure.project').css('background-position', pos_str);
+
            $('figure.project').css('background-position', pos_str);
−
}
+
        }
−
},'button#right');
+
    }, 'button#right');
−
</script>
+
    </script>
−
<script type="text/javascript">
+
    <script type="text/javascript">
−
function drawContent(index){
+
    function drawContent(index) {
−
if (index == 1){
+
        if (index == 1) {} else if (index == 2) {
−
}else if(index ==2){
+
            drawLogo();
−
drawLogo();
+
        } else if (index == 3) {
−
}else if(index == 3){
+
            animate_search();
−
animate_search();
+
        } else if (index == 4) {
−
}else if(index == 4){
+
            animate_recommendation();
−
animate_recommendation();
+
        } else if (index == 5) {
−
}else if (index == 5){
+
            animate_simulate();
−
animate_simulate();
+
        }
−
}
+
    }
−
}
+
    </script>
−
</script>
+
    <script type="text/javascript">
−
<script type="text/javascript">
+
    function drawSearch() {
−
function drawSearch(){
+
−
+
−
}
+
−
</script>
+
−
<script type="text/javascript">
+
−
function drawLogo(){
+
−
var s = Snap('#test');
+
−
s.clear();
+
−
var path1 = s.path('M27.014,120.007c-10.25-0.183-17.187,7.394-17.066,16.297c0.098,6.935,5.523,13.152,12.199,14.747c6.874,1.639,13.909-1.388,17.399-7.665c0.741-1.344,1.518-1.735,2.992-1.731c16.309,0.054,32.618,0.064,48.929-0.008c1.657-0.005,2.524,0.444,3.34,1.918c3.516,6.372,10.816,9.386,17.763,7.511c6.847-1.848,12.005-8.626,11.812-15.52c-0.194-6.922-5.247-13.241-11.95-14.947c-6.913-1.755-14.021,1.145-17.527,7.374c-0.811,1.444-1.711,1.759-3.194,1.755c-16.388-0.037-32.774-0.042-49.162,0.004c-1.43,0.007-2.239-0.31-3.006-1.678C36.647,122.908,32.09,120.279,27.014,120.007z M55.312,69.361c0.203,0.152,0.354,0.22,0.441,0.337c2.129,2.763,4.324,5.478,6.328,8.332c0.502,0.714,0.683,1.916,0.509,2.793c-0.713,3.628,1.352,6.981,4.809,7.515c3.583,0.559,6.754-1.909,7.011-5.448c0.257-3.516-2.463-6.337-6.139-6.458c-0.688-0.024-1.639-0.141-1.996-0.588c-2.464-3.048-4.801-6.198-7.146-9.272c5.118-6.465,5.876-13.023,1.653-20.015c-0.29-0.48-0.107-1.576,0.267-2.085c2.03-2.738,4.266-5.332,6.278-8.086c1.065-1.46,1.935-1.931,3.878-1.285c8.596,2.837,17.725-2.468,19.888-11.325c2.206-9.052-3.742-17.634-13.488-19.446c-7.699-1.431-16.192,5.197-17.41,13.522c-0.635,4.353,0.549,8.231,2.947,11.804c-2.572,3.273-5.134,6.376-7.514,9.609c-0.994,1.349-1.823,1.697-3.524,1.175c-7.82-2.411-16.154,1.783-19.083,9.419c-2.895,7.544,0.432,16.141,7.694,19.717C45.607,71.99,50.522,71.729,55.312,69.361z M45.403,101.716c0.668,0.135,1.12,0.203,1.561,0.314c7.917,2.062,15.845,4.093,23.737,6.255c0.708,0.198,1.444,1.168,1.717,1.938c1.536,4.354,5.158,7.015,9.638,6.898c4.238-0.111,7.947-2.972,9.091-7.011c1.183-4.164-0.505-8.581-4.165-10.908c-3.705-2.355-8.286-1.895-11.834,1.004c-0.67,0.548-1.905,0.888-2.721,0.688c-7.65-1.881-15.257-3.952-22.912-5.832c-1.876-0.46-2.623-1.251-2.934-3.244c-1.299-8.387-9.561-14.011-18.171-12.6c-8.456,1.386-14.186,9.647-12.727,18.345c1.377,8.194,9.483,14.012,17.705,12.752C38.81,109.486,42.664,106.476,45.403,101.716z');
+
  
−
path1.attr({
+
    }
−
id: "pathA",
+
    </script>
−
    fill: "none",
+
    <script type="text/javascript">
−
    strokeWidth: "1",
+
    function drawLogo() {
−
    stroke: "#000",
+
        var s = Snap('#test');
−
    strokeMiterLimit: "10",
+
        s.clear();
−
    strokeDasharray: "9 9",
+
        var path1 = s.path('M27.014,120.007c-10.25-0.183-17.187,7.394-17.066,16.297c0.098,6.935,5.523,13.152,12.199,14.747c6.874,1.639,13.909-1.388,17.399-7.665c0.741-1.344,1.518-1.735,2.992-1.731c16.309,0.054,32.618,0.064,48.929-0.008c1.657-0.005,2.524,0.444,3.34,1.918c3.516,6.372,10.816,9.386,17.763,7.511c6.847-1.848,12.005-8.626,11.812-15.52c-0.194-6.922-5.247-13.241-11.95-14.947c-6.913-1.755-14.021,1.145-17.527,7.374c-0.811,1.444-1.711,1.759-3.194,1.755c-16.388-0.037-32.774-0.042-49.162,0.004c-1.43,0.007-2.239-0.31-3.006-1.678C36.647,122.908,32.09,120.279,27.014,120.007z M55.312,69.361c0.203,0.152,0.354,0.22,0.441,0.337c2.129,2.763,4.324,5.478,6.328,8.332c0.502,0.714,0.683,1.916,0.509,2.793c-0.713,3.628,1.352,6.981,4.809,7.515c3.583,0.559,6.754-1.909,7.011-5.448c0.257-3.516-2.463-6.337-6.139-6.458c-0.688-0.024-1.639-0.141-1.996-0.588c-2.464-3.048-4.801-6.198-7.146-9.272c5.118-6.465,5.876-13.023,1.653-20.015c-0.29-0.48-0.107-1.576,0.267-2.085c2.03-2.738,4.266-5.332,6.278-8.086c1.065-1.46,1.935-1.931,3.878-1.285c8.596,2.837,17.725-2.468,19.888-11.325c2.206-9.052-3.742-17.634-13.488-19.446c-7.699-1.431-16.192,5.197-17.41,13.522c-0.635,4.353,0.549,8.231,2.947,11.804c-2.572,3.273-5.134,6.376-7.514,9.609c-0.994,1.349-1.823,1.697-3.524,1.175c-7.82-2.411-16.154,1.783-19.083,9.419c-2.895,7.544,0.432,16.141,7.694,19.717C45.607,71.99,50.522,71.729,55.312,69.361z M45.403,101.716c0.668,0.135,1.12,0.203,1.561,0.314c7.917,2.062,15.845,4.093,23.737,6.255c0.708,0.198,1.444,1.168,1.717,1.938c1.536,4.354,5.158,7.015,9.638,6.898c4.238-0.111,7.947-2.972,9.091-7.011c1.183-4.164-0.505-8.581-4.165-10.908c-3.705-2.355-8.286-1.895-11.834,1.004c-0.67,0.548-1.905,0.888-2.721,0.688c-7.65-1.881-15.257-3.952-22.912-5.832c-1.876-0.46-2.623-1.251-2.934-3.244c-1.299-8.387-9.561-14.011-18.171-12.6c-8.456,1.386-14.186,9.647-12.727,18.345c1.377,8.194,9.483,14.012,17.705,12.752C38.81,109.486,42.664,106.476,45.403,101.716z');
−
    strokeDashOffset: "988.01"
+
−
});
+
  
−
var len1 = path1.getTotalLength();
+
        path1.attr({
−
path1.attr({
+
            id: "pathA",
−
stroke: '#000',
+
            fill: "none",
−
strokeWidth: 1,
+
            strokeWidth: "1",
−
fill:'#E6E6E6',
+
            stroke: "#002FA7",
−
    // Draw Path
+
            strokeMiterLimit: "10",
−
    "stroke-dasharray": len1 + " " + len1,
+
            strokeDasharray: "9 9",
−
    "stroke-dashoffset": len1
+
            strokeDashOffset: "988.01"
−
  }).animate({"stroke-dashoffset": 10}, 2000,mina.easeout, function(){
+
        });
−
  path1.animate({fill:'#000'}, 1000);
+
−
  });
+
−
}
+
−
</script>
+
−
<script type="text/javascript">
+
−
function animate_recommendation(){
+
−
var ss = Snap('#recommend');
+
−
ss.clear();
+
−
var first_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', 250, 500, 99, 174);
+
−
var second_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', -130, 184, 99, 174);
+
−
var recommend_image1 = ss.image('https://static.igem.org/mediawiki/2015/f/fd/Green_biobrick.png', 175, 75, 99, 174).attr({
+
−
'opacity': 0
+
−
});
+
−
var recommend_image2 = ss.image('https://static.igem.org/mediawiki/2015/0/08/Red_biobrick.png', 320, 75, 99, 174).attr({
+
−
'opacity': 0
+
−
});
+
−
first_image.animate({y:290}, 1000,mina.easeout, function(){
+
−
second_image.animate({x:250}, 1300, mina.easeout, function(){
+
−
recommend_image1.animate({'opacity':1}, 1000);
+
−
recommend_image2.animate({'opacity':1}, 700, function(){
+
−
recommend_image1.animate({x:250}, 1000);
+
−
recommend_image2.animate({'opacity':0}, 750);
+
−
});
+
−
});
+
−
});
+
−
}
+
−
</script>
+
−
<script type="text/javascript">
+
−
function animate_search(){
+
−
var ss = Snap('#search');
+
−
ss.clear();
+
−
var bb_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', 300, 410, 40, 70);
+
−
+
−
var hook_image = ss.image('https://static.igem.org/mediawiki/2015/e/e8/Search_hook.png', 290, -153, 61, 153);
+
−
var cloud_image = ss.image('https://static.igem.org/mediawiki/2015/8/87/Search_cloud.png', 250, 400, 144, 80);
+
−
var name_image = ss.image('https://static.igem.org/mediawiki/2015/8/86/Name.png', 300, 210,50,50).attr({'opacity': 0});
+
−
var paper_image = ss.image('https://static.igem.org/mediawiki/2015/b/b2/Paper.png', 300, 210,50,50).attr({'opacity': 0});
+
−
var type_image = ss.image('https://static.igem.org/mediawiki/2015/5/5f/Type.png', 300, 210,50,50).attr({'opacity': 0});
+
−
var desc_image = ss.image('https://static.igem.org/mediawiki/2015/8/85/DESC.png', 300, 210,50,50).attr({'opacity': 0});
+
−
hook_image.animate({
+
−
y:300
+
−
}, 1000, mina.easeout, function(){
+
−
hook_image.animate({y:100}, 1500);
+
−
bb_image.animate({y:210}, 1500, function(){
+
−
name_image.animate({'opacity':1, x:230, y:150, width:65, height:65},1000);
+
−
paper_image.animate({'opacity':1, x:230, y:270, width:65, height:65},1000);
+
−
type_image.animate({'opacity':1, x:350, y:150, width:65, height:65},1000);
+
−
desc_image.animate({'opacity':1, x:350, y:270, width:65, height:65},1000);
+
−
});
+
−
})
+
−
}
+
−
</script>
+
−
<script type="text/javascript">
+
−
function animate_simulate(){
+
−
var ss = Snap('#simulation');
+
−
ss.clear();
+
−
var linex = ss.path('M395.667,349.333L416.501,357.666L395.5,366.625L395.5,359.5L73,359.5').attr({
+
−
fill:'none',
+
−
stroke:'#FFFFFF',
+
−
strokeWidth:5,
+
−
'stroke-linecap':'round',
+
−
'stroke-linejoin':'round',
+
−
'stroke-miterlimit':10,
+
−
strokeDasharray: "9 9",
+
−
    strokeDashOffset: "988.01"
+
−
});
+
−
var liney = ss.path('M119.417,164.417L110.959,144.041L102.5,166.5L109.5,166.5L109.5,394').attr({
+
−
fill:'none',
+
−
stroke:'#FFFFFF',
+
−
'stroke-width':5,
+
−
'stroke-linecap':'round',
+
−
'stroke-linejoin':'round',
+
−
'stroke-miterlimit':10,
+
−
strokeDasharray: "9 9",
+
−
    strokeDashOffset: "988.01"
+
−
});
+
−
var line1 = ss.path('M136,172.094L196.699,295.088L256,311L315,321L376,327.667').attr({fill:'none',
+
−
stroke:'#5FAEFF',
+
−
'stroke-width':7,
+
−
'stroke-linecap':'round',
+
−
'stroke-linejoin':'round',
+
−
'stroke-miterlimit':10,
+
−
strokeDasharray: "9 9",
+
−
    strokeDashOffset: "988.01"
+
−
});
+
−
var line2 = ss.path('M136,331.5L196.699,249.881L256,241.091L315,200.333L376,195').attr({fill:'none',
+
−
stroke:'#2FCE71',
+
−
'stroke-width':7,
+
−
'stroke-linecap':'round',
+
−
'stroke-linejoin':'round',
+
−
'stroke-miterlimit':10,
+
−
strokeDasharray: "9 9",
+
−
    strokeDashOffset: "988.01"
+
−
});
+
−
var lenx = linex.getTotalLength();
+
−
var leny = liney.getTotalLength();
+
−
var len1 = line1.getTotalLength();
+
−
var len2 = line2.getTotalLength();
+
−
line1.attr({
+
−
"stroke-dasharray": len1 + " " + len1,
+
−
"stroke-dashoffset": len1
+
−
});
+
−
line2.attr({
+
−
"stroke-dasharray": len2 + " " + len2,
+
−
"stroke-dashoffset": len2
+
−
});
+
  
−
linex.attr({
+
        var len1 = path1.getTotalLength();
−
stroke: '#fff',
+
        path1.attr({
−
strokeWidth: 5,
+
            stroke: '#002FA7',
 +
            strokeWidth: 1,
 +
            fill: 'none',
 +
            // Draw Path
 +
            "stroke-dasharray": len1 + " " + len1,
 +
            "stroke-dashoffset": len1
 +
        }).animate({
 +
            "stroke-dashoffset": 10
 +
        }, 2000, mina.easeout, function() {
 +
            path1.animate({
 +
                fill: '#000'
 +
            }, 1000);
 +
        });
 +
    }
 +
    </script>
 +
    <script type="text/javascript">
 +
    function animate_recommendation() {
 +
        var ss = Snap('#recommend');
 +
        ss.clear();
 +
        var first_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', 250, 500, 99, 174);
 +
        var second_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', -130, 184, 99, 174);
 +
        var recommend_image1 = ss.image('https://static.igem.org/mediawiki/2015/f/fd/Green_biobrick.png', 175, 75, 99, 174).attr({
 +
            'opacity': 0
 +
        });
 +
        var recommend_image2 = ss.image('https://static.igem.org/mediawiki/2015/0/08/Red_biobrick.png', 320, 75, 99, 174).attr({
 +
            'opacity': 0
 +
        });
 +
        first_image.animate({
 +
            y: 290
 +
        }, 1000, mina.easeout, function() {
 +
            second_image.animate({
 +
                x: 250
 +
            }, 1300, mina.easeout, function() {
 +
                recommend_image1.animate({
 +
                    'opacity': 1
 +
                }, 1000);
 +
                recommend_image2.animate({
 +
                    'opacity': 1
 +
                }, 700, function() {
 +
                    recommend_image1.animate({
 +
                        x: 250
 +
                    }, 1000);
 +
                    recommend_image2.animate({
 +
                        'opacity': 0
 +
                    }, 750);
 +
                });
 +
            });
 +
        });
 +
    }
 +
    </script>
 +
    <script type="text/javascript">
 +
    function animate_search() {
 +
        var ss = Snap('#search');
 +
        ss.clear();
 +
        var bb_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', 300, 410, 40, 70);
  
−
    // Draw Path
+
        var hook_image = ss.image('https://static.igem.org/mediawiki/2015/e/e8/Search_hook.png', 290, -153, 61, 153);
−
    "stroke-dasharray": lenx + " " + lenx,
+
        var cloud_image = ss.image('https://static.igem.org/mediawiki/2015/8/87/Search_cloud.png', 250, 400, 144, 80);
−
    "stroke-dashoffset": lenx
+
        var name_image = ss.image('https://static.igem.org/mediawiki/2015/8/86/Name.png', 300, 210, 50, 50).attr({
−
}).animate({"stroke-dashoffset": 10}, 2000,mina.easeout, function(){
+
            'opacity': 0
 +
        });
 +
        var paper_image = ss.image('https://static.igem.org/mediawiki/2015/b/b2/Paper.png', 300, 210, 50, 50).attr({
 +
            'opacity': 0
 +
        });
 +
        var type_image = ss.image('https://static.igem.org/mediawiki/2015/5/5f/Type.png', 300, 210, 50, 50).attr({
 +
            'opacity': 0
 +
        });
 +
        var desc_image = ss.image('https://static.igem.org/mediawiki/2015/8/85/DESC.png', 300, 210, 50, 50).attr({
 +
            'opacity': 0
 +
        });
 +
        hook_image.animate({
 +
            y: 300
 +
        }, 1000, mina.easeout, function() {
 +
            hook_image.animate({
 +
                y: 100
 +
            }, 1500);
 +
            bb_image.animate({
 +
                y: 210
 +
            }, 1500, function() {
 +
                name_image.animate({
 +
                    'opacity': 1,
 +
                    x: 230,
 +
                    y: 150,
 +
                    width: 65,
 +
                    height: 65
 +
                }, 1000);
 +
                paper_image.animate({
 +
                    'opacity': 1,
 +
                    x: 230,
 +
                    y: 270,
 +
                    width: 65,
 +
                    height: 65
 +
                }, 1000);
 +
                type_image.animate({
 +
                    'opacity': 1,
 +
                    x: 350,
 +
                    y: 150,
 +
                    width: 65,
 +
                    height: 65
 +
                }, 1000);
 +
                desc_image.animate({
 +
                    'opacity': 1,
 +
                    x: 350,
 +
                    y: 270,
 +
                    width: 65,
 +
                    height: 65
 +
                }, 1000);
 +
            });
 +
        })
 +
    }
 +
    </script>
 +
    <script type="text/javascript">
 +
    function animate_simulate() {
 +
        var ss = Snap('#simulation');
 +
        ss.clear();
 +
        var linex = ss.path('M395.667,349.333L416.501,357.666L395.5,366.625L395.5,359.5L73,359.5').attr({
 +
            fill: 'none',
 +
            stroke: '#000000',
 +
            strokeWidth: 5,
 +
            'stroke-linecap': 'round',
 +
            'stroke-linejoin': 'round',
 +
            'stroke-miterlimit': 10,
 +
            strokeDasharray: "9 9",
 +
            strokeDashOffset: "988.01"
 +
        });
 +
        var liney = ss.path('M119.417,164.417L110.959,144.041L102.5,166.5L109.5,166.5L109.5,394').attr({
 +
            fill: 'none',
 +
            stroke: '#000000',
 +
            'stroke-width': 5,
 +
            'stroke-linecap': 'round',
 +
            'stroke-linejoin': 'round',
 +
            'stroke-miterlimit': 10,
 +
            strokeDasharray: "9 9",
 +
            strokeDashOffset: "988.01"
 +
        });
 +
        var line1 = ss.path('M136,172.094L196.699,295.088L256,311L315,321L376,327.667').attr({
 +
            fill: 'none',
 +
            stroke: '#5FAEFF',
 +
            'stroke-width': 7,
 +
            'stroke-linecap': 'round',
 +
            'stroke-linejoin': 'round',
 +
            'stroke-miterlimit': 10,
 +
            strokeDasharray: "9 9",
 +
            strokeDashOffset: "988.01"
 +
        });
 +
        var line2 = ss.path('M136,331.5L196.699,249.881L256,241.091L315,200.333L376,195').attr({
 +
            fill: 'none',
 +
            stroke: '#2FCE71',
 +
            'stroke-width': 7,
 +
            'stroke-linecap': 'round',
 +
            'stroke-linejoin': 'round',
 +
            'stroke-miterlimit': 10,
 +
            strokeDasharray: "9 9",
 +
            strokeDashOffset: "988.01"
 +
        });
 +
        var lenx = linex.getTotalLength();
 +
        var leny = liney.getTotalLength();
 +
        var len1 = line1.getTotalLength();
 +
        var len2 = line2.getTotalLength();
 +
        line1.attr({
 +
            "stroke-dasharray": len1 + " " + len1,
 +
            "stroke-dashoffset": len1
 +
        });
 +
        line2.attr({
 +
            "stroke-dasharray": len2 + " " + len2,
 +
            "stroke-dashoffset": len2
 +
        });
  
−
});
+
        linex.attr({
−
liney.attr({
+
            stroke: '#000',
−
stroke: '#fff',
+
            strokeWidth: 5,
−
strokeWidth: 5,
+
  
−
    // Draw Path
+
            // Draw Path
−
    "stroke-dasharray": leny + " " + leny,
+
            "stroke-dasharray": lenx + " " + lenx,
−
    "stroke-dashoffset": leny
+
            "stroke-dashoffset": lenx
−
}).animate({"stroke-dashoffset": 10}, 2000,mina.easeout, function(){
+
        }).animate({
−
line1.attr({
+
            "stroke-dashoffset": 10
−
stroke: '#5FAEFF',
+
        }, 2000, mina.easeout, function() {
−
strokeWidth: 7,
+
  
−
    // Draw Path
+
        });
−
    "stroke-dasharray": len1 + " " + len1,
+
        liney.attr({
−
    "stroke-dashoffset": len1
+
            stroke: '#000',
−
}).animate({"stroke-dashoffset" : 10}, 2000, mina.easeout, function(){
+
            strokeWidth: 5,
−
line2.attr({
+
−
stroke: '#2FCE71',
+
−
strokeWidth: 7,
+
  
−
    // Draw Path
+
            // Draw Path
−
    "stroke-dasharray": len2 + " " + len2,
+
            "stroke-dasharray": leny + " " + leny,
−
    "stroke-dashoffset": len2
+
            "stroke-dashoffset": leny
−
}).animate({"stroke-dashoffset" : 10}, 2000, mina.easeout)
+
        }).animate({
−
});
+
            "stroke-dashoffset": 10
−
});
+
        }, 2000, mina.easeout, function() {
−
}
+
            line1.attr({
−
</script>
+
                stroke: '#5FAEFF',
 +
                strokeWidth: 7,
 +
 
 +
                // Draw Path
 +
                "stroke-dasharray": len1 + " " + len1,
 +
                "stroke-dashoffset": len1
 +
            }).animate({
 +
                "stroke-dashoffset": 10
 +
            }, 2000, mina.easeout, function() {
 +
                line2.attr({
 +
                    stroke: '#2FCE71',
 +
                    strokeWidth: 7,
 +
 
 +
                    // Draw Path
 +
                    "stroke-dasharray": len2 + " " + len2,
 +
                    "stroke-dashoffset": len2
 +
                }).animate({
 +
                    "stroke-dashoffset": 10
 +
                }, 2000, mina.easeout)
 +
            });
 +
        });
 +
    }
 +
    </script>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Latest revision as of 00:36, 19 September 2015

HFUT-China

BioDesigner
All you want, right here
What is BioDesigner

BioDesigner is a smart assistant tool for Synthetic Biology design. Helping Synthetic Biologists to make creative products is BioDesigner's purpose. With this idea, BioDesigner presents all valuable information to users. Also by improving BioBricks’ searching process, recommending practical BioBricks during the design process, and simulating Biobricks’ reaction process, BioDesigner leads Synthetic Biology design to a new level.

Search
Search BioBricks, but more than BioBricks

Searching for a part is the most fundamental step in Synthetic Biology. With BioDesigner's powerful search tool, users can search parts by typing what they want, and the custom-built result will be presented to them. Besides, what BioDesigner can do is more than that. Lots of valuable information will also be presented to users, like basic information, especially parts quality evaluation score, as well as parts' related papers. By integrating lots of information together, users can get more than a BioBrick.

Recommendation
Select in selection, not Search in ocean

Selecting a part from tons of candidates is always a pain point to every Synthetic Biology researcher. BioDesigner is the assistant that can simplify this task. Based on users' current design, BioDesigner can narrow down the scope and provide useful parts as a recommendation to users. Also, by analyzing part's function, the recommendation will adjust to users’ design according to users’ specific function need. BioDesigner can also providing system level recommendation by showing users the relations between various proteins and genes. With BioDesigner’s fantastic recommendation function, selecting a part won't be that hard.

Simulation
Tell how it works, before you do your works

Traditionally, testing a Synthetic Biology design is done by lots of biological experiments, which can be an extremely time-consuming process. By using SSA algorithm, BioDesigner can show users a glance of how the design will perform. With BioDesigner's interactive simulator, user can check the amount of a certain compound at any time, or during any time period.