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

(Prototype team page)
 
(60 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Lambert_GA}}
 
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
 +
#sideMenu { display:none; }
  
 +
a:hover {
 +
text-decoration: none;
 +
}
  
−
<div class="column full_size judges-will-not-evaluate">
+
#mainContainer{
−
<h3>★  ALERT! </h3>
+
background-color: #7A7A79;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
    width: 100%;
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
}
 +
#main{
 +
    width: 100%;
 +
margin: auto;
 +
    padding: 0px;
 +
}
 +
 
 +
body { margin: 0px; padding: 0px; width: 100%;}
 +
 
 +
a.drplink {
 +
color:white;
 +
}
 +
a.drplink:hover {
 +
color:dimgray;
 +
}
 +
 
 +
 
 +
div {
 +
color: white;
 +
}
 +
 
 +
 
 +
#content {
 +
margin: 0px;
 +
margin-top: -15px;
 +
background-color: #7A7A79;
 +
width: 100%;
 +
padding: 0px;
 +
font-family: 'Roboto', sans-serif;
 +
}
 +
 
 +
 
 +
.logo_2017 {display:none;}
 +
 
 +
 
 +
.column full_size {width: 100%;
 +
height: 700px;
 +
position: center; }
 +
 
 +
 
 +
p {
 +
margin: auto;
 +
width: 75%;
 +
color: white;
 +
}
 +
 
 +
#firstHeading {
 +
font-size: 16px;
 +
color: #9D0EC8;}
 +
 
 +
a {
 +
opacity: 1.0;
 +
}
 +
 
 +
a:visited {
 +
color: #D49AE6;
 +
}
 +
 
 +
a.HeaderLinks {
 +
height: 50px;
 +
position: center;
 +
border: none;
 +
color: #D49AE6;
 +
text-align: center;
 +
text-decoration: none;
 +
font-size: 16px;
 +
}
 +
 
 +
 
 +
#top_title {
 +
background-color: white;
 +
}
 +
 
 +
 
 +
#MainTitle {
 +
padding-top: 50px;
 +
padding-bottom: 20px;
 +
font-size: 45px;
 +
color: #D49AE6; }
 +
 
 +
 
 +
.firstHeading{
 +
    display: none;
 +
}
 +
 
 +
 
 +
body{
 +
font-size:15px;
 +
}
 +
 
 +
 
 +
header h1{
 +
text-align:center;
 +
color: dimgray;
 +
}
 +
 
 +
h2{
 +
color: #D49AE6;
 +
text-align:center;
 +
hspace="20"
 +
}
 +
 
 +
 
 +
#headerLinks {
 +
position: fixed;
 +
text-decoration: none;
 +
color: #42413C;
 +
width: 100%;
 +
height: 50px;
 +
line-height: 50px;
 +
background-color: #555554;
 +
margin-top: 0px;
 +
text-align:center;
 +
opacity: 0.9;
 +
}
 +
 
 +
 
 +
.header{
 +
width: 100%;
 +
padding: 0;
 +
margin: 0 auto;
 +
top: 0px;
 +
background-color: rgba(255,255,255,0.0);
 +
}
 +
 
 +
 
 +
#text{
 +
width: 900px;
 +
    padding: 0px;
 +
display: block;
 +
margin: 0px auto;
 +
}
 +
 
 +
#space{
 +
height:50px;
 +
}
 +
 
 +
 
 +
#sponsors-bottom{
 +
width: 100%;
 +
margin: 0px auto;
 +
text-align: center;
 +
display: block;
 +
}
 +
 
 +
 
 +
#sponsors-bottom a{
 +
margin: auto;
 +
width: 50%
 +
display: inline-block;
 +
}
 +
 
 +
 
 +
#space2{
 +
height:100px;
 +
}
 +
 
 +
.transparency {
 +
    opacity: 0.4;
 +
transition: opacity 0.5s ease-in-out;
 +
filter: alpha(opacity=40);
 +
-webkit-backface-visibility: hidden;
 +
}
 +
 
 +
 
 +
.transparency:hover {
 +
    opacity: 1;
 +
filter: alpha(opacity=100);
 +
    width = 100px;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
 
 +
 
 +
 
 +
.img-right{
 +
width: 50%;
 +
float: right;
 +
}
 +
 
 +
 
 +
.img-left{
 +
width: 50%;
 +
float: left;
 +
}
 +
 
 +
 
 +
.display-block{
 +
width: 100%;
 +
margin: 0 auto;
 +
}
 +
 
 +
 
 +
.display-block img{
 +
display: block;
 +
}
 +
 
 +
#globalWrapper{
 +
background-color: white;
 +
padding: 0px;
 +
 
 +
 
 +
}
 +
 
 +
 
 +
/* Dropdown Button */
 +
.dropbtn {
 +
  margin: auto;
 +
  position: left; 
 +
  height: 100%;
 +
  width: 100%;
 +
  color: #D49AE6;
 +
  padding: 14px;
 +
  font-size: 20px;
 +
  text-align: left;
 +
  border: none;
 +
  cursor: pointer;
 +
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
 +
}
 +
 
 +
 
 +
/* The container <div> - needed to position the dropdown content */
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    opacity: 0.0;
 +
    position: absolute;
 +
    background-color: #CFB9F7;
 +
    min-width: 200px;
 +
    text-align: left;
 +
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
 +
    transition: opacity 0.5s ease-in-out;
 +
}
 +
 
 +
 
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color:  white;
 +
    opacity: 0.0;
 +
    padding: 0px 10px;
 +
    font-size: 20px;
 +
    text-decoration: none;
 +
    display: block;
 +
    transition: opacity 0.5s ease-in-out;
 +
}
 +
 
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #D49AE6;
 +
color: #4A555C;}
 +
 
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
    opacity: 1.0;
 +
}
 +
 
 +
.dropdown:hover .dropdown-content a {
 +
  opacity: 1.0;
 +
}
 +
 
 +
/* Change the background color of the dropdown button when the dropdown content is shown*/
 +
.dropbtn:hover {
 +
    background-color: #D49AE6;
 +
    color:  #4A555C;
 +
}
 +
 
 +
#mainbanner{
 +
text-align: center;
 +
}
 +
 
 +
#mainbanner{
 +
    display: block;
 +
    margin: auto;;
 +
}
 +
#logo{
 +
height: 50px;
 +
opacity:0.4;
 +
}
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
 
 +
 
 +
<header>
 +
<div id="headerLinks">
 +
<a href="https://2017.igem.org/Team:Lambert_GA" class="dropbtn">Home</a><!--
 +
--><li class="dropdown" >
 +
      <a href="https://2017.igem.org/Team:Lambert_GA/Team" class="dropbtn">Team</a>
 +
      <div class="dropdown-content">
 +
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Team">Team</a>
 +
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Collaborations">Collaborations</a>
 +
    </div>
 +
  </li><!--
 +
--><li class="dropdown">
 +
  <a href="https://2017.igem.org/Team:Lambert_GA/Description" class="dropbtn">Project</a>
 +
    <div class="dropdown-content" style="transition: display 0.5s ease-in-out;">
 +
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Description">Description</a>
 +
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Design">Design</a>
 +
      <a class="drplink" style="transition: color 0.5s ease-in-out;" href="https://2017.igem.org/Team:Lambert_GA/Experiments">Experiments</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/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/Attributions">Attributions</a>
 +
     
 +
     
 +
    </div>
 +
  </li><!--
 +
--><li class="dropdown" >
 +
      <a href="https://2017.igem.org/Team:Lambert_GA/Part Collection" class="dropbtn">Parts</a>
 +
      <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;"
 +
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/Composite Part">Composite Parts</a>
 +
    </div>
 +
  </li><!--
 +
--><!--
 +
--><a  href="https://2017.igem.org/Team:Lambert_GA/Safety"class="dropbtn">Safety</a><!--
 +
--><li class="dropdown" >
 +
      <a href="https://2017.igem.org/Team:Lambert_GA/HP/Silver" class="dropbtn">Human Practices</a>
 +
      <div class="dropdown-content">
 +
      <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/Engagement">Public Engagement</a>
 +
    </div>
 +
  </li><!--
 +
--><li class="dropdown" >
 +
      <a href="https://2017.igem.org/Team:Lambert_GA/Hardware" class="dropbtn">Awards</a>
 +
      <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/Hardware">Hardware</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/Software">Software</a>
 +
    </div>
 +
  </li>
 +
<a  href="https://igem.org/2017_Judging_Form?team=Lambert_GA"class="dropbtn">Judging Form</a>
 
</div>
 
</div>
−
<div class="clear"></div>
 
  
 +
</header>
  
−
<div class="column half_size">
 
−
<h1>Software</h1>
 
−
<h3>Best Software Tool Special Prize</h3>
 
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.
 
  
 +
 +
<section>
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-md-12 col-sm-10">
  
 
<br><br>
 
<br><br>
−
To compete for the <a href="https://2017.igem.org/Judging/Awards">Best Software Tool prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2017.igem.org/Judging/Judging_Form">judging form</a>.
+
<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>
 
<br><br>
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
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>
 
</p>
  
  
−
</div>
+
</center>
−
 
+
−
<div class="column half_size">
+
−
<h5> Inspiration </h5>
+
−
<p>
+
−
Here are a few examples from previous teams:
+
 
</p>
 
</p>
−
<ul>
+
<div id="sponsors-bottom">
−
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
+
 
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
<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>
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
+
−
</ul>
+
  
 
</div>
 
</div>
 +
  
 
</html>
 
</html>

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