Difference between revisions of "Team:Lambert GA/Measurement"

 
(20 intermediate revisions by 3 users not shown)
Line 10: Line 10:
  
 
#mainContainer{
 
#mainContainer{
−
    background-color: white;
+
background-color: #7A7A79;
 
     width: 100%;
 
     width: 100%;
 
}
 
}
Line 17: Line 17:
 
margin: auto;
 
margin: auto;
 
     padding: 0px;
 
     padding: 0px;
−
    background-color: white;
 
 
}
 
}
  
−
body { background-color: white; margin: auto; padding: 0px; width: 100%;}
+
body { margin: 0px; padding: 0px; width: 100%;}
  
 
a.drplink {
 
a.drplink {
Line 31: Line 30:
  
 
div {
 
div {
−
color: gray;
+
color: white;
 
}
 
}
 +
  
 
#content {  
 
#content {  
−
margin: 0px auto;
+
margin: 0px;
−
background-color: white;
+
margin-top: -15px;
 +
background-color: #7A7A79;
 
width: 100%;
 
width: 100%;
 
padding: 0px;
 
padding: 0px;
 +
font-family: 'Roboto', sans-serif;
 
}
 
}
  
Line 53: Line 55:
 
margin: auto;
 
margin: auto;
 
width: 75%;
 
width: 75%;
−
color: gray;
+
color: white;
 
}
 
}
  
Line 86: Line 88:
 
#MainTitle {
 
#MainTitle {
 
padding-top: 50px;
 
padding-top: 50px;
−
padding-bottom: 7px;
+
padding-bottom: 20px;
 
font-size: 45px;
 
font-size: 45px;
−
color: #FFB59E; }
+
color: #D49AE6; }
  
  
Line 107: Line 109:
  
 
h2{
 
h2{
−
color: #A6FF79;
+
color: #D49AE6;
 +
text-align:center;
 +
hspace="20"
 
}
 
}
  
Line 114: Line 118:
 
position: fixed;
 
position: fixed;
 
text-decoration: none;
 
text-decoration: none;
−
color: #b8975e;
+
color: #42413C;
 
width: 100%;
 
width: 100%;
 
height: 50px;
 
height: 50px;
 
line-height: 50px;
 
line-height: 50px;
−
background-color: white;
+
background-color: #555554;
−
margin: auto;
+
margin-top: 0px;
 
text-align:center;
 
text-align:center;
 
opacity: 0.9;
 
opacity: 0.9;
Line 138: Line 142:
 
     padding: 0px;
 
     padding: 0px;
 
display: block;
 
display: block;
−
margin: 0px auto;
+
margin: 0px auto;  
 
}
 
}
  
Line 165: Line 169:
 
}
 
}
  
−
 
+
.transparency {
−
.transparent {
+
 
     opacity: 0.4;
 
     opacity: 0.4;
−
    filter: alpha(opacity=40); /* For IE8 and earlier */
 
 
transition: opacity 0.5s ease-in-out;
 
transition: opacity 0.5s ease-in-out;
 +
filter: alpha(opacity=40);
 
-webkit-backface-visibility: hidden;
 
-webkit-backface-visibility: hidden;
 
}
 
}
  
  
−
.transparent:hover {
+
.transparency:hover {
−
     opacity: 1.0;
+
     opacity: 1;
−
    filter: alpha(opacity=100); /* For IE8 and earlier */
+
filter: alpha(opacity=100);
 +
    width = 100px;
 
-webkit-backface-visibility: hidden;
 
-webkit-backface-visibility: hidden;
 
}
 
}
 +
  
  
Line 217: Line 222:
 
   height: 100%;
 
   height: 100%;
 
   width: 100%;
 
   width: 100%;
−
  background-color: white;
 
 
   color: #D49AE6;
 
   color: #D49AE6;
 
   padding: 14px;
 
   padding: 14px;
Line 226: Line 230:
 
   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
 
   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
 
}
 
}
 +
  
 
/* The container <div> - needed to position the dropdown content */
 
/* The container <div> - needed to position the dropdown content */
Line 244: Line 249:
 
     transition: opacity 0.5s ease-in-out;
 
     transition: opacity 0.5s ease-in-out;
 
}
 
}
 +
  
 
/* Links inside the dropdown */
 
/* Links inside the dropdown */
Line 257: Line 263:
  
 
/* Change color of dropdown links on hover */
 
/* Change color of dropdown links on hover */
−
.dropdown-content a:hover {background-color: #F9FF83;
+
.dropdown-content a:hover {background-color: #D49AE6;
 
color: #4A555C;}
 
color: #4A555C;}
  
Line 272: Line 278:
 
/* Change the background color of the dropdown button when the dropdown content is shown*/
 
/* Change the background color of the dropdown button when the dropdown content is shown*/
 
.dropbtn:hover {
 
.dropbtn:hover {
−
     background-color: #F9FF83;
+
     background-color: #D49AE6;
 
     color:  #4A555C;
 
     color:  #4A555C;
 
}
 
}
Line 320: Line 326:
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Notebook">Notebook</a>
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Notebook">Notebook</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/InterLab">InterLab</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/InterLab">InterLab</a>
−
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Contribution">Contribution</a>
 
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Model">Model</a>
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Model">Model</a>
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Results">Results</a><a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Demonstrate">Demonstrate</a>
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Results">Results</a><a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Demonstrate">Demonstrate</a>
−
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Improve">Improve</a>
 
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Attributions">Attributions</a>
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Attributions">Attributions</a>
 
        
 
        
Line 330: Line 334:
 
   </li><!--
 
   </li><!--
 
--><li class="dropdown" >
 
--><li class="dropdown" >
−
       <a href="https://2017.igem.org/Team:Lambert_GA/Parts" class="dropbtn">Parts</a>
+
       <a href="https://2017.igem.org/Team:Lambert_GA/Part Collection" class="dropbtn">Parts</a>
 
       <div class="dropdown-content">
 
       <div class="dropdown-content">
 +
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Part Collection">Part Collection</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;"  
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;"  
−
href="https://2017.igem.org/Team:Lambert_GA/Parts">Parts</a>
+
href="https://2017.igem.org/Team:Lambert_GA/Updated_Part">Updated Parts</a>
−
      <a class="drplink" style="transition: color 0.5s ease-in-out;"
+
−
href="https://2017.igem.org/Team:Lambert_GA/Basic_Part">Basic Parts</a>
+
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Composite Part">Composite Parts</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Composite Part">Composite Parts</a>
−
     <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Part Collection">Part_Collection</a></div>
+
     </div>
 
   </li><!--
 
   </li><!--
 
--><!--
 
--><!--
 
--><a  href="https://2017.igem.org/Team:Lambert_GA/Safety"class="dropbtn">Safety</a><!--
 
--><a  href="https://2017.igem.org/Team:Lambert_GA/Safety"class="dropbtn">Safety</a><!--
 
--><li class="dropdown" >
 
--><li class="dropdown" >
−
       <a href="https://2017.igem.org/Team:Lambert_GA/Human_Practices" class="dropbtn">Human Practices</a>
+
       <a href="https://2017.igem.org/Team:Lambert_GA/HP/Silver" class="dropbtn">Human Practices</a>
 
       <div class="dropdown-content">
 
       <div class="dropdown-content">
−
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Human_Practices">Human Practices</a>
 
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/HP/Silver">Silver HP</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/HP/Silver">Silver HP</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/HP/Gold_Integrated">Integrated and Gold</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/HP/Gold_Integrated">Integrated and Gold</a>
−
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Integrated_Practices">Integrated Practices</a>
 
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Engagement">Public Engagement</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Engagement">Public Engagement</a>
 
     </div>
 
     </div>
Line 355: Line 356:
 
       <div class="dropdown-content">
 
       <div class="dropdown-content">
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Applied_Design">Applied Design</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Applied_Design">Applied Design</a>
−
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Entrepreneurship">Entrepreneurship</a>
 
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Hardware">Hardware</a>
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Hardware">Hardware</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Measurement">Measurement</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Measurement">Measurement</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Model">Model</a>
 
       <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Model">Model</a>
−
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Plant">Plant</a>
 
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Software">Software</a>
 
<a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Software">Software</a>
 
     </div>
 
     </div>
 
   </li>
 
   </li>
−
<a  href="https://igem.org/2017_Judging_Form?team=Lambert_GA"class="dropbtn">JUDGING FORM</a>
+
<a  href="https://igem.org/2017_Judging_Form?team=Lambert_GA"class="dropbtn">Judging Form</a>
 
</div>
 
</div>
  
Line 377: Line 376:
  
 
<center> <h1 id="MainTitle"><b> Measurement </b></h1><img src="https://static.igem.org/mediawiki/2017/b/bc/T--Lambert_GA--purpleline.png" style="width:18%; margin:auto;"> </center> <br>
 
<center> <h1 id="MainTitle"><b> Measurement </b></h1><img src="https://static.igem.org/mediawiki/2017/b/bc/T--Lambert_GA--purpleline.png" style="width:18%; margin:auto;"> </center> <br>
−
 
−
<center><h3 style="color: #D49AE6;">Function</h3></center>
 
−
<p style="width: 100%; margin: auto; font-size: 16px;">The ChromQ Light Chamber is a 3D-printed imaging measurement system used to quantify results of nutrient deficiency. For our current project, it is also used to quickly and inexpensively measure relative protein degradation through quantification of the color in chromoprotein expression.
 
−
</p></center>
 
−
<br>
 
−
<center><h3 style="color: #D49AE6;">Relative Color Quantification</h3></center>
 
−
<p style="width: 100%; margin: auto; font-size: 16px;">Relative strength of the degradation of tsPurple cells (control, tsPurple DAS, and  tsPurple LAA) can be measured by using a smartphone camera lens or any simple photography device (along with the color-controls for consistency).
 
−
<br><br>
 
−
<p style="width: 100%; margin: auto; font-size: 16px;"> Here are the steps for color quantification:<br>
 
−
1. Place specimen* in box next to a control palette. Using a viewing opening at the top, adjust chamber to center specimen.<br>
 
−
2. Using a smartphone camera, take a picture of the specimen, including the control palette. Be sure to focus the image so that all shades of the control palette can be visualized accurately.<br>
 
−
3. Upload picture onto the website www.colorcodepicker.com. <br>
 
−
4. Select color pixels of the target colonies. <br>
 
−
5. The website will give an RGB value. Darker colors correspond to weaker relative degradation strength, while lighter colors correspond to stronger relative degradation strength. The RGB values of the results make up a spectrum that determines level of protein expression compared to intensity of color or RGB value. </p> <br>
 
−
</p>
 
−
<br>
 
−
<p style="width: 100%; margin: auto; font-size: 16px;"> *Specimen Preparation Protocol
 
−
<br>
 
−
1. If liquid culture, spin down pellet in centrifuge at 2450 x g for 10 minutes, decant excess liquid, and pipet approximately 5µL of pellet onto a square of parafilm. <br>
 
−
2. If grown on agar plates, obtain a sterilized or disposable inoculation loop, take a couple of colonies or enough bacteria to form a clump approximately 3-5mm in diameter, and place onto a square of parafilm. </p>
 
−
<br><br>
 
−
<i>GFP Degradation Proof of Concept </i>
 
−
<br><br>
 
−
<center><img src="https://static.igem.org/mediawiki/2017/d/de/T--Lambert_GA--gfp1.png" style="width:70%; margin:auto;"> </center>
 
−
<br>
 
−
<center><font color="D49AE6"><i> The green gradient was generated from the RGB Color Gradient Maker created by PerBang and serves to show the range of GFP intensity in relation to its degradation level </i></font></center>
 
−
<br>
 
−
<center><img src="https://static.igem.org/mediawiki/2017/3/35/T--Lambert_GA--gfp2.png" style="width:40%; margin:auto;"> </center>
 
−
<br>
 
−
<center><font color="D49AE6"><i> Variation of color intensity and fluorescence in GFP degradation over the course of 60 minutes expressed in the vacuoles of protoplasts from Arabidopsis cells </i></font></center>
 
−
<br>
 
−
<center><img src="https://static.igem.org/mediawiki/2017/6/64/T--Lambert_GA--graphbw.png" style="width:40%; margin:auto;"> </center>
 
−
<br>
 
−
<center><font color="D49AE6"><i> Quantification of GFP degradation in relation to the relative intensity of vacuolar fluorescence - this is the model we aim to sophisticate in the future </i></font></center>
 
−
<br>
 
−
<br>
 
−
<p style="width: 100%; margin: auto; font-size: 16px;">Previous research has analyzed GFP fluorescence levels as it has been degraded. This degradation can be matched to RGB levels in the chart above to create a measure for quantifying GFP degradation with the ChromQ Light Chamber. This process can be similarly be applied to using RGB values to analyze degradation levels of chromoproteins. </p>
 
−
 
−
<br>
 
−
<center><h3 style="color: #D49AE6;">Laboratory Controls</h3></center>
 
−
<p style="width: 100%; margin: auto; font-size: 16px;">The two controls used for imaging will be the natural color of cells and solid black. The natural color of bacterial (E.coli) cells is not simply white, but is more of a creamy-white color. Degradation at the cream-white color is 0% degradation, while solid black is 100% degradation. A third control, ideally a shade of purple with 50% degradation, will be established.
 
−
<br><br>
 
−
Additionally, a color-control palette will be used for consistent imaging. As we realize that smartphone cameras tend to adjust color intensity, saturation, and brightness on its own in response to the colors present, the color-controls must always be present during imaging to balance the camera’s automatic adjustments.
 
−
</p>
 
−
<br>
 
−
 
−
<center>
 
−
<img src="https://static.igem.org/mediawiki/2017/1/11/T--Lambert_GA--purplegradient.png" style="width:24%; margin:auto;">
 
−
<img src="https://static.igem.org/mediawiki/2017/7/7a/T--Lambert_GA--purplescale.png" style="width:30%; margin:auto;">
 
−
</center> <br><br>
 
−
<p style="width: 100%; margin: auto; font-size: 16px;"> As seen in the right image above, the color-control palette is composed of filters from Roscolux, which not only provide the RGB values as a color standard but also the wavelengths of the colors for further data analysis if desired. The yellow- and tan-toned filters on the top-left are designed to match the colors of cells that express no chromoproteins, or those that have completely undergone protein degradation. The darkest filters on the bottom-right will serve as a standard for cells expressing chromoproteins but have little or no degradation of protein. With additional experimentation, specific degradation percentages may be matched to the color and create a degradation spectrum based on color, much like the purple gradient depicted in the table on the left. </p>
 
−
<br><br>
 
  
 
<center> <h2>  References </h2> </center>
 
<center> <h2>  References </h2> </center>
Line 457: Line 404:
 
<div id="sponsors-bottom">
 
<div id="sponsors-bottom">
  
−
<a href="http://www.forsyth.k12.ga.us/lhs"><img src="https://static.igem.org/mediawiki/2017/8/8f/T--Lambert_GA--longhorn_iGEM_logo.png" class="transparent" style="height:100px;padding:20px;"></a>
+
<a href="http://www.forsyth.k12.ga.us/lhs"><img src="https://static.igem.org/mediawiki/2017/3/36/RevisedLambertLonghorn.png" class="transparency" style="height:100px;padding:20px;"></a>
  
 
</div>
 
</div>

Latest revision as of 19:27, 1 November 2017


Measurement


References

Dhakar, L. (n.d.). Image Color Picker (Z. A., Ed.). Retrieved October 10, 2017, from http://www.colorcodepicker.com/

Purple color codes. (n.d.). Retrieved October 10, 2017, from http://www.rapidtables.com/web/color/purple-color.htm

RGB Color Gradient Maker. (n.d.). Retrieved October 10, 2017, from http://www.perbang.dk/rgbgradient/

Tamura, K., Shimada, T., Ono, E., Tanaka, Y., Nagatani, A., Higashi, S., . . . Hara-Nishimura, I. (2003, September). Why green fluorescent fusion proteins have not been observed in the vacuoles of higher plants. The Plant Journal, 35(4), 545-555. doi:10.1046/j.1365-313X.2003.01822.x