Difference between revisions of "Team:Bielefeld-CeBiTec/Design"

 
(47 intermediate revisions by 4 users not shown)
Line 9: Line 9:
 
</head>
 
</head>
  
<body>
+
<nav id="pagenav" class="navbar navbar-fixed-bottom"><ul class="nav nav-tabs" role="tablist" style="margin-left: 0px">
 +
<li><a href="#problem">The problem</a></li>
 +
<li><a href="#firststeps">The first steps</a></li>
 +
<li><a href="#combinations">The filter combinations</a></li>
 +
<li><a href="#photography">Does fluorescence photography work on Paper?</a></li>
 +
<li><a href="#app">The app</a></li>   
 +
<li><a href="#case">The black case</a></li>
 +
 
 +
</ul>
 +
</nav>
 +
 
 +
 
 +
<body data-spy="scroll" data-target="#pagenav" data-offset="100">
  
 
   <div class="container">
 
   <div class="container">
Line 15: Line 27:
 
<div class="jumbotron" style="background-image: url(https://static.igem.org/mediawiki/2015/f/fb/Bielefeld-CeBiTec_jumbotron_fluorescence_detection.png)">
 
<div class="jumbotron" style="background-image: url(https://static.igem.org/mediawiki/2015/f/fb/Bielefeld-CeBiTec_jumbotron_fluorescence_detection.png)">
 
<div class="jumbotron-text">
 
<div class="jumbotron-text">
<h1 style="margin-bottom: 0px">Prototype Design</h1>
+
<h1 style="margin-bottom: 0px">Output Signal processing</h1>
<p>new way to image fluorescence</p>
+
<p>A prototype for easy fluorescence detection </p>
 
</div>
 
</div>
 
</div>
 
</div>
  
       <div class="Subtitle">
+
       <div id="problem">
 
<h2> The problem</h2>
 
<h2> The problem</h2>
<p> We planed to design a practical test stripe using fluorescence as output signal.Green fluorescent protein (GFP) ist among the most used reporter protein and has been used in numerous iGEM projects. But fluorescence outside the lab sounds not really simple to use. So we had to find an easy way to analyze the output.
+
<p> The aim of our project was to design a convenient test strip using fluorescence as an output signal. The green fluorescent protein (GFP) is one of the most frequently used reporter proteins and it has already been used in numerous iGEM projects, e.g. iGEM Aachen 2014. Instruments for fluorescence-measurement are not readily available outside of the lab. So our aim was to develop an easy and cheap method for analyzing a fluorescence output. Therefore we developed an easy and cheap method for analyzing a fluorescence output. So we developed a smartphone app in combination with two light filters. One filter is used to ensure the correct extinction of GFP by putting it in front of the flash, while the other filter passes only the evaluable emission spectrum of GFP for minimizing the background noise. Thereby it is put in front of the camera of the smartphone. </p>
 
+
</div>
  
 +
    <div id="firststeps">   
 
           <h2> The first steps</h2>
 
           <h2> The first steps</h2>
<p> We planed to design a practical test stripe using fluorescence as output signal. But fluorescence outside the lab sounds not really simple to use. So we had to find a easy way to analyze the output. But before testing we decided to measure the extinction and emission spectra from sfGFP as a basis to choose the most promising filter combination and to have a look if the smartphone flash really extincts sfGFP. </p>
+
<p>When starting with our project, we wanted to verify if fluorescence of sfGFP can be measured by a smartphone. So in the first step we measured the extinction and emission spectra from sfGFP to test if the smartphone flash can excites sfGFP. Although the characteristic curve of the flash of the smartphone s5 mini, do not covers the hole sfGFP exciting curve, it is possible to extinct sfGFP with the flash, because the maximum turning point is covered from the characteristic curve. </p>
 +
 
 +
<div class="row">
 +
   
 +
    <div class="col-md-5">
 +
 
 +
<p> Next we tested some filters from the light engineering of the women cultural center Bielefeld e.V. ("Frauenkulturzentrum Bielefeld e.V."). We tested these filters in front of either the camera or the flashlight by taking picture of purified GFP, sfGFP lysate and lysate without sfGFP (for generating the lysates see <a href = "https://2015.igem.org/Team:Bielefeld-CeBiTec/Notebook/Miscellaneous">here</a>).
 +
Different hues and different levels of brightness can be identified in the picture below. With this first impression, we decided to test different filters. The goal was to find one filter or filtercombination which was perfectly suited for sfGFP imaging, cutting out as much of the background signal as possible. </p>
 +
 
 +
</div>
 +
   
 +
<div class="col-md-7">
  
<figure style="float:right; margin-left:20px; width: 500px">
+
<figure style="float:right; margin-left:20px; width: 600px">
 
<a href="https://static.igem.org/mediawiki/2015/3/36/Bielefeld-CeBiTec_sfGFP_Spektra.png" data-lightbox="detection" data-title=" Emission and extinction spectra of sfGFP. The characteristic curve from the samsung galaxy S5 mini flash is also shown. The overlap of the different spectra shows that it is possible to excite sfGFP with a smartphone flash. "><img src="https://static.igem.org/mediawiki/2015/3/36/Bielefeld-CeBiTec_sfGFP_Spektra.png" ></a>
 
<a href="https://static.igem.org/mediawiki/2015/3/36/Bielefeld-CeBiTec_sfGFP_Spektra.png" data-lightbox="detection" data-title=" Emission and extinction spectra of sfGFP. The characteristic curve from the samsung galaxy S5 mini flash is also shown. The overlap of the different spectra shows that it is possible to excite sfGFP with a smartphone flash. "><img src="https://static.igem.org/mediawiki/2015/3/36/Bielefeld-CeBiTec_sfGFP_Spektra.png" ></a>
 
<figcaption>Emission and extinction spectra of sfGFP. The characteristic curve from the samsung galaxy S5 mini flash is also shown. The overlap of the different spectra shows that it is possible to excite sfGFP with a smartphone flash.
 
<figcaption>Emission and extinction spectra of sfGFP. The characteristic curve from the samsung galaxy S5 mini flash is also shown. The overlap of the different spectra shows that it is possible to excite sfGFP with a smartphone flash.
 
</figcaption>
 
</figcaption>
 
</figure>
 
</figure>
<br>
 
  
In the beginning of our project we wanted to test, if it could work to photograph fluorescence with a smartphone. We got a filter from light engineering from the women cultural center Bielefeld e.V. ("Frauenkulturzentrum Bielefeld e.V.")  and put it in front of the smartphone.
+
</div>
In the picture below we took a picture with these filter from purified GFP, sfGFP lysate and lysate without sfGFP. You can see different colors and a different brightnesses in the picture. So in our first impression we thought it's worth to try some other filters, to find the perfect filter for sfGFP imaging with almost no background signal. </p>
+
</div>
 +
         
 +
    <div class="row">
 +
   
 +
    <div class="col-md-4">    
  
<br>
+
    <figure style="float:left; margin-right:20px ; width: 300px">
 
+
<a href="https://static.igem.org/mediawiki/2015/d/da/Bielefeld-CeBiTec_first_filtertests.png" data-lightbox="detection" data-title=" First filter test. Purified GFP, sfGFP lysate and lysate non-induced sfGFP culture were photographed through light filters to assess the feasibility of fluorescence detection using a smartphone."><img src="https://static.igem.org/mediawiki/2015/d/da/Bielefeld-CeBiTec_first_filtertests.png" ></a>
<figure style="margin:auto; width: 300px">
+
<figcaption> First filter test. Purified GFP, sfGFP lysate and lysate non-induced sfGFP culture were photographed through light filters to assess the feasibility of fluorescence detection using a smartphone.
<a href="https://static.igem.org/mediawiki/2015/d/da/Bielefeld-CeBiTec_first_filtertests.png" data-lightbox="detection" data-title=" The first filter test to get an rough impression if it could work to use two filters for fluorescence imaging. We used one filter in front of the flash and the same one in front of the camera. In the picture you can see purified GFP, sfGFP lysate and the lysate of a not induced sfGFP culture."><img src="https://static.igem.org/mediawiki/2015/d/da/Bielefeld-CeBiTec_first_filtertests.png" ></a>
+
<figcaption>The first filter test to get an rough impression if it could work to use two filters for fluorescence imaging. We used one filter in front of the flash and the same one in front of the camera. In the picture you can see purified GFP, sfGFP lysate and the lysate of a not induced sfGFP culture.
+
 
</figcaption>
 
</figcaption>
 
</figure>
 
</figure>
<br>
+
       
<p> Therefore we bought a lee color filter catalog and began to test different filter combinations. The preselection was possible, because we had access to the light transmitting spectra of almost every filter. </p>
+
        </div>
 +
                  <div class="col-md-4"> 
 +
       
 +
                        <p> Therefore we bought a <a href="http://www.leefilters.com/lighting/colour-details.html#071">lee color filter</a></li> catalog, so we can test various filter combinations in the next step. A preselection of the filters was possible, because we had access to the light transmitting spectra of almost every filter. Apart we designed a handcraft black carton for taking photos under defined conditions and a constant dark background. </p>
  
 +
                     
 +
       
 +
        </div>
 +
        <div class="col-md-4"> 
  
  
<br>
+
      <figure style="margin:auto; width: 200px">
 
+
 
+
 
+
<figure style="margin:auto; width: 200px">
+
 
<a href="https://static.igem.org/mediawiki/2015/f/f2/Bielefeld-CeBiTec_Lee_color_filter_catalog.png" data-lightbox="detection" data-title=" Lee color filter catalog"><img src="https://static.igem.org/mediawiki/2015/f/f2/Bielefeld-CeBiTec_Lee_color_filter_catalog.png" ></a>
 
<a href="https://static.igem.org/mediawiki/2015/f/f2/Bielefeld-CeBiTec_Lee_color_filter_catalog.png" data-lightbox="detection" data-title=" Lee color filter catalog"><img src="https://static.igem.org/mediawiki/2015/f/f2/Bielefeld-CeBiTec_Lee_color_filter_catalog.png" ></a>
 
<figcaption>Lee color filter catalog
 
<figcaption>Lee color filter catalog
 
</figcaption>
 
</figcaption>
</figure>
+
</figure>
 
+
 
 
+
      <figure style="margin:auto; width: 200px">
<br>
+
<a href="https://static.igem.org/mediawiki/2015/1/11/Bielefeld-CeBiTec_black_box.png" data-lightbox="detection" data-title=" The black carton: It was designed to take photos under same conditions"><img src="https://static.igem.org/mediawiki/2015/1/11/Bielefeld-CeBiTec_black_box.png" ></a>
<p> The next step was to create a dark environment. Therefore we did handicrafts to design a "black box". Now it was possible to take photos under defined conditions and constant dark background. </p>
+
<br>
+
<figure style="margin:auto; width: 300px">
+
<a href="https://static.igem.org/mediawiki/2015/1/11/Bielefeld-CeBiTec_black_box.png" data-lightbox="detection" data-title=" The black box: tinkered to take photos under same conditions"><img src="https://static.igem.org/mediawiki/2015/1/11/Bielefeld-CeBiTec_black_box.png" ></a>
+
 
<figcaption> The black box: tinkered to take photos under same conditions
 
<figcaption> The black box: tinkered to take photos under same conditions
 
</figcaption>
 
</figcaption>
 
</figure
 
</figure
<br>
+
    </div>
 +
</div>
 +
 
 +
<div class="row">
 +
           
 +
</div>
 +
 
 +
<div id="combinations">         
 
<h2> The filter combinations </h2>
 
<h2> The filter combinations </h2>
<p> The essential requirements for taking comparable photos are done. Now we had to find the ideal filter combination. So we made a lot of photos with the preselection. We tested 6 filters for emission and combined every filter for emission with up to 16 filters for extinction.After analyzing the photos with  the image processing software Fiji, the optimal filter combination found was tokyo blue (071) in front of the flash and twickenham green (736) in front of the camera. </p>
+
<p>  
 +
The essential requirements for taking comparable photos are achieved. Now we had to find the ideal filter combination. So we tested every combination of 5 filters for emission with 12 filters for extinction. A lot of pictures had much background or no fluorescence was seen. All together we tested 60 combinations to find the optimal filter combination for sfGFP imaging via smartphone with less background as possible.  Afterwards we had to analyze the pictures. Hence we analyzed the pictures with the imaging procesing software Fiji. We measured all fluorescence of every reaction tube in every picture we took. After analyzing the photos with  the image processing software Fiji, the optimal filter combination was found Tokyo blue (071) in front of the flash and twickenham green (736) in front of the camera provided the best result for sfGFP. </p>
 +
<p> In the picture below you can see the test of different filter combinations to image sfGFP. On the top the picture was taken without any filters. In the middle the picture was taken with fluorescence green (219) in front of the camera and deep blue (120) in front of the flash. The bottom photo was taken with the optimal filter combination of tokyo blue (71) in front of the flash and twickenham green (736) in front of the camera. </p>
  
 +
    </div>
 +
            </div>
 +
   
 +
<div class="row">
 +
    <div class="col-md-6 text-center" style="margin-bottom: 20px">
 +
    <figure style="margin:auto; width: 400px">
 +
<a href="https://static.igem.org/mediawiki/2015/5/57/Bielefeld-CeBiTec_optimal_filtercombination.png " data-lightbox="detection" data-title="Test of different filtercombinations. On the top there is the picture without any filters. In the middle the picture was taken with fluorescence green (219) in front of the camera and deep blue (120) in front of the flash. The bottom photo was taken with the optimal filter combination of tokyo blue (71) in front of the flash and twickenham green (736) in front of the camera."><img src="https://static.igem.org/mediawiki/2015/5/57/Bielefeld-CeBiTec_optimal_filtercombination.png" ></a>
 +
<figcaption> Test of different filtercombinations. On the top there is the picture without any filters. In the middle the picture was taken with fluorescence green (219) in front of the camera and deep blue (120) in front of the flash. The bottom photo was taken with the optimal filter combination of tokyo blue (71) in front of the flash and twickenham green (736) in front of the camera.
 +
</figcaption>
 +
</figure>
 +
    </div>
  
<br>
+
    <div class="col-md-6 text-center" style="margin-bottom: 20px">
<figure style="margin:auto; width: 400px">
+
    <figure style="margin:auto; width: 400px">
<a href="https://static.igem.org/mediawiki/2015/5/57/Bielefeld-CeBiTec_optimal_filtercombination.png " data-lightbox="detection" data-title="Test of different filtercombinations. On the top there is the picture without any filters. In the middle the picture was taken with fluorescence green in front of the camera and deep blue in front of the flash. The bottom photo was taken with the optimal filtercombinition. Tokyo blue in front of the flash and twickenham green in front of the camera"><img src="https://static.igem.org/mediawiki/2015/5/57/Bielefeld-CeBiTec_optimal_filtercombination.png" ></a>
+
<a href="https://static.igem.org/mediawiki/2015/e/e9/Bielefeld-CeBiTec_optimal_filtercombination_mRFP.png" data-lightbox="detection" data-title="Test of different filtercombinations to photograph mRFP. On the top the picture is taken without any filters. The picture in the middle was taken with light red in front of the camera and dark yellow green in front of the flash. The bottom photo was taken with the optimal filter combination twickenham green in front of the flash and light red in front of the camera."><img src="https://static.igem.org/mediawiki/2015/e/e9/Bielefeld-CeBiTec_optimal_filtercombination_mRFP.png" ></a>
<figcaption> Test of different filter combinations. On the top there is the picture without any filters. In the middle the picture was taken with fluorescence green in front of the camera and deep blue in front of the flash. The bottom photo was taken with the optimal filter combinition. Tokyo blue in front of the flash and twickenham green in front of the camera
+
<figcaption> Test of different filtercombinations to photograph mRFP. On the top the picture is taken without any filters. The picture in the middle was taken with light red in front of the camera and dark yellow green in front of the flash. The bottom photo was taken with the optimal filter combination twickenham green in front of the flash and light red in front of the camera.
 
</figcaption>
 
</figcaption>
 
</figure>
 
</figure>
 +
    </div>
 +
</div>
  
<br>
 
<p> As you can see in the picture above it is really important to choose the right filters to get a high fluorescence signal and a low background signal. But is it only possible to photograph sfGFP and GFP? To find it out, we tried to photograph monomeric red fluorescent protein (mRFP) lysate, as well. </p>
 
  
<br>
 
  
<figure style="margin:auto; width: 400px">
 
<a href="https://static.igem.org/mediawiki/2015/e/e9/Bielefeld-CeBiTec_optimal_filtercombination_mRFP.png" data-lightbox="detection" data-title="Test of different filtercombinations to photograph mRFP. On the top the picture is taken without any filters. In the middle the picture was taken with light red in front of the camera and dark yellow green in front of the flash. The bottom photo was taken with the optimal filtercombinition. Twickenham green in front of the flash and light red in front of the camera."><img src="https://static.igem.org/mediawiki/2015/e/e9/Bielefeld-CeBiTec_optimal_filtercombination_mRFP.png" ></a>
 
<figcaption> Test of different filtercombinations to photograph mRFP. On the top the picture is taken without any filters. In the middle the picture was taken with light red in front of the camera and dark yellow green in front of the flash. The bottom photo was taken with the optimal filtercombinition. Twickenham green in front of the flash and light red in front of the camera.
 
</figcaption>
 
</figure>
 
 
<br>
 
<br>
 +
<p> As you can see in the pictures above it is really important to choose the right filters to get a high fluorescence signal and a low background signal. But is it only possible to photograph sfGFP and GFP? To find out, we took photos of the  monomeric red fluorescent protein (mRFP) lysate as well. We tested the combination of 4 different filters for extinction with 8 filters for emission. All in all we tested 32 filter combinations to find the optimal filter combination. After this we analyzed again the fluorescence of the different reaction tubes in the pictures with the image processing software Fiji. The best filter combination for imaging mRFP with a smartphone are Twickenham green (736) in front of the flash and light red (182) in front of the camera. </p>
 +
<p> In the picture you can see the test of different filtercombinations to photograph mRFP. On the top the picture is taken without any filters. The picture in the middle was taken with light red in front of the camera and dark yellow green in front of the flash. The bottom photo was taken with the optimal filter combination twickenham green in front of the flash and light red in front of the camera. </p>
 +
<p> So probably it's possible to detect most of the fluorescent proteins, you just need the right filter combination and a flash which can excite the relevant protein. </p>
  
<h2> Does fluorescence photography work on Paper? </h2>
+
</div>
 +
<div id="photography">
  
 +
<h2> Does fluorescence photography work on paper? </h2>
  
<p> So far so good. Fluorescence imaging of liquids in quite high amounts is possible. But does it also works with small volumes and on paper? Therefore we took normal laboratory filter papers. (MN 827 B from Macherey and Nagel, C 350 L and FN3 from Munktell and a laboratory filter paper we got from Merck) and put the lysates on the paper and took the photos. Exemplary the results from laboratory filter paper  from Merck are shown. The other ones showed the same results.  As you can see in the picture below this paragraph, it is possible to photograph volumes of 5 µl purified GFP up to a concentration of 17,5 mmol/l. </p>
 
  
<br>
+
<p> We showed that fluorescence imaging of liquids in quite high amounts is possible with our approach. But does it also work with small volumes and on paper? To assess this we took normal laboratory filter papers. (MN 827 B from Macherey and Nagel, C 350 L and FN3 from Munktell and a laboratory filter paper from Merck), put 5 µL of the lysates on the paper and took photos with our filter systems. Exemplary the results of the laboratory filter paper from Merck are shown in the figure below. The other filter papers showed the same results. In the first row dilution series of purified GFP were added to the paper discs. In the second row sfGFP lysate were added, in the third row mRFP lysate was used and in the last row lysat without sfGFP and mRFP were added to the paper discs. The top photo was taken without any filter. As you can see, there is no fluorescence visible. The picture in the middle was taken with the filter combination for sfGFP. In this picture you can see two glowing paper discs in the first and in the second row. So fluorescence detection of 5 µL GFP on paper works up to a concentration of 17,5 mmol/L.In the bottom picture the mRFP filters were used. Three paper discs of the third row are red. So it's possible to detect the mRFP lysate up to a 1:10 dilution. </p>
  
<figure style="margin:auto; width: 600px">
+
 
<a href="https://static.igem.org/mediawiki/2015/d/d7/Bielefeld-CeBiTec_test_on_paper.png" data-lightbox="detection" data-title="We added a small amount of lysate to the scrap of paper and photographed it with the different filter combinations. The top photo is whithout any filter. The picture in the middle was taken with the filter combination for sfGFP and for the bottom picture the mRFP filters were used."><img src="https://static.igem.org/mediawiki/2015/d/d7/Bielefeld-CeBiTec_test_on_paper.png" ></a>
+
<div class="row">
<figcaption> We added a small amount of lysate to the scrap of paper and photographed it with the different filter combinations. The top photo is whithout any filter. The picture in the middle was taken with the filter combination for sfGFP and for the bottom picture the mRFP filters were used.
+
    <div class="col-md-6 text-center" style="margin-bottom: 20px">
 +
 
 +
<figure style="margin:auto; width: 350px">
 +
<a href="https://static.igem.org/mediawiki/2015/d/d7/Bielefeld-CeBiTec_test_on_paper.png" data-lightbox="detection" data-title="We added 5 µL of lysate to the paper disc and photographed it with the different filter combinations. In the first row dilution series of purified GFP were added to the paper discs. In the second row sfGFP lysate were added, in the third row mRFP lysate was used and in the last row lysat without sfGFP and mRFP were added to the paper discs. The top photo was taken without any filter. As you can see, there is no fluorescence visible. The picture in the middle was taken with the filter combination for sfGFP. In this picture you can see two glowing paper discs in the first and in the second row. In the bottom picture the mRFP filters were used. Three paper discs of the third row are red. So it's possible to detect the mRFP lysate up to a 1:10 dilution."><img src="https://static.igem.org/mediawiki/2015/d/d7/Bielefeld-CeBiTec_test_on_paper.png" ></a>
 +
<figcaption> We added 5 µL of lysate to the paper disc and photographed it with the different filter combinations. In the first row dilution series of purified GFP were added to the paper discs. In the second row sfGFP lysate were added, in the third row mRFP lysate was used and in the last row lysat without sfGFP and mRFP were added to the paper discs. The top photo was taken without any filter. As you can see, there is no fluorescence visible. The picture in the middle was taken with the filter combination for sfGFP. In this picture you can see two glowing paper discs in the first and in the second row. In the bottom picture the mRFP filters were used. Three paper discs of the third row are red. So it's possible to detect the mRFP lysate up to a 1:10 dilution.
 
</figcaption>
 
</figcaption>
 
</figure>
 
</figure>
  
 +
</div>
 +
 +
<div class="col-md-6 text-center" style="margin-bottom: 20px">
 +
<br>
 +
<br>
 
<br>
 
<br>
 
+
<p> Now we wanted to find out if it is possible to photograph the fluorescence from a  
<p> Now we wanted to find out if it is possible to photograph the fluorescence from a CFPS experiment on paper. So after a CFPS run on paper, we took the scrap of paper and took a photo from it. As you can see in the picture below. </p>
+
<a href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Results/CFPS#paperCFPS">Cell-free Protein Synthesis (CFPS) on Paper</a> . After a CFPS run on paper, we took the paper discs and took the photo shown below. We took the paper discs of paper from the  experiment on paper, took a photo and it worked, hence we can take a photo of the sfGFP generated in a CFPS experiment. In the first row you can see purified GFP, a dilution of the GFP and sfGFP lysat. We used this row for comparison. In the second row is the negativ control. We need the negativ control to visualize the
 +
self-fluorescence of the cell extract. In the third row are the paper discs where our self made extract were added for the CFPS. In the last row you can see the paper disc with the commercial cell extract for CFPS. So it's possible to take an image of sfGFP produced during a CFPS reaction with an smartphone. Hence it's possible to take this as a device to analyze our <a href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Results/it-really-works">paper based biosensor</a>.</p>
  
 
<br>
 
<br>
 +
<!-- <div class="col-md-6 text-center" style="margin-bottom: 20px"> -->
 +
  
 
<figure style="margin:auto; width: 600px">
 
<figure style="margin:auto; width: 600px">
<a href="https://static.igem.org/mediawiki/2015/9/99/Bielefeld-CeBiTec_CFPS_on_Paper.png" data-lightbox="detection" data-title="We took the scrap of paper from the CFPS an took an photo. And as you can see in the picture it worked. We can take an photo of the sfGFP generated in the CFPS."><img src="https://static.igem.org/mediawiki/2015/9/99/Bielefeld-CeBiTec_CFPS_on_Paper.png" ></a>
+
<a href="https://static.igem.org/mediawiki/2015/9/99/Bielefeld-CeBiTec_CFPS_on_Paper.png" data-lightbox="detection" data-title="Photo of the CFPS run on paper. We took the paper discs of paper from the experiment on paper, took a photo and it worked, hence we can take a photo of the sfGFP generated in a CFPS experiment. In the first row you can see purified GFP, a dilution of the GFP and sfGFP lysat. We used this row for comparison. In the second row is the negativ control. We need the negativ control to visualize the
<figcaption> We took the scrap of paper from the CFPS an took an photo. And as you can see in the picture it worked. We can take an photo of the sfGFP generated in the CFPS.
+
self-fluorescence of the cell extract. In the third row are the paper discs where our self made extract were added for the CFPS. In the last row you can see the paper disc with the commercial cell extract for CFPS. "><img src="https://static.igem.org/mediawiki/2015/9/99/Bielefeld-CeBiTec_CFPS_on_Paper.png"></a>
 +
<figcaption> Photo of the CFPS run on paper. We took the paper discs of paper from the experiment on paper, took a photo and it worked, hence we can take a photo of the sfGFP generated in a CFPS experiment. In the first row you can see purified GFP, a dilution of the GFP and sfGFP lysat. We used this row for comparison. In the second row is the negativ control. We need the negativ control to visualize the
 +
self-fluorescence of the cell extract. In the third row are the paper discs where our self made extract were added for the CFPS. In the last row you can see the paper disc with the commercial cell extract for CFPS.  
 
</figcaption>
 
</figcaption>
 
</figure>
 
</figure>
 +
</div>
 +
 +
 +
</div>
 +
</div>
  
 
<br>
 
<br>
  
<h2> The App </h2>
 
Now it's possible to photograph fluorescence, but sometimes it's difficult to see the differences. And analyzing the pictures with the image processing software Fiji requires know-how of the user. On the one hand for the program and on the other hand for interpreting the results. We solved this problem with a smartphone App. The App determines the median of the greenvalue of a area of pixels in the sensorspot and compares it to the pixels of the negative control (the not induced sensor). If the ratio of a sample and the negative control is above a certain theshold (10%), valid biosensor signal is detected. Additionally it is checked whether the value for the positive control (drop of sfGFP) is above a certain value, thereby confirming the functionality of the biosensor. Furthermore the App displays specific information regarding the different heavymetals and date rape drugs to inform the user.
 
  
For easy handling a correct positioning of the smartphone and the biosensor test strip, we designed and printed a measurement case.
+
 
 +
 
 +
<div id="app">
 +
<div id="app">
 +
<h2> The app </h2>
 +
<p>Now it's possible to photograph fluorescence, but sometimes it's difficult to see the differences between the divers paper discs. Additionally analyzing the pictures with the image processing software Fiji requires know-how of the user. For both the program and the interpretation. We solved this problem with a smartphone app. We coded the app with Android Studio 1.2.2 and it can be installed on smartphones on Android 4.2 (Jelly bean) and later. The app determines the median of the greenvalue of a area of pixels in the sensorspot and compares it to the pixels of the negative control (the not induced sensor). If the ratio of a sample and the negative control is above a certain theshold (10%), a valid biosensor signal is detected. Additionally it is checked, if the value for the positive control (drop of sfGFP) is above a certain value, confirming the functionality of the biosensor. Furthermore the app displays specific information regarding the different heavymetals and date rape drugs to inform the user. You can download it by clicking on the button below. You need to unzip the file on your phone, since .apk files can not be uploaded. Alternatively download it <a href="https://2015.igem.org/File:CellFreeSticks.apk.txt">here</a> and delete the fileextension ".txt".</div>
 +
 
 +
We designed and printed a black case for an easy handling and a correct positioning of the smartphone and the biosensor test strip.
 +
<br>
 
</p></div>
 
</p></div>
 
  
  
Line 131: Line 197:
 
<figure><center>
 
<figure><center>
 
<img src="https://static.igem.org/mediawiki/2015/b/b2/Bielefeld-CeBiTec_app1small.png">
 
<img src="https://static.igem.org/mediawiki/2015/b/b2/Bielefeld-CeBiTec_app1small.png">
<figcaption>A photo of our test strip generated by a typical smartphone using an ideal filter combination to detect fluorescence of sfGFP.</figcaption></center>
+
<figcaption>A photo of our test strip. The photo was generated by a typical smartphone (samsung galaxy s5 mini) using an ideal filter combination to detect fluorescence of sfGFP.</figcaption></center>
 
</figure>
 
</figure>
 
</div>
 
</div>
Line 137: Line 203:
 
<figure><center>
 
<figure><center>
 
<img src="https://static.igem.org/mediawiki/2015/8/80/Bielefeld-CeBiTec_app2small.png">
 
<img src="https://static.igem.org/mediawiki/2015/8/80/Bielefeld-CeBiTec_app2small.png">
<figcaption>Screenshot of the app. It shows the pixels it took into account for the calculation in red, so the user can check, whether the pixels chosen are correct. Furthermore, it provides the values it calculated for the greeness of the spot.</figcaption></center>
+
<figcaption>Screenshot of the app. It shows the pixels who are taken into account for the calculation in red, so the user can check, whether or not the pixels chosen are correct. Furthermore, it provides the values that are calculated for the greeness of the spot.</figcaption></center>
 
</figure>
 
</figure>
 
</div>
 
</div>
Line 144: Line 210:
 
<figure><center>
 
<figure><center>
 
<img src="https://static.igem.org/mediawiki/2015/e/e0/Bielefeld-CeBiTec_app3small.png">
 
<img src="https://static.igem.org/mediawiki/2015/e/e0/Bielefeld-CeBiTec_app3small.png">
<figcaption>The application is adapted to the box shown in the picture. The box provides the ideal environment for capturing pictures under reproducible conditions. The application will calculate whether a contamination is present and give out an list of the contaminants in the water sample.</figcaption></center>
+
<figcaption> Combination of the app and the black case. The black case provides the perfect environment for capturing pictures under reproducible conditions. The application will calculate whether a contamination is present and give out a list of contaminants in the water sample.</figcaption></center>
 
</figure>
 
</figure>
 
</div>
 
</div>
Line 155: Line 221:
 
</div>
 
</div>
 
<div class="col-md-2 col-md-offset-3 text-center">
 
<div class="col-md-2 col-md-offset-3 text-center">
<a type="button" class="btn btn-default btn-next" href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Software/SourceCode"><img src="https://static.igem.org/mediawiki/2015/c/cb/Bielefeld-CeBiTec_App_transparent.png"><p>See the source code!</p></a>
+
<a type="button" class="btn btn-default btn-next" href="https://2015.igem.org/File:CellFreeSticksSourceCode.zip"><img src="https://static.igem.org/mediawiki/2015/c/cb/Bielefeld-CeBiTec_App_transparent.png"><p>Get the source code!</p></a>
 
</div>
 
</div>
 
</div>
 
</div>
  
<h2> The 3D print </h2>
+
 
<p> Ok, the fluorescence detections works fine, but it's not really practical to take the photo. The filter have to be in the right position direct in front of the camera respectively of the flash. Also it has to be quite dark for high quality pictures. Therefore we designed a box and realized it with a 3D printer. The top can be changed specific for the smartphone you use. The test stripe can be placed on the push loading drawer and inserted into the box. So it's quite easy to use. You just have to put the smartphone on the top, insert the test strip an take the photo. </p>
+
<div id="case">
 +
<h2> The Black case </h2>
 +
<p> We showed that, the fluorescence detection works fine, but it's not very practical to take the photo. The filters have to be in the exact right position directly in front of the camera and the flash. It also has to be quite dark for high quality pictures. Therefore we designed a black case and realized it with a 3D printer. Marco Radukic programmed the file for the 3d print in exact accordance with our guideline. The top smartphone inlay can be specifically changed for different smartphone types. The test stripe can be placed on the push loading drawer and inserted into the box. Thus it is quite easy to use. The smartphone is put on the top inlay, the test strip is inserted and the taken photo provides information about the contamination. To download the model for the 3D printing click <a type="button" href="https://2015.igem.org/File:Bielefeld-CeBiTec_black_case_3D_Druck_Datei.zip"> here. </a> </p>
 +
<br>
  
 
<figure style="margin:auto; width: 600px">
 
<figure style="margin:auto; width: 600px">
<a href="https://static.igem.org/mediawiki/2015/9/98/Bielefeld-CeBiTec_3D_box_modell.png" data-lightbox="detection" data-title="The 3D modell of the box"><img src="https://static.igem.org/mediawiki/2015/9/98/Bielefeld-CeBiTec_3D_box_modell.png" ></a>
+
<a href="https://static.igem.org/mediawiki/2015/9/98/Bielefeld-CeBiTec_3D_box_modell.png" data-lightbox="detection" data-title="You can see the 3D modell of the case, realized by Macro Radukic in exact accordance with our guideline. On the right you can see the printed black case. Printed from Thomas Schäfer with his 3D printer.  "><img src="https://static.igem.org/mediawiki/2015/9/98/Bielefeld-CeBiTec_3D_box_modell.png" ></a>
<figcaption> The 3D modell of the box
+
<figcaption> You can see the 3D modell of the case, realized by Macro Radukic in exact accordance with our guideline. On the right you can see the printed black case. Printed from Thomas Schäfer with his 3D printer.
 
</figcaption>
 
</figcaption>
 
</figure>
 
</figure>
 
<br>
 
 
  
 
</div>
 
</div>
 
  
 
<div class="row footer">
 
<div class="row footer">
 
<div class="col-md-2 col-md-offset-10 text-center">
 
<div class="col-md-2 col-md-offset-10 text-center">
<a type="button" class="btn btn-default btn-next" href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Results/HeavyMetals"><img src="https://static.igem.org/mediawiki/2015/5/51/Bielefeld-CeBiTec_iGEM_logo.png"><p>What are the analytes of this fancy gadget?</p></a>
+
<a type="button" class="btn btn-default btn-next" href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Results/it-really-works"><img src="https://static.igem.org/mediawiki/2015/c/cb/Bielefeld-CeBiTec_App_transparent.png"><p>Time to put all parts together!</p></a>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 186: Line 252:
  
 
{{Bielefeld-CeBiTec/Footer}}
 
{{Bielefeld-CeBiTec/Footer}}
 
 
<!--<html>
 
 
<h2>Design</h2>
 
 
<p>
 
By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page. If you are going for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Applied Design award</a>, you should also complete this page and tell us what you did.
 
</p>
 
 
<div class="highlightBox">
 
<h4>Note</h4>
 
<p>In order to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Applied Design award</a> and/or the <a href="https://2015.igem.org/Judging/Awards#Medals">functional prototype gold medal criterion</a>, you must fill out this page.</p>
 
</div>
 
 
<p>This is a prize for the team that has developed a synthetic biology product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.</p>
 
 
<p>
 
If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.
 
</p>
 
 
</div>
 
 
</html>-->
 

Latest revision as of 15:37, 29 October 2015

iGEM Bielefeld 2015


Output Signal processing

A prototype for easy fluorescence detection

The problem

The aim of our project was to design a convenient test strip using fluorescence as an output signal. The green fluorescent protein (GFP) is one of the most frequently used reporter proteins and it has already been used in numerous iGEM projects, e.g. iGEM Aachen 2014. Instruments for fluorescence-measurement are not readily available outside of the lab. So our aim was to develop an easy and cheap method for analyzing a fluorescence output. Therefore we developed an easy and cheap method for analyzing a fluorescence output. So we developed a smartphone app in combination with two light filters. One filter is used to ensure the correct extinction of GFP by putting it in front of the flash, while the other filter passes only the evaluable emission spectrum of GFP for minimizing the background noise. Thereby it is put in front of the camera of the smartphone.

The first steps

When starting with our project, we wanted to verify if fluorescence of sfGFP can be measured by a smartphone. So in the first step we measured the extinction and emission spectra from sfGFP to test if the smartphone flash can excites sfGFP. Although the characteristic curve of the flash of the smartphone s5 mini, do not covers the hole sfGFP exciting curve, it is possible to extinct sfGFP with the flash, because the maximum turning point is covered from the characteristic curve.

Next we tested some filters from the light engineering of the women cultural center Bielefeld e.V. ("Frauenkulturzentrum Bielefeld e.V."). We tested these filters in front of either the camera or the flashlight by taking picture of purified GFP, sfGFP lysate and lysate without sfGFP (for generating the lysates see here). Different hues and different levels of brightness can be identified in the picture below. With this first impression, we decided to test different filters. The goal was to find one filter or filtercombination which was perfectly suited for sfGFP imaging, cutting out as much of the background signal as possible.

Emission and extinction spectra of sfGFP. The characteristic curve from the samsung galaxy S5 mini flash is also shown. The overlap of the different spectra shows that it is possible to excite sfGFP with a smartphone flash.
First filter test. Purified GFP, sfGFP lysate and lysate non-induced sfGFP culture were photographed through light filters to assess the feasibility of fluorescence detection using a smartphone.

Therefore we bought a lee color filter catalog, so we can test various filter combinations in the next step. A preselection of the filters was possible, because we had access to the light transmitting spectra of almost every filter. Apart we designed a handcraft black carton for taking photos under defined conditions and a constant dark background.

Lee color filter catalog
The black box: tinkered to take photos under same conditions

The filter combinations

The essential requirements for taking comparable photos are achieved. Now we had to find the ideal filter combination. So we tested every combination of 5 filters for emission with 12 filters for extinction. A lot of pictures had much background or no fluorescence was seen. All together we tested 60 combinations to find the optimal filter combination for sfGFP imaging via smartphone with less background as possible. Afterwards we had to analyze the pictures. Hence we analyzed the pictures with the imaging procesing software Fiji. We measured all fluorescence of every reaction tube in every picture we took. After analyzing the photos with the image processing software Fiji, the optimal filter combination was found Tokyo blue (071) in front of the flash and twickenham green (736) in front of the camera provided the best result for sfGFP.

In the picture below you can see the test of different filter combinations to image sfGFP. On the top the picture was taken without any filters. In the middle the picture was taken with fluorescence green (219) in front of the camera and deep blue (120) in front of the flash. The bottom photo was taken with the optimal filter combination of tokyo blue (71) in front of the flash and twickenham green (736) in front of the camera.

Test of different filtercombinations. On the top there is the picture without any filters. In the middle the picture was taken with fluorescence green (219) in front of the camera and deep blue (120) in front of the flash. The bottom photo was taken with the optimal filter combination of tokyo blue (71) in front of the flash and twickenham green (736) in front of the camera.
Test of different filtercombinations to photograph mRFP. On the top the picture is taken without any filters. The picture in the middle was taken with light red in front of the camera and dark yellow green in front of the flash. The bottom photo was taken with the optimal filter combination twickenham green in front of the flash and light red in front of the camera.

As you can see in the pictures above it is really important to choose the right filters to get a high fluorescence signal and a low background signal. But is it only possible to photograph sfGFP and GFP? To find out, we took photos of the monomeric red fluorescent protein (mRFP) lysate as well. We tested the combination of 4 different filters for extinction with 8 filters for emission. All in all we tested 32 filter combinations to find the optimal filter combination. After this we analyzed again the fluorescence of the different reaction tubes in the pictures with the image processing software Fiji. The best filter combination for imaging mRFP with a smartphone are Twickenham green (736) in front of the flash and light red (182) in front of the camera.

In the picture you can see the test of different filtercombinations to photograph mRFP. On the top the picture is taken without any filters. The picture in the middle was taken with light red in front of the camera and dark yellow green in front of the flash. The bottom photo was taken with the optimal filter combination twickenham green in front of the flash and light red in front of the camera.

So probably it's possible to detect most of the fluorescent proteins, you just need the right filter combination and a flash which can excite the relevant protein.

Does fluorescence photography work on paper?

We showed that fluorescence imaging of liquids in quite high amounts is possible with our approach. But does it also work with small volumes and on paper? To assess this we took normal laboratory filter papers. (MN 827 B from Macherey and Nagel, C 350 L and FN3 from Munktell and a laboratory filter paper from Merck), put 5 µL of the lysates on the paper and took photos with our filter systems. Exemplary the results of the laboratory filter paper from Merck are shown in the figure below. The other filter papers showed the same results. In the first row dilution series of purified GFP were added to the paper discs. In the second row sfGFP lysate were added, in the third row mRFP lysate was used and in the last row lysat without sfGFP and mRFP were added to the paper discs. The top photo was taken without any filter. As you can see, there is no fluorescence visible. The picture in the middle was taken with the filter combination for sfGFP. In this picture you can see two glowing paper discs in the first and in the second row. So fluorescence detection of 5 µL GFP on paper works up to a concentration of 17,5 mmol/L.In the bottom picture the mRFP filters were used. Three paper discs of the third row are red. So it's possible to detect the mRFP lysate up to a 1:10 dilution.

We added 5 µL of lysate to the paper disc and photographed it with the different filter combinations. In the first row dilution series of purified GFP were added to the paper discs. In the second row sfGFP lysate were added, in the third row mRFP lysate was used and in the last row lysat without sfGFP and mRFP were added to the paper discs. The top photo was taken without any filter. As you can see, there is no fluorescence visible. The picture in the middle was taken with the filter combination for sfGFP. In this picture you can see two glowing paper discs in the first and in the second row. In the bottom picture the mRFP filters were used. Three paper discs of the third row are red. So it's possible to detect the mRFP lysate up to a 1:10 dilution.



Now we wanted to find out if it is possible to photograph the fluorescence from a Cell-free Protein Synthesis (CFPS) on Paper . After a CFPS run on paper, we took the paper discs and took the photo shown below. We took the paper discs of paper from the experiment on paper, took a photo and it worked, hence we can take a photo of the sfGFP generated in a CFPS experiment. In the first row you can see purified GFP, a dilution of the GFP and sfGFP lysat. We used this row for comparison. In the second row is the negativ control. We need the negativ control to visualize the self-fluorescence of the cell extract. In the third row are the paper discs where our self made extract were added for the CFPS. In the last row you can see the paper disc with the commercial cell extract for CFPS. So it's possible to take an image of sfGFP produced during a CFPS reaction with an smartphone. Hence it's possible to take this as a device to analyze our paper based biosensor.


Photo of the CFPS run on paper. We took the paper discs of paper from the experiment on paper, took a photo and it worked, hence we can take a photo of the sfGFP generated in a CFPS experiment. In the first row you can see purified GFP, a dilution of the GFP and sfGFP lysat. We used this row for comparison. In the second row is the negativ control. We need the negativ control to visualize the self-fluorescence of the cell extract. In the third row are the paper discs where our self made extract were added for the CFPS. In the last row you can see the paper disc with the commercial cell extract for CFPS.

The app

Now it's possible to photograph fluorescence, but sometimes it's difficult to see the differences between the divers paper discs. Additionally analyzing the pictures with the image processing software Fiji requires know-how of the user. For both the program and the interpretation. We solved this problem with a smartphone app. We coded the app with Android Studio 1.2.2 and it can be installed on smartphones on Android 4.2 (Jelly bean) and later. The app determines the median of the greenvalue of a area of pixels in the sensorspot and compares it to the pixels of the negative control (the not induced sensor). If the ratio of a sample and the negative control is above a certain theshold (10%), a valid biosensor signal is detected. Additionally it is checked, if the value for the positive control (drop of sfGFP) is above a certain value, confirming the functionality of the biosensor. Furthermore the app displays specific information regarding the different heavymetals and date rape drugs to inform the user. You can download it by clicking on the button below. You need to unzip the file on your phone, since .apk files can not be uploaded. Alternatively download it here and delete the fileextension ".txt".

We designed and printed a black case for an easy handling and a correct positioning of the smartphone and the biosensor test strip.

A photo of our test strip. The photo was generated by a typical smartphone (samsung galaxy s5 mini) using an ideal filter combination to detect fluorescence of sfGFP.
Screenshot of the app. It shows the pixels who are taken into account for the calculation in red, so the user can check, whether or not the pixels chosen are correct. Furthermore, it provides the values that are calculated for the greeness of the spot.
Combination of the app and the black case. The black case provides the perfect environment for capturing pictures under reproducible conditions. The application will calculate whether a contamination is present and give out a list of contaminants in the water sample.

The Black case

We showed that, the fluorescence detection works fine, but it's not very practical to take the photo. The filters have to be in the exact right position directly in front of the camera and the flash. It also has to be quite dark for high quality pictures. Therefore we designed a black case and realized it with a 3D printer. Marco Radukic programmed the file for the 3d print in exact accordance with our guideline. The top smartphone inlay can be specifically changed for different smartphone types. The test stripe can be placed on the push loading drawer and inserted into the box. Thus it is quite easy to use. The smartphone is put on the top inlay, the test strip is inserted and the taken photo provides information about the contamination. To download the model for the 3D printing click here.


You can see the 3D modell of the case, realized by Macro Radukic in exact accordance with our guideline. On the right you can see the printed black case. Printed from Thomas Schäfer with his 3D printer.