Team:Waterloo

From 2013.igem.org

(Difference between revisions)
(Root colour tweak.)
(Description popups when clicking people images.)
Line 278: Line 278:
       .photoSection {
       .photoSection {
         margin-left: 20px;
         margin-left: 20px;
-
      }
 
-
      .headshot {
 
-
        /*width: 100px;*/
 
-
        /*height: 150px;*/
 
-
      }
 
-
      .headshotCaption {
 
-
        font-size: 16px;
 
-
        font-weight: bold;
 
-
      }
 
-
      .headshotWrapper {
 
-
        margin: 0 20px 20px 0;
 
-
        overflow: hidden;
 
-
        float: left;
 
       }
       }
       #otp {
       #otp {
Line 300: Line 287:
         margin-bottom: 6px;
         margin-bottom: 6px;
       }
       }
-
       .faceGallery {
+
       .headshotWrapper {
-
         position: relative;
+
         margin: 0 10px 10px 0;
 +
        overflow: hidden;
 +
        float: left;
       }
       }
-
       .faceGalleryFace {
+
       .personHeadshot {
-
         position: absolute;
+
         margin-left: auto;
-
         cursor: pointer;
+
         margin-right: auto;
-
      }
+
        display: block;
-
      .faceGalleryFace:hover {
+
         border: 5px solid;
         border: 5px solid;
         border-radius: 10px;
         border-radius: 10px;
 +
        border-color: black;
 +
      }
 +
      .personHeadshotClickable:hover {
 +
        cursor: pointer;
         border-color: rgba(255, 255, 255, 0.6);
         border-color: rgba(255, 255, 255, 0.6);
-
        margin: -5px;
 
         animation: borderGlowAnim 0.5s;
         animation: borderGlowAnim 0.5s;
         -webkit-animation: borderGlowAnim 0.5s;
         -webkit-animation: borderGlowAnim 0.5s;
       }
       }
-
       .faceGalleryFullPerson {
+
       .headshotCaption {
 +
        font-size: 16px;
 +
        font-weight: bold;
 +
        text-align: center;
 +
      }
 +
      .personPopup {
         z-index: 100;
         z-index: 100;
         padding: 20px;
         padding: 20px;
Line 321: Line 317:
         box-shadow: 0 0 0 10px rgba(90, 191, 206, 0.3);
         box-shadow: 0 0 0 10px rgba(90, 191, 206, 0.3);
         border-radius: 1px;
         border-radius: 1px;
 +
        width: 500px;
         position: absolute;
         position: absolute;
 +
        left: 440px;
 +
        top: 300px;
       }
       }
-
       .faceGalleryLargeFace {
+
       .personPopupImage {
         float: left;
         float: left;
         margin: 0 10px 0 0;
         margin: 0 10px 0 0;
       }
       }
-
       .faceGalleryInfo {
+
       .personPopupInfo {
         float: left;
         float: left;
 +
        width: 280px;
       }
       }
-
       .faceGalleryInfo > * {
+
       .personPopupInfo > * {
         color: white;
         color: white;
       }
       }
-
       .faceGalleryInfo > p {
+
       .personPopupInfo h2 {
-
        margin-left: 0;
+
         font-size: 20px;
-
      }
+
-
      .faceGalleryInfo h1 {
+
-
         font-size: 28px;
+
         font-weight: bold;
         font-weight: bold;
 +
      }
 +
      .personPopupInfo > p {
 +
        margin-left: 0;
 +
        font-size: 14px;
       }
       }
     </style>
     </style>
Line 372: Line 373:
   };
   };
   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 605: Line 605:
         oncol = 0;
         oncol = 0;
       }
       }
-
       var showing_name = person.name[0] !== '_';
+
       var headshot_wrapper = $('<div class="headshotWrapper"></div>');
-
      root.append($('<div class="headshotWrapper"><img class="headshot" style="height: {2}px" src="{1}" />{0}</div>'.format(showing_name ? '<div class="headshotCaption">{0}</div>'.format(person.name) : '', person.url, img_height)));
+
      var clickable_person_element = new PersonClickableElement(person, img_height);
 +
      headshot_wrapper.append(clickable_person_element.render());
 +
      if (person.name[0] !== '_') {
 +
        headshot_wrapper.append($('<div class="headshotCaption">{0}</div>'.format(person.name)));
 +
      }
 +
      root.append(headshot_wrapper);
       oncol++;
       oncol++;
     }
     }
Line 644: Line 649:
   }
   }
-
   function FaceGalleryPerson(gallery, person, size, place) {
+
   function PersonClickableElement(person, height) {
     this.person = person;
     this.person = person;
-
     this.size = size;
+
     this.height = height;
-
    this.place = place;
+
     this.popup = null;
-
    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.clickable = person.description;
-
     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() {
+
   PersonClickableElement.currentPopup = null;
-
     return this.img;
+
  PersonClickableElement.hidePopup = function() {
 +
     if (PersonClickableElement.currentPopup) {
 +
      PersonClickableElement.currentPopup.remove();
 +
      PersonClickableElement.currentPopup = null;
 +
    }
   };
   };
-
   FaceGalleryPerson.prototype.renderFullPerson = function() {
+
   PersonClickableElement.prototype.showPopup = function(event) {
-
     if (!this.fullPersonRender) {
+
    PersonClickableElement.hidePopup();
-
       var root = $('<div class="faceGalleryFullPerson fadeIn"></div>');
+
     if (!this.popup) {
-
       var large_img = $('<img class="faceGalleryLargeFace" src="{0}" style="width: {1}px;"/>'.format(this.person.url, 200));
+
       var root = $('<div class="personPopup fadeIn"></div>');
-
       var info = $('<div class="faceGalleryInfo"><h2>{0}</h2><p>{1}</p></div>'.format(this.person.name, this.person.description));
+
       var large_img = $('<img class="personPopupImage" src="{0}" style="width: {1}px;"/>'.format(this.person.url, 200));
 +
       var info = $('<div class="personPopupInfo"><h2>{0}</h2><p>{1}</p></div>'.format(this.person.name, this.person.description));
       root.append(large_img);
       root.append(large_img);
       root.append(info);
       root.append(info);
-
       this.fullPersonRender = root;
+
       this.popup = root;
 +
      event.stopPropagation();
     }
     }
     // For some reason the old click handler is destroyed when this is hidden. Create each time.
     // For some reason the old click handler is destroyed when this is hidden. Create each time.
-
     this.fullPersonRender.click(function (e) {
+
     this.popup.click(function (e) {
       e.stopPropagation();
       e.stopPropagation();
     });
     });
-
     return this.fullPersonRender;
+
     $(document.body).append(this.popup);
 +
    PersonClickableElement.currentPopup = this.popup;
   };
   };
-
 
+
   PersonClickableElement.prototype.render = function() {
-
 
+
     var img = $('<img class="personHeadshot" src="{0}" style="height: {1}px;" title="{2}"/>'.format(this.person.url, this.height, this.person.name));
-
   function FaceGallery(width, height, center_img_url, four_sides_people) {
+
     if (this.clickable) {
-
     this.width = width;
+
       img.addClass('personHeadshotClickable');
-
    this.height = height;
+
      img.click(this.showPopup.bind(this));
-
    this.url = center_img_url;
+
-
    this.spacing = 10;
+
-
    this.currentFocus = null;
+
-
    this.focusRoot = $('<div class="faceGalleryFocus"></div>');
+
-
    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);
+
-
    this.personImgSize = Math.min((width - maxXPeople * this.spacing) / maxXPeople, (height - maxYPeople * this.spacing) / maxYPeople);
+
-
     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));
+
-
      }
+
     }
     }
 +
    return img;
   }
   }
-
  FaceGallery.prototype.hasFocus = function() {
 
-
    return this.currentFocus != null;
 
-
  }
 
-
  FaceGallery.prototype.getCornerSize = function() {
 
-
    return this.spacing + this.personImgSize;
 
-
  };
 
-
  FaceGallery.prototype.getImagePlacement = function(side, i) {
 
-
    var place = { top: 0, left: 0 };
 
-
    switch (side) {
 
-
      case 2:
 
-
        place.top = (this.getCornerSize() + this.height + this.spacing);
 
-
        break;
 
-
      case 1:
 
-
        place.left = (this.getCornerSize() + this.width + this.spacing);
 
-
        break;
 
-
      default:
 
-
    }
 
-
    place[side % 2 == 0 ? 'left' : 'top'] = this.getCornerSize() + (i * (this.personImgSize + this.spacing));
 
-
    return place;
 
-
  };
 
-
  FaceGallery.prototype.render = function() {
 
-
    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()));
 
-
    root.append(center_image);
 
-
    for (var side = 0; side < 4; side++) {
 
-
      for (var i = 0; i < this.people[side].length; i++) {
 
-
        var gallery_person = this.people[side][i];
 
-
        root.append(gallery_person.img);
 
-
      }
 
-
    }
 
-
    return root;
 
-
  };
 
-
  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) {
 
-
      // For some reason it escapes ampersands in javascript...
 
-
      if (this.currentFocus[ 0 ] == gallery_person) {
 
-
        return;
 
-
      }
 
-
      this.unfocusPerson(false);
 
-
    }
 
-
    this.currentFocus = [gallery_person, side, i];
 
-
    var full_person_render = gallery_person.renderFullPerson();
 
-
    var img_top = this.getImagePlacement(side, i).top;
 
-
    full_person_render.css('top', Math.min(Math.max(img_top - 50, this.getCornerSize() + 10), this.height - 200));
 
-
    full_person_render.css('left', 120);
 
-
    this.focusRoot.append(full_person_render);
 
-
 
-
    $('.faceGalleryFace').removeClass('fadeIn').addClass('fadeOut');
 
-
  };
 
   function setupPhotos() {
   function setupPhotos() {
 +
    var paul_reginato = {
 +
      name: 'Paul Reginato',
 +
      url: 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG',
 +
      description: "As the Assistant Director of Waterloo iGEM, I oversee the team’s operation by communicating with team members, professors, and others who contribute to our team. I lead team meetings, plan the trips to the jamborees, handle recruitment, handle finances, and ensure that deadlines are met. I also assist with tasks in the Lab and Design and Human Practices subdivisions of the team. I am a third-year student majoring in Biomedical Sciences as well as a candidate for the Psychology minor and Global Experience Certificate."
 +
    };
 +
     var admins = [
     var admins = [
       {
       {
Line 783: Line 710:
     var team_m13 = [
     var team_m13 = [
-
       {
+
       paul_reginato,
-
        name: 'Paul Reginato',
+
-
        url: 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG',
+
-
        description: "As the Assistant Director of Waterloo iGEM, I oversee the team’s operation by communicating with team members, professors, and others who contribute to our team. I lead team meetings, plan the trips to the jamborees, handle recruitment, handle finances, and ensure that deadlines are met. I also assist with tasks in the Lab and Design and Human Practices subdivisions of the team. I am a third-year student majoring in Biomedical Sciences as well as a candidate for the Psychology minor and Global Experience Certificate."
+
-
      },
+
       {
       {
         name: 'Emily Li',
         name: 'Emily Li',
Line 860: Line 783:
         description: "I'm in the Viral Packaging group. We're trying to develop a mathematical model of M13 assembly inside bacteria. "
         description: "I'm in the Viral Packaging group. We're trying to develop a mathematical model of M13 assembly inside bacteria. "
       },
       },
-
       {
+
       paul_reginato,
-
        name: 'Paul Reginato',
+
-
        url: 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG',
+
-
        description: ""
+
-
      },
+
       {
       {
         name: 'Seyed Ali Madani Tonekaboni',
         name: 'Seyed Ali Madani Tonekaboni',
Line 1,200: Line 1,119:
   });
   });
   $(document).click(function(e) {
   $(document).click(function(e) {
-
     if (faceGallery) {
+
     PersonClickableElement.hidePopup();
-
      if (e.which === 1) {
+
-
        faceGallery.unfocusPerson(true);
+
-
      }
+
-
    }
+
   });
   });
})();
})();

Revision as of 22:49, 4 September 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

Administrators

Lab & Design

M13 Group

BxB1 Group

Φ C31 Group

Human Practices

Mathematical Modelling

Advisors

Graduate Student Advisors

 

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