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

 
(59 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 26: Line 25:
 
}
 
}
 
a.drplink:hover {
 
a.drplink:hover {
−
color:dimgray;
 
−
}
 
−
 
−
a.partlink {
 
−
color:#D49AE6;
 
−
}
 
−
a.partlink:hover {
 
 
color:dimgray;
 
color:dimgray;
 
}
 
}
Line 38: 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 60: Line 55:
 
margin: auto;
 
margin: auto;
 
width: 75%;
 
width: 75%;
−
color: gray;
+
color: white;
 
}
 
}
  
Line 93: Line 88:
 
#MainTitle {
 
#MainTitle {
 
padding-top: 50px;
 
padding-top: 50px;
−
padding-bottom: 7px;
+
padding-bottom: 20px;
 
font-size: 45px;
 
font-size: 45px;
−
color: dimgray; }
+
color: #D49AE6; }
  
  
Line 115: Line 110:
 
h2{
 
h2{
 
color: #D49AE6;
 
color: #D49AE6;
 +
text-align:center;
 +
hspace="20"
 
}
 
}
  
Line 121: 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 145: Line 142:
 
     padding: 0px;
 
     padding: 0px;
 
display: block;
 
display: block;
−
margin: 0px auto;
+
margin: 0px auto;  
 
}
 
}
  
Line 172: 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 224: Line 222:
 
   height: 100%;
 
   height: 100%;
 
   width: 100%;
 
   width: 100%;
−
  background-color: white;
 
 
   color: #D49AE6;
 
   color: #D49AE6;
 
   padding: 14px;
 
   padding: 14px;
Line 233: 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 245: Line 243:
 
     opacity: 0.0;
 
     opacity: 0.0;
 
     position: absolute;
 
     position: absolute;
−
     background-color: #D49AE6;
+
     background-color: #CFB9F7;
 
     min-width: 200px;
 
     min-width: 200px;
 
     text-align: left;
 
     text-align: left;
Line 251: Line 249:
 
     transition: opacity 0.5s ease-in-out;
 
     transition: opacity 0.5s ease-in-out;
 
}
 
}
 +
  
 
/* Links inside the dropdown */
 
/* Links inside the dropdown */
 
.dropdown-content a {
 
.dropdown-content a {
−
     color: white;
+
     color: white;
 
     opacity: 0.0;
 
     opacity: 0.0;
 
     padding: 0px 10px;
 
     padding: 0px 10px;
Line 264: Line 263:
  
 
/* Change color of dropdown links on hover */
 
/* Change color of dropdown links on hover */
−
.dropdown-content a:hover {background-color: #D49AE6}
+
.dropdown-content a:hover {background-color: #D49AE6;
 +
color: #4A555C;}
  
 
/* Show the dropdown menu on hover */
 
/* Show the dropdown menu on hover */
Line 279: Line 279:
 
.dropbtn:hover {
 
.dropbtn:hover {
 
     background-color: #D49AE6;
 
     background-color: #D49AE6;
−
     color: white;
+
     color: #4A555C;
 
}
 
}
  
Line 326: 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 336: Line 335:
 
   </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 361: Line 357:
 
       <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/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 383: Line 376:
 
<br><br>
 
<br><br>
 
<center> <h1 id="MainTitle"><b>Software </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>Software </b></h1><img src="https://static.igem.org/mediawiki/2017/b/bc/T--Lambert_GA--purpleline.png" style="width:18%; margin:auto;"> </center> <br>
 +
<p style="font-size:20px;">
 +
<center><h3 style="color: #D49AE6;">Chrome-Q App</h3></center>
 +
<p style=" font-size: 20px;">Chrome-Q is a Xamarin C# app created in Microsoft Visual Studio 2017 Community Edition. The app was developed for mobile Android devices and will soon be available for iOS devices. A photo is taken (within the app) of the Chrome-Q dome target base (that contains the rows of samples in triplicate). The app finds the samples in the photo by looking for low luminance values compared to the high luminance values in the white background. Then, the app finds the average hue and luminance for each sample by averaging the RGB values for all of the pixels in the circular sample. It groups the samples into rows by comparing their vertical locations in the photo. After grouping into rows, it calculates the average RGB values for the entire row to generate an average hue and luminance for the triplicate. The average hue and luminance are utilized to calculate the standard deviation of the triplicate. By looking at the standard deviation, it was determined that the hue values were most consistent in the triplicate. These values can then be used to compare relative levels of degradation between the different constructs (tsPurple, tsPurpleDAS, and tsPurpleLAA).
 +
</p>
 +
<center>
 +
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2017/1/1c/Appfindingcircles.jpeg" style="width:450px; margin:auto;">
 +
<br><br>
 +
<i style="font-size: 14px; color: white;"> Chromoprotein samples in the Chrome-Q well plate and the Chrome-Q app recognizing the colors (represented by the green dots) </i>
 +
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2017/b/bb/Newtspurplechart.png" style="width:450px; margin:auto;">
 +
<br><br>
 +
<i style="font-size: 14px; color: white;"> Data gathered on tsPurple samples using the Chrome-Q model and app </i>
 +
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2017/1/11/Updatedhuetspurplechart.png" style="width:450px; margin:auto;">
 +
<br><br>
 +
<i style="font-size: 14px; color: white;"> The hue values of tsPurple at different levels of IPTG induction </i>
 +
<br>
 +
<p style=" font-size: 20px;"> Important Note: Hues values range from 0 to 360 degrees. The hue values in the samples begin at around 270 degrees (purple) and increase through 360 degrees. The hues value 0 uL IPTG concentration wraps around to a low hue value of around 40 degrees. To process these hues, 360 degrees were added to values less than 180 degrees, which is why some values are greater than 360. </p>
 +
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2017/a/a0/%25purplechart.png" style="width:450px; margin:auto;">
 +
<br><br>
 +
<i style="font-size: 14px; color: white;"> The % purple of tsPurple samples at different levels of IPTG induction </i>
 +
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2017/6/62/Notjankychromeqpic.jpeg" style="width:450px; margin:auto;">
 +
<br><br>
 +
<i style="font-size: 14px; color: white;"> Team member Emily Gibson using the Chrome-Q system </i>
 +
<br><br><br>
 +
<center> <h2>  References </h2> </center>
 +
<p>Dhakar, L. (n.d.). Image Color Picker (Z. A., Ed.). Retrieved October 10, 2017, from
 +
http://www.colorcodepicker.com/
 +
<br><br>
 +
Purple color codes. (n.d.). Retrieved October 10, 2017, from
 +
http://www.rapidtables.com/web/color/purple-color.htm
 +
<br><br>
 +
RGB Color Gradient Maker. (n.d.). Retrieved October 10, 2017, from http://www.perbang.dk/rgbgradient/
 +
<br><br>
 +
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
 +
</p>
 +
 +
 +
</center>
 +
</p>
 
<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 17:17, 12 December 2017



Software


Chrome-Q App

Chrome-Q is a Xamarin C# app created in Microsoft Visual Studio 2017 Community Edition. The app was developed for mobile Android devices and will soon be available for iOS devices. A photo is taken (within the app) of the Chrome-Q dome target base (that contains the rows of samples in triplicate). The app finds the samples in the photo by looking for low luminance values compared to the high luminance values in the white background. Then, the app finds the average hue and luminance for each sample by averaging the RGB values for all of the pixels in the circular sample. It groups the samples into rows by comparing their vertical locations in the photo. After grouping into rows, it calculates the average RGB values for the entire row to generate an average hue and luminance for the triplicate. The average hue and luminance are utilized to calculate the standard deviation of the triplicate. By looking at the standard deviation, it was determined that the hue values were most consistent in the triplicate. These values can then be used to compare relative levels of degradation between the different constructs (tsPurple, tsPurpleDAS, and tsPurpleLAA).





Chromoprotein samples in the Chrome-Q well plate and the Chrome-Q app recognizing the colors (represented by the green dots)



Data gathered on tsPurple samples using the Chrome-Q model and app



The hue values of tsPurple at different levels of IPTG induction

Important Note: Hues values range from 0 to 360 degrees. The hue values in the samples begin at around 270 degrees (purple) and increase through 360 degrees. The hues value 0 uL IPTG concentration wraps around to a low hue value of around 40 degrees. To process these hues, 360 degrees were added to values less than 180 degrees, which is why some values are greater than 360.





The % purple of tsPurple samples at different levels of IPTG induction



Team member Emily Gibson using the Chrome-Q system


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