Team:Waterloo

From 2013.igem.org

(Difference between revisions)
(Start of new team gallery design. Not done yet, just updating so you can see what I have so far.)
(New team design with artwork.)
Line 5: Line 5:
     TODO:
     TODO:
-
    - New team page with art and zooming photos.
 
   -->
   -->
   <head>
   <head>
Line 133: Line 132:
       }
       }
-
       h1 {
+
       h1, h2 {
-
         border-bottom: 0;
+
         border-bottom: 0 !important;
       }
       }
       .navBar h1 {
       .navBar h1 {
Line 174: Line 173:
         100% {color: yellow;}
         100% {color: yellow;}
       }
       }
-
 
       @-webkit-keyframes startGlow /* Safari and Chrome */ {
       @-webkit-keyframes startGlow /* Safari and Chrome */ {
         0%  {color: white;}
         0%  {color: white;}
         100% {color: yellow;}
         100% {color: yellow;}
       }
       }
 +
 +
      @keyframes fadeOutAnim {
 +
        0%  {opacity: 1;}
 +
        100% {opacity: 0.4;}
 +
      }
 +
      @-webkit-keyframes fadeOutAnim /* Safari and Chrome */ {
 +
        0%  {opacity: 1;}
 +
        100% {opacity: 0.4;}
 +
      }
 +
 +
      @keyframes fadeInAnim {
 +
        0%  {opacity: 0.4;}
 +
        100% {opacity: 1;}
 +
      }
 +
      @-webkit-keyframes fadeInAnim /* Safari and Chrome */ {
 +
        0%  {opacity: 0.4;}
 +
        100% {opacity: 1;}
 +
      }
 +
 +
      .fadeIn {
 +
        opacity: 1;
 +
        animation: fadeInAnim 0.5s;
 +
        -webkit-animation: fadeInAnim 0.5s;
 +
      }
 +
      .fadeOut {
 +
        opacity: 0.4;
 +
        animation: fadeOutAnim 0.5s;
 +
        -webkit-animation: fadeOutAnim 0.5s;
 +
      }
 +
 +
      @keyframes borderGlowAnim {
 +
        0%  {border-color: rgba(255, 255, 255, 0);}
 +
        100% {border-color: rgba(255, 255, 255, 0.6);}
 +
      }
 +
      @-webkit-keyframes borderGlowAnim /* Safari and Chrome */ {
 +
        0%  {border-color: rgba(255, 255, 255, 0);}
 +
        100% {border-color: rgba(255, 255, 255, 0.6);}
 +
      }
 +
       .navBar .pageLinks a {
       .navBar .pageLinks a {
Line 240: Line 277:
       .faceGalleryFace {
       .faceGalleryFace {
         position: absolute;
         position: absolute;
 +
        cursor: pointer;
 +
      }
 +
      .faceGalleryFace:hover {
 +
        border: 5px solid;
 +
        border-radius: 10px;
 +
        border-color: rgba(255, 255, 255, 0.6);
 +
        margin: -5px;
 +
        animation: borderGlowAnim 0.5s;
 +
        -webkit-animation: borderGlowAnim 0.5s;
 +
      }
 +
      .faceGalleryFullPerson {
 +
        z-index: 100;
 +
        padding: 20px;
 +
        background-color: rgb(90, 191, 206);
 +
        box-shadow: 0 0 0 10px rgba(90, 191, 206, 0.3);
 +
        border-radius: 1px;
 +
        position: absolute;
 +
      }
 +
      .faceGalleryLargeFace {
 +
        float: left;
 +
        margin: 0 10px 0 0;
 +
      }
 +
      .faceGalleryInfo {
 +
        float: left;
 +
      }
 +
      .faceGalleryInfo > * {
 +
        color: white;
 +
      }
 +
      .faceGalleryInfo > p {
 +
        margin-left: 0;
 +
      }
 +
      .faceGalleryInfo h1 {
 +
        font-size: 28px;
 +
        font-weight: bold;
       }
       }
     </style>
     </style>
Line 273: Line 344:
   };
   };
   var navBar = null;
   var navBar = null;
 +
  var faceGallery = null;
   var page_idx_map = {};
   var page_idx_map = {};
   var layer_factors = [0, 1, 0];
   var layer_factors = [0, 1, 0];
Line 302: Line 374:
     this.name = name;
     this.name = name;
     this.url = image_url;
     this.url = image_url;
-
     this.title = title;
+
     this.title = title ? title : '';
-
     this.team = team;
+
     this.team = team ? team : '';
-
     this.description = description;
+
     this.description = description ? description : '';
   }
   }
Line 498: Line 570:
     return root;
     return root;
   }
   }
 +
 +
  function FaceGalleryPerson(gallery, person, size, place) {
 +
    this.person = person;
 +
    this.size = size;
 +
    this.place = place;
 +
    this.img = $('<img class="faceGalleryFace" src="{0}" style="width: {1}px; height: {1}px;" title="{2}"/>'.format(this.person.url, this.size, this.person.name));
 +
    this.fullPersonRender = null;
 +
 +
    this.img.css('top', this.place.top);
 +
    this.img.css('left', this.place.left);
 +
 +
    var self = this;
 +
    this.img.hover(function() {
 +
      if (gallery.hasFocus()) {
 +
        self.img.removeClass('fadeOut').addClass('fadeIn');
 +
      }
 +
    }, function() {
 +
      if (gallery.hasFocus()) {
 +
        self.img.removeClass('fadeIn').addClass('fadeOut');
 +
      }
 +
    });
 +
  }
 +
  FaceGalleryPerson.prototype.getEventRoot = function() {
 +
    return this.img;
 +
  };
 +
  FaceGalleryPerson.prototype.renderFullPerson = function() {
 +
    if (!this.fullPersonRender) {
 +
      var root = $('<div class="faceGalleryFullPerson fadeIn"></div>');
 +
      var large_img = $('<img class="faceGalleryLargeFace" src="{0}" style="width: {1}px;"/>'.format(this.person.url, 200));
 +
      var info = $('<div class="faceGalleryInfo"><h2>{0}</h2><h3>{1}</h3><p>{2}</p></div>'.format(this.person.name, this.person.title, this.person.description));
 +
      root.append(large_img);
 +
      root.append(info);
 +
      this.fullPersonRender = root;
 +
    }
 +
    // For some reason the old click handler is destroyed when this is hidden. Create each time.
 +
    this.fullPersonRender.click(function (e) {
 +
      e.stopPropagation();
 +
    });
 +
    return this.fullPersonRender;
 +
  };
 +
   function FaceGallery(width, height, center_img_url, four_sides_people) {
   function FaceGallery(width, height, center_img_url, four_sides_people) {
Line 503: Line 616:
     this.height = height;
     this.height = height;
     this.url = center_img_url;
     this.url = center_img_url;
-
    this.people = four_sides_people;
 
     this.spacing = 10;
     this.spacing = 10;
     this.currentFocus = null;
     this.currentFocus = null;
 +
    this.focusRoot = $('<div class="faceGalleryFocus"></div>');
     var maxXPeople = Math.max(four_sides_people[0].length, four_sides_people[2].length);
     var maxXPeople = Math.max(four_sides_people[0].length, four_sides_people[2].length);
     var maxYPeople = Math.max(four_sides_people[1].length, four_sides_people[3].length);
     var maxYPeople = Math.max(four_sides_people[1].length, four_sides_people[3].length);
     this.personImgSize = Math.min((width - maxXPeople * this.spacing) / maxXPeople, (height - maxYPeople * this.spacing) / maxYPeople);
     this.personImgSize = Math.min((width - maxXPeople * this.spacing) / maxXPeople, (height - maxYPeople * this.spacing) / maxYPeople);
     if (this.personImgSize < 5) this.personImgSize = 5;
     if (this.personImgSize < 5) this.personImgSize = 5;
 +
 +
    this.people = [];
 +
    for (var side = 0; side < 4; side++) {
 +
      this.people[side] = [];
 +
      for (var i = 0; i < four_sides_people[side].length; i++) {
 +
        var gallery_person = new FaceGalleryPerson(this, four_sides_people[side][i], this.personImgSize, this.getImagePlacement(side, i));
 +
        this.people[side][i] = gallery_person;
 +
        gallery_person.getEventRoot().click(this.focusPerson.bind(this, gallery_person, side, i));
 +
      }
 +
    }
 +
  }
 +
  FaceGallery.prototype.hasFocus = function() {
 +
    return this.currentFocus != null;
   }
   }
   FaceGallery.prototype.getCornerSize = function() {
   FaceGallery.prototype.getCornerSize = function() {
Line 518: Line 644:
     switch (side) {
     switch (side) {
       case 2:
       case 2:
-
         place.top = (this.getCornerSize() + this.height + this.spacing) + 'px';
+
         place.top = (this.getCornerSize() + this.height + this.spacing);
         break;
         break;
       case 1:
       case 1:
-
         place.left = (this.getCornerSize() + this.width + this.spacing) + 'px';
+
         place.left = (this.getCornerSize() + this.width + this.spacing);
         break;
         break;
       default:
       default:
     }
     }
-
     place[side % 2 == 0 ? 'left' : 'top'] = this.getCornerSize() + (i * (this.personImgSize + this.spacing)) + 'px';
+
     place[side % 2 == 0 ? 'left' : 'top'] = this.getCornerSize() + (i * (this.personImgSize + this.spacing));
     return place;
     return place;
   };
   };
   FaceGallery.prototype.render = function() {
   FaceGallery.prototype.render = function() {
     var root = $('<div class="faceGallery"></div>');
     var root = $('<div class="faceGallery"></div>');
 +
    root.append(this.focusRoot);
     var center_image = $('<img src="{0}" style="width: {1}px; margin: {2}px"/>'.format(this.url, this.width, this.getCornerSize()));
     var center_image = $('<img src="{0}" style="width: {1}px; margin: {2}px"/>'.format(this.url, this.width, this.getCornerSize()));
     root.append(center_image);
     root.append(center_image);
     for (var side = 0; side < 4; side++) {
     for (var side = 0; side < 4; side++) {
       for (var i = 0; i < this.people[side].length; i++) {
       for (var i = 0; i < this.people[side].length; i++) {
-
         var person = this.people[side][i];
+
         var gallery_person = this.people[side][i];
-
        var img = $('<img class="faceGalleryFace" src="{0}" style="width: {1}px; height: {1}px;"/>'.format(person.url, this.personImgSize));
+
         root.append(gallery_person.img);
-
 
+
-
        // img.hover(this.focusPerson.bind(this, img, side, i), this.blurPerson.bind(this, img, side, i));
+
-
        img.hover(this.focusPerson.bind(this, img, side, i));
+
-
 
+
-
        var img_place = this.getImagePlacement(side, i);
+
-
        img.css('top', img_place.top);
+
-
        img.css('left', img_place.left);
+
-
         root.append(img);
+
       }
       }
     }
     }
     return root;
     return root;
   };
   };
-
   FaceGallery.prototype.focusPerson = function(img, side, i) {
+
  FaceGallery.prototype.unfocusPerson = function(unfade) {
 +
    if (this.currentFocus) {
 +
      this.focusRoot.empty();
 +
      this.currentFocus = null;
 +
      if (unfade) {
 +
        $('.faceGalleryFace').removeClass('fadeOut').addClass('fadeIn');
 +
      }
 +
    }
 +
  };
 +
   FaceGallery.prototype.focusPerson = function(gallery_person, side, i, e) {
 +
    e.stopPropagation();
     if (this.currentFocus) {
     if (this.currentFocus) {
       // For some reason it escapes ampersands in javascript...
       // For some reason it escapes ampersands in javascript...
-
       if (this.currentFocus.img == img) {
+
       if (this.currentFocus[ 0 ] == gallery_person) {
         return;
         return;
       }
       }
-
       this.blurPerson(this.currentFocus[0], this.currentFocus[1], this.currentFocus[2]);
+
       this.unfocusPerson(false);
     }
     }
-
     this.currentFocus = [img, side, i];
+
     this.currentFocus = [gallery_person, side, i];
-
     var new_size = this.personImgSize * 3;
+
     var full_person_render = gallery_person.renderFullPerson();
-
     var new_place = {
+
     var img_top = this.getImagePlacement(side, i).top;
-
      top: this.height / 2 - this.personImgSize / 2,
+
     full_person_render.css('top', Math.min(Math.max(img_top - 50, this.getCornerSize() + 10), this.height - 200));
-
      left: this.width / 2 - this.personImgSize / 2
+
    full_person_render.css('left', 120);
-
    };
+
     this.focusRoot.append(full_person_render);
-
     img.stop().animate({ width: new_size, height: new_size, left: new_place.left, top: new_place.top }, { duration: 500 });
+
 
-
  };
+
     $('.faceGalleryFace').removeClass('fadeIn').addClass('fadeOut');
-
  FaceGallery.prototype.blurPerson = function(img, side, i) {
+
-
    var new_size = this.personImgSize;
+
-
     var new_place = this.getImagePlacement(side, i);
+
-
     img.stop().animate({ width: new_size, height: new_size, left: new_place.left, top: new_place.top }, { duration: 500 });
+
   };
   };
Line 604: Line 729:
     ];
     ];
-
     var face_gallery = new FaceGallery(441, 960, art_url, [admins, team, hp_team, math_team]);
+
     faceGallery = new FaceGallery(441, 960, art_url, [admins, team, hp_team, math_team]);
-
     $('#teamPhotos').append(face_gallery.render());
+
     $('#teamPhotos').append(faceGallery.render());
     var setupGroup = function(id, cols, img_height, grid_data) {
     var setupGroup = function(id, cols, img_height, grid_data) {
Line 862: Line 987:
         }
         }
         break;
         break;
 +
    }
 +
  });
 +
  $(document).click(function(e) {
 +
    if (faceGallery) {
 +
      if (e.which === 1) {
 +
        faceGallery.unfocusPerson(true);
 +
      }
     }
     }
   });
   });
Line 1,019: Line 1,151:
           -->
           -->
 +
 +
          <div style="height: 20px;">&nbsp;</div>
           <div class="clearFix"></div>
           <div class="clearFix"></div>

Revision as of 01:28, 12 August 2013

Abstract

Due to its nature as an information-encoding molecule, the use of DNA as an intercellular messaging molecule would enable more information-rich communication between populations of cells than traditional AHL-based messaging. The first demonstration of DNA messaging was published by the Endy group at Stanford University in late 2012, wherein DNA encoding instructions for expression of fluorescence and antibiotic resistance were transmitted from one bacterial population to another, carried by M13 bacteriophage particles.

Incorporation of well-established in vivo DNA modification techniques into DNA messaging will diversify and extend potential intercellular communication programs, and will enable the integration of recent developments in DNA digital logic with DNA messaging.

The goal of our project is to place on a DNA message a switch that can be flipped in receiver cells under inducible conditions, and whose state determines whether or not the DNA message is retransmitted from receiver cells to a population of secondary receiver cells. The switch consists of a promoter that can be inverted using a serine integrase, leading to transcription of different genes. It is directly inspired by the recombinase addressable data (RAD) module published by the Endy group in early 2012.

We have synthesized four such DNA switches and will soon test the ability of PhiC31 and Bxb1 serine integrases, along with the respective recombination directionality factors (RDFs), to control their states. We have also produced constructs that we will use to attempt to control the production of M13 viral particles containing a DNA message and we will test these soon. We will integrate these efforts to demonstrate our goal of incorporating digital DNA logic into DNA messaging. Through this work, we will broaden the horizons of engineered intercellular communication.

Design

Ottawa's Collaboration

Video

Results

Future Aspirations

Biobricks

  • Hpdo with no gene 8
  • Bxb1 rdf
  • Bxb1 int
  • Bxb1 switch
  • BXB1 switch flipped
  • ΦC31 rdf
  • ΦC31 int
  • ΦC31 switch
  • ΦC31 switch flipped

Switch Modelling

x y z

Population & Infection Modelling

a b c

Phage Particle Production Modelling

a b c

Intent to Invent

Vlogs

Special Project

Intent to Invent

Laboratory

Safety

This page is still in progress

Sponsors

 

Advisors

Graduate Student Advisors

 

Retrieved from "http://2013.igem.org/Team:Waterloo"