Difference between revisions of "Team:HZAU-China/Attributions"

Line 2: Line 2:
  
 
<html>
 
<html>
 +
<html lang="en">
 
<head>
 
<head>
<meta charset="UTF-8">
+
    <meta charset="UTF-8">
<title>Attribution</title>
+
    <title>body</title>
        <style>
+
    <style>
body{
+
        *{margin: 0;padding: 0;}
background-color: #dcd6f0;
+
        .content_wrapper {
}
+
            position: absolute;
.text{
+
            top: 88px;
position:absolute;
+
            width: 100%;
margin:auto;
+
            height: 1800px;
top:50px;
+
            background-color: white;
left:200px;
+
        }
text-align:center;
+
        .main_part{
}
+
            width: 80%;
.content{
+
            height: 100%;
font-size:1.5em;
+
            float: left;
}
+
        }
.head{
+
        .article{
font-size:3em;
+
            width: 60%;
}
+
            height: auto;
p{
+
            position: absolute;
font-size:1.5em;
+
            top: 0;
}
+
            left: 13%;
#subwebmemu{
+
            padding:0 2% 2% 2%;
position:fixed;
+
            background-color: white;
float: right;
+
        }
top:200px;
+
        .content_part{
}
+
            width: 20%;
+
            height: auto;
         </style>
+
            position: fixed;
</head>
+
            right: 0%;
<body>
+
            background-color: #e5ffd9;
<div class="text">
+
            border-radius: 50%;
<h1 class="head" >Attributions</h1>
+
        }
<p>Integrative Design of circuit: Pan Chu, Kangjian Hua</p>
+
         .menutitle{
<h2 id="A1">Wet Lab</h2>
+
            background-color: #0e5386;
  <ul class="content">
+
            cursor:pointer;
    <li>Optogenetics
+
            margin-bottom: 5px;
      <ul>
+
            width:100%;
      <li>Clone and construction of light-switchable circuit: Boyao Zhang, Jun Li</li>
+
            padding:6px;
      <li>Data detection on TCS: Boyao Zhang, Jun Li</li>
+
            text-align:center;
      </ul>
+
            font-weight:bold;
    </li>
+
            font-size: 20px;
    <li>Motility
+
            color: white;
      <ul>
+
            position: relative;
      <li>Clone and construction of motility-relative circuit: Zewen Ding, Wen Wang, Wenqi Huang, Wentao Yu</li>
+
        }
      <li>Figure collection of motility: Zewen Ding, Wenqi Huang, Wen Wang</li>
+
        .little{
      <li>Design of trial and measurement: Wenqi Huang, Zewen Ding, Wen Wang</li>
+
            content: "";
      <li>Photograph gathering: Wenqi Huang, Zhujun Xia, Qiqi Xiong, Zewen Ding, Wen Wang</li>
+
            position: absolute;
      </ul>
+
            top: 10px;
    </li>
+
            right: 40px;
    <li>Riboswitch
+
            border-left: 6px solid transparent;
      <ul>
+
            border-right: 6px solid transparent;
      <li>Clone and construction of riboswitch circuit: Pan Chu, Boyao Zhang, Luyao Zhang, Anqi Zhou, Wenqi Huang</li>
+
            border-bottom: 6px solid #fff955;
      <li>Quantitative data collection: Pan Chu, Anqi Zhou, Luyao Zhang</li>
+
            opacity: 0.6;
      </ul>
+
        }
    </li>
+
        .my_submenu{
    <li>Gene knockout
+
            padding: 0;
      <ul>
+
            margin-bottom: 0.5em;
      <li>Gene knockout: Boyao Zhang</li>
+
            text-align: center;
      </ul>
+
            list-style: none;
    </li>
+
        }
    </ul>
+
        .my_submenu a{
<h2  id="A2">Dry lab</h2>
+
            text-decoration: none;
    <ul class="content">
+
            background-color:white;
    <li>Modeling on motility dynamics: Kangjian Hua</li>
+
            font-size: 20px;
    <li>Modeling on motility cellular model: Bochen Cheng</li>
+
        }
    <li>Modeling on genetic circuits: Bochen Cheng</li>
+
        .menutitle:hover {
    </ul>
+
            opacity: 0.8;
<h2 id="A3">Software</h2>
+
        }
    <ul class="content">
+
        .menutitle:hover .little{
  <li>Software design: Kangjian Hua, Bochen Cheng</li>
+
            opacity: 1;
  <li>Design on video: Kangjian Hua</li>
+
        }
  <li>Wiki creating: Jing Xiao, Weitong Zhang, Boyao Zhang, Xinran Zhao</li>
+
        .article p{
    </ul>
+
            text-align:justify;
 +
            font-family: Verdana;
 +
            font-size: 16px;
 +
            text-indent: 2em;
 +
            line-height: 190%;
 +
        }
 +
        .article h2{
 +
            font-size: 45px;
 +
            font-family: Arial;
 +
            color: #1e6ed0;
 +
        }
 +
        .article h3{
 +
            font-size: 30px;
 +
            font-family: Helvetica;
 +
            color: #0783d6;
  
<h2  id="A4">Hardware</h2>
+
        }
     <ul class="content">
+
        .pointer{
  <li>Design: Zhihao Li, Yang Bai</li>
+
            position: absolute;
  <li>Manufacture and welding of PCB: Zhihao Li</li>
+
            top: 30%;
  <li>Download of SCM: Zhihao Li</li>
+
            left: 4%;
  <li>Construction of light-switchable device: Zhihao Li, Jun Li, Kangjian Hua</li>
+
            z-index: 100;
  <li>Programming: Yang Bai</li>
+
            background-color: #dec5df;
    </ul>
+
        }
 
+
    </style>
<h2  id="A5">Human Practice</h2>
+
 
    <ul class="content">
+
    <script type="text/javascript">
    <li>Collaboration and communication with other teams: Xinran Zhao, Haimeng Li</li>
+
        if (document.getElementById){
    <li>Handbook manufacture: all iGEM members</li>
+
            document.write('<style type="text/css">\n')
    </ul>
+
            document.write('.my_submenu{display: block;}\n')
 +
            document.write('</style>\n')
 +
        }
 +
 
 +
        function SwitchMenu(obj){
 +
            if(document.getElementById){
 +
                var el = document.getElementById(obj);
 +
                var ar = document.getElementById("masterdiv").getElementsByTagName("span");
 +
                if(el.style.display != "block"){
 +
                    for (var i=0; i<ar.length; i++){
 +
                        if (ar[i].className=="my_submenu") //DynamicDrive.com change
 +
                            ar[i].style.display = "none";
 +
                    }
 +
                    el.style.display = "block";
 +
                }else{
 +
                    el.style.display = "none";
 +
                }
 +
            }
 +
        }
 +
     </script>
 +
</head>
 +
 
 +
 
 +
<body>
 +
<div class="content_wrapper">
 +
 
 +
    <div class="content_part" id="masterdiv">
 +
        <div class="menutitle" onclick="SwitchMenu('sub1')">Main Menu
 +
            <div class="little"></div>
 +
        </div>
 +
        <ul class="my_submenu" id="sub1" style="display: block">
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
        </ul>
 +
 
 +
        <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help
 +
            <div class="little"></div>
 +
        </div>
 +
        <ul class="my_submenu" id="sub2" style="display: block">
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
        </ul>
 +
 
 +
        <div class="menutitle" onclick="SwitchMenu('sub3')" >Help Forum
 +
            <div class="little"></div>
 +
        </div>
 +
        <ul class="my_submenu" id="sub3" style="display: block">
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
        </ul>
 +
 
 +
        <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links
 +
            <div class="little"></div>
 +
        </div>
 +
        <ul class="my_submenu" id="sub4" style="display: block">
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
            <li><a href="/">Main Page</a></li>
 +
        </ul>
 +
 
 +
    </div>
 +
 
 +
    <div class="main_part">
 +
          <img src="project.png" width="130px" height="2000px">
 +
          <div class="pointer"> <img src="pointer.png"></div>
 +
          <div class="article">
 +
            <h2>1.overview</h2>
 +
              <br/><br/>
 +
              <h3>&nbsp;1.1 what's AR</h3>
 +
              <br/>
 +
              <p>
 +
                  With the unprecedented rapid development in computer technology and the significant promotion in
 +
                computing capacity, it is undeniable truth that computer and computer products such as smartphone
 +
                  has played a great role in our lives. People spend their spare time using twitter and facebook, analyze
 +
                data through computer applications, they can’t live without high-tech computer products. Contrary to the
 +
                reality world that we actually exist in, computer creates a virtual world. Though computer itself is tangible,
 +
                what emerges on the screen is an intangible product of a series of logical combination from electronic circuit.
 +
                Our iGEM team in 2015 proposed the concept of “Mixed Reality Cell”, constructed by the interaction between the
 +
                genetic oscillator and the e-oscillator, eventually leads to coupling and synchronization. However, existing in
 +
                a world based on reality rather than mixed reality, computers are utilized as a tool to enhance one’s perception
 +
                on reality and meet substantial requirements. This is a reality-oriented mixed-reality, which can also be called
 +
                augmented reality (AR).
 +
            </p>
 +
              <br/><br/><br/><br/><br/>
 +
 
 +
            <h3>
 +
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
                1.2 BioPafiar!</h3>
 +
 
 +
            <br/><br/>
 +
            <p>
 +
              The growth of bacteria complies with certain laws, among which the easiest would be the law of reproduction-diffusion,
 +
                under whose control the shape of colony would appears to be round. If a total regulation on bacterial growth is added,
 +
                for example the enhancement on its motility, the size of colony will be larger; if a local regulation is imposed on
 +
                bacteria growth, the round shape of the colony will disappear; if the regulation is time-dependent, the regulation will
 +
                make adjustment according to the certain circumstance of the bacterial colony at specific time. Therefore, the shape of
 +
              the bacterial lawn will match our intended design. In contrary to the isolated state in nature, the cells and computer
 +
              together forms a system, which is composed of both reality and virtual world, and reality occupied most part of the
 +
                augmented reality system. In the system, the pattern formation of the bacteria population will be established as required.
 +
                So we design this project to propose a concept that biochemistry reaction in different kinds of biological stimulation can
 +
                be mimicked by placing cells in AR system, such as synthesis of enzymes, signal transduction, and bio-pattern formation.
 +
              In addition, in the near future, this AR system can be applied in medical field or in our daily lives. For example, biological
 +
              material 3D printing, and in vitro induction of tissue or organ.
 +
              Welcome to our project: BioPafiar!
 +
            </p>
 +
 
 +
 
 +
            <br/>
 +
            <h2>2.Background</h2>
 +
          </div>
 +
 
 +
 
 +
    </div>
  
<h2  id="A6">Art Designer</h2>
 
    <ul class="content">
 
  <li>Art Designer:Kening Chen, Tengteng Wang, Ruoqing Chen</li>
 
    </ul>
 
 
 
<h2>Acknowledgement:</h2>
 
<p>We would like to thank State Key Laboratory of Agricultural Microbiology, College of Life Science and Technology, Huazhong Agricultural University, for providing material related to riboswitch. Thanks to Professor Youming Zhang and Ph.D Ruijuan Li in his lab for offering great instruction on gene knockout technology. Thanks for the help of College of Life Science and Technology and College of Information in Huazhong Agricultural University. We really appreciate your support.</p>
 
</div>
 
<div id="subwebmemu">
 
<ol>
 
<a href="#A1"><li>Wet Lab</li></a>
 
<a href="#A2"><li>Dry lab</li></a>
 
<a href="#A3"><li>Software</li></a>
 
<a href="#A4"><li>Hardware</li></a>
 
<a href="#A5"><li>Human Practice</li></a>
 
<a href="#A6"><li>Art Designer</li></a>
 
</ol>
 
</div>
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:19, 14 October 2016

body

1.overview



 1.1 what's AR


With the unprecedented rapid development in computer technology and the significant promotion in computing capacity, it is undeniable truth that computer and computer products such as smartphone has played a great role in our lives. People spend their spare time using twitter and facebook, analyze data through computer applications, they can’t live without high-tech computer products. Contrary to the reality world that we actually exist in, computer creates a virtual world. Though computer itself is tangible, what emerges on the screen is an intangible product of a series of logical combination from electronic circuit. Our iGEM team in 2015 proposed the concept of “Mixed Reality Cell”, constructed by the interaction between the genetic oscillator and the e-oscillator, eventually leads to coupling and synchronization. However, existing in a world based on reality rather than mixed reality, computers are utilized as a tool to enhance one’s perception on reality and meet substantial requirements. This is a reality-oriented mixed-reality, which can also be called augmented reality (AR).






                 1.2 BioPafiar!



The growth of bacteria complies with certain laws, among which the easiest would be the law of reproduction-diffusion, under whose control the shape of colony would appears to be round. If a total regulation on bacterial growth is added, for example the enhancement on its motility, the size of colony will be larger; if a local regulation is imposed on bacteria growth, the round shape of the colony will disappear; if the regulation is time-dependent, the regulation will make adjustment according to the certain circumstance of the bacterial colony at specific time. Therefore, the shape of the bacterial lawn will match our intended design. In contrary to the isolated state in nature, the cells and computer together forms a system, which is composed of both reality and virtual world, and reality occupied most part of the augmented reality system. In the system, the pattern formation of the bacteria population will be established as required. So we design this project to propose a concept that biochemistry reaction in different kinds of biological stimulation can be mimicked by placing cells in AR system, such as synthesis of enzymes, signal transduction, and bio-pattern formation. In addition, in the near future, this AR system can be applied in medical field or in our daily lives. For example, biological material 3D printing, and in vitro induction of tissue or organ. Welcome to our project: BioPafiar!


2.Background