Team:Wellesley HCI/SynFluo

From 2012.igem.org

(Difference between revisions)
 
(11 intermediate revisions not shown)
Line 23: Line 23:
/*actual content styles*/
/*actual content styles*/
-
body {width: 800px; margin:auto;}
+
body {width: 900px; margin:auto;}
#bu-wellesley_wiki_content {height:auto; line-height:100%;}
#bu-wellesley_wiki_content {height:auto; line-height:100%;}
Line 36: Line 36:
H6 {
H6 {
       font-family: Helvetica;
       font-family: Helvetica;
 +
      font-size:32pt;
       text-transform: uppercase;
       text-transform: uppercase;
       text-decoration: none;
       text-decoration: none;
-
       text-align: center;
+
       /*text-align: center;*/
       color: #272829;
       color: #272829;
-
       font-size: 32pt;
+
       margin:0
 +
      width:100%;
 +
      padding-bottom:15px;
 +
      border-bottom:solid 1px orangered;
     }
     }
Line 52: Line 56:
     }
     }
 +
.synfloDemo img{
 +
          float: left;
 +
          margin: 0px 10px 0px 0px;
 +
}
 +
 +
#results{
 +
        height: 250px;
 +
 +
}
</style>
</style>
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM2012/css/Team.css">
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM2012/css/Team.css">
 +
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<style type="text/css">@import "http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/videobox.css";</style>
<style type="text/css">@import "http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/videobox.css";</style>
Line 63: Line 77:
<div id="bu-wellesley_wiki_content">
<div id="bu-wellesley_wiki_content">
-
<p  style="text-align:center;"><a href="https://2012.igem.org/Team:Wellesley_HCI"><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/titleimage.png" width="800px"></a></p>
+
<a href="https://2012.igem.org/Team:Wellesley_HCI"><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/titleimage.png" width="300px" style="display:block; float:left;"></a>
<!--Start NavBar-->
<!--Start NavBar-->
Line 121: Line 135:
</p>
</p>
<h3>Concept</h3>
<h3>Concept</h3>
 +
<p>
 +
<center><img src="http://i47.tinypic.com/34ozk3p.jpg" height = "200px"></center>
 +
</p>
<p>
<p>
Each triplet of Sifteo cubes consists of a BioBrick cube, a plasmid cube, and an E. coli cube.  To represent the real-world application of E. chromi as biosensors, the user can deploy the E. coli onto a tabletop computer. Once there, the user can add three different types of contaminants to the Surface. The E. coli will move around, and if they travel over a toxin that they are encoded to sense for, they will change color.
Each triplet of Sifteo cubes consists of a BioBrick cube, a plasmid cube, and an E. coli cube.  To represent the real-world application of E. chromi as biosensors, the user can deploy the E. coli onto a tabletop computer. Once there, the user can add three different types of contaminants to the Surface. The E. coli will move around, and if they travel over a toxin that they are encoded to sense for, they will change color.
</p>
</p>
-
 
+
<p>
 +
<center><img src="http://i49.tinypic.com/2hdo65w.jpg" width="800px"></center>
 +
</p>
<h3>Modify E. coli</h3>
<h3>Modify E. coli</h3>
<p>
<p>
Pressing on the BioBrick cube scrolls through a library of three colors and toxin shapes. Users add the BioBrick to a plasmid and mix by vortexing: the BioBrick cube is placed on top of the plasmid, then the two are shaken together while the color drips into the plasmid. Then, just as a biologist would pipette, mix, and eject the newly-infused plasmid onto the waiting biological vessel, SynFlo allows the user to place the now colored plasmid cube next to the awaiting E. coli cube and then flip the plasmid cube as if pouring or pipetting into the E. coli.  
Pressing on the BioBrick cube scrolls through a library of three colors and toxin shapes. Users add the BioBrick to a plasmid and mix by vortexing: the BioBrick cube is placed on top of the plasmid, then the two are shaken together while the color drips into the plasmid. Then, just as a biologist would pipette, mix, and eject the newly-infused plasmid onto the waiting biological vessel, SynFlo allows the user to place the now colored plasmid cube next to the awaiting E. coli cube and then flip the plasmid cube as if pouring or pipetting into the E. coli.  
</p>
</p>
 +
<p>
 +
<center><img src="http://i46.tinypic.com/2089vtd.png" width="800px"></center>
 +
</p>
 +
<h3>Deploy modified E.coli </h3>
<h3>Deploy modified E.coli </h3>
<p>
<p>
Finally, users can deploy their E. coli to the testing environment by placing the E. coli cube on the Microsoft Surface and flipping the cube. The tabletop application is implemented on the <a href="http://www.samsung.com/us/business/commercial-display-solutions/LH40SFWTGC/ZA">Microsoft Surface SUR40</a> device using the Microsoft Surface 2.0 SDK. The communication between the Sifteo cubes and the SUR40 is implemented using Client-Server communication between the Surface and Sifteo applications.  
Finally, users can deploy their E. coli to the testing environment by placing the E. coli cube on the Microsoft Surface and flipping the cube. The tabletop application is implemented on the <a href="http://www.samsung.com/us/business/commercial-display-solutions/LH40SFWTGC/ZA">Microsoft Surface SUR40</a> device using the Microsoft Surface 2.0 SDK. The communication between the Sifteo cubes and the SUR40 is implemented using Client-Server communication between the Surface and Sifteo applications.  
</p>
</p>
-
 
<p>
<p>
Users can then interact with the E. coli by adding tangibles to the surface that represent different environmental toxins; the modified E. Coli sensitive to particular toxins will respond by changing their color. Touching the E. coli results in a color change.  
Users can then interact with the E. coli by adding tangibles to the surface that represent different environmental toxins; the modified E. Coli sensitive to particular toxins will respond by changing their color. Touching the E. coli results in a color change.  
</p>
</p>
 +
 +
<br>
 +
<p>
 +
<center><img src="http://i48.tinypic.com/2wd4ojt.jpg" width="800px" ></center>
 +
</p>
 +
<br>
 +
<p>
<center><img src="https://static.igem.org/mediawiki/2012/d/df/SynFluo-demo-Kim.jpg" width = "700px"></center>
<center><img src="https://static.igem.org/mediawiki/2012/d/df/SynFluo-demo-Kim.jpg" width = "700px"></center>
 +
</p>
</div>
</div>
Line 145: Line 175:
<p>
<p>
 +
<div class="synfloDemo"><img src="https://lh6.googleusercontent.com/-lS2OUkfWsx4/UEEjoop8aPI/AAAAAAAAKtE/RDOUVwnatd4/s677/IMG_20120719_104245.jpg" height= "200px"></div><p>
We did a preliminary user study involving observations of 18 high school students who had some exposure to science but were largely unfamiliar with synthetic biology. The students were shown a presentation that explained basic synthetic concepts. After a demo of SynFlo, the users picked up the Sifteo interaction very quickly and found the Sifteo and tabletop interaction especially engaging. They also reflection on the connection between SynFlo and the synethic biology concepts discussed.
We did a preliminary user study involving observations of 18 high school students who had some exposure to science but were largely unfamiliar with synthetic biology. The students were shown a presentation that explained basic synthetic concepts. After a demo of SynFlo, the users picked up the Sifteo interaction very quickly and found the Sifteo and tabletop interaction especially engaging. They also reflection on the connection between SynFlo and the synethic biology concepts discussed.
-
<p>
+
</p>
 +
 
</div>
</div>
Line 153: Line 185:
<h1>Demo Video</h1>
<h1>Demo Video</h1>
-
<center><iframe width="560" height="315" src="http://www.youtube.com/embed/IDOUlssywOc" frameborder="0" allowfullscreen></iframe></center>
+
<center><iframe width="640" height="360" src="http://www.youtube.com/embed/SWMO0sGA86U?rel=0" frameborder="0" allowfullscreen></iframe></center>
</div>
</div>

Latest revision as of 15:41, 19 September 2012

Wellesley HCI iGEM Team: Welcome


SynFlo

Tool Overview

SynFlo is an interactive installation that focuses on making the ideas behind synthetic biology accessible and understandable by referencing a specific synthetic biology experiment called E. chromi. This award-winning experiment conducted by the University of Cambridge, involves the creation of E. coli that will serve as color-changing biosensors. The E. chromi protocol involves three basic tasks: drawing color-changing DNA from a parts library, encoding the DNA in bacterial plasmids, and then inserting the plasmids into E. coli.

Implementation

To simulate the E. chromi experiment protocol, the installation employs a tabletop computer, tangible objects that represent environmental toxins, and triplets of Sifteo Cubes. Sifteo Cubes are a commercially available, clickable 1.5 inch block micro computers that can interact with each other and communicate with a computer via proprietary 2.4GHz radio protocol. The current prototype of SynFlo supports up to six Sifteo Cubes. The interaction and animation is programmed using the Sifteo SDK written in C#.

Concept

Each triplet of Sifteo cubes consists of a BioBrick cube, a plasmid cube, and an E. coli cube. To represent the real-world application of E. chromi as biosensors, the user can deploy the E. coli onto a tabletop computer. Once there, the user can add three different types of contaminants to the Surface. The E. coli will move around, and if they travel over a toxin that they are encoded to sense for, they will change color.

Modify E. coli

Pressing on the BioBrick cube scrolls through a library of three colors and toxin shapes. Users add the BioBrick to a plasmid and mix by vortexing: the BioBrick cube is placed on top of the plasmid, then the two are shaken together while the color drips into the plasmid. Then, just as a biologist would pipette, mix, and eject the newly-infused plasmid onto the waiting biological vessel, SynFlo allows the user to place the now colored plasmid cube next to the awaiting E. coli cube and then flip the plasmid cube as if pouring or pipetting into the E. coli.

Deploy modified E.coli

Finally, users can deploy their E. coli to the testing environment by placing the E. coli cube on the Microsoft Surface and flipping the cube. The tabletop application is implemented on the Microsoft Surface SUR40 device using the Microsoft Surface 2.0 SDK. The communication between the Sifteo cubes and the SUR40 is implemented using Client-Server communication between the Surface and Sifteo applications.

Users can then interact with the E. coli by adding tangibles to the surface that represent different environmental toxins; the modified E. Coli sensitive to particular toxins will respond by changing their color. Touching the E. coli results in a color change.



Results

We did a preliminary user study involving observations of 18 high school students who had some exposure to science but were largely unfamiliar with synthetic biology. The students were shown a presentation that explained basic synthetic concepts. After a demo of SynFlo, the users picked up the Sifteo interaction very quickly and found the Sifteo and tabletop interaction especially engaging. They also reflection on the connection between SynFlo and the synethic biology concepts discussed.

Demo Video

Future Work

  • Include more protocols from the E. chromi experiment like ice-shocking (where introducing ice into our E. coli cube would slow down its movement) and the heat bath
  • Add affordance by making cubes look like actual tools in the lab, e.g. petri dishes, flasks, test tubes, etc.
  • Add more modes of interaction for the E. coli, specifically enabling manipulation of E. coli by objects placed on the surface (where, if a user placed their arm on the Surface, the E. coli would bounce of that arm)
  • Evaluate the effectiveness of SynFlo in informal science learning settings