Difference between revisions of "Team:York"

 
(395 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{:Team:York/Templates/NavigationBar}}
 
{{:Team:York/Templates/NavigationBar}}
 
 
 
<html>
 
<html>
 
+
<!DOCTYPE html>
<script>
+
 
+
// This is the jquery part of your template. 
+
// Try not modify any of this code too much since it makes your menu work.
+
 
+
$(document).ready(function() {
+
 
+
$("#HQ_page").attr('id','');
+
 
+
// call the functions that control the menu
+
menu_functionality();
+
hide_show_menu();
+
 
+
 
+
 
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
function menu_functionality() {
+
 
+
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
$(".menu_button").click(function(){
+
 
+
// add or remove the class "open" , this class holds the "-"
+
$(this).children().toggleClass("open");
+
// show or hide the submenu
+
$(this).next('.submenu_wrapper').fadeToggle(400);
+
});
+
 
+
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
$("#display_menu_control").click(function(){
+
$('#menu_content').fadeToggle(400);
+
});
+
 
+
// call the current page highlight function
+
highlight_current_page();
+
}
+
 
+
 
+
// call the highlight current page function to show it on the menu with a different background color
+
function highlight_current_page() {
+
 
+
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
+
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
 
+
// now that the current_page class has been added to a menu item, make the submenu fade in
+
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
+
// change the +/- symbol of the corresponding menu button
+
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
+
+
}
+
 
+
 
+
 
+
// allow button on the black menu bar to show/hide the side menu
+
function hide_show_menu() {
+
+
// in case you preview mode is selected, the menu is hidden for better visibility
+
if (window.location.href.indexOf("submit") >= 0) {
+
$(".igem_2017_menu_wrapper").hide();
+
}
+
 
+
// if the black menu bar has been loaded
+
  if (document.getElementById('bars_item')) {
+
 
+
// when the "bars_item" has been clicked
+
$("#bars_item").click(function() {
+
$("#sideMenu").hide();
+
 
+
// show/hide the menu wrapper
+
$(".igem_2017_menu_wrapper").fadeToggle("100");
+
});
+
  }
+
 
+
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
else {
+
    setTimeout(hide_show_menu, 15);
+
}
+
}
+
 
+
 
+
});
+
 
+
 
+
</script>
+
 
+
 
+
 
+
 
+
 
+
 
<style>
 
<style>
 
+
@media screen and (max-width: 1000px) {
 
+
<!--MAKE MOBILE VERSION APPEAR HERE-->
 
+
}
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
@media screen and (min-width: 1200px) {
+
  .TeamImg {
/* Clear the default wiki settings */
+
    height: 25em;
+
    width: 21em;
<!-- #home_logo, #sideMenu { display:none; }
+
  }
#sideMenu, #top_title, .patrollink  {display:none;}
+
}
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
body {background-color:white; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } -->
+
 
+
+
+
+
/**************************************************************** MENU ***************************************************************/
+
/* Wrapper for the menu */
+
<!--.igem_2017_menu_wrapper {
+
width: 15%;
+
height:100vh;
+
position:fixed;
+
right:0%;
+
padding:0px;
+
float:right;
+
border-left: 1px solid #d3d3d3;
+
background-color:#dddddd;
+
text-align:left;
+
font-family:Tahoma, Geneva, sans-serif;
+
overflow-y: auto;
+
overflow-x: hidden;
+
}
+
-->
+
/* this hides the scrollbar to keep view consistency */
+
.igem_2017_menu_wrappe::-webkit-scrollbar {
+
display: none;
+
}
+
+
+
/* styling for links in the menu, removes the line under text */
+
.igem_2017_menu_wrapper a { 
+
text-decoration: none;
+
}
+
 
+
 
+
/* styling for the images in the menu */
+
.igem_2017_menu_wrapper img {
+
width: 100%;
+
}
+
 
+
/* styling for the menu buttons */
+
.igem_2017_menu_wrapper .menu_button {  
+
width: 100%;
+
padding: 10px 0px 10px 15px;
+
float:left;
+
border-bottom: 1px solid #d3d3d3;
+
font-size: 12px;
+
font-weight: bold;
+
color: #5e5f5f;
+
cursor: pointer;
+
}
+
 
+
 
+
.igem_2017_menu_wrapper .menu_bottom_padding {  
+
width: 100%;
+
height: 30px;
+
float:left;
+
}
+
 
+
.menu_button.direct_to_page {
+
padding-left: 36px;
+
}
+
 
+
 
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
+
width:10%;
+
float:left;
+
}
+
 
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
+
content: "+"; 
+
}
+
+
.open::before {
+
content: "-" !important; 
+
}
+
+
+
+
/* styling for the menu buttons on hover */
+
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
+
background-color: #3399ff;
+
text-decoration: none;
+
color:#ffffff;
+
}
+
 
+
/* styling for the menu button when it is the current page */
+
.current_page {
+
background-color:#7fc1f7  !important;
+
color:#5e5f5f !important;
+
}
+
 
+
 
+
/* styling for the submenu buttons */
+
.igem_2017_menu_wrapper .submenu_button {
+
width: 100%;
+
padding: 10px 0px 10px 34px;
+
float:left;
+
background-color:#f2f2f2;
+
border-bottom: 1px solid #d3d3d3;
+
font-size: 12px;
+
color: #5e5f5f;
+
cursor: pointer;
+
}
+
 
+
/* wrapper for the submenu items, they are hidden by default*/
+
.igem_2017_menu_wrapper .submenu_wrapper {
+
display:none;
+
}
+
 
+
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
+
.igem_2017_menu_wrapper #display_menu_control {
+
display:none;
+
text-align:center;
+
}
+
+
 
+
 
</style>
 
</style>
 
 
<!--- THIS IS WHERE THE HTML BEGINS --->
 
 
 
 
<head>
 
 
<!-- This tells the browser that your page is responsive -->
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 
</head>
 
 
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
</html>
 
<html>
 
<!DOCTYPE html>
 
 
 
<body style="background-color: #fff;">
 
<body style="background-color: #fff;">
</div>
 
 
<div>
 
<div>
 
     <!-- Header -->
 
     <!-- Header -->
     <header class="intro-header" style="margin: 0px 0px; background: url(//2017.igem.org/wiki/images/2/27/TeamYork-TemporaryBackground.png); background-size: contain; background-position:0px 20px;">
+
     <header class="intro-header" style="background: url(//2017.igem.org/wiki/images/2/27/TeamYork-TemporaryBackground.png); background-size: 100% 100%; background-position:0px 20px;">
        <!-- maybe we should put the background here? -->
+
 
         <div class="container">
 
         <div class="container">
 
             <div class="intro-message text-center container" style = "margin: 0px 0px;">
 
             <div class="intro-message text-center container" style = "margin: 0px 0px;">
                 <br style = “line-height:20;”><br>
+
                 <br style = “line-height:20px;”><br>
                 <h1 style="color:#fff;">iGEM York 2017</h1>
+
                 <h1 style="-webkit-text-stroke: 2px black; color:#fff;">iGEM York 2017</h1>
                 <h2 style="color:#fff;">QWACC: a Quicker Way to Analyse Co-Cultures</h2>
+
                 <h1 style="-webkit-text-stroke: 2px black; color:#fff;">DIHM Assisted Co-culture Optimisation</h1>
                <h3 style="color:#fff;">DIHM Assisted Co-culture Optimization</h3>
+
 
+
<head>
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
    <style>
+
    .fa {
+
      padding: 1px;
+
      font-size: 30px;
+
      width: 30px;
+
      text-align: center;
+
      text-decoration: none;
+
      margin: 5px 2px;
+
    }
+
 
+
    .fa:hover {
+
        opacity: 0.7;
+
    }
+
 
+
    .fa-facebook {
+
      background: #3B5998;
+
      color: white;
+
    }
+
 
+
    .fa-twitter {
+
      background: #55ACEE;
+
      color: white;
+
    }
+
 
+
    .fa-instagram {
+
      background: #125688;
+
      color: white;
+
    }
+
 
+
    </style>
+
</head>
+
 
</div>
 
</div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
 
 
 
     <!-- Page Content -->
 
     <!-- Page Content -->
     <section id="teams">
+
  <div class="cam-container" style="background-color: #ddd; color: #000; margin: -50px 0px 0px 0px;">
 
+
     <section id="teams" style="padding-bottom: 10px;">
         <div class="container">
+
         <div class="container" style="background-color: #fff; border-style: solid; border-color: #000000; border-radius: 25px; padding: 10px 10px 10px 10px;">
            <div class="row">
+
                    <div class="row">
 
                 <div class="col-lg-12 text-center">
 
                 <div class="col-lg-12 text-center">
                     <h2 class="section-heading">About our project</h2>
+
                     <h1 class="section-heading" style="margin-bottom:-15px;">QWACC: a Quicker Way to Analyse Co-Cultures</h1>
                    <h3 class="section-subheading text-muted">A collaboration of the sciences</h3>
+
                     <h4 class="section-subheading">Contact us: <b><a class="text-muted" href="mailto:igemyork@gmail.com" style="color: #000;">igemyork@gmail.com</a></b></h4>
                     <h4 class="section-subheading text-muted">Contact us: <b>igemyork@gmail.com</b></h4>
+
 
                     <div>
 
                     <div>
                         <a href="//www.facebook.com/igemyork/" class="fa fa-facebook"></a>
+
                         <a href="//www.facebook.com/igemyork/"><img class="social-top social-top-facebook" src="//2017.igem.org/wiki/images/0/0c/Icon-facebook.png" width="32px" height="32px"></a>
                         <a href="//twitter.com/igemyork?lang=en" class="fa fa-twitter"></a>
+
                         <a href="//twitter.com/igemyork?lang=en"><img class="social-top social-top-twitter" src="//2017.igem.org/wiki/images/6/6f/Icon-twitter.png" width="32px" height="32px"></a>
                         <a href="//www.instagram.com/igemyork/" class="fa fa-instagram"></a>
+
                         <a href="//www.instagram.com/igemyork/"><img class="social-top social-top-instagram" src="//2017.igem.org/wiki/images/5/51/Icon-instagram.png" width="32px" height="32px"></a>
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
           
+
        <hr>
 
             <div class="row text-center">
 
             <div class="row text-center">
 
                 <div class="col-md-4">
 
                 <div class="col-md-4">
                    <span class="fa-stack fa-4x">
+
                         <a href="//2017.igem.org/Team:York/Results#Modifying-Chlamydomonas">
                         <a href="#">
+
                         <img class="Iconlink" src="//2017.igem.org/wiki/images/1/1c/TeamYork-BiologyIcon.png" width="100px" height="100px">
                         <i class="fa fa-circle fa-stack-2x text-primary" style="font-size:100px; padding: 1px; width: 100px; text-align:center; margin:50px 20px;"></i>
+
                        <i class="fa fa-flask fa-stack-1x fa-inverse" style="font-size:60px; padding: 1px; width: 100px; text-align:center; margin:30px 20px;"></i>
+
 
                         </a>
 
                         </a>
                    </span>
 
 
                     <h4 class="service-heading">Biology</h4>
 
                     <h4 class="service-heading">Biology</h4>
                     <p class="text-muted">Genetically engineering <em>C. reinhardtii</em> and <em>E. coli</em> in order to form a co-culture to allow the creation of biofuels. </p>
+
                     <p class="text-muted" style="font-size:0.8em; text-align: center; margin-right: 5px; margin-left: 5px;">Genetically engineering <em>C. reinhardtii</em> and <em>E. coli</em> in order to form a co-culture with industrial potentials. </p>
 
                 </div>
 
                 </div>
               
+
 
 
                 <div class="col-md-4">
 
                 <div class="col-md-4">
                    <span class="fa-stack fa-4x">
+
                         <a href="//2017.igem.org/Team:York/Hardware">
                         <a href="#">
+
                         <img class="Iconlink" src="//2017.igem.org/wiki/images/a/a5/TeamYork-HardwareIcon.png" width="100px" height="100px">
                         <i class="fa fa-circle fa-stack-2x text-primary" style="font-size:100px; padding: 1px; width: 100px; text-align:center; margin:50px 20px;"></i>
+
                        <i class="fa fa-cogs fa-stack-1x fa-inverse" style="font-size:50px; padding: 1px; width: 100px; text-align:center; margin:30px 17px;"></i>
+
 
                         </a>
 
                         </a>
                    </span>
 
 
                     <h4 class="service-heading">Hardware</h4>
 
                     <h4 class="service-heading">Hardware</h4>
                     <p class="text-muted">Using optical diffraction to create and probe 3D images through holography in order to monitor co-cultures.</p>
+
                     <p class="text-muted" style="font-size:0.8em; text-align: center; margin-right: 5px; margin-left: 5px;">Using optical diffraction to create and probe 3D images through holography in order to monitor co-cultures.</p>
 
                 </div>
 
                 </div>
 
              
 
              
 
                 <div class="col-md-4">
 
                 <div class="col-md-4">
                    <span class="fa-stack fa-4x">
+
                         <a href="//2017.igem.org/Team:York/Software">
                         <a href="#">
+
                         <img class="Iconlink" src="//2017.igem.org/wiki/images/0/0d/TeamYork-SoftwareIcon.png" width="100px" height="100px">
                         <i class="fa fa-circle fa-stack-2x text-primary" style="font-size:100px; padding: 1px; width: 100px; text-align:center; margin:50px 20px;"></i>
+
                        <i class="fa fa-code fa-stack-1x fa-inverse" style="font-size:60px; padding: 1px; width: 100px; text-align:center; margin:30px 20px;"></i>
+
 
                         </a>
 
                         </a>
                    </span>
 
 
                     <h4 class="service-heading">Software</h4>
 
                     <h4 class="service-heading">Software</h4>
                     <p class="text-muted">Taking images using the hardware and turning this into a holograph, then analysing this image to optimise co-cultures.</p>
+
                     <p class="text-muted" style="font-size:0.8em; text-align: center; margin-right: 5px; margin-left: 5px;">Cell counting and analysis using holograms formed from images taken with our hardware.</p>
                </div>
+
            </div>
+
            <hr>
+
            <div class="row description-text">
+
                <div class="col-md-7">
+
                    <p>With the decreasing supply but increasing demand for fossil fuels, biofuels are a renewable alternative to help cope with our growing energy needs. We aim to develop and optimize a stable microbial co-culture system whereby the source of energy is light, and carbon flows from CO&#8322; in the atmosphere to synthesise a biofuel. This simple synthetic microbial community will comprise <em>Chlamydomonas reinhardtii</em>, an algae, that will produce sugars through photosynthesis to feed the biofuel-producing <em>Escherichia coli</em>, ideally resulting in a growth system that could reduce the cost of feedstock materials for biofuel production. However, their differing growth rates would likely result in an unstable system in which one organism might outgrow the other.</p>
+
                </div>
+
 
+
                <div class="col-md-5 description-images" style="background-image: url(//2017.igem.org/wiki/images/c/c9/IGEM-York-Biology-Overview.jpg); background-size: cover; background-position: 0px -100px; background-repeat: no-repeat;">
+
                <br style="line-height:12;">
+
                </div>
+
            </div>
+
            <hr>
+
            <div class="row description-text">
+
                <div class="col-md-5 description-images" style="background-image: url(//2017.igem.org/wiki/images/b/b4/IGEM-York-Hardware2-Overview.png); background-size: cover; background-position: 0px 0px; background-repeat: no-repeat;">
+
                  <!--img class="description-images" src="https://static.igem.org/mediawiki/2017/5/5c/IGEM-York-Hardware-Overview.jpg" width="470px" height="220px"-->
+
                  <br style="line-height:12;">
+
                </div>
+
           
+
                <div class="col-md-7">
+
                    <p>To monitor the ratio of <em>C. reinhardtii</em> to <em>E. coli</em>, we will be using Digital Holographic Microscopy (DHM). This involves illuminating a sample of the co-culture with a laser and observing the diffraction pattern formed by the microbes. This pattern is sensitive to the wavelength of the laser light, the distance from the co-culture sample and the shape, size and position of the microbes. The mathematical and physical relationship between these quantities is well described, so we can calculate what the cross-section of the sample would look like at various levels. This allows us to form a stack of 2D images which, when combined, represent the 3D sample. We can then analyse this stack of images to track the number of each type of microbe present.</p>
+
                </div>
+
            </div>
+
            <hr>
+
            <div class="row description-text">
+
                <div class="col-md-7">
+
                    <p>Images are taken from a Raspberry Pi computer and sent to a Windows machine where a piece of MATLAB code forms a stack of 2D images which, when combined, represent the 3D sample. We can then analyse this stack of images to establish the number of each type of microorganism present in the co-culture. From this information we will be able to compare these results to our mathematical model, where we can then modify the conditions of the co-culture through the use of the Raspberry Pi in order to optimise the growth of the bacteria, which will then increase output of the ethanol from the system. The whole process is tied together through a Windows Application written in C#, allowing a user to fully control the system without any interaction with the code itself.</p>
+
                </div>
+
                </style>
+
               
+
                <div class="col-md-5">
+
                    <img class="description-images" src="img/promo/coding.jpg">
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
    </section>
+
</section>
 
+
<div class="cam-container" style="background-color: #dddddd; color: #444444;">
<section id="#footer-sec">
+
<section id="Project-Intro" style="padding-top: 10px; padding-bottom: 20px; margin-top: 0px;">
<footer>
+
  <br>
  <div class="cam-container" style = "background-color: #000; padding-top: 5px; margin: 0px 0px -15px 0px;">
+
  <div class="container" style="background-color: rgb(250,250,250); color: #000000; border-style: solid; border-color: #000000; border-radius: 25px;">
    <div class="footer row text-center">
+
    <div class="text-center">
      <div class="col-md-4">
+
      <h1>The Project</h1>
        <ul>
+
       <br>
          <li><a href="#">ABOUT US</a></li>
+
       <p style="text-align: center; font-size: 20px;">Upon being asked to find the number of microorganisms in a given sample, the response from members of our iGEM team has invariably been a long sigh and a plea to the realms of the supernatural. <br><br>That most human quality - laziness - alongside flaws in traditional techniques, which we will revisit below, has led to us designing a potential solution in the form of a Digital Inline Holographic Microscope (DIHM). <br><br>In particular, we discovered that, when studying co-cultures, there are precious few methods of counting cells that are accurate, fast, cheap and non-destructive. <br><br>We decided, therefore, to try to bring together two promising areas of science in this project: <br>Digital Holographic Microscopy and Co-Culturing.</p>
          <li class="text-muted">We are an overgraduate team representing the University of York.</li>
+
       <br style="line-size: 10px;">
          <li class="text-muted">Our <a href="#" style="color:#ddd;">QWACC</a> is our entry into the Hardware track for the iGEM 2017 competition. </li>
+
        </ul>
+
      </div>
+
 
+
      <div class="col-md-4">
+
        <ul>
+
          <li><a href="#">LOCATION</a></li>
+
          <li><a href="#">Text text text text</a></li>
+
          <li><a href="#">Text text text text</a></li>
+
        </ul>
+
       </div>
+
 
+
       <div class="col-md-4">
+
        <ul>
+
          <li><a href="#">CONTACT US</a></li>
+
          <li><a href="#">Text text text text</a></li>
+
          <li><a href="#">Text text text text</a></li>
+
        </ul>
+
       </div>
+
 
+
 
+
 
     </div>
 
     </div>
 
   </div>
 
   </div>
</footer>
 
 
</section>
 
</section>
 
+
</div>
 +
<div class="cam-container" style="background-color: #ddd; color: #000;">
 +
<section style="padding-top: 10px; padding-bottom: 20px; margin-top: 0px;">
 +
  <div class="container" style="background-color: rgb(250,250,250); color: #000000; border-style: solid; border-color: #000000; border-radius: 25px;">
 +
    <div class="text-center">
 +
      <h1>Our Work</h1>
 +
    </div>
 +
    <div class="text-left" style="margin: 0px;">
 +
      <p style="font-size: 18px; text-align: center;">To easily find our achievements with respect to the iGEM 2017 competition, please see our <a style="color: #0000ff;" href="//2017.igem.org/Team:York/Achievements">Achievements</a> page for a list of direct links.</p>
 +
    </div>
 +
    <br style="line-height: 10px;">
 +
  </div>
 +
</section>
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{:Team:York/Templates/Footer}}

Latest revision as of 01:49, 31 October 2017



iGEM York 2017

DIHM Assisted Co-culture Optimisation

QWACC: a Quicker Way to Analyse Co-Cultures

Contact us: igemyork@gmail.com


Biology

Genetically engineering C. reinhardtii and E. coli in order to form a co-culture with industrial potentials.

Hardware

Using optical diffraction to create and probe 3D images through holography in order to monitor co-cultures.

Software

Cell counting and analysis using holograms formed from images taken with our hardware.


The Project


Upon being asked to find the number of microorganisms in a given sample, the response from members of our iGEM team has invariably been a long sigh and a plea to the realms of the supernatural.

That most human quality - laziness - alongside flaws in traditional techniques, which we will revisit below, has led to us designing a potential solution in the form of a Digital Inline Holographic Microscope (DIHM).

In particular, we discovered that, when studying co-cultures, there are precious few methods of counting cells that are accurate, fast, cheap and non-destructive.

We decided, therefore, to try to bring together two promising areas of science in this project:
Digital Holographic Microscopy and Co-Culturing.


Our Work

To easily find our achievements with respect to the iGEM 2017 competition, please see our Achievements page for a list of direct links.