Difference between revisions of "Team:ZJU-China/Project/voc"

 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
 
<html lang="zh-CN">
 
<html lang="zh-CN">
  <head>
+
<head>
 
+
 
+
<link href="https://2017.igem.org/Zju/css/bootstrap?action=raw&ctype=text/css" rel="stylesheet" media="screen" />
+
<link href="https://2017.igem.org/Zju/css/bootstraptheme?action=raw&ctype=text/css" rel="stylesheet" id="bs-theme-stylesheet">
+
<link href='https://2017.igem.org/Team:ZJU-China/cs/font?action=raw&ctype=text/css' rel='stylesheet' type='text/css'>
+
<link href="https://2017.igem.org/Zju/css/docs/min?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/>
+
<link href="https://2017.igem.org/Zju/css/doc-style?action=raw&ctype=text/css" rel="stylesheet">
+
<link href="https://2017.igem.org/Zju/css/responsive/min?action=raw&ctype=text/css" rel="stylesheet">
+
  
<script>
+
    <link href="https://2017.igem.org/Zju/css/bootstrap?action=raw&ctype=text/css" rel="stylesheet" media="screen" />
  var _hmt = _hmt || [];
+
    <link href="https://2017.igem.org/Zju/css/bootstraptheme?action=raw&ctype=text/css" rel="stylesheet" id="bs-theme-stylesheet">
</script>
+
    <link href="https://2017.igem.org/Zju/css/docs/min?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/>
      <link rel="stylesheet" href="../css/doc-style.css">
+
    <!-- <link href="css/doc-style.css" rel="stylesheet" type="text/css"/> -->
  </head>
+
    <link href="https://2017.igem.org/Zju/css/doc-style?action=raw&ctype=text/css" rel="stylesheet">
 +
    <link href="https://2017.igem.org/Zju/css/responsive/min?action=raw&ctype=text/css" rel="stylesheet">
 +
    <!-- 按钮的字体 -->
 +
    <link href='https://2017.igem.org/Team:ZJU-China/cs/font?action=raw&ctype=text/css' rel='stylesheet' type='text/css'>
 +
    <!-- 按钮的字体end -->
 +
    <script>
 +
        var _hmt = _hmt || [];
 +
    </script>
 +
    <script src="https://static.igem.org/mediawiki/2017/8/85/ZJUChina_js_docsmin.txt?action=raw&ctype=text/javascript"></script>
 +
</head>
  
  
 
<style>
 
<style>
/*Override default CSS*/
+
    /*Override default CSS*/
#sideMenu, #top_title {display:none;}
+
    #sideMenu, #top_title {display:none;}
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;background-color: transparent;}
+
    #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;background-color: transparent;}
  
  
/* set all basic objects to neutral formatting*/
+
    /* set all basic objects to neutral formatting*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
+
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
+
        margin: 0;
    padding: 0;
+
        padding: 0;
    border: 0;
+
        border: 0;
    outline: 0;
+
        outline: 0;
    font-size: 100%;
+
        font-size: 100%;
    vertical-align: baseline;
+
        vertical-align: baseline;
    background: transparent;
+
        background: transparent;
}
+
    }
  
#globalWrapper {
+
    #globalWrapper {
    margin: 0;
+
        margin: 0;
    padding: 0;
+
        padding: 0;
    border: 0;
+
        border: 0;
    outline: 0;
+
        outline: 0;
    font-size: 100%;
+
        font-size: 100%;
    vertical-align: baseline;
+
        vertical-align: baseline;
    background: transparent;
+
        background: transparent;
}
+
    }
  
  
/* set page to fill window*/
+
    /* set page to fill window*/
html{
+
    html{
  height: 100%;
+
        height: 100%;
}
+
    }
body {
+
    body {
  min-height: 100%;
+
        min-height: 100%;
  background-color: #FFFFFF;  
+
        background-color: #FFFFFF;
}
+
    }
  
  
#content_wrapper {
+
    #content_wrapper {
    position: relative;
+
        position: relative;
  top: 0px;
+
        top: 0px;
  left: 0px;
+
        left: 0px;
  margin: 0px;
+
        margin: 0px;
    width: 100%;  
+
        width: 100%;
    height: 100%;  
+
        height: 100%;
  text-align:center;
+
        text-align:center;
    background-color: #FFFFFF;
+
        background-color: #FFFFFF;
}
+
    }
  
#content_wrapper p {
+
    #content_wrapper p {
    font-family: 'Tempus Sans ITC',Tahoma, Geneva, sans-serif;
+
        font-family: 'Yanone Kaffeesatz',Tahoma, Geneva, sans-serif;
}
+
    }
  
#content_wrapper a {  
+
    #content_wrapper a {
    color:#004789;
+
        color:#004789;
}
+
    }
  
  
#footer {  
+
    #footer {
    position:absolute;  
+
        position:absolute;
    bottom: 0px;
+
        bottom: 0px;
    left: 0px;
+
        left: 0px;
    width: 100%;
+
        width: 100%;
    margin-top: 0px;
+
        margin-top: 0px;
    margin-bottom: 20px;
+
        margin-bottom: 20px;
    background-color: #FFFFFF;
+
        background-color: #FFFFFF;
    text-align: center;
+
        text-align: center;
}
+
    }
  
.center {  
+
    .center {
  width: 60%;  
+
        width: 60%;
    margin-top: 16px;
+
        margin-top: 16px;
  min-width: 500px;
+
        min-width: 500px;
    padding-bottom:32px;
+
        padding-bottom:32px;
  display: inline-block;      
+
        display: inline-block;
}
+
    }
  
.TextContent {
+
    .TextContent {
  text-align: left;
+
        text-align: left;
  vertical-align: baseline;
+
        vertical-align: baseline;
  font-size: 0.875em;
+
        font-size: 0.875em;
  font-family:'Tempus Sans ITC', verdana, sans-serif;
+
        font-family:'Yanone Kaffeesatz', verdana, sans-serif;
}
+
    }
  
.TextContent h1{  
+
    .TextContent h1{
  text-align: center;
+
        text-align: center;
  font-size: 1.5rem;
+
        font-size: 1.5rem;
  margin-bottom: 1em;
+
        margin-bottom: 1em;
  margin-top: 0.2em;
+
        margin-top: 0.2em;
  color: #3399ff;
+
        color: #3399ff;
  font-family:'Tempus Sans ITC', verdana, sans-serif;
+
        font-family:'Yanone Kaffeesatz', verdana, sans-serif;
}
+
    }
  
.TextContent h2{
+
    .TextContent h2{
  line-height: 1.6;
+
        line-height: 1.6;
  margin-bottom: 0em;
+
        margin-bottom: 0em;
  margin-top: 1em;
+
        margin-top: 1em;
  text-align: left;
+
        text-align: left;
  font-family:'Tempus Sans ITC', verdana, sans-serif;
+
        font-family:'Yanone Kaffeesatz', verdana, sans-serif;
}
+
    }
  
.TextContent p{
+
    .TextContent p{
  margin-bottom: 1.2em;
+
        margin-bottom: 1.2em;
  font-family:'Tempus Sans ITC', verdana, sans-serif;
+
        font-family:'Yanone Kaffeesatz', verdana, sans-serif;
}
+
    }
  
.Page_Wide {
+
    .Page_Wide {
  width:100%;  
+
        width:100%;
}
+
    }
  
.Quarter_Image {
+
    .Quarter_Image {
  width:25%;
+
        width:25%;
  max-height:250px;
+
        max-height:250px;
  float:left;
+
        float:left;
}
+
    }
  
.Quarter_Image img {
+
    .Quarter_Image img {
    display:block;
+
        display:block;
    margin:auto;
+
        margin:auto;
    max-height: 250px;
+
        max-height: 250px;
    width: auto;
+
        width: auto;
}
+
    }
  
.SocialMediaIconWrapper {
+
    .SocialMediaIconWrapper {
    width:100%;
+
        width:100%;
}
+
    }
  
.SocialMediaIcon {
+
    .SocialMediaIcon {
    width:4%;
+
        width:4%;
    height:auto;
+
        height:auto;
    margin-left:20px;
+
        margin-left:20px;
    display: inline-block;
+
        display: inline-block;
    float:left;
+
        float:left;
  
}
+
    }
  
.SocialMediaIcon img{
+
    .SocialMediaIcon img{
    max-width:100%;
+
        max-width:100%;
  height:auto
+
        height:auto
}
+
    }
  
.TeamImage {
+
    .TeamImage {
  width:100%;  
+
        width:100%;
}
+
    }
  
.TeamImage img {
+
    .TeamImage img {
    max-width:100%;
+
        max-width:100%;
  height:auto
+
        height:auto
}
+
    }
  
.sponsors {
+
    .sponsors {
  width: 100%;
+
        width: 100%;
}
+
    }
  
.sponsor_row {  
+
    .sponsor_row {
  width: 100%;
+
        width: 100%;
}
+
    }
  
.sponsor_img {  
+
    .sponsor_img {
  width: 16.6666667%;  
+
        width: 16.6666667%;
  float:left;  
+
        float:left;
}
+
    }
  
.sponsor_img img{  
+
    .sponsor_img img{
  max-width:100%;
+
        max-width:100%;
  height:auto
+
        height:auto
}
+
    }
  
.clear {
+
    .clear {
    clear:both;
+
        clear:both;
}
+
    }
  
.clear.extra_space {
+
    .clear.extra_space {
    height: 20px;
+
        height: 20px;
}
+
    }
  
.line_divider {
+
    .line_divider {
    border-top: 1px solid #d3d3d3;
+
        border-top: 1px solid #d3d3d3;
    width: 98%;
+
        width: 98%;
    margin: auto;
+
        margin: auto;
}
+
    }
  
.copyright{
+
    .copyright{
  color: #888888;
+
        color: #888888;
  font-size: 13px;
+
        font-size: 13px;
  text-align: center !important;
+
        text-align: center !important;
}
+
    }
  
  
.copyright a{
+
    .copyright a{
  color: #d2ebe3;
+
        color: #d2ebe3;
  border-bottom: dotted 1px #a5d8c7;
+
        border-bottom: dotted 1px #a5d8c7;
}
+
    }
  
.PP {
 
    font-family: georgia;
 
    font-size: 20px;
 
    font-weight: 100;
 
    text-align: left;
 
}
 
  
/*文中自定义*/
+
    /*文中自定义*/
.CuteButton:active {
+
    .CuteButton:active {
    -webkit-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
+
        color:white !important;
    -moz-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
+
        -webkit-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
+
        -moz-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
+
        box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
    top: 6px;
+
        position: relative;
}  
+
        top: 6px;
 +
    }
  
.YellowCB {
+
    .CuteButton:visited {
    background-color: rgba(254,196,62,1);
+
        color:white !important;
    -webkit-box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
+
        -webkit-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
+
        -moz-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
+
        box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
}
+
        position: relative;
 +
        top: 6px;
 +
    }
  
.GreenCB {
+
    .YellowCB {
    background-color: rgba(25,148,117,1);
+
        background-color: rgba(254,196,62,1);
    -webkit-box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
+
        -webkit-box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
+
        -moz-box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
+
        box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
}
+
    }
  
.SmallCB {
+
    .GreenCB {
    font-size: 1.5em;
+
        background-color: rgba(25,148,117,1);
    margin-left: 2px;
+
        -webkit-box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
    padding: 2px 10px ;
+
        -moz-box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
    width: 100px;
+
        box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
}
+
    }
  
 +
    .SmallCB {
 +
        font-size: 1.5em;
 +
        margin-left: 2px;
 +
        padding: 2px 10px ;
 +
        width: 100px;
 +
    }
  
.ArticleHead{
 
  font-family: 'Tempus Sans ITC',georgia !important;
 
  font-size: 40px !important;
 
  font-weight: 800 !important;
 
  color: #56A36C !important;
 
  text-align: center !important;
 
    margin-bottom: 0 !important;
 
    /*margin-top: .6em !important;*/
 
}
 
  
.H3Head{
 
  font-family: 'Tempus Sans ITC',georgia !important;
 
  color: #FEC43E !important;
 
  font-size: 25px !important;
 
  font-weight: 400 !important;
 
  text-align: left !important;
 
    margin-bottom: 0 !important;
 
    margin-top:.6em !important;
 
}
 
  
.PP{
+
    .ArticleHead{
  font-family:Tahoma, Geneva, sans-serif !important;
+
        font-family: 'Tempus Sans ITC',georgia !important;
  font-size: 20px !important;
+
        font-size: 40px !important;
  font-weight: 100 !important;
+
        font-weight: 800 !important;
  text-align: left !important;
+
        color: #56A36C !important;
}
+
        text-align: center !important;
 +
        margin-bottom: 0 !important;
 +
        margin-top: .6em !important;
 +
    }
  
 +
    .H3Head{
 +
        font-family: 'Tempus Sans ITC',georgia !important;
 +
        color: #FEC43E !important;
 +
        font-size: 25px !important;
 +
        font-weight: 400 !important;
 +
        text-align: left !important;
 +
        margin-bottom: 0 !important;
 +
        margin-top:.6em !important;
 +
    }
  
.Retract{
+
    .PP{
  padding-left: 50px;
+
        font-family:Tahoma, Geneva, sans-serif !important;
}
+
        font-size: 20px !important;
 +
        font-weight: 100 !important;
 +
        text-align: left !important;
 +
        margin-bottom: 20px;
 +
    }
  
.GreenAH{
 
  color: #56A36C;
 
}
 
  
.YellowAH{
+
    .Retract{
  color: #FEC43E;
+
        padding-left: 50px;
}
+
    }
  
.contentLi{
+
    .GreenAH{
    margin:0;
+
        color: #56A36C;
    font-size:17px;
+
    }
    line-height: 27px;
+
    padding-bottom: 20px;
+
    color: #111111;
+
}
+
  
.grayTable
+
    .YellowAH{
{
+
        color: #FEC43E;
    background-color: #979797;
+
    }
}
+
  
.yellowTable
+
    .contentLi{
{
+
        margin:0;
    background-color: #CD9B1D;
+
        font-size:17px;
    color: #000;
+
        line-height: 27px;
}
+
        padding-bottom: 20px;
 +
        color: #111111;
 +
    }
  
h2{
+
    .grayTable
  font-family: 'Tempus Sans ITC';
+
    {
  font-weight: 500;
+
        background-color: #979797;
  font-size: 35px;
+
    }
  text-align: left;
+
}
+
  
h3{
+
    .yellowTable
  font-family: 'Tempus Sans ITC';
+
    {
  font-weight: 500;
+
        background-color: #CD9B1D;
  font-size: 32px;
+
        color: #000;
  text-align: left;
+
    }
}
+
  
h4{
+
    h2{
  font-family: 'Tempus Sans ITC';
+
        font-family: 'Tempus Sans ITC';
  font-weight: 500;
+
        font-weight: 500;
  font-size: 28px;
+
        font-size: 35px;
  text-align: left;
+
        text-align: left;
}
+
    }
  
h5{
+
    h3{
  font-family: 'Tempus Sans ITC';
+
        font-family: 'Tempus Sans ITC';
  font-weight: 500;
+
        font-weight: 500;
  font-size: 25px;
+
        font-size: 32px;
  text-align: left;
+
        text-align: left;
}
+
    }
  
p{
+
    h4{
  margin:0;
+
        font-family: 'Tempus Sans ITC';
  font-size:17px;
+
        font-weight: 500;
  line-height: 30px;
+
        font-size: 28px;
  /*padding-bottom: 20px;*/
+
        text-align: left;
  color: #111111;
+
    }
}
+
  
.bs-docs-sidenav
+
    h5{
{
+
        font-family: 'Tempus Sans ITC';
    font-family:Tahoma, Geneva, sans-serif !important;
+
        font-weight: 500;
    font-size: 20px !important;
+
        font-size: 25px;
    font-weight: 100 !important;
+
        text-align: left;
    text-align: left !important;
+
    }
}
+
  
 +
    p{
 +
        margin:0;
 +
        font-size:17px;
 +
        line-height: 30px;
 +
        /*padding-bottom: 20px;*/
 +
        color: #111111;
 +
    }
  
.textli li{
+
    .bs-docs-sidenav
     font-family:Tahoma, Geneva, sans-serif !important;
+
     {
    font-size: 20px !important;
+
        font-family:Tahoma, Geneva, sans-serif !important;
    font-weight: 100 !important;
+
        font-size: 20px !important;
    text-align: left !important;
+
        font-weight: 100 !important;
}
+
        text-align: left !important;
 +
    }
  
.nonStyleTable
 
{
 
    background: transparent !important;
 
    border:none !important;
 
}
 
  
.textimg{
+
    .textli li{
    /*width:50%;*/
+
        font-family:Tahoma, Geneva, sans-serif !important;
    /*margin-top: 20px;*/
+
        font-size: 20px !important;
    /*padding-bottom: 20px;*/
+
        font-weight: 100 !important;
    text-align: center;
+
        text-align: left !important;
}
+
    }
  
 +
    .textimg
 +
    {
 +
        width:60% !important;
 +
    }
  
 
+
    .ref
/*老姜要好看一点的表格*/
+
     {
.tableNice thead, .tableNice tr {
+
        font-size: 16px !important;
     text-align: center;
+
        line-height:22px !important;
    border-top-width: 1px;
+
        margin-bottom: 5px !important;
    border-top-style: solid;
+
        color: #353535;
    border-top-color: #b1c6d9;
+
     }
}
+
     /*文中自定义*/
.tableNice {
+
    width: auto;
+
    margin-left: 30%;
+
    border-bottom-width: 1px;
+
    border-bottom-style: solid;
+
    border-bottom-color: #D0E9FF;
+
}
+
 
+
/* Padding and font style */
+
.tableNice td, .tableNice th {
+
    padding: 5px 10px;
+
    font-size: 12px;
+
 
+
    color: #00343F;
+
}
+
 
+
/* Alternating background colors */
+
.tableNice tr:nth-child(even) {
+
     background: transparent;
+
 
+
}
+
.tableNice tr:nth-child(odd) {
+
     background: #EBFFFF;
+
}
+
 
+
.tableOuter
+
{
+
    align: center;
+
    text-align: left;
+
}
+
/*老姜要好看一点的表格止*/
+
/*文中自定义*/
+
 
</style>
 
</style>
  
  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
+
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  <div class="page-loader"></div>
+
<div class="page-loader"></div>
      <!-- Docs master nav -->
+
<!-- Docs master nav -->
                  <!-- <h1><a class="navbar-brand" href="index.html">MuMei Lab</a></h1> -->
+
<!-- <h1><a class="navbar-brand" href="index.html">MuMei Lab</a></h1> -->
 
+
  <div class="container">
    <div class="container">
+
 
       <!-- header -->
 
       <!-- header -->
 
       <div class="header-w3layouts">
 
       <div class="header-w3layouts">
Line 467: Line 431:
 
                               <li><a href="https://2017.igem.org/Team:ZJU-China/Project/conclusion">Conclusions</a></li>
 
                               <li><a href="https://2017.igem.org/Team:ZJU-China/Project/conclusion">Conclusions</a></li>
 
                               <li><a href="https://2017.igem.org/Team:ZJU-China/Notebook">Notebook</a></li>
 
                               <li><a href="https://2017.igem.org/Team:ZJU-China/Notebook">Notebook</a></li>
 +
                              <li><a href="https://2017.igem.org/Team:ZJU-China/Protocols">Protocols</a></li>
 
                           </ul>
 
                           </ul>
 
                       </li>
 
                       </li>
Line 494: Line 459:
 
                       </li>
 
                       </li>
  
                       <li><a href="https://2017.igem.org/Team:ZJU-China/Hardware">Hardware</a></li>
+
                       <li class="m_nav_item dropdown" >
 +
                          <a href="#" class="dropdown-toggle link" data-toggle="dropdown">Hardware<b class="caret"></b></a>
 +
                          <ul class="dropdown-menu ">
 +
                              <li><a href="https://2017.igem.org/Team:ZJU-China/Hardware">Overview</a></li>
 +
                              <li><a href="https://2017.igem.org/Team:ZJU-China/Hardware/Device">Device</a></li>
 +
                              <li><a href="https://2017.igem.org/Team:ZJU-China/Hardware/Improvements">Improvements</a></li>
 +
                              <li><a href="https://2017.igem.org/Team:ZJU-China/Hardware/MediumWave">Medium Wave</a></li>
 +
                          </ul>
 +
                      </li>
  
 
                       <li class="m_nav_item dropdown" >
 
                       <li class="m_nav_item dropdown" >
Line 529: Line 502:
 
   </div>
 
   </div>
  
<p></p>
+
<p>"<br></p>
<div style="margin-top:0;padding-top:0">
+
<!--<div style="margin-top:0;padding-top:0">-->
  <img src="https://static.igem.org/mediawiki/2017/6/61/ZJU_China_interlab_header.jpg" width="100%">
+
<!--<img id="partsPage" src="https://static.igem.org/mediawiki/2017/b/be/ZJUChina_interlab_banner.jpg" width="100%">-->
  <!-- <img src="images/HP_temp/banner.jpg" width="100%"> -->
+
<!--&lt;!&ndash; <img src="images/HP_temp/banner.jpg" width="100%"> &ndash;&gt;-->
</div>
+
<!--</div>-->
 +
 
 +
 
  
  
 
<div style="width: 100%" class="container zjuContent">
 
<div style="width: 100%" class="container zjuContent">
  <div class="col-md-3"></div>
+
    <div class="col-md-3"></div>
 
     <div class="col-md-9" role="main">
 
     <div class="col-md-9" role="main">
      <div class="bs-docs-section">
+
        <p class="bs-docs-section">
 +
        <h1 id="voc" class="page-header ArticleHead GreenAH">VOC sensor</h1>
 +
        <h2 id="overview" class="H2Head">Overview</h2>
  
          <h1 id="voc" class="ArticleHead GreenAH">VOC sensor</h1>
+
        <p class="PP">In our project, we are exploring a new way to sense the health condition of  crops which will further send this information (healthy or not) to both human and our <em>T.atroviride</em>. In this way, we can take actions on time and achieve the goal of prevention some phytopathogens in advance. Meanwhile, this method should be conveniently used in variety range of plants.</p>
 +
        <p class="PP">We finally build up an e-nose (electronic nose) system to sense the VOC (volatile organic compounds) emitted by the plants. Afterwards, using machine learning method, we achieved a high accuracy rate, which is over 85%, when sensing the tobaccos infected by <em>P.nicotianae</em>. That is to say: our device successfully distinguishes whether the tobaccos are ill by "smelling them".</p>
  
          <h2 id="overview" class="H2Head">Overview</h2>
+
        <h2 id="background" class="H2Head">Background</h2>
          <p class="PP">In our project, we are exploring  a new way to sense the healthy condition of the crops which will further give this information(healthy or not) to bothhuman and T.atroviride, in order to take actions on time and achieve the goal of prevention in advance.Meanwhile,this method must can be conveniently used in varieties of plants.We finally built up the e-nose(electronic nose) system to sense the VOC(volatile organic compounds) emitted by the plants or related microorganisms.Afterwards,by machine learning method, we achieved a high accuracy rate of sensing the tobaccos that infected by P.nicotianae, namely, our device successfully smelled whether the plants were ill.</p>
+
        <p class="PP">Plants will release a variety of volatile organic compounds (VOC) to resist some infected phytopathogens, which can lead to a change of VOC composition around the plants[1]. Firstly, we verified the VOC differences between healthy tobaccos and  tobaccos infected by <em>P.nicotianae</em> by GC-MS.</p>
  
          <h2 id="background" class="H2Head">Background</h2>
+
        <div class="imgdiv"><img class="textimg" style="width: 90% !important;" src="https://static.igem.org/mediawiki/2017/8/8e/ZJU_China_VOCsensor_new1.png"></div>
          <p class="PP">Plants will release varieties of volatile organic compounds (VOC) to resist infected phytopathogens, which lead to a change of VOC around the plants<sup>[1]</sup>. Firstly, we verified the VOC differences between healthy tobaccos and P.nicotianae infected tobaccos by GC-MS.</p>
+
        <p class="capture">Fig.1 GC-MS analysis of VOCs emitted by healthy tobaccos and tobaccos infected by <em>P.nicotianae</em></p>
         
+
        <p class="capture">(Thanks Hunan Tobaccos Bureau for providing this data).</p>
          <div class="imgdiv"><img class="textimg" style="width: 60% !important;" src="https://static.igem.org/mediawiki/2017/7/70/ZJU_China_VOCsensor_1.png"></div>
+
          <p class="capture">Fig.1: +title(Thanks for Hunan tobaccos bureau for providing this data)</p>
+
  
          <p class="PP">We decided to use ten highly sensitive CMOS(Complementary Metal Oxide Semiconductor) gas detector to catch the VOC information(Adding an extra one afterwards), and every detector is sensitive to one kind or type of gas. It is important to note that e-nose can’t sense a specific VOC like mass spectrometers did, instead, it catch the overall characteristics of VOC as a "fingerprint".</p>
+
        <p class="PP">We decide to use ten highly sensitive CMOS(Complementary Metal Oxide Semiconductor) gas detector to catch the VOC information, each detector is sensitive to one kind or type of VOCs. E-nose can’t sense a specific VOC like mass spectrometers did. instead, it catches the overall characteristics of VOCs as "fingerprint".</p>
         
+
          <div class="imgdiv"><img class="textimg" style="width: 60% !important;" src="https://static.igem.org/mediawiki/2017/1/1c/ZJU_China_VOCsensor_2.jpg"></div>
+
          <p class="capture">Fig.2</p>
+
  
          <h2 id="exp" class="H2Head">Experimental Design</h2>
+
        <div class="imgdiv"><img class="textimg" src="https://static.igem.org/mediawiki/2017/1/1c/ZJU_China_VOCsensor_2.jpg"></div>
          <p class="PP">1.e-nose build-up and gas path design</p>
+
        <p class="capture">Fig.2 A photo of our gas sensor chamber.</p>
  
          <table class="table">
+
        <p class="PP">Our device is controlled by Arduino Single Chip Microcomputer(SCM) in order to achieve automatic measurement, and we standardize the testing steps to ensure the data between every groups is comparable.</p>
              <tr>
+
        <!--<div class="imgdiv col-md-6 col-sm-6"><img style="height: 330px !important; width: auto !important;" class="textimg" src="https://static.igem.org/mediawiki/2017/9/9f/ZJU_China_VOCSensor_s1.jpg"></div>-->
                  <th class="yellowTable">Number</th>
+
        <!--<div class="imgdiv col-md-6 col-sm-6"><img style="height: 330px !important; width: auto !important;" class="textimg" src="https://static.igem.org/mediawiki/2017/b/bc/ZJU_China_VOCSensor_s2.jpg"></div>-->
                  <th class="yellowTable">Sensor Type</th>
+
        <div class="imgdiv col-md-4 col-sm-8"><img class="textimg" style="height: 310px !important; width: auto !important;" src="https://static.igem.org/mediawiki/2017/e/ec/ZJU_China_VOCsensor_3.png"></div>
                  <th class="yellowTable">Performance characteristics</th>
+
        <div class="imgdiv col-md-8 col-sm-8"><img class="textimg" style="height: 320px !important; width: auto !important;" src="https://static.igem.org/mediawiki/2017/9/90/ZJU_China_VOCsensor_30.png"></div>
                  <th class="yellowTable">Minimum detection limit of related gas</th>
+
        <p class="capture">Fig.3 The response curve of gas sensors (from ill tobacco)and the stability curve (40min in air)</p>
              </tr>
+
  
              <tr>
+
        <p class="PP">We use high purity air to blow out the gas out of the box into the gas sensor chamber.</p>
                  <th class="grayTable">a</th>
+
        <div class="imgdiv"><img class="textimg" style="width: 80% !important;" src="https://static.igem.org/mediawiki/2017/d/d9/ZJU_China_ZC3in1.jpg"></div>
                  <td>IST-8000</td>
+
        <p class="capture">Fig.4 An illustration of our standardized measuring steps</p>
                  <td>Highly sensitive to all types of VOC</td>
+
                  <td>1 ppm</td>
+
              </tr>
+
  
              <tr>
+
        <p class="PP"><a class="cite" href="https://2017.igem.org/Team:ZJU-China/Hardware/Device">Click here</a> to see more information about our device.</p>
                  <th class="grayTable">b</th>
+
        <p class="PP">We build median filter algorithm in SCM to remove some outliers. Then, we preprocess the raw data after getting them: First, we identify and remove the base line value; Then, we read the response value on 1min, 2 min, the integral average value and maximum value of the response curve.</p>
                  <td>TGS2600</td>
+
        <p class="PP">We have measured 17 groups of healthy tobaccos and 18 groups of infected ones. Click to download our <a class="cite" href="https://static.igem.org/mediawiki/2017/2/25/ZJU_China_Hardware_rawdata.xlsx">raw data</a> and <a class="cite" href="https://static.igem.org/mediawiki/2017/f/fb/ZJU_China_Hardware_preprocess.xlsx">preprocessed data</a>.</p>
                  <td>Sensitive to cigarette smoke and cooking odors</td>
+
                  <td>1 ppm</td>
+
              </tr>
+
  
              <tr>
+
        <div class="imgdiv"><img class="textimg" style="width: 80% !important;" src="https://static.igem.org/mediawiki/2017/d/de/ZJU_China_VOCsensor_5.png"></div>
                  <th class="grayTable">c</th>
+
        <p class="capture">Fig.5 The integral average value of 35 response curve.</p>
                  <td>TGS2610</td>
+
                  <td>Sensitive to alkanes such as liquid gas propane butane, low sensitivity to alcohol</td>
+
                  <td>10 ppm</td>
+
              </tr>
+
  
              <tr>
+
        <p class="PP">After preprocessing the data, we apply some algorithms to do the classification work. We employ Decision Tree, Multi-Layer Perception algorithm, and Leaner Model. Finally, we achieve more than 85% accuracy rate of distinguishing whether the tobaccos are infected by <em>P.nicotianae</em>.</p>
                  <th class="grayTable">d</th>
+
        <p class="PP">Moreover, based on the result of the modeling, 4 CMOS detectors are enough to make a judgement for the health condition of tobaccos, which means we can further reduce the cost of our device.</p>
                  <td>TGS2603</td>
+
        <p class="PP"><a class="cite" href="https://2017.igem.org/Team:ZJU-China/Model">Click here</a> to see the details of our modeling process.</p>
                  <td>Sensitive to ammonia and sulfide gas</td>
+
                  <td>1 ppm</td>
+
              </tr>
+
  
              <tr>
+
        <h2 id="conclusion" class="H2Head">Conclusions</h2>
                  <th class="grayTable">e</th>
+
        <p class="PP">Our method achieves more than 85% accuracy rate on distinguish the health state of tobaccos, and we find we only need four detectors for our devices to make such judgments. Moreover, the VOC data can be sent to PC port, we also build a web app to achieve real time monitoring. In the future, we plan to make the web app possible to show the healthy condition of plants in real time.</p>
                  <td>MS1100</td>
+
        <p class="PP">On the other hand, the sensitivity of our device is still limited when facing real world conditions. It is hard to fit different  conditions in different field. Therefore, we come up with a plan to solve this problem, <a class="cite" href="https://2017.igem.org/Team:ZJU-China/Hardware/Improvements">Click here</a> to see our improvements.</p>
                  <td>Highly Sensitive to aldehydes, toluene and organic solvents</td>
+
            <br/><br/>
                  <td>1 ppm</td>
+
              </tr>
+
  
              <tr>
+
    </div>
                  <th class="grayTable">f</th>
+
                  <td>TGS2611</td>
+
                  <td>Sensitive to methane</td>
+
                  <td>10 ppm</td>
+
              </tr>
+
  
              <tr>
+
    <!-- 右侧监听开始 -->
                  <th class="grayTable">g</th>
+
    <div class="col-md-3 disappear-on-top" role="complementary">
                  <td>TGS2602</td>
+
        <nav  style="position: fixed; top: 100px ; left:50px;" class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
                  <td>Highly sensitive to all types of VOC</td>
+
            <ul class="nav bs-docs-sidenav shorterli">
                  <td>1 ppm</td>
+
              </tr>
+
  
              <tr>
+
                <li><a href="#overview">Overview</a></li>
                  <th class="grayTable">h</th>
+
                <li><a href="#background">Background</a></li>
                  <td>MQ-7</td>
+
                <!--<li><a href="#exp">Experimental Design</a></li>-->
                  <td>Sensitive to carbon monoxide and other gases</td>
+
                <!--<li><a href="#fullauto">Sample and Test</a></li>-->
                  <td>10 ppm</td>
+
                <li><a href="#conclusion">Conclusions</a></li>
              </tr>
+
                <!--<li><a href="#ref">Reference</a></li>-->
  
              <tr>
+
            </ul>
                  <th class="grayTable">i</th>
+
                  <td>MQ-135</td>
+
                  <td>Sensitive to ammonia,sulfide and benzene vapor, or harmful smokes</td>
+
                  <td>10 ppm</td>
+
              </tr>
+
  
              <tr>
+
            <a class="back-to-top" href="#top">
                  <th class="grayTable">j</th>
+
                <!--  <i class="fa fa-arrow-up nav_icon"></i> -->
                  <td>TGS822</td>
+
                <img style="width: 50px;" src="https://static.igem.org/mediawiki/2017/d/da/ZJU_China_UP.png">
                  <td>Sensitive to alcohol and organic solvents</td>
+
            </a>
                  <td>50 ppm</td>
+
              </tr>
+
  
              <tr>
 
                  <th class="grayTable">k(substitute b later)</th>
 
                  <td>iAQ-core</td>
 
                  <td>Extremely high sensitivity to all types of VOC and can output the equivalent concentration directly</td>
 
                  <td>125 ppb</td>
 
              </tr>
 
          </table>
 
          <p class="capture">Table1: Highly sensitive CMOS gas detectors we used(All of these detectors have long-term stability)</p>
 
  
          <div class="imgdiv col-md-6 col-sm-6"><img class="textimg" style="height: 250px !important; width: auto !important;" src="https://static.igem.org/mediawiki/2017/e/ec/ZJU_China_VOCsensor_3.png"></div>
+
        </nav>
          <div class="imgdiv col-md-6 col-sm-6"><img class="textimg" style="height: 250px !important; width: auto !important;" src="https://static.igem.org/mediawiki/2017/9/90/ZJU_China_VOCsensor_30.png"></div>
+
    </div>
          <p class="capture">Fig.3</p>
+
          <p class="PP">See more details about the device in the <a class="cite" href="https://2017.igem.org/Team:ZJU-China/Hardware">Hardware page.</a></p>
+
 
+
 
+
          <h2 id="fullauto" class="H2Head">Full automatic headspace sampling and standardized testing</h2>
+
          <p class="PP">We employed full automatic headspace sampling to detect the VOC:Taking six basins of tobaccos infected by P.nicotianae for 5 days and another six basins of healthy tobaccos as a control, put them into a box and sealed it. Started to measure the VOC after 30 minutes.In addition, the device is controlled by Arduino Single Chip Microcomputer(SCM), in order to achieve full automatic measure. We standardized the testing steps for later comparison between every group data.Click here to see more information about the device.</p>
+
 
+
          图:测量流程
+
          <div class="imgdiv"><img class="textimg" style="width: 60% !important;" src=" "></div>
+
          <p class="capture">Fig.4 The standardized measuring steps</p>
+
 
+
          <p class="PP">There is median filter algorithm in SCM to remove the extremums. We firstly preprocessed the data: identified and removed the base line values, after that,read the response value on 1min, 2 min, and the average value and maximum value of the response curve. We have measured 17 groups data for healthy tobaccos and 18 groups for infected ones.Click here to see our raw data and preprocessed data.</p>
+
 
+
          图:响应曲线
+
          <div class="imgdiv"><img class="textimg" style="width: 60% !important;" src="https://static.igem.org/mediawiki/2017/d/de/ZJU_China_VOCsensor_5.png"></div>
+
          <p class="capture">Fig.5</p>
+
 
+
          <p class="PP">After collecting the data from every detector, we applied algorithm to do data classification. We employed Decision Tree, Multi-Layer Perception algorithm, and Leaner Model, to achieve more than 85% accuracy rate of sensing the intruding P.nicotianae on tobaccos. Moreover based on the result of the modeling, four CMOS detectors were enough to make a judgement for tobaccos healthy condition, which means we can further reduce the cost of our device.Click here to see the details of our modeling process.</p>
+
 
+
          <h2 id="conclusions" class="H2Head">Conclusions</h2>
+
          <p class="PP">Our method achieved more than 85% accuracy rate of sensing the infected tobaccos, and only four detectors were necessary for our devices making such judgments. Moreover, the VOC device can link to the main engine which will send the data to PC port. We also built the corresponding web app to receive these data to achieve the real time monitoring, in the future we plan to make the web app possible for showing the healthy condition of plants real time.</p>
+
          <p class="PP">On the other hand, the sensitivity of our device is still limited in real application, it can’t fit different field conditions. Therefore, we came up with a plan to solve this problem, <a class="cite" href="https://2017.igem.org/Team:ZJU-China/Hardware/Improvements">click here to this improvement</a>.</p>
+
 
+
          <h2 id="ref" class="H2Head">Reference</h2>
+
          <p class="ref">[1]Dicke M, Loon J J A V, Soler R. Chemical complexity of volatiles from plants induced by multiple attack[J]. Nature Chemical Biology, 2009, 5(5):317-324.</p>
+
  
 
</div>
 
</div>
 
 
 
<!-- 右侧监听开始 -->
 
<div class="col-md-3 disappear-on-top" role="complementary">
 
  <nav  style="position: fixed; top: 100px ; left:50px; " class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
 
    <ul class="nav bs-docs-sidenav shorterli">
 
        <li><a href="#introduction">Introduction</a></li>
 
        <li><a href="#background">Background</a></li>
 
        <li><a href="#exp">Experimental Design</a></li>
 
        <li><a href="#fullauto">Sample and Test</a></li>
 
        <li><a href="#conclusions">Conclusions</a></li>
 
        <li><a href="#ref">Reference</a></li>
 
    </ul>
 
 
  <a class="back-to-top" href="#top">
 
  <!--  <i class="fa fa-arrow-up nav_icon"></i> -->
 
    <img style="width: 50px;" src="https://static.igem.org/mediawiki/2017/d/da/ZJU_China_UP.png">
 
  </a>
 
 
           
 
          </nav>
 
        </div>
 
       
 
      </div>
 
 
</div>
 
</div>
 
<!-- 右侧监听结束 -->
 
<!-- 右侧监听结束 -->
 
<!-- footer开始 -->
 
<!-- footer开始 -->
 
<div class="footer"  style="background-color: #000000">
 
<div class="footer"  style="background-color: #000000">
  <div class="copyright container text-center">
+
    <div class="copyright container text-center">
      <p><br></p>
+
        <p><br></p>
    <p class="copyright">Copyright &copy; 2017 ZJU-IGEM | <a href="http://www.zju.edu.cn/">Zhejiang University</a> |</p>
+
        <p class="copyright">Copyright &#169; 2017 ZJU-IGEM | <a href="http://www.zju.edu.cn/">Zhejiang University</a> |</p>
    <p><br></p>
+
        <p><br></p>
  </div>
+
    </div>
 
</div>
 
</div>
 
<!-- footer结束 -->
 
<!-- footer结束 -->
Line 715: Line 600:
  
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <!--script src="js/bootstrap.min.js"></script-->
+
<!--script src="js/bootstrap.min.js"></script-->
  <script src="https://static.igem.org/mediawiki/2017/8/85/ZJUChina_js_docsmin.txt"></script>
+
<script src="https://static.igem.org/mediawiki/2017/8/85/ZJUChina_js_docsmin.txt"></script>
  <!--script src="js/button.js"></script-->
+
<!--script src="js/button.js"></script-->
  <script src="https://static.igem.org/mediawiki/2017/2/22/ZJUChina_bootstrap.min.txt"></script>
+
<script src="https://static.igem.org/mediawiki/2017/2/22/ZJUChina_bootstrap.min.txt"></script>
  <script src="https://static.igem.org/mediawiki/2017/3/32/ZJUChina_docs.min.txt"></script>
+
<script src="https://static.igem.org/mediawiki/2017/3/32/ZJUChina_docs.min.txt"></script>
  <script src="https://static.igem.org/mediawiki/2017/e/e0/ZJUChina_button.txt"></script>
+
<script src="https://static.igem.org/mediawiki/2017/e/e0/ZJUChina_button.txt"></script>
  
  <!--<script src="js/scrolling-nav.js"></script>-->
+
<script src="https://2017.igem.org/Team:ZJU-China/js/scrollingnavnonPic?action=raw&ctype=text/javascript"></script>
  <script src="https://2017.igem.org/Zju/js/scrollingnav?action=raw&ctype=text/javascript"></script>
+
<!--<script src="https://static.igem.org/mediawiki/2017/9/92/ZJUChina_scrolling-nav.txt"></script>  -->
  <script src="https://static.igem.org/mediawiki/2017/c/c0/ZJUChina_txtSmoothScroll.min.txt"></script>
+
<script src="https://static.igem.org/mediawiki/2017/c/c0/ZJUChina_txtSmoothScroll.min.txt"></script>
  
  </body>
+
</body>
 
</html>
 
</html>

Latest revision as of 03:55, 2 November 2017

"

VOC sensor

Overview

In our project, we are exploring a new way to sense the health condition of crops which will further send this information (healthy or not) to both human and our T.atroviride. In this way, we can take actions on time and achieve the goal of prevention some phytopathogens in advance. Meanwhile, this method should be conveniently used in variety range of plants.

We finally build up an e-nose (electronic nose) system to sense the VOC (volatile organic compounds) emitted by the plants. Afterwards, using machine learning method, we achieved a high accuracy rate, which is over 85%, when sensing the tobaccos infected by P.nicotianae. That is to say: our device successfully distinguishes whether the tobaccos are ill by "smelling them".

Background

Plants will release a variety of volatile organic compounds (VOC) to resist some infected phytopathogens, which can lead to a change of VOC composition around the plants[1]. Firstly, we verified the VOC differences between healthy tobaccos and tobaccos infected by P.nicotianae by GC-MS.

Fig.1 GC-MS analysis of VOCs emitted by healthy tobaccos and tobaccos infected by P.nicotianae

(Thanks Hunan Tobaccos Bureau for providing this data).

We decide to use ten highly sensitive CMOS(Complementary Metal Oxide Semiconductor) gas detector to catch the VOC information, each detector is sensitive to one kind or type of VOCs. E-nose can’t sense a specific VOC like mass spectrometers did. instead, it catches the overall characteristics of VOCs as "fingerprint".

Fig.2 A photo of our gas sensor chamber.

Our device is controlled by Arduino Single Chip Microcomputer(SCM) in order to achieve automatic measurement, and we standardize the testing steps to ensure the data between every groups is comparable.

Fig.3 The response curve of gas sensors (from ill tobacco)and the stability curve (40min in air)

We use high purity air to blow out the gas out of the box into the gas sensor chamber.

Fig.4 An illustration of our standardized measuring steps

Click here to see more information about our device.

We build median filter algorithm in SCM to remove some outliers. Then, we preprocess the raw data after getting them: First, we identify and remove the base line value; Then, we read the response value on 1min, 2 min, the integral average value and maximum value of the response curve.

We have measured 17 groups of healthy tobaccos and 18 groups of infected ones. Click to download our raw data and preprocessed data.

Fig.5 The integral average value of 35 response curve.

After preprocessing the data, we apply some algorithms to do the classification work. We employ Decision Tree, Multi-Layer Perception algorithm, and Leaner Model. Finally, we achieve more than 85% accuracy rate of distinguishing whether the tobaccos are infected by P.nicotianae.

Moreover, based on the result of the modeling, 4 CMOS detectors are enough to make a judgement for the health condition of tobaccos, which means we can further reduce the cost of our device.

Click here to see the details of our modeling process.

Conclusions

Our method achieves more than 85% accuracy rate on distinguish the health state of tobaccos, and we find we only need four detectors for our devices to make such judgments. Moreover, the VOC data can be sent to PC port, we also build a web app to achieve real time monitoring. In the future, we plan to make the web app possible to show the healthy condition of plants in real time.

On the other hand, the sensitivity of our device is still limited when facing real world conditions. It is hard to fit different conditions in different field. Therefore, we come up with a plan to solve this problem, Click here to see our improvements.