Team:ETHZ Basel

From 2010.igem.org

(Difference between revisions)
(→Welcome to the wiki of the ETH Zurich iGEM team)
 
(24 intermediate revisions not shown)
Line 1: Line 1:
{{ETHZ_Basel10}}
{{ETHZ_Basel10}}
-
{{ETHZ_Basel10_Start}}
+
{{ETHZ_Basel10_Introduction}}
-
= E. lemming - remote controlling '''E. coli''' =
+
= E. lemming - a remotely controlled living robot by ETH Zurich =
-
 
+
{{ETHZ_Basel10_Teaser}}
-
<html>
+
-
<head>
+
-
<style type="text/css">
+
-
#teaser {
+
-
margin: 0; padding: 0;
+
-
font: 10px normal "Verdana", Helvetica, sans-serif;
+
-
}
+
-
a.teaserlink {
+
-
color: #fff;
+
-
}
+
-
.container {
+
-
overflow: hidden;
+
-
width: 900px;
+
-
margin: 0 auto;
+
-
}
+
-
#main {
+
-
padding: 10px;
+
-
background: #f0f0f0;
+
-
border: 1px solid #ccc;
+
-
}
+
-
 
+
-
/*--Main Image Preview--*/
+
-
.main_image {
+
-
width: 598px; height: 456px;
+
-
float: left;
+
-
background: #333;
+
-
border: 1px solid #ccc;
+
-
position: relative;
+
-
overflow: hidden;
+
-
color: #fff;
+
-
}
+
-
.main_image h2 {
+
-
color: #fff;
+
-
font-size: 2em;
+
-
font-weight: bold;
+
-
margin: 0 0 5px; padding: 10px;
+
-
}
+
-
.main_image p {
+
-
font-size: 12px;
+
-
padding: 10px; margin: 0;
+
-
line-height: 1.6em;
+
-
}
+
-
.block small {
+
-
font-size: 12px;
+
-
}
+
-
.main_image .block small {margin-left: 10px;}
+
-
.main_image .desc{
+
-
position: absolute;
+
-
bottom: 0; left: 0;
+
-
width: 100%;
+
-
display: none;
+
-
}
+
-
.main_image .block{
+
-
width: 100%;
+
-
background: #111;
+
-
border-top: 1px solid #000;
+
-
}
+
-
.main_image a.collapse {
+
-
background: url(btn_collapse.gif) no-repeat left top;
+
-
height: 27px; width: 93px;
+
-
text-indent: -99999px;
+
-
position: absolute;
+
-
top: -27px; right: 20px;
+
-
}
+
-
.main_image a.show {background-position: left bottom;}
+
-
 
+
-
 
+
-
.image_thumb {
+
-
float: left;
+
-
width: 299px;
+
-
background: #f0f0f0;
+
-
border-right: 1px solid #fff;
+
-
border-top: 1px solid #ccc;
+
-
}
+
-
.image_thumb img {
+
-
border: 1px solid #ccc;
+
-
padding: 5px;
+
-
background: #fff;
+
-
float: left;
+
-
}
+
-
.image_thumb ul {
+
-
margin: 0; padding: 0;
+
-
list-style: none;
+
-
}
+
-
.image_thumb ul li{
+
-
margin: 0; padding: 10px 10px;
+
-
background: #f0f0f0 url(nav_a.gif) repeat-x;
+
-
width: 279px;
+
-
float: left;
+
-
border-bottom: 1px solid #ccc;
+
-
border-top: 1px solid #fff;
+
-
border-right: 1px solid #ccc;
+
-
}
+
-
.image_thumb ul li.hover {
+
-
background: #ddd;
+
-
cursor: pointer;
+
-
}
+
-
.image_thumb ul li.active {
+
-
background: #fff;
+
-
cursor: default;
+
-
}
+
-
html .image_thumb ul li h2 {
+
-
font-size: 12px;
+
-
margin: 5px 0; padding: 0;
+
-
}
+
-
.image_thumb ul li .block {
+
-
float: left;
+
-
margin-left: 10px;
+
-
padding: 0;
+
-
width: 170px;
+
-
}
+
-
.image_thumb ul li p{display: none;}
+
-
 
+
-
 
+
-
 
+
-
</style>
+
-
<!--Call jQuery-->
+
-
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
+
-
<script type="text/javascript">
+
-
$(document).ready(function() {
+
-
 
+
-
//Show Banner
+
-
$(".main_image .desc").show(); //Show Banner
+
-
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
+
-
 
+
-
//Click and Hover events for thumbnail list
+
-
$(".image_thumb ul li:first").addClass('active');
+
-
$(".image_thumb ul li").click(function(){
+
-
//Set Variables
+
-
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
+
-
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
+
-
var imgDesc = $(this).find('.block').html(); //Get HTML of block
+
-
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
+
-
+
-
if ($(this).is(".active")) {  //If it's already active, then...
+
-
return false; // Don't click through
+
-
} else {
+
-
//Animate the Teaser
+
-
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
+
-
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
+
-
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
+
-
});
+
-
}
+
-
+
-
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
+
-
$(this).addClass('active');  //add class of 'active' on this list only
+
-
return false;
+
-
+
-
}) .hover(function(){
+
-
$(this).addClass('hover');
+
-
}, function() {
+
-
$(this).removeClass('hover');
+
-
});
+
-
+
-
//Toggle Teaser
+
-
$("a.collapse").click(function(){
+
-
$(".main_image .block").slideToggle();
+
-
$("a.collapse").toggleClass("show");
+
-
});
+
-
+
-
});//Close Function
+
-
</script>
+
-
</head>
+
-
 
+
-
<div id="teaser">
+
-
<div id="main" class="container">
+
-
<div class="main_image">
+
-
<img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
+
-
<div class="desc" style="display: block; ">
+
-
<div class="block" style="display: block; opacity: 0.85; margin-bottom: 0px; ">
+
-
<h2>Project</h2>
+
-
<small>What is E. lemming?</small>
+
-
+
-
+
-
<p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project" class="teaserlink">Click here to learn more.</a> </p>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div class="image_thumb">
+
-
<ul>
+
-
<li class="">
+
-
<a href="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png"><img src="https://static.igem.org/mediawiki/2010/b/bd/ETHZ_Basel_teaser_project_thumb.png"></a>
+
-
<div class="block">
+
-
<h2>Project</h2>
+
-
<small>What is E. lemming?</small>
+
-
+
-
+
-
<p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project" class="teaserlink">Click here to learn more.</a> </p>
+
-
</div>
+
-
</li>
+
-
<li class="">
+
-
<a href="https://static.igem.org/mediawiki/2010/b/b8/ETHZ_Basel_teaser_molecular_mechanism.png"><img src="https://static.igem.org/mediawiki/2010/7/7a/ETHZ_Basel_teaser_molecular_mechanism_thumb.png"></a>
+
-
<div class="block">
+
-
<h2>Molecular Mechanism</h2>
+
-
<small>How does it work?</small>
+
-
+
-
<p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project/Molecular_Mechanism" class="teaserlink">Click here to learn more.</a> </p>
+
-
</div>
+
-
</li>
+
-
<li class="">
+
-
<a href="https://static.igem.org/mediawiki/2010/d/de/ETHZ_Basel_teaser_info_proc.png"><img src="https://static.igem.org/mediawiki/2010/0/0e/ETHZ_Basel_teaser_info_proc_thumb.png"></a>
+
-
<div class="block">
+
-
<h2>Controlling</h2>
+
-
<small>How is it controlled?</small>
+
-
+
-
<p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project/Information_Processing" class="teaserlink">Click here to learn more.</a> </p>
+
-
</div>
+
-
</li>
+
-
<li class="">
+
-
<a href="https://static.igem.org/mediawiki/2010/3/3f/ETHZ_Basel_teaser_biology.png"><img src="https://static.igem.org/mediawiki/2010/f/f9/ETHZ_Basel_teaser_biology_thumb.png"></a>
+
-
<div class="block">
+
-
<h2>Biology & Wet Laboratory</h2>
+
-
<small>How is it implemented?</small>
+
-
+
-
<p><a href="https://2010.igem.org/Team:ETHZ_Basel/Biology" class="teaserlink">Click here to learn more.</a> </p>
+
-
</div>
+
-
</li>
+
-
<li class="">
+
-
<a href="https://static.igem.org/mediawiki/2010/1/16/ETHZ_Basel_teaser_molecular_models.png"><img src="https://static.igem.org/mediawiki/2010/1/1f/ETHZ_Basel_teaser_molecular_models_thumb.png"></a>
+
-
<div class="block">
+
-
<h2>Molecular Modeling</h2>
+
-
<small>How does modeling help?</small>
+
-
+
-
<p><a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling" class="teaserlink">Click here to learn more.</a> </p>
+
-
</div>
+
-
</li>
+
-
<li class="">
+
-
<a href="https://static.igem.org/mediawiki/2010/2/21/ETHZ_Basel_teaser_information_processing.png"><img src="https://static.igem.org/mediawiki/2010/5/52/ETHZ_Basel_teaser_information_processing_thumb.png"></a>
+
-
<div class="block">
+
-
<h2>Information Processing</h2>
+
-
<small>How is it controlled in detail?</small>
+
-
+
-
<p><a href="https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing" class="teaserlink">Click here to learn more.</a> </p>
+
-
</div>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</html>
+
-
 
+
-
== E. lemming ==
+
-
The core idea of our project is to control chemotaxis of ''E. coli'' by means of light! We'll realize this by hijacking and perturbing the tumbling / directed flagellar movement apparatus. By coupling directed flagellar movement regulating proteins to a '''novel synthetic light-sensitive spatial localization system''', their activity can be controlled reversibly. A light-sensitive dimerizing complex fused to this regulating proteins at a spatially fixed location is induced by light pulses and therefore localization of the two molecules can be manipulated.  Tumbling / directed flagellar movement rates are monitored by image processing algorithms, which are linked to the light-pulse generator. This means that ''E. coli'' tumbling is induced or suppressed simply by pressing a light switch! This synthetic network enables control of single E. coli cells: '''We'll make them move like mindless "Lemmings"''' in the direction they are forced to go!
+
== Sponsors ==
== Sponsors ==
-
[[Image:ETHZ_Basel_sponsors.jpg|none|center|800px|]]
+
{| border="0" align="center"
 +
|<html><img src="https://static.igem.org/mediawiki/2010/6/65/ETHZ_Basel_sponsors.jpg"></html>
 +
|}

Latest revision as of 01:34, 16 November 2010

E. lemming - a remotely controlled living robot by ETH Zurich

  • Motivation & Project Idea

    What is E. lemming?

  • E. lemming - The Movie

    Watch a short animation!

  • Biology & Wet Laboratory

    How is it implemented?

  • Mathematical Modeling

    How does modeling help?

  • Information Processing

    How is it controlled?

  • Achievements

    What was achieved?

  • Team

    Who is behind E. lemming?

Sponsors

Retrieved from "http://2010.igem.org/Team:ETHZ_Basel"