Team:Peking/drawingcurvetest

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<body>
 
<style type="text/css">
<style type="text/css">
-
#Dear_Profstoy{position:relative; width:700px; height:400px; background-color:#ffffff; font-family:calibri,Arial;}
+
/* hiding the top section*/
-
#Dear_Profstoy code{background-color:transparent;  font-family:calibri,Arial;}
+
body{position:absolute; top:0px; width:100%; height:1300px;}
-
#Dear_ProfAxis{position:absolute; left:0px; top:0px; width:600px;}
+
#top-section{
-
#Dear_ProfsCanvas{ position:absolute; left:37px; top:12px; border:0px;}
+
  height:0px;
-
.Dear_ProfsControlPanel{position:absolute; left:600px; height:200px;}
+
    border:none;
-
.Dear_ProfsControlPanel img{height:35px;}
+
    width:980px;
-
.Dear_ProfsControlPanel h1{position:relative; border-bottom:0px;}
+
    margin:0 auto;
-
#Dear_ProfsControlPanel1{top:0px;}
+
    padding:0 0 0 0;
-
#Dear_ProfsControlPanel2{top:200px;}
+
    background-color:transparent;
-
</style>
+
    overflow:hide;
-
<div id="Dear_Profstoy" >
+
}
-
    <img id="Dear_ProfAxis" src="https://static.igem.org/mediawiki/2013/b/bd/Peking2013_DearProfstoy_Axis.png" />
+
#p-logo{display:none;}
-
    <canvas id="Dear_ProfsCanvas" height="350px" width="495px">
+
#search-controls{display:none;}
-
Your browser does not support the HTML5 canvas tag.
+
#top{display:none;}
-
     </canvas>
+
.firstHeading{display:none;}
-
     <div class="Dear_ProfsControlPanel" id="Dear_ProfsControlPanel1">
+
/* end of hiding the top section*/
-
          <img id="KphiPlus" src="https://static.igem.org/mediawiki/2013/2/28/Peking2013_DearPfro_PlusInactive.jpg">
+
 
-
          <h1 id="KphiShow">Kphi=</h1>
+
/* global setting*/
-
          <img id="KphiMinus" src="https://static.igem.org/mediawiki/2013/0/04/Peking2013_DearPfro_Minus.jpg">
+
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri, Arial, Helvetica, sans-serif;}
-
     </div>
+
#content{
-
<div class="Dear_ProfsControlPanel" id="Dear_ProfsControlPanel2">
+
     background-color:transparent;
-
          <img id="ncIPlus" src="https://static.igem.org/mediawiki/2013/2/28/Peking2013_DearPfro_PlusInactive.jpg">
+
     border:none;
-
          <h1 id="ncIShow">ncI=</h1>
+
    width:1200px;
-
          <img id="ncIMinus" src="https://static.igem.org/mediawiki/2013/0/04/Peking2013_DearPfro_Minus.jpg">
+
    height:700px;
-
     </div>
+
    marign:0 auto;
 +
     padding:0 0 0 0;
 +
    top:-40px;
 +
    }
 +
#bodyContent{
 +
    background-color:transparent;
 +
     border:none;
      
      
-
      
+
     }
-
</div>
+
siteSub{
 +
    display:none;
 +
    border:none;
 +
    }
 +
contentSub{
 +
    display:none;
 +
    }
 +
/* end of global setting*/
 +
/*hiding the footer-box*/
 +
#footer-box{display:none;}
 +
#catlinks{display:none;}
 +
/*end of hiding the footer book*/
 +
/* menu (page, edit ...) */
 +
#menubar {
 +
    background-color:transparent;
 +
    position: relative;
 +
    float:left;
 +
    white-space: nowrap;
 +
    top:-6px;
 +
    width: 490px;
 +
    z-index: 5000;
 +
    font-family: sans-serif;
 +
    font-size: 95%;
 +
    line-height: 1em;
 +
    z-index:99;
 +
}
-
<script type="text/javascript">
 
-
var c=document.getElementById("Dear_ProfsCanvas");
 
-
var ctx=c.getContext("2d");
 
-
var convasheight=c.height, CorXmin=0, CorXmax=495;
 
-
var Kphi=60; ncI=1.15;
 
-
document.getElementById("KphiShow").innerHTML="K<sub><code>&phi;</code>R73</sub>="+Kphi.toFixed(1);
 
-
document.getElementById("ncIShow").innerHTML="n<sub>cI</sub>="+ncI.toFixed(1);
 
 +
.left-menu, .left-menu a {
 +
    text-align: left;
 +
    color:#999999;
 +
    text-transform: lowercase;
 +
}
 +
.left-menu:hover {
 +
    color: #D00000;
 +
    background-color: transparent;
 +
}
-
document.getElementById("KphiPlus").onmousedown=function()  //Kphi plus button down
+
.right-menu{width:400px; float:right}
-
{
+
.right-menu, .right-menu a {
-
  document.getElementById("KphiPlus").src="https://static.igem.org/mediawiki/2013/a/ab/Peking2013_DearPfro_Plus.jpg";
+
    right: 0px;
-
 
+
    text-align: right;
 +
    color: #999999;
}
}
-
document.getElementById("KphiPlus").onmouseup=function()  //Kphi plus button up
+
#menubar ul {
-
{
+
    color: #999999;
-
  sleep(200);
+
    list-style: none;
-
  document.getElementById("KphiPlus").src="https://static.igem.org/mediawiki/2013/2/28/Peking2013_DearPfro_PlusInactive.jpg";
+
}
}
-
document.getElementById("KphiMinus").onmousedown=function()  //Kphi Minus button down
+
#menubar li {
-
{
+
    display: inline;
-
  document.getElementById("KphiMinus").src="https://static.igem.org/mediawiki/2013/7/78/Peking2013_DearPfro_Minus_activated.jpg";
+
    position: relative;
-
 
+
    cursor: pointer;
 +
    padding-left: 0px;
 +
    padding-right: 0px;
}
}
-
document.getElementById("KphiMinus").onmouseup=function()  //Kphi Minus button up
+
.left-menu li a {
-
{
+
    padding: 0px 10px 0px 0px;
-
  sleep(200);
+
-
  document.getElementById("KphiMinus").src="https://static.igem.org/mediawiki/2013/0/04/Peking2013_DearPfro_Minus.jpg";
+
}
}
-
document.getElementById("ncIPlus").onmousedown=function()  //ncI plus button down
+
.left-menu .selected {
-
{
+
#   color: #999999;
-
   document.getElementById("ncIPlus").src="https://static.igem.org/mediawiki/2013/a/ab/Peking2013_DearPfro_Plus.jpg";
+
-
 
+
}
}
-
document.getElementById("ncIPlus").onmouseup=function()  //ncI plus button up
+
#.left-menu .selected:hover {
-
{
+
#   color: #999999;
-
   sleep(200);
+
#}
-
  document.getElementById("ncIPlus").src="https://static.igem.org/mediawiki/2013/2/28/Peking2013_DearPfro_PlusInactive.jpg";
+
 
 +
.left-menu:hover a {
 +
    color: #999999;;
 +
}
 +
 
 +
.left-menu li a:hover {
 +
    color: #D00000;
 +
    text-decoration: underline;
 +
}
 +
 
 +
 
 +
.right-menu li {
 +
#    background-color: transparent;
}
}
-
document.getElementById("ncIMinus").onmousedown=function()  //ncI minus button down
+
.right-menu li a {
-
{
+
    padding: 0px 15px 0px 0px;
-
  document.getElementById("ncIMinus").src="https://static.igem.org/mediawiki/2013/7/78/Peking2013_DearPfro_Minus_activated.jpg";
+
    color: #999999;;
-
 
+
    background-color: transparent;
}
}
-
document.getElementById("ncIMinus").onmouseup=function()  //ncI minus  button up
+
.right-menu li a:hover {
-
{
+
    color: #D00000;
-
  sleep(200);
+
    text-decoration: underline;
-
  document.getElementById("ncIMinus").src="https://static.igem.org/mediawiki/2013/0/04/Peking2013_DearPfro_Minus.jpg";
+
}
}
 +
/* end menu (edit, page ...) */
 +
/* navigation bar*/
 +
#navigationblock{background-color:#fafaf8; position:fixed; top:0px; width:1200px; height:130px; overflow:hidden; font-family:Calibri, Arial; float:left; margin:0px; padding:0px; z-index:1000; border-bottom:1px solid #d3d7d8;}
 +
#navbarlogo{position:absolute; top:0px; left:0px; width:1200px}
 +
#navigationbar{position:absolute; left:460px; top:38px; font-size:16px; font-weight:100; color:black;}
 +
#navigationbar > li {display:block; list-style-type:none; float:left; width:75px; height:30px; text-align:center; }
-
document.getElementById("KphiPlus").onclick=function()        //increase Kphi
+
.Navbar_Item{background-color:transparent;}
-
{
+
.Navbar_Item a {color:black; text-decoration:none;}
-
  if(Kphi<100)                                         
+
.Navbar_Item > ul {display:none; width:900px; height:80px; text-align:center; color:black; z-index:1100; }
-
  {
+
.Navbar_Item > ul > li {float:left; list-style:none; text-align:center; background-color:transparent; position:relative; top:10px; padding:0 10px;}
-
  Kphi=Kphi*1.2;
+
.Navbar_Item:hover{ border-bottom:1px solid #D00000; color:#D00000; background-color:#fafaf8;}
-
ctx.clearRect(0,0,c.width,c.height);
+
.Navbar_Item:hover > ul{zoom:1; display:block;}
-
DrawCurve(ctx,convasheight,CorXmin,CorXmax,1000,0.01,1000,Kphi,ncI);
+
.Navbar_Item:hover >a {color:#D00000; background-color:#fafaf8;}
-
document.getElementById("KphiShow").innerHTML="K<sub><code>&phi;</code>R73</sub>="+Kphi.toFixed(1);
+
.Navbar_Item > ul > li:hover {border-bottom:1px solid #D00000; color:#D00000; background-color:#fafaf8;}
-
  }
+
.Navbar_Item > ul > li:hover >a {color:#D00000}
 +
.BackgroundofSublist{position:absolute; width:auto; height:auto; background-color:#ffffff; opacity:0.1;}
-
};
 
-
document.getElementById("KphiMinus").onclick=function()  //decrease Kphi
+
#Home_Sublist{position:relative; top:0px; left:-50px;}
-
{
+
#Team_Sublist{position:relative; top:0px; left:-110px;}
-
  if(Kphi>10)
+
#Project_Sublist{position:relative; top:0px; left:-180px;}
-
  {
+
#Model_Sublist{position:relative; top:0px; left:-140px;}
-
  Kphi=Kphi/1.2;
+
#DataPage_Sublist{position:relative; top:0px; left:-60px;}
-
ctx.clearRect(0,0,c.width,c.height);
+
#Safety_Sublist{position:relative; top:0px; left:-180px;}
-
DrawCurve(ctx,convasheight,CorXmin,CorXmax,1000,0.01,1000,Kphi,ncI);
+
#HumanPractice_Sublist{position:relative; top:0px; left:-420px;}
-
document.getElementById("KphiShow").innerHTML="K<sub><code>&phi;</code>R73</sub>="+Kphi.toFixed(1);
+
-
  }
+
-
};
+
#iGEM_logo{position:absolute; top:30px; left:1090px; height:80px;}
 +
/*end navigation bar*/
-
document.getElementById("ncIPlus").onclick=function()        //increase ncI
+
/*Major body*/
-
{
+
#MajorBody{position:absolute; top:0px; left:0px; width:1200px; height:1380px; background-color:#f9f9f7;}
-
  if(ncI<2.6)
+
#ProjectTitle{position:absolute; left:0px; width:1200px; height:184px; top:150px; z-index:600;}
-
  {
+
#TitleBackground{position:absolute; left:0px; top:0px; width:1200px;}
-
  ncI=ncI+0.2;
+
#LittleScout{position:relative; left:0px; top:-3px; width:70px;}
-
ctx.clearRect(0,0,c.width,c.height);
+
#ProjectName{position:absolute; left:405px; top:20px; border-bottom:0px; color:#FFFFFF; font-size:48px; font-family:calibri,Arial, Helvetica, sans-serif;}
-
DrawCurve(ctx,convasheight,CorXmin,CorXmax,1000,0.01,1000,Kphi,ncI);
+
#ProjectSubname{position:absolute; left:0px; width:1200px; top:105px; border-bottom:0px; color:#FFFFFF; font-size:18px;  font-family: calibri, Arial, Helvetica, sans-serif; text-align:center;}
-
document.getElementById("ncIShow").innerHTML="n<sub>cI</sub>="+ncI.toFixed(1);
+
-
  }
+
-
};
+
#MajorBodyBackground{position:absolute; top:334px; left:0px; width:1200px;}
-
document.getElementById("ncIMinus").onclick=function()        //decrease ncI
+
#PreLocation{font-size:14px; font-family:arial,helvetica,sans-serif; color:#ca4321;position:absolute;top:190px;left:0px;text-align:center;width:1200px;line-height:20px; font-weight:bold;}
-
{
+
-
  if(ncI>1)
+
-
  {
+
-
  ncI=ncI-0.2;
+
-
ctx.clearRect(0,0,c.width,c.height);
+
-
DrawCurve(ctx,convasheight,CorXmin,CorXmax,1000,0.01,1000,Kphi,ncI);
+
-
document.getElementById("ncIShow").innerHTML="n<sub>cI</sub>="+ncI.toFixed(1);
+
-
  }
+
-
};
+
#AbstractBox{position:absolute; left:430px; top:390px; width:710px; height:540px; background-color:transparent;}
 +
#AbstractBackground{width:100%; height:100%; background-color:#FFFFFF; opacity:0.8;}
 +
#AbstractContent{position:absolute; left:55px; top:25px; width:600px; font-size:18px; line-height:25px ; font-family: calibri, Arial, sans-serif; text-align:justify;}
 +
#AbstractContent:first-letter{font-size:30px;}
 +
.SmallBoxes{width:340px; height:250px;background-color:#FFFFFF; overflow:hidden;font-family: calibri, Arial, Helvetica, sans-serif; }
 +
.SmallBoxes > img{position:absolute; left:0px; top:0px;}
 +
.SmallBoxes p{position:absolute; left:20px; top:75px; width:300px; font-size:14px; color:#ffffff; text-align:justify;}
 +
.SmallBoxes a{position:absolute; left:240px; top:220px; width:300px; font-size:12px; color:#ffffff; text-align:justify;}
 +
#AppendixBox1{position:absolute; left:60px; top:390px; background-color:#aa4630;}
 +
#Appendix1Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
 +
#Appendix1Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
 +
#AppendixBox2{position:absolute; left:60px; top:680px; background-color:#e98d70;}
 +
#Appendix2Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
 +
#Appendix2Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
 +
#AppendixBox3{position:absolute; left:60px; top:970px; background-color:#f37021;}
 +
#Appendix3Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
 +
#Appendix3Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
 +
#AppendixBox4{position:absolute; left:430px; top:970px; background-color:#1f8a70;}
 +
#Appendix4Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
 +
#Appendix4Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
 +
#AppendixBox5{position:absolute; left:800px; top:970px; background-color:#004258;}
 +
#Appendix5Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
 +
#Appendix5Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
-
DrawCurve(ctx,convasheight,CorXmin,CorXmax,1000,0.01,1000,Kphi,ncI);
+
.AppendixHeadLine{position:absolute; left:20px; top:20px; width:250px;border-bottom:0px; font-size:23px; color:#ffffff;}
 +
.AppendixIcon{position:absolute; left:270px; top:20px; width:50px; }
-
function GetCoordinates(Cheight,Xmin,Xmax,Ymax,Concmin,Concmax,Kphi,ncI)
+
/*end of Major body*/
-
{
+
#AcknowledgementBox{ position:absolute; left:0px; top:1280px; width:1200px;}
-
+
 
-
var coor=[];
+
 
-
   
+
</style>
-
for(var i=0;Xmin+3*i<Xmax;i++)
+
 
-
{
+
 
 +
<!--navigationbar-->
 +
 
 +
<div id="navigationblock">
 +
<img id="navbarlogo" src="https://static.igem.org/mediawiki/igem.org/c/c9/Peking_Logo.jpg"/>
 +
       
 +
<ul id="navigationbar">
 +
<li id="PKU_navbar_Home" class="Navbar_Item">
 +
                       
 +
<a href="https://2013.igem.org/Team:Peking">Home</a>
 +
<ul id="Home_Sublist" >
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Team" class="Navbar_Item">
 +
<a >Team</a>
 +
<ul id="Team_Sublist">
 +
                             
 +
<li><a href="https://2013.igem.org/Team:Peking/Team/Members">Members</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/Team/Notebook">Notebook</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/Team/Attributions">Attributions</a></li>
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Project" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking/Project">Project</a>
 +
<ul id="Project_Sublist">
 +
                                <li><a href="https://2013.igem.org/Team:Peking/Project/SensorMining">Biosensor Mining</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/Project/BioSensors">Biosensors</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/Project/Plugins">Adaptors</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/Project/BandpassFilter">Band-pass Filter</a></li>
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Model" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking/Model">Model</a>
 +
<ul id="Model_Sublist">
 +
</ul>
 +
</li>
 +
                        <li id="PKU_navbar_HumanPractice" class="Navbar_Item" style="width:90px">
 +
<a >Data page</a>
 +
<ul id="DataPage_Sublist">
 +
                                <li><a href="https://2013.igem.org/Team:Peking/DataPage/Parts">Parts</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/DataPage/JudgingCriteria">Judging Criteria</a></li>
 +
 
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Safety" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking/Safety">Safety</a>
 +
<ul id="Safety_Sublist">
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_HumanPractice" class="Navbar_Item" style="width:120px">
 +
<a href="https://2013.igem.org/Team:Peking/HumanPractice">Human Practice</a>
 +
<ul id="HumanPractice_Sublist">
 +
                                <li><a href="https://2013.igem.org/Team:Peking/HumanPractice/Questionnaire">Questionnaire</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/HumanPractice/FactoryVisit">Factory Visit</a></li>
 +
                                <li><a href="https://2013.igem.org/Team:Peking/HumanPractice/ModeliGEM">Practical Analysis</a></li>
 +
<li><a href="https://2013.igem.org/Team:Peking/HumanPractice/iGEMWorkshop">Team Coummunication</a></li>
 +
 
 +
</ul>
 +
</li>
-
coor.push(Xmin+3*i);
+
</ul>
-
coor.push(Cheight-Ymax*HillFunction(Concmin*Math.exp(Math.log(Concmax/Concmin)*3*i/(Xmax-Xmin)),Kphi,ncI));
+
        <a href="https://igem.org/Team_Wikis?year=2013"><img id="iGEM_logo" src="https://static.igem.org/mediawiki/igem.org/4/48/Peking_igemlogo.jpg"/></a>
-
+
</div>
-
+
<!--end navigationbar-->
-
}
+
-
return coor;
+
-
}
+
 +
<!--MajorBody-->
 +
<div id="MajorBody"> 
 +
<div id="ProjectTitle">
 +
                <img id="TitleBackground" src="https://static.igem.org/mediawiki/igem.org/c/c5/Peking2013_home_title.jpg" />
 +
               
 +
<h1 id="ProjectName">Aromatics Scouts<img id="LittleScout" src="https://static.igem.org/mediawiki/igem.org/8/8a/Peking2013_home_Telescope.png" /></h1>
 +
                <h1 id="ProjectSubname">A Comprehensive Biosensor Toolkit for Profiling Aromatic Compounds in the Environment</h1>
 +
 +
<p id="PreLocation">
 +
<B>★Presentation:</B> LT 6, Saturday, 9:30 PM
 +
      &ensp;&ensp;&ensp;&ensp;<B>★Poster:</B> Poster area C, #52
 +
</p>
-
function HillFunction(x,Kphi,ncI)
 
-
{
 
-
var A=1,
 
-
    nphi=1,
 
-
    KcI=10,
 
-
    y=0;
 
-
 
-
y=A*( Math.pow(x, nphi)/ (Math.pow(x, nphi)+ Math.pow(Kphi, nphi)))*(Math.pow(KcI, ncI)/ (Math.pow(x, ncI)+ Math.pow(KcI, ncI)));
 
-
return y;
 
-
}
 
-
function DrawCurve(ctx,Cheight,Xmin,Xmax,Ymax,Concmin,Concmax,Kphi,ncI)
+
</div>
-
{
+
        <img id="MajorBodyBackground" src="https://static.igem.org/mediawiki/igem.org/9/97/Peking2013_Home_background.jpg" />
-
var Coor=[];
+
        <div id="AbstractBox">
-
Coor=GetCoordinates(Cheight,Xmin,Xmax,Ymax,Concmin,Concmax,Kphi,ncI);
+
            <div id="AbstractBackground"></div>
 +
              <p id="AbstractContent">Monitoring aromatic compounds in the environment remains a substantial challenge today. Noting the power of biosensors for quick and convenient testing, Peking iGEM has developed a functionally comprehensive biosensor toolkit to profile aromatics in the environment.
 +
<br/><br/>
 +
Transcriptional regulators that each detect a specific class of aromatics were first bioinformatically determined; and then utilized to build a comprehensive set of biosensor circuits. Characterization on the detection profiles of individual biosensors and the orthogonality/crosstalk between them proved that these biosensors are very capable at profiling aromatics present in water.
 +
<br/><br/>
 +
Moreover, for the ease of practical applications, two types of genetic devices were also developed as plug-ins for biosensors: "Adaptors", a set of conceptually novel devices to convert undetectable compounds into detectable compounds, and "Band-pass Filter", a "concentration filter" that allows the detection of analyte concentration within a specific range.
 +
<br/><br/>
 +
We expect that these novel biosensors, together with the plug-in devices, will serve as intriguing synthetic biological tools for diverse practical applications.
 +
</p>
 +
        </div>
 +
        <div id="AppendixBox1" class="SmallBoxes" >
 +
              <h1 id="Appendix1Title"><i>Mining aromatics-sensing Biobricks <br/>from the genomic database</i></h1>
 +
              <div id="Appendix1Cover" >
 +
                    <img id="AppendixImg1" src="https://static.igem.org/mediawiki/igem.org/e/ec/Peking2013_homepage_appendix1.jpg" />
 +
                    <h1 class="AppendixHeadLine">Biosensor Mining</h1>
 +
                    <img id="Appendix1Icon" class="AppendixIcon" src="https://static.igem.org/mediawiki/igem.org/1/13/Peking2013_home_appendix1icon.png" />
 +
                    <p>The core component of our biosensor toolkit is the transcriptional regulators that sense aromatics. For the comprehensiveness of aromatics-sensing, a data-mining process was conducted to mine transcriptional regulators for each typical class of aromatics from the database Uniprot. </p>
 +
                    <a href="https://2013.igem.org/Team:Peking/Project/SensorMining">LEARN MORE</a>
 +
              </div>
 +
        </div>
 +
        <div id="AppendixBox2" class="SmallBoxes">
 +
              <h1 id="Appendix2Title"><i>High-performance, profile-<br/>specific biosensors</i> </h1>
 +
              <div id="Appendix2Cover" >
 +
                    <img id="AppendixImg2" src="https://static.igem.org/mediawiki/igem.org/1/17/Peking2013_home_appendix2.jpg" />
 +
                    <h1 class="AppendixHeadLine">Biosensors</h1>
 +
                    <img id="Appendix2Icon" class="AppendixIcon"  src="https://static.igem.org/mediawiki/igem.org/b/b2/Peking2013_home_appendix2icon.png" />
 +
                    <p>A comprehensive set of biosensor circuits have been implemented using the aromatics-sensing transcriptional regulators. Each biosensor has a specific aromatics-sensing profile. Furthermore, the orthogonality of their sensing profiles was carefully assessed for practical applications.</p>
 +
                    <a href="https://2013.igem.org/Team:Peking/Project/BioSensors">LEARN MORE</a>
 +
              </div>
 +
        </div>
 +
        <div id="AppendixBox3" class="SmallBoxes">
 +
              <h1 id="Appendix3Title"><i>Converting the undetectable into<br/>the detectable</i></h1>
 +
              <div id="Appendix3Cover" >
 +
                    <img id="AppendixImg3" src="https://static.igem.org/mediawiki/igem.org/1/1b/Peking2013_home_appendix3.jpg" />
 +
                    <h1 class="AppendixHeadLine">Adaptors</h1>
 +
                    <img id="Appendix3Icon"  class="AppendixIcon" src="https://static.igem.org/mediawiki/igem.org/c/cd/Peking2013_home_appendix3icon.png" />
 +
                    <p> To expand the detection profiles of some biosensors, aromatics-metabolizing enzymes were taken from natural metabolic pathways, working as Adaptors to convert undetectable chemicals into detectable aromatics when coupled with biosensor circuits.</p>
 +
                    <a href="https://2013.igem.org/Team:Peking/Project/Plugins">LEARN MORE</a>
 +
              </div>
 +
        </div>
 +
        <div id="AppendixBox4" class="SmallBoxes">
 +
              <h1 id="Appendix4Title"><i>Rapidly tell the concentration <br/> of the analyte</i></h1>
 +
              <div id="Appendix4Cover" >
 +
                    <img id="AppendixImg4" src="https://static.igem.org/mediawiki/igem.org/e/e6/Peking2013_home_appendix4.jpg" />
 +
                    <h1 class="AppendixHeadLine">Band-pass Filter</h1>
 +
                    <img id="Appendix4Icon" class="AppendixIcon"  src="https://static.igem.org/mediawiki/igem.org/4/42/Peking2013_home_appendix4icon.png" />
 +
                    <p>For the ease of practical analysis, a genetic device called "Band-pass Filter" has been constructed to allow the detection of analyte concentration within a specific range. Biosensors equipped with the Band-pass Filter can robustly quantify the aromatics in environmental samples. </p>
 +
                    <a href="https://2013.igem.org/Team:Peking/Project/BandpassFilter">LEARN MORE</a>
 +
              </div>
 +
        </div>
 +
        <div id="AppendixBox5" class="SmallBoxes">
 +
              <h1 id="Appendix5Title"><i>Communications, Questionnaire,  and <br/>Factory Visit</i></h1>
 +
              <div id="Appendix5Cover" >
 +
                    <img id="AppendixImg5" src="https://static.igem.org/mediawiki/igem.org/d/da/Peking2013_home_appendix5.jpg" />
 +
                    <h1 class="AppendixHeadLine">Human Practice</h1>
 +
                    <img id="Appendix5Icon" class="AppendixIcon"  src="https://static.igem.org/mediawiki/igem.org/8/85/Peking2013_home_appendix5icon.png" />
 +
                    <p>To obtain the information about public awareness and the situation of aromatics pollution, a survey including factory visiting and questionnaires has been conducted. We also guided an iGEM HS team and held "Model iGEM" as a competition without competitiveness.</p>
 +
                    <a href="https://2013.igem.org/Team:Peking/HumanPractice">LEARN MORE</a>
 +
              </div>
 +
        </div>       
-
ctx.beginPath();
+
</div><!--end of major body-->
 +
<img id="AcknowledgementBox" src="https://static.igem.org/mediawiki/igem.org/c/c4/Peking_Sponsors.jpg">
 +
<!--end of acknowledgement box-->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(window).scroll(function(){
 +
  if(0==document.getElementById("content").offsetLeft){ $('#navigationblock').css('left',-$(window).scrollLeft());}
 +
  else{$('#navigationblock').css('left',document.getElementById("content").offsetLeft); }
 +
});
-
    ctx.moveTo(Coor[0], Coor[1]);
+
$(window).resize(function(){
 +
  if(0==document.getElementById("content").offsetLeft){ $('#navigationblock').css('left',-$(window).scrollLeft());}
 +
  else{$('#navigationblock').css('left',document.getElementById("content").offsetLeft); }
 +
});
-
    for(i=2;i<Coor.length-1;i+=2)  
+
document.getElementById("AppendixBox1").onmouseover=function(){MoveInSlide("#Appendix1Cover")};
 +
document.getElementById("AppendixBox1").onmouseout=function(){MoveOutSlide("#Appendix1Cover")};
 +
document.getElementById("AppendixBox2").onmouseover=function(){MoveInSlide("#Appendix2Cover")};
 +
document.getElementById("AppendixBox2").onmouseout=function(){MoveOutSlide("#Appendix2Cover")};
 +
document.getElementById("AppendixBox3").onmouseover=function(){MoveInSlide("#Appendix3Cover")};
 +
document.getElementById("AppendixBox3").onmouseout=function(){MoveOutSlide("#Appendix3Cover")};
 +
document.getElementById("AppendixBox4").onmouseover=function(){MoveInSlide("#Appendix4Cover")};
 +
document.getElementById("AppendixBox4").onmouseout=function(){MoveOutSlide("#Appendix4Cover")};
 +
document.getElementById("AppendixBox5").onmouseover=function(){MoveInSlide("#Appendix5Cover")};
 +
document.getElementById("AppendixBox5").onmouseout=function(){MoveOutSlide("#Appendix5Cover")};
 +
 
 +
function MoveInSlide(SlideId)
{
{
-
+
$(SlideId).stop().animate({top:"0px"},"fast");
-
ctx.lineTo(Coor[i], Coor[i+1]);
+
         
-
}
+
};
-
ctx.stroke();
+
 
-
}
+
 
 +
 
 +
function MoveOutSlide(SlideId)
 +
{
 +
$(SlideId).stop().animate({top:"170px"},"fast");
 +
       
 +
};
 +
 
-
function sleep(n)
+
</script>
-
  {
+
-
    var start=new Date().getTime();
+
-
    while(true) if(new Date().getTime()-start>n) break;
+
-
  }
+
-
</script>
 
-
</body>
 
</html>
</html>

Revision as of 03:17, 28 September 2013

Aromatics Scouts

A Comprehensive Biosensor Toolkit for Profiling Aromatic Compounds in the Environment

★Presentation: LT 6, Saturday, 9:30 PM     ★Poster: Poster area C, #52

Monitoring aromatic compounds in the environment remains a substantial challenge today. Noting the power of biosensors for quick and convenient testing, Peking iGEM has developed a functionally comprehensive biosensor toolkit to profile aromatics in the environment.

Transcriptional regulators that each detect a specific class of aromatics were first bioinformatically determined; and then utilized to build a comprehensive set of biosensor circuits. Characterization on the detection profiles of individual biosensors and the orthogonality/crosstalk between them proved that these biosensors are very capable at profiling aromatics present in water.

Moreover, for the ease of practical applications, two types of genetic devices were also developed as plug-ins for biosensors: "Adaptors", a set of conceptually novel devices to convert undetectable compounds into detectable compounds, and "Band-pass Filter", a "concentration filter" that allows the detection of analyte concentration within a specific range.

We expect that these novel biosensors, together with the plug-in devices, will serve as intriguing synthetic biological tools for diverse practical applications.

Mining aromatics-sensing Biobricks
from the genomic database

Biosensor Mining

The core component of our biosensor toolkit is the transcriptional regulators that sense aromatics. For the comprehensiveness of aromatics-sensing, a data-mining process was conducted to mine transcriptional regulators for each typical class of aromatics from the database Uniprot.

LEARN MORE

High-performance, profile-
specific biosensors

Biosensors

A comprehensive set of biosensor circuits have been implemented using the aromatics-sensing transcriptional regulators. Each biosensor has a specific aromatics-sensing profile. Furthermore, the orthogonality of their sensing profiles was carefully assessed for practical applications.

LEARN MORE

Converting the undetectable into
the detectable

Adaptors

To expand the detection profiles of some biosensors, aromatics-metabolizing enzymes were taken from natural metabolic pathways, working as Adaptors to convert undetectable chemicals into detectable aromatics when coupled with biosensor circuits.

LEARN MORE

Rapidly tell the concentration
of the analyte

Band-pass Filter

For the ease of practical analysis, a genetic device called "Band-pass Filter" has been constructed to allow the detection of analyte concentration within a specific range. Biosensors equipped with the Band-pass Filter can robustly quantify the aromatics in environmental samples.

LEARN MORE

Communications, Questionnaire, and
Factory Visit

Human Practice

To obtain the information about public awareness and the situation of aromatics pollution, a survey including factory visiting and questionnaires has been conducted. We also guided an iGEM HS team and held "Model iGEM" as a competition without competitiveness.

LEARN MORE