Team:ETH Zurich/project/overview/grid

From 2014.igem.org

(Difference between revisions)
(→Emergence of the pattern)
 
(131 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:ETH_Zurich/tpl/head|Test}}
+
== Emergence of the pattern ==
-
 
+
<html>
<html>
-
<article id="article">
 
<center>
<center>
-
<h1>Images in the Tooltip</h1>
+
<div id='cont' style="text-align:justify; width:950px;">
-
<IMG SRC="/wiki/images/d/d9/ETH_Zurich_GridGlowing.png" usemap="#map" id="mapTest">
+
Every cell of the cellular automaton on the grid below computes an XOR of the two signals coming from above in the figure below. XOR means that if only one of the two signals (red or blue) is received, the cell receiving should turn ON (and show green fluorescence), whereas if none or both of the signals are received, the cell should stay OFF (do nothing).
-
<map id="map" name="map">
+
<br/>
-
<area shape="circle" title="" alt="" coords="281,26,17" href="javascript:void" target="" id="cell1" name="cell1" class="showTip L1" />
+
<br/>
-
</map>
+
<center>
 +
<img src='https://static.igem.org/mediawiki/2014/6/6b/ETHZ_XOR-00.png' width='150px' style='padding:0 1em;'/>
 +
<img src='https://static.igem.org/mediawiki/2014/c/c2/ETHZ_XOR-01.png' width='150px' style='padding:0 1em;'/>
 +
<img src='https://static.igem.org/mediawiki/2014/e/e6/ETHZ_XOR-10.png' width='150px' style='padding:0 1em;'/>
 +
<img src='https://static.igem.org/mediawiki/2014/5/5c/ETHZ_XOR-11.png' width='150px' style='padding:0 1em;'/>
 +
</center>
 +
<br/>
 +
</div>
 +
 
 +
<div id='cont' style="background-image: url('https://static.igem.org/mediawiki/2014/d/d8/ETH_Zurich_background.png'); width:950px;">
 +
<br/>
 +
<br/>
 +
 
 +
<h3 style='font-size:14; color:#FFFFFF; padding:0 10%; text-align:center;'>
 +
Pass the mouse on the different colonies to understand how they process the signals coming from the top and make the pattern appear.
 +
<br/>
 +
<br/>
 +
Input<br/>
 +
3OC12HSL added to the first well
 +
</h3>
 +
<center>
 +
<img src='https://static.igem.org/mediawiki/2014/1/19/ETH_Zurich_Arrow.png' height='50px'/>
 +
</center>
 +
<IMG SRC="https://static.igem.org/mediawiki/2014/9/9a/ETH_Zurich_GridGlowing.gif" usemap="#map" id="mapTest">
 +
<map id="map" name="map"><area shape="circle" alt="" title="" coords="281,27,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="307,81,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="251,84,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="225,141,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="251,197,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="337,141,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="169,254,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="309,197,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="364,312,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="420,311,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="393,254,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="197,199,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="141,311,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="196,311,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="140,427,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="225,370,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="252,427,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="196,426,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="55,483,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="26,540,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="82,541,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="365,427,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="421,425,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="476,426,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="532,538,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="476,541,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="337,370,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="505,484,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="82,427,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="364,199,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="112,370,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="309,426,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="449,370,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="57,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="112,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="169,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="225,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="337,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="394,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="450,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="505,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="82,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="140,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="196,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="365,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="420,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="476,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="532,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="57,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="112,141,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="169,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="394,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="450,141,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="505,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,198,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="82,198,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="140,198,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="421,198,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="476,198,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="534,198,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="282,142,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="57,255,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="112,255,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="226,255,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="282,256,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="338,255,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="450,255,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="506,255,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,311,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="82,311,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="253,311,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="308,311,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="476,311,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="532,311,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="57,369,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="169,369,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="282,369,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="394,369,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="506,369,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,426,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="532,426,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="112,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="169,484,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="225,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="337,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="394,484,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="450,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="282,484,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="140,541,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="196,541,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="253,541,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="308,541,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="365,541,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="420,540,17" href="javascript:void" id="blue0" name="blue0" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
 +
<br/>
 +
<br/>
 +
</div>
<script type="text/javascript">
<script type="text/javascript">
Line 53: Line 78:
if (!initial)
if (!initial)
{
{
-
     var container =  $('#article');
+
     var container =  $('#cont');
-
     var imgWidth = container.width();
+
     var imgWidth = 0.8*container.width();
   $( "#mapTest").each(function() {
   $( "#mapTest").each(function() {
Line 67: Line 92:
$(document).ready(function(){
$(document).ready(function(){
   $('#mapTest').mapster({
   $('#mapTest').mapster({
-
     fillColor: '2C2F3D',
+
     fillOpacity: 0,
-
     fillOpacity: 1,
+
     fillColor: 'FFFFFF',
-
     singleSelect: true,
+
     isSelectable: false,
     showToolTip: true,
     showToolTip: true,
-
    onShowToolTip: function() {alert('foo');},
 
     mapKey: 'name',
     mapKey: 'name',
-
    /* toolTipClose: ["tooltip-click", "area-click"], */
+
toolTipContainer: '<div style="fillOpacity:1; border: 2px solid black; background: #EEEEEE; width:200px; padding:4px; margin: 4px; -moz-box-shadow: 3px 3px 5px #535353; ' +
 +
        '-webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; ' +
 +
        'border-radius: 6px 6px 6px 6px; opacity: 1;"></div>',
     areas: [
     areas: [
             {
             {
-
                 key: "cell1",
+
                 key: "red0",
-
                 toolTip: "Blah!"
+
                 toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/8/8b/ETH_Zurich_Red0.png"/> ').contents()
 +
            },
 +
 
 +
            {
 +
                key: "blue0",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/0/06/ETH_Zurich_Blue0.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "red2",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/d/d7/ETH_Zurich_Red2.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "blue2",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f6/ETH_Zurich_Blue2.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "redon",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/c/c5/ETH_Zurich_Redon.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "redonlux",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/7c/ETH_Zurich_Redonlux.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "redonlas",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/e/e5/ETH_Zurich_Redonlas.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "blueonlux",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/72/ETH_Zurich_Blueonlux.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "blueonlas",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f3/ETH_Zurich_Blueonlas.png" />').contents()
             }
             }
 +
             ]
             ]
   });
   });
Line 89: Line 156:
</script>
</script>
-
</center>
 
-
</article>
 
</html>
</html>
-
{{:Team:ETH_Zurich/tpl/foot}}
 

Latest revision as of 02:00, 18 October 2014

Emergence of the pattern

Every cell of the cellular automaton on the grid below computes an XOR of the two signals coming from above in the figure below. XOR means that if only one of the two signals (red or blue) is received, the cell receiving should turn ON (and show green fluorescence), whereas if none or both of the signals are received, the cell should stay OFF (do nothing).




Pass the mouse on the different colonies to understand how they process the signals coming from the top and make the pattern appear.

Input
3OC12HSL added to the first well



Retrieved from "http://2014.igem.org/Team:ETH_Zurich/project/overview/grid"