Difference between revisions of "Team:UNOTT/Software"
| Line 1: | Line 1: | ||
{{:Team:UNOTT/Template/NavBarTest}} | {{:Team:UNOTT/Template/NavBarTest}} | ||
| − | <html> | + | |
| + | <html > | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| − | < | + | <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> |
| − | < | + | |
| + | |||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<style> | <style> | ||
| − | + | .button { | |
| − | + | display: inline-block; | |
| + | border-radius: 4px; | ||
| + | background-color: #f4511e; | ||
| + | border: none; | ||
| + | color: #FFFFFF; | ||
| + | text-align: center; | ||
| + | font-size: 28px; | ||
| + | padding: 20px; | ||
| + | width: 200px; | ||
| + | transition: all 0.5s; | ||
| + | cursor: pointer; | ||
| + | margin: 5px; | ||
} | } | ||
| − | + | .button span { | |
| + | cursor: pointer; | ||
| + | display: inline-block; | ||
position: relative; | position: relative; | ||
| − | + | transition: 0.5s; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | ||
| − | + | .button span:after { | |
| + | content: '\00bb'; | ||
| + | position: absolute; | ||
| + | opacity: 0; | ||
| + | top: 0; | ||
| + | right: -20px; | ||
| + | transition: 0.5s; | ||
} | } | ||
| − | + | ||
| − | + | .button:hover span { | |
| − | + | padding-right: 25px; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | |
| − | + | .button:hover span:after { | |
| − | + | opacity: 1; | |
| − | + | right: 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | |
| − | + | .image { | |
| − | + | position: center; | |
| − | + | width: 100%; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | |
| − | + | .crop { | |
| − | + | width: 100%; | |
| − | + | height: 1000px; | |
| + | overflow: hidden; | ||
} | } | ||
| − | . | + | |
| − | + | ||
| − | + | h2 span.spacer { | |
| − | + | padding:0 5px; | |
} | } | ||
| − | . | + | |
| − | + | .crop { | |
| − | + | width: 100%; | |
| − | + | height: 700px; | |
| + | overflow: hidden; | ||
} | } | ||
| − | + | ||
| − | + | h2 span { | |
| − | + | color: white; | |
| − | + | font: 100px/100px Helvetica, Sans-Serif; | |
| + | letter-spacing: 10px; | ||
| + | background: rgb(0, 0, 0); /* fallback color */ | ||
| + | background: rgba(0, 0, 0, 0.7); | ||
| + | padding: 10px; | ||
} | } | ||
| − | + | h2 { | |
| − | + | position: absolute; | |
| − | + | top: 350px; | |
| − | + | left: 0; | |
| + | width: 100%; | ||
| + | font-family: 'Karla', sans- | ||
} | } | ||
| − | + | h3 span { | |
| − | + | color: white; | |
| + | font: 20px/20px Helvetica, Sans-Serif; | ||
| + | letter-spacing: 0px; | ||
| + | background: rgb(0, 0, 0); /* fallback color */ | ||
| + | background-color: #D74214; | ||
| + | padding: 10px; | ||
| + | float: right; | ||
| + | position: relative; | ||
| + | top: -10px; | ||
} | } | ||
| − | . | + | .container2 { |
| − | + | ||
| − | + | width: 80%; | |
| − | margin: | + | margin: auto; |
| − | padding: | + | padding-right: 20px; |
| − | + | padding-bottom: 700px; | |
| − | bottom: | + | margin-right: 100px; |
| − | + | padding-top: 250px; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .expandable-boxes { |
| + | position: relative; | ||
| + | } | ||
| − | . | + | .expandable-box { |
| − | + | width: 40%; | |
| − | + | height: 300px; | |
| − | + | float: left; | |
| − | + | margin: 0 3% 20px 0; | |
| − | + | border: 1px solid #999; | |
| − | - | + | border-radius: 12px; |
| − | + | padding: 10px; | |
| − | + | box-sizing: border-box; | |
| − | -webkit- | + | -webkit-transition: all .3s ease-in-out; |
| − | + | -moz-transition: all .3s ease-in-out; | |
| − | + | -o-transition: all .3s ease-in-out; | |
| − | + | -ms-transition: all .3s ease-in-out; | |
| − | - | + | transition: all .3s ease-in-out; |
| − | - | + | background-color: #02263e; |
| − | + | box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25), | |
| − | + | 0 30px 10px -20px rgba(0, 0, 0, .25); | |
| − | + | } | |
| − | + | .expandable-box.open { | |
| − | + | border-color: #red; | |
| − | + | border-width: thick; | |
| − | + | width: 96%; | |
height: 100%; | height: 100%; | ||
| − | + | margin: 0; | |
| − | + | background-color: #02263e; | |
| + | } | ||
| + | .expandable-box.out { | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | overflow: hidden; | ||
| + | border: none; | ||
| + | padding: 0; | ||
| + | margin: 0; | ||
opacity: 0; | opacity: 0; | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | body { | |
| − | + | background-color: #ffffff; | |
| − | - | + | font-color: #ffffff; |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | h1{ | |
| − | + | color: #02263e; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | h2{ | |
| − | + | color: #ffffff; | |
| − | + | ||
} | } | ||
| − | + | p{ | |
| − | + | color: #ffffff; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | ||
| − | + | html { | |
| − | + | height: 100%; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | li { | |
| − | + | color: #B7D18F; /* bullet color */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | li span { | |
| − | + | color: #ffffff; /* text color */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .white-bg{ | |
| − | + | background-color: #ffffff; | |
| − | + | padding-left: 350px; | |
| − | + | padding-right: 350px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .icons{ | ||
| + | position: relative; | ||
| + | top:-80px; | ||
} | } | ||
| − | + | ||
| − | + | .icons2{ | |
| − | + | position: relative; | |
| − | + | top:-20px; | |
} | } | ||
| − | + | ||
| − | + | .icons3{ | |
| − | + | position: relative; | |
| + | top:-40px; | ||
} | } | ||
| − | + | ||
| − | + | .icons4{ | |
| − | + | position: relative; | |
| − | + | top:0px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</style> | </style> | ||
| + | |||
| + | <script type="text/x-mathjax-config"> | ||
| + | MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); | ||
| + | </script> | ||
| + | <script type="text/javascript" | ||
| + | src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> | ||
| + | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
| + | <p><br> | ||
| + | <br> | ||
| + | <br> | ||
| + | <br> | ||
| + | </p> | ||
| + | <div class="image"> | ||
| + | <div class="crop"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/7/72/UNotts2017ellie.jpg"; style="width:100%;height:auto;"> | ||
| + | </div> | ||
| + | <h2><span>SOFTWARE<span class='spacer'></span></h2> | ||
| + | <div class="container2"> | ||
| + | <div class="expandable-boxes"> | ||
| + | <div class="expandable-box"> | ||
| + | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">Overview </h4><center> | ||
| + | </center> | ||
| − | <div id=" | + | <div id="clear2" style="display: none;"> |
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
<p>Along with modeling all the possible combinations, another issue the team faced was they wouldn't be able to compare the read fluorescence spectra and compare it back to the mother colony's spectra in the time and resources available, as that would mean they would need to create a brand new construction, test and implement. </p> | <p>Along with modeling all the possible combinations, another issue the team faced was they wouldn't be able to compare the read fluorescence spectra and compare it back to the mother colony's spectra in the time and resources available, as that would mean they would need to create a brand new construction, test and implement. </p> | ||
<p> </p> | <p> </p> | ||
| Line 272: | Line 239: | ||
<p>Another issue the team faced is identifying whether Key.Coli was a user friendly product. In order to test how user's would respond to having to use Key.Coli in practice, a virtual every day environment was developed within Unity which showed a person's everyday life. Actions were monitored and fed back to the team to see how easy it was to operate Key.Coli. as well as identifying any practical problems we would face.</p> | <p>Another issue the team faced is identifying whether Key.Coli was a user friendly product. In order to test how user's would respond to having to use Key.Coli in practice, a virtual every day environment was developed within Unity which showed a person's everyday life. Actions were monitored and fed back to the team to see how easy it was to operate Key.Coli. as well as identifying any practical problems we would face.</p> | ||
<p> </p> | <p> </p> | ||
| − | <p> Lastly, to put Key.Coli into practice, was to write a security layer on top of Linux on a Raspberry Pi which means it can only be accessed through the Key.Coli password. This protects the computer from intruders, hence completing the objective of Key.Coli </p> | + | <p> Lastly, to put Key.Coli into practice, was to write a security layer on top of Linux on a Raspberry Pi which means it can only be accessed through the Key.Coli password. This protects the computer from intruders, hence completing the objective of Key.Coli </p> |
| − | < | + | |
| − | < | + | </a> |
| + | </div> | ||
| + | |||
| + | |||
| + | </div> | ||
| + | </div> | ||
| − | < | + | <div class="expandable-box"> |
| − | + | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">Image Comparison Software</h4> | |
| − | + | <center></center> | |
| − | + | <div id="clear3" style="display: none;"> | |
| − | + | <a href="https://github.com/BurgundyIsAPublicEnemy/iGEMNotts2017/blob/master/fl_compare.exe">Download the software here</a> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <a href="https://github.com/BurgundyIsAPublicEnemy/iGEMNotts2017/blob/master/fl_compare.exe">Download the software here</a> | + | |
<br> </br> | <br> </br> | ||
<p> A major issue the team faced was the comparison between the fluorescence with the mother colony and the Key.Coli mechanism. One option considered was to use image comparison to check how similar the spectra were </p> | <p> A major issue the team faced was the comparison between the fluorescence with the mother colony and the Key.Coli mechanism. One option considered was to use image comparison to check how similar the spectra were </p> | ||
| Line 331: | Line 285: | ||
<sup> 1 </sup> <a href="https://en.wikipedia.org/wiki/Damerau%E2%80%93Levenshtein_distance">Image taken from Wikipedia</a> | <sup> 1 </sup> <a href="https://en.wikipedia.org/wiki/Damerau%E2%80%93Levenshtein_distance">Image taken from Wikipedia</a> | ||
| − | |||
| − | |||
| + | </a> | ||
| + | </div> | ||
</div> | </div> | ||
| − | |||
| − | < | + | <div class="expandable-box"> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">Raw Data Differentiating Software </h4><center></center> |
| − | < | + | <div id="clear4" style="display: none;"> |
| − | < | + | <p> Another method of comparing fluorescence spectra is by taking raw data and comparing them cell by cell. This was a far more user friendly method than using Image Comparison we found the data held the same format in terms of spacing when outputted by the fluorescence reader. </p> |
| − | + | ||
| − | <p> Another method of comparing fluorescence spectra is by taking raw data and comparing them cell by cell. This was a far more user friendly method than using Image Comparison we found the data held the same format in terms of spacing when outputted by the fluorescence reader. </p> | + | |
<p> </p> | <p> </p> | ||
<p> One major issue with using Image Comparison is that the images were required to be exactly the same size for it to work and be bitmaps, which is an uncommon image type. Another issue is that if the images were very large, the time would take longer. This would be an improvement over that method as there wouldn't be any images involved </p> | <p> One major issue with using Image Comparison is that the images were required to be exactly the same size for it to work and be bitmaps, which is an uncommon image type. Another issue is that if the images were very large, the time would take longer. This would be an improvement over that method as there wouldn't be any images involved </p> | ||
| Line 362: | Line 310: | ||
<p> </p> | <p> </p> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | </div> | + | |
| − | </ | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <p> The software was written as an answer to the team wanting to be see how the spectra would look like after a certain amount of time as well as what the fluorescence would be at a certain time point. This is very useful as it allows the team to know what to expect during the constructions as well as be able to test multiple conditions in a short time </p> | + | <div class="expandable-box"> |
| + | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">Fluorescence Spectra Simulation</h4> | ||
| + | <center></center> | ||
| + | <div id="clear5" style="display: none;"> | ||
| + | <p> The software was written as an answer to the team wanting to be see how the spectra would look like after a certain amount of time as well as what the fluorescence would be at a certain time point. This is very useful as it allows the team to know what to expect during the constructions as well as be able to test multiple conditions in a short time </p> | ||
<p> </p> | <p> </p> | ||
| Line 394: | Line 335: | ||
<p> </p> | <p> </p> | ||
| − | </ | + | </a> |
| − | + | </div> | |
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | < | + | <div class="expandable-box"> |
| + | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">Random Number Generation</h4><center></center> | ||
| + | <div id="clear6" style="display: none;"> | ||
<p> When speaking to our industry contacts about Key.Coli, they were very interested in seeing Key.Coli's capabilities as a Random Number Generation tool. After gaining results from the random constructions, the team set to finding out if the values could be used to generate a string of random numbers. The results are as shown. </p> | <p> When speaking to our industry contacts about Key.Coli, they were very interested in seeing Key.Coli's capabilities as a Random Number Generation tool. After gaining results from the random constructions, the team set to finding out if the values could be used to generate a string of random numbers. The results are as shown. </p> | ||
| Line 420: | Line 355: | ||
<br> </br> | <br> </br> | ||
<p> <sup> 1 </sup> RAND was generated using =INT(NORM.INV(RAND(),XX,XX)) on Excel, Atmospheric Noise was taken from Random.org and Fortuna is used in some Unix based OS to generate security keys </p> | <p> <sup> 1 </sup> RAND was generated using =INT(NORM.INV(RAND(),XX,XX)) on Excel, Atmospheric Noise was taken from Random.org and Fortuna is used in some Unix based OS to generate security keys </p> | ||
| − | <p> <sup> 2 </sup> See Modelling's Are Our Constructions Random </p> | + | <p> <sup> 2 </sup> See Modelling's Are Our Constructions Random </p> |
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| − | |||
| − | |||
| − | |||
| − | + | <div class="expandable-box"> | |
| − | + | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">Linux Key.Coli Security Layer </h4><center></center> | |
| − | + | <div id="clear7" style="display: none;"> | |
| − | + | <p> As a final wrap up for the project, all the software and modelling was put together to create an additional security layer on top of Linux for the Raspberry Pi. <p> | |
| − | + | ||
| − | <center | + | |
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | <p> As a final wrap up for the project, all the software and modelling was put together to create an additional security layer on top of Linux for the Raspberry Pi. <p> | + | |
<p> This was done to show people how Key.Coli could be used to secure your computer from strangers who don't have the Key.Coli but might know your password as well as giving us a physical demonstration of Key.Coli to show at the Jamboree.</p> | <p> This was done to show people how Key.Coli could be used to secure your computer from strangers who don't have the Key.Coli but might know your password as well as giving us a physical demonstration of Key.Coli to show at the Jamboree.</p> | ||
| Line 447: | Line 375: | ||
<p> However, due to health and safety regulations, for the Jamboree, we read data from conditions in lab and stored them on USB sticks, acting as the Key.Coli and mother colony. This is similar to how the actual system would work, except it has USB drives instead of fluorescence readers </p> | <p> However, due to health and safety regulations, for the Jamboree, we read data from conditions in lab and stored them on USB sticks, acting as the Key.Coli and mother colony. This is similar to how the actual system would work, except it has USB drives instead of fluorescence readers </p> | ||
| − | </ | + | </a> |
| − | </ | + | </div> |
| − | + | </div> | |
| − | + | ||
| + | </div> | ||
| + | </div> | ||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | ||
| − | |||
| − | (function() { | + | <script>$(document).ready(function() { |
| − | + | //HOW TO HIDE | |
| + | var mydiv = document.getElementById('clear2'); | ||
| + | var mydiv1 = document.getElementById('clear3'); | ||
| + | var mydiv2 = document.getElementById('clear4'); | ||
| + | var mydiv3 = document.getElementById('clear5'); | ||
| + | var mydiv4 = document.getElementById('clear6'); | ||
| + | var mydiv5 = document.getElementById('clear7'); | ||
| + | //HOW TO HIDE | ||
| − | + | $('.expandable-box').click(function(e) { | |
| + | if($(this).hasClass('open')) { | ||
| + | //HOW TO HIDE | ||
| − | + | //HOW TO HIDE | |
| − | + | $('.expandable-box.out').not($(this)).removeClass('out'); | |
| − | + | $(this).removeClass('open'); | |
| − | + | mydiv.style.display = 'none'; | |
| − | + | mydiv1.style.display = 'none'; | |
| − | + | mydiv2.style.display = 'none'; | |
| − | + | mydiv3.style.display = 'none'; | |
| − | + | mydiv4.style.display = 'none'; | |
| − | + | mydiv5.style.display = 'none'; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | else { | |
| − | + | $('.expandable-box').not($(this)).addClass('out'); | |
| − | + | $(this).addClass('open'); | |
| − | + | ||
| − | + | ||
| − | ' | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | //HOW TO HIDE | |
| − | + | mydiv.style.display = 'block' | |
| − | + | mydiv1.style.display = 'block' | |
| − | + | mydiv2.style.display = 'block' | |
| − | + | mydiv3.style.display = 'block' | |
| − | + | mydiv4.style.display = 'block' | |
| − | + | mydiv5.style.display = 'block' | |
| − | + | //HOW TO HIDE | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | ' | + | |
| − | + | ||
} | } | ||
| − | }; | + | }); |
| + | });</script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 20:51, 31 October 2017
SOFTWARE
Image Comparison Software
Raw Data Differentiating Software
Fluorescence Spectra Simulation
Random Number Generation
