Team:Waterloo

From 2013.igem.org

(Difference between revisions)
(Turned gallery into a slideshow.)
(Start of new team gallery design. Not done yet, just updating so you can see what I have so far.)
Line 166: Line 166:
       }
       }
       .pageLinks {
       .pageLinks {
-
         margin: 40px 0 10px 0;
+
         margin: 30px 0 10px 0;
       }
       }
Line 233: Line 233:
         width: 100%;
         width: 100%;
         height: 100%;
         height: 100%;
 +
      }
 +
 +
      .faceGallery {
 +
        position: relative;
 +
      }
 +
      .faceGalleryFace {
 +
        position: absolute;
       }
       }
     </style>
     </style>
Line 278: Line 285:
   var igem_logo_url = 'https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png';
   var igem_logo_url = 'https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png';
   var waterloo_logo_url = 'https://static.igem.org/mediawiki/2013/0/08/Igem_logo.png';
   var waterloo_logo_url = 'https://static.igem.org/mediawiki/2013/0/08/Igem_logo.png';
 +
  var art_url = 'https://static.igem.org/mediawiki/igem.org/6/64/Waterloo_igem_main_art.jpg';
   if (!String.prototype.format) {
   if (!String.prototype.format) {
Line 289: Line 297:
       });
       });
     };
     };
 +
  }
 +
 +
  function Person(name, image_url, title, team, description) {
 +
    this.name = name;
 +
    this.url = image_url;
 +
    this.title = title;
 +
    this.team = team;
 +
    this.description = description;
   }
   }
Line 482: Line 498:
     return root;
     return root;
   }
   }
 +
 +
  function FaceGallery(width, height, center_img_url, four_sides_people) {
 +
    this.width = width;
 +
    this.height = height;
 +
    this.url = center_img_url;
 +
    this.people = four_sides_people;
 +
    this.spacing = 10;
 +
    this.currentFocus = null;
 +
    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;
 +
  }
 +
  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) + 'px';
 +
        break;
 +
      case 1:
 +
        place.left = (this.getCornerSize() + this.width + this.spacing) + 'px';
 +
        break;
 +
      default:
 +
    }
 +
    place[side % 2 == 0 ? 'left' : 'top'] = this.getCornerSize() + (i * (this.personImgSize + this.spacing)) + 'px';
 +
    return place;
 +
  };
 +
  FaceGallery.prototype.render = function() {
 +
    var root = $('<div class="faceGallery"></div>');
 +
    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 person = this.people[side][i];
 +
        var img = $('<img class="faceGalleryFace" src="{0}" style="width: {1}px; height: {1}px;"/>'.format(person.url, this.personImgSize));
 +
 +
        // 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;
 +
  };
 +
  FaceGallery.prototype.focusPerson = function(img, side, i) {
 +
    if (this.currentFocus) {
 +
      // For some reason it escapes ampersands in javascript...
 +
      if (this.currentFocus.img == img) {
 +
        return;
 +
      }
 +
      this.blurPerson(this.currentFocus[0], this.currentFocus[1], this.currentFocus[2]);
 +
    }
 +
    this.currentFocus = [img, side, i];
 +
    var new_size = this.personImgSize * 3;
 +
    var new_place = {
 +
      top: this.height / 2 - this.personImgSize / 2,
 +
      left: this.width / 2 - this.personImgSize / 2
 +
    };
 +
    img.stop().animate({ width: new_size, height: new_size, left: new_place.left, top: new_place.top }, { duration: 500 });
 +
  };
 +
  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 });
 +
  };
   function setupPhotos() {
   function setupPhotos() {
 +
    var admins = [
 +
      new Person('Peter Hong', 'https://static.igem.org/mediawiki/2013/5/5b/Waterloo_Peter_Hong.jpg'),
 +
      new Person('Linda Yang', 'https://static.igem.org/mediawiki/2013/d/d1/Waterloo_Linda_Yang.jpg')
 +
    ];
 +
    var team = [
 +
      new Person('Paul Reginato', 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG'),
 +
      new Person('Aaron Bender', 'https://static.igem.org/mediawiki/2013/5/59/Waterloo_aaron.JPG'),
 +
      new Person('Hina Bandukwala', 'https://static.igem.org/mediawiki/2013/0/0b/Waterloo_hina.JPG'),
 +
      new Person('Emily Li', 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_emily.JPG'),
 +
      new Person('Rummy Chowdhury', 'https://static.igem.org/mediawiki/2013/0/07/Waterloo_rummy.JPG'),
 +
      new Person('Julia Manalil', 'https://static.igem.org/mediawiki/2013/a/ae/Waterloo_julia.JPG'),
 +
      new Person('Steven ten Holder', 'https://static.igem.org/mediawiki/2013/4/4f/Waterloo_steven.JPG'),
 +
      new Person('Urooj Kishor', 'https://static.igem.org/mediawiki/2013/0/04/Waterloo_Urooj_2.jpg'),
 +
      new Person('Jama Hagi-Yusuf', 'https://static.igem.org/mediawiki/2013/a/a1/Waterloo_jama.jpg'),
 +
      new Person('Chris Morcos', 'https://static.igem.org/mediawiki/2013/6/65/Waterloo_chris.JPG'),
 +
      new Person('Peivand Sadat Mousavi', 'https://static.igem.org/mediawiki/2013/7/7a/Waterloo_Peivand_2.jpg')
 +
    ];
 +
    var math_team = [
 +
      new Person('Drew Neish', 'https://static.igem.org/mediawiki/igem.org/2/21/Waterloo_Drew_Neish.png'),
 +
      new Person('James Hawley', 'https://static.igem.org/mediawiki/igem.org/1/10/Waterloo_James_Hawley.jpg'),
 +
      new Person('Matt Smart', 'https://static.igem.org/mediawiki/igem.org/5/54/Waterloo_Matt_Smart.jpg'),
 +
      new Person('Paul Reginato', 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG'),
 +
      new Person('Seyed Ali Madani Tonekaboni', 'https://static.igem.org/mediawiki/igem.org/e/eb/Waterloo_Seyed_Ali_Madani_Tonekaboni.jpg'),
 +
      new Person('Vedang Vyas', 'https://static.igem.org/mediawiki/igem.org/2/2b/Waterloo_Vedang_Vyas.jpg')
 +
    ];
 +
    var hp_team = [
 +
      new Person('Anjali Arya', 'https://static.igem.org/mediawiki/igem.org/b/b6/Anjali_Arya.jpg'),
 +
      new Person('Daniel Zhang', 'https://static.igem.org/mediawiki/igem.org/a/a2/Waterloo_Daniel_Zhang.jpg'),
 +
      new Person('Lucy Hu', 'https://static.igem.org/mediawiki/igem.org/9/9f/Waterloo_Lucy_Hu.jpeg'),
 +
      new Person('Mudit Kalia', 'https://static.igem.org/mediawiki/igem.org/2/22/Waterloo_Mudit_Kalia.jpg'),
 +
      new Person('Suzie Alexander', 'https://static.igem.org/mediawiki/igem.org/c/c3/Waterloo_Suzie_Alexander.jpg')
 +
    ];
 +
 +
    var face_gallery = new FaceGallery(441, 960, art_url, [admins, team, hp_team, math_team]);
 +
    $('#teamPhotos').append(face_gallery.render());
 +
     var setupGroup = function(id, cols, img_height, grid_data) {
     var setupGroup = function(id, cols, img_height, grid_data) {
       $(id).append(createPhotoGrid(grid_data, cols, img_height));
       $(id).append(createPhotoGrid(grid_data, cols, img_height));
     };
     };
-
    setupGroup('#administratorPhotos', 3, 150,
 
-
      {
 
-
        'Peter Hong': 'https://static.igem.org/mediawiki/2013/5/5b/Waterloo_Peter_Hong.jpg',
 
-
        'Linda Yang': 'https://static.igem.org/mediawiki/2013/d/d1/Waterloo_Linda_Yang.jpg'
 
-
      }
 
-
    );
 
-
    setupGroup('#labTeamPhotos', 4, 150,
 
-
      {
 
-
        'Paul Reginato': 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG',
 
-
        'Aaron Bender': 'https://static.igem.org/mediawiki/2013/5/59/Waterloo_aaron.JPG',
 
-
        'Hina Bandukwala': 'https://static.igem.org/mediawiki/2013/0/0b/Waterloo_hina.JPG',
 
-
        'Emily Li': 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_emily.JPG',
 
-
        'Rummy Chowdhury': 'https://static.igem.org/mediawiki/2013/0/07/Waterloo_rummy.JPG',
 
-
        'Julia Manalil': 'https://static.igem.org/mediawiki/2013/a/ae/Waterloo_julia.JPG',
 
-
        'Steven ten Holder': 'https://static.igem.org/mediawiki/2013/4/4f/Waterloo_steven.JPG',
 
-
        'Urooj Kishor': 'https://static.igem.org/mediawiki/2013/0/04/Waterloo_Urooj_2.jpg',
 
-
        'Jama Hagi-Yusuf': 'https://static.igem.org/mediawiki/2013/a/a1/Waterloo_jama.jpg',
 
-
        'Chris Morcos': 'https://static.igem.org/mediawiki/2013/6/65/Waterloo_chris.JPG',
 
-
        'Peivand Sadat Mousavi': 'https://static.igem.org/mediawiki/2013/7/7a/Waterloo_Peivand_2.jpg',
 
-
      }
 
-
    );
 
-
    setupGroup('#mathModellingTeamPhotos', 3, 150,
 
-
      {
 
-
        'Drew Neish': 'https://static.igem.org/mediawiki/igem.org/2/21/Waterloo_Drew_Neish.png',
 
-
        'James Hawley': 'https://static.igem.org/mediawiki/igem.org/1/10/Waterloo_James_Hawley.jpg',
 
-
        'Matt Smart': 'https://static.igem.org/mediawiki/igem.org/5/54/Waterloo_Matt_Smart.jpg',
 
-
        'Paul Reginato': 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG',
 
-
        'Seyed Ali Madani Tonekaboni': 'https://static.igem.org/mediawiki/igem.org/e/eb/Waterloo_Seyed_Ali_Madani_Tonekaboni.jpg',
 
-
        'Vedang Vyas': 'https://static.igem.org/mediawiki/igem.org/2/2b/Waterloo_Vedang_Vyas.jpg'
 
-
      }
 
-
    );
 
-
    setupGroup('#humanPracticesTeamPhotos', 3, 150,
 
-
      {
 
-
        'Anjali Arya': 'https://static.igem.org/mediawiki/igem.org/b/b6/Anjali_Arya.jpg',
 
-
        'Daniel Zhang': 'https://static.igem.org/mediawiki/igem.org/a/a2/Waterloo_Daniel_Zhang.jpg',
 
-
        'Lucy Hu': 'https://static.igem.org/mediawiki/igem.org/9/9f/Waterloo_Lucy_Hu.jpeg',
 
-
        'Mudit Kalia': 'https://static.igem.org/mediawiki/igem.org/2/22/Waterloo_Mudit_Kalia.jpg',
 
-
        'Suzie Alexander': 'https://static.igem.org/mediawiki/igem.org/c/c3/Waterloo_Suzie_Alexander.jpg'
 
-
      }
 
-
    );
 
     setupGroup('#advisorPhotos', 3, 150,
     setupGroup('#advisorPhotos', 3, 150,
       {
       {
Line 544: Line 627:
     setupGroup('#intentToInventPhotos', 2, 400, {});
     setupGroup('#intentToInventPhotos', 2, 400, {});
     var lab_photos =  
     var lab_photos =  
-
    //setupGroup('#labPhotos', 1, 350,
 
       {
       {
         _0: 'https://static.igem.org/mediawiki/igem.org/4/4c/Waterloo_lab-0.jpg',
         _0: 'https://static.igem.org/mediawiki/igem.org/4/4c/Waterloo_lab-0.jpg',
Line 869: Line 951:
         <div class="pageStuff">
         <div class="pageStuff">
           <h1 id="s_HumanPractices_IntentToInvent">Intent to Invent</h1>
           <h1 id="s_HumanPractices_IntentToInvent">Intent to Invent</h1>
-
          <p>
 
-
            <!-- TODO video? -->
 
-
          </p>
 
           <h1 id="s_HumanPractices_Vlogs">Vlogs</h1>
           <h1 id="s_HumanPractices_Vlogs">Vlogs</h1>
           <h1 id="s_HumanPractices_SpecialProject">Special Project</h1>
           <h1 id="s_HumanPractices_SpecialProject">Special Project</h1>
Line 921: Line 1,000:
       <div id="p8" class="page">
       <div id="p8" class="page">
         <div class="pageStuff">
         <div class="pageStuff">
 +
          <div id="teamPhotos"></div>
 +
 +
        <!--
           <h1 id="s_Team_Administrators">Administrators</h1>
           <h1 id="s_Team_Administrators">Administrators</h1>
           <div id="administratorPhotos" class="photoSection"></div>
           <div id="administratorPhotos" class="photoSection"></div>
Line 935: Line 1,017:
           <h1 id="s_Team_MathModelling">Mathematical Modelling</h1>
           <h1 id="s_Team_MathModelling">Mathematical Modelling</h1>
           <div id="mathModellingTeamPhotos" class="photoSection"></div>
           <div id="mathModellingTeamPhotos" class="photoSection"></div>
 +
 +
          -->
           <div class="clearFix"></div>
           <div class="clearFix"></div>

Revision as of 08:42, 11 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"