Team:ETHZ Basel

From 2010.igem.org

(Difference between revisions)
 
(14 intermediate revisions not shown)
Line 1: Line 1:
{{ETHZ_Basel10}}
{{ETHZ_Basel10}}
-
{{ETHZ_Basel10_Start}}
+
{{ETHZ_Basel10_Introduction}}
-
= E. lemming: remote controlled ''E. coli'' by ETH Zurich =
+
= E. lemming - a remotely controlled living robot by ETH Zurich =
-
 
+
{{ETHZ_Basel10_Teaser}}
-
<html>
+
-
<head>
+
-
<style type="text/css">
+
-
#teaser {
+
-
margin: 0; padding: 0;
+
-
}
+
-
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 {
+
-
font-family:"Trebuchet MS","Verdana",Arial,sans-serif;
+
-
color: #fff;
+
-
font-size: 2em;
+
-
font-weight: bold;
+
-
margin: 0 0 5px; padding: 10px;
+
-
}
+
-
.main_image small {
+
-
font-weight: bold;
+
-
}
+
-
.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;
+
-
background-image: url()
+
-
border-top: 1px solid #000;
+
-
}
+
-
.main_image a.collapse {
+
-
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;
+
-
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-family:"Trebuchet MS","Verdana",Arial,sans-serif;
+
-
font-size: 12px;
+
-
font-weight: bold;
+
-
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">E. lemming is the 2010 iGEM project of ETH Zurich. We intend to control movement of a single <i>E. coli</i> bacterium by hijacking chemotaxis and monitoring of position and direction of the bacterium by image processing algorithms, which are linked to a controller device. Find out more by watching an animation of the project overview!</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">E. lemming is the 2010 iGEM project of ETH Zurich. We intend to control movement of a single <i>E. coli</i> bacterium by hijacking chemotaxis and monitoring of position and direction of the bacterium by image processing algorithms, which are linked to a controller device. Find out more by watching an animation of the project overview!</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">By coupling chemotactic receptor proteins to a novel synthetic light-sensitive spatial localization system, their activity can be controlled reversibly. To find out more about our project on the molecular level, watch an animation here.</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">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! Click here to found out 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">Informations regarding the biological implementation and an overview about the conducted wet laboratory experiments can be found in this section.</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">Molecular modeling supports analysis of biological systems since the advent of synthetic biology. Find out, how this not only supported wet laboratory experiments by providing time and effort alleviating parameter selection, but also provided a test bench for the information processing part.</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">Implementation of a comprehensive information processing workflow for controlling E. lemming was achieved by combination of microscopy, image processing, cell detection and a controller. Find out more about how this not only created E. lemming but also created a new application for synthetic biology: Gaming!</a> </p>
+
-
</div>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</html>
+
== 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"