Difference between revisions of "Team:UCL/Software"

 
(125 intermediate revisions by 4 users not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
−
  <!--Banner should go here-->
+
<head>
−
 
+
<!--
−
 
+
<script>
−
  <head>
+
                $(document).ready(function(){
−
    <script>
+
  
−
      $(function () {
+
          $('div#members').each(function(){
−
      $('.content').myTooltip({
+
−
        speed: 200,
+
−
        closeOnClick: true
+
−
      });
+
  
−
    });
+
                // get current div
 +
                var $div_parent = $(this);
  
 +
                // get array of childs in parent div
 +
                var $divsArr = $div_parent.children('div.memberwrapper');
  
 +
                // sort array of childs in parent div (#members) randomly
 +
                $divsArr.sort(function(a,b){
  
−
    $.fn.myTooltip = function ( options ) {
+
                      // Get a random number between 0 and 10
 +
                      var temp = parseInt( Math.random()*10 );
  
 +
                      // Get 1 or 0, whether temp is odd or even
 +
                      var isOddOrEven = temp%2;
  
−
      var defaults = {
+
                      // Get +1 or -1, whether temp greater or smaller than 5
−
        speed: 650,
+
                      var isPosOrNeg = temp>5 ? 1 : -1;
−
        closeOnClick: false,
+
−
        tooltipClass: 'tooltip'
+
−
      };  
+
  
−
      var settings = $.extend( {}, defaults, options );
+
                      // Return -1, 0, or +1
 +
                      return( isOddOrEven*isPosOrNeg );
 +
                })
  
−
      var $this = $(this),
+
                // append child items to parent
−
           $tooltip = $this.find('.'+settings.tooltipClass);
+
                .appendTo($div_parent);           
 +
           });
 +
    });
  
 +
</script>
 +
-->
  
−
      setPosition();
+
<script>
−
      $(window).resize(function () {
+
−
        setPosition();
+
−
      });
+
  
 +
  $(function () {
 +
  $('.content').myTooltip({
 +
    speed: 200,
 +
    closeOnClick: true
 +
  });
 +
 
 +
});
  
−
      $this.mouseenter(function () {
 
−
        $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
 
−
      }).mouseleave(function () {
 
−
        $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
 
−
      });
 
  
−
      if(settings.closeOnClick) {
 
−
        $tooltip.click(function () {
 
−
          $(this).stop(true, true).fadeOut(settings.speed);
 
−
        });
 
−
      }
 
  
 +
$.fn.myTooltip = function ( options ) {
 +
 
 +
 
 +
  var defaults = {
 +
    speed: 650,
 +
    closeOnClick: false,
 +
    tooltipClass: 'tooltip'
 +
  };
 +
 
 +
  var settings = $.extend( {}, defaults, options );
 +
 
 +
  var $this = $(this),
 +
      $tooltip = $this.find('.'+settings.tooltipClass);
 +
 
 +
 
 +
  setPosition();
 +
  $(window).resize(function () {
 +
    setPosition();
 +
  });
 +
 
 +
 
 +
  $this.mouseenter(function () {
 +
    $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
 +
  }).mouseleave(function () {
 +
    $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
 +
  });
 +
 
 +
  if(settings.closeOnClick) {
 +
    $tooltip.click(function () {
 +
      $(this).stop(true, true).fadeOut(settings.speed);
 +
    });
 +
  }
 +
 
 +
 
 +
  function setPosition() {
 +
    $tooltip.css({top: $this.height(), left: 0});
 +
  }
 +
 
 +
};
  
−
      function setPosition() {
+
</script>
−
        $tooltip.css({top: $this.height(), left: -150});
+
<style>
−
      }
+
  
−
    };
+
 
 +
      #submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
  
−
    </script>
+
 
 +
 
 +
#header2 {
 +
width: 100%;
 +
background-color: #000;
 +
min-height: 100%;
 +
height: auto;
 +
position: relative;
 +
margin: 0 auto;
 +
padding: 0;
 +
top: 0;
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px;
 +
padding-bottom: 100px;
 +
}
  
−
    <script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
 
−
        <script>
 
−
            smoothScroll.init({
 
−
                speed: 1000,
 
−
                easing: 'easeInOutCubic',
 
−
                offset: 0,
 
−
                updateURL: true,
 
−
                callbackBefore: function ( toggle, anchor ) {},
 
−
                callbackAfter: function ( toggle, anchor ) {}
 
−
            });
 
−
        </script>
 
−
    <style>
 
  
  
−
    .mainmenu {background-color: #fff !important;}
+
#header2:before
−
    .menu-items a {color: #493C54;}
+
{
−
    .buttonblack {background-color: #22343C; border-color: #22343C; }
+
content: "";
−
    a.buttonblack { color: #fff !important; font-size: 12px;}
+
background-image: url('https://static.igem.org/mediawiki/2015/9/90/UCL_Software.jpg');
−
    .buttonblack:hover {border-color: #22343C; color: #22343C !important;}
+
      -webkit-filter: blur(2px);
−
 
+
  -moz-filter: blur(2px);
 +
  -o-filter: blur(2px);
 +
  -ms-filter: blur(2px);
 +
  filter: blur(2px);
 +
background-repeat: no-repeat;
 +
background-position: 0 0 0 0;
 +
  background-attachment: fixed !important;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 2000, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0.4)));
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
border: none;
 +
}
  
  
−
 
+
#mobilebackground {
−
 
+
  background-image: url('https://static.igem.org/mediawiki/2015/9/90/UCL_Software.jpg');
−
 
+
      -webkit-filter: blur(4px);
−
 
+
  -moz-filter: blur(4px);
−
    #header2 {
+
  -o-filter: blur(4px);
−
 
+
  -ms-filter: blur(4px);
−
    width: 100%;
+
  filter: blur(4px);
−
    position: relative;
+
−
    margin: 0;
+
−
    padding: 0;
+
 
     top: 0;
 
     top: 0;
−
     bottom: 0;
+
     right: 0;
−
     margin: 0 auto;
+
     left: 0;
−
     min-height: 100%;
+
     background-position: 0 0 0 0;
−
    height: auto;
+
position: fixed;
−
     vertical-align: middle;
+
     background-repeat: no-repeat;
−
    font-family: Raleway;
+
  -webkit-background-size: cover;
−
    letter-spacing: 1.1px; font-size: 13px;
+
  -moz-background-size: cover;
−
    }
+
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: none;
 +
width: 100%;
 +
height: 100%;
 +
padding: 0;
 +
margin: 0;
  
 +
  }
  
  
−
    #header2:before
+
 
−
    {
+
  .buttonblack {background-color: #892637; border-color: #892637; }
−
    content: "";
+
a.buttonblack { color: #fff !important; font-size: 12px;}
−
        background-image: url('https://static.igem.org/mediawiki/2015/6/6b/UCLSoftware1.png');
+
.buttonblack:hover {border-color: #892637; color: #892637 !important;}
−
      background-repeat: no-repeat;
+
−
      background-attachment: fixed !important;
+
−
      -webkit-background-size: cover;
+
−
      -moz-background-size: cover;
+
−
      -o-background-size: cover;
+
−
      background-size: cover;
+
−
    -webkit-box-sizing: border-box;
+
−
        -moz-box-sizing: border-box;
+
−
        box-sizing: border-box;
+
−
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
+
−
        position: absolute;
+
−
        top: 0px;
+
−
        left: 0px;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
        width: 100%;
+
−
        height: 100%;
+
−
    pointer-events: none;
+
−
    overflow: hidden;
+
−
    display: block;
+
−
    border: none;}
+
  
−
    #mobilebackground {
 
−
      background-image: url('https://static.igem.org/mediawiki/2015/6/6b/UCLSoftware1.png');
 
−
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 
  
−
        top: 0;
 
−
        right: 0;
 
−
        left: 0;
 
−
        background-position: 0 0 0 0;
 
−
    position: fixed;
 
−
        background-repeat: no-repeat;
 
−
      -webkit-background-size: cover;
 
−
      -moz-background-size: cover;
 
−
      -o-background-size: cover;
 
−
      background-size: cover;
 
−
    -webkit-box-sizing: border-box;
 
−
        -moz-box-sizing: border-box;
 
−
        box-sizing: border-box;
 
−
    display: none;
 
−
    width: 100%;
 
−
    height: 100%;
 
  
−
      }
+
#wrapper {width: 80%; height: 100%; background: none; margin: 0 auto; position: relative; padding: 0; margin-bottom: 200px; overflow: auto;}  
  
  
−
    #text h2 {
 
−
    font-size: 30px !important;
 
  
−
    }
+
#members { width: 100%; height: auto; position: relative;}
  
 +
.memberwrapper {
 +
margin: 0 auto;
 +
margin-bottom: 50px;
 +
width: 90%;
 +
position: relative;
 +
background: #fff;
 +
border-radius: 8px;
 +
padding: 50px;
 +
height: auto;
 +
overflow: auto;
 +
}
  
  
−
    #wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1;}  
+
.memberwrapper h2 {font-size: 13px; text-decoration: none; border-bottom: 0px; display: block; background: #000;
 +
color: #fff; font-weight: bold; padding: 14px; letter-spacing: 4px; text-transform: uppercase; margin: 5px;}
  
−
    #submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
 
  
−
    #text {margin-top: 50px; z-index: 9999;}
+
.portraitL {
−
    #text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; }
+
float: left;
 +
display: inline-block;
 +
width: 30%;
 +
opacity:1;
  
−
    .blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
+
}
−
        transition-duration: 1s;
+
−
        transition-timing-function: ease; }
+
  
−
    #text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
+
.portraitL img{
 +
padding: 5px;
 +
float: left;
 +
width: 100%;
 +
}
  
−
    .citecryan {background: #fff; border-radius: 4px; opacity: 0.8; margin-left: 340px; padding: 10px;}
+
.bigtitle p {font-size: 15px;
 +
line-height: 1.6; letter-spacing: 1.2px;}
  
−
    .citecryan:hover {opacity: 1; transition-property: opacity;
+
.memberwrapper p {
−
        transition-duration: 1s;
+
text-align:justify;
−
        transition-timing-function: ease;}
+
padding:  20px 0px !important;
 +
font-size: 15px;
 +
line-height: 1.9;
 +
letter-spacing: 1.2px;
 +
color: #0a0111;
 +
margin: 0 !important;
  
−
    .constructs {border-radius: 4px;  margin: 0 auto; text-align: justify; font-size: 15px; width: 60%; z-index: 3; opacity: 1;  padding: 40px; line-height: 1.4; padding-top: 25px;}
+
}
−
    #text a {color: #33726c; font-weight: bold; text-decoration: none;}
+
 
−
    #text a:hover {color: #33726c; font-weight: bold; text-decoration: none;}
+
 
−
    #text a:visited {color: #33726c; font-weight: bold; text-decoration: none;}
+
  
 +
 
 +
 
  
 +
.titlecircle {width: 85%; margin: 0 auto; padding-top: 8%;}
 +
.title2 {font-size: 380%;}
 +
  .bigtitle a {color:white;}
  
  
−
    .content .tooltip {
 
−
      background-color: #fff;
 
−
    border: 1px #22343C solid;
 
−
      border-radius: 4px;
 
−
      padding: 3px;
 
−
      position: absolute;
 
−
      width: 300px;
 
−
      z-Index: 99999;
 
−
      display: none;
 
−
    letter-spacing: 1px;
 
−
    line-height: 1;
 
−
    font-size: 11px;
 
−
    }
 
  
−
    .tooltip a {color: #22343C;}
+
.arrow {font-size: 50px;}
−
    .tooltip {color: #22343C;}
+
  
−
    .content {
+
@media(max-width:1280px){
−
      position: relative;
+
.bigtitle {font-size: 15px;}
−
    }
+
.bigtitle {width: 50%;}
  
−
    .content {color: #d67166;}
+
}
  
−
    .bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png'); text-align: center; line-height: 2;
 
−
        background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;}
 
  
−
    .bigtitle a {color: #22343C; text-decoration: none;}
+
@media(max-width:1152px){
  
−
    .title2 {font-family: League Script; font-size: 380%;}
+
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 80%;}
 +
.portraitR, .portraitL {width: 43%;}
 +
.memberdescriptionL, .memberdescriptionR {width: 55%;}
 +
.memberdescriptionL p, .memberdescriptionR p {line-height: 1.5;}
  
−
    .titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
+
}
  
−
    .arrow {font-size: 50px;}
 
  
 +
@media(max-width:1024px){
 +
.bigtitle {width: 58%;}
 +
.titlecircle {padding-top: 10%; width: 75%;}
 +
.memberwrapper {padding: 18px;}
 +
#header2:before {background-image: none; }
 +
#header2 {background: none;}
 +
#mobilebackground {display: block;}
  
−
    .buttonblack {
+
}
−
    text-transform: uppercase;
+
−
      font-size: 14px;
+
−
      font-weight: normal;
+
−
      line-height: 1.428571429;
+
−
      text-align: center;
+
−
      white-space: nowrap;
+
−
      vertical-align: middle;
+
−
      border-radius: 4px;
+
−
    transition-property: background-color, color, border-color;
+
−
      transition-duration: 1s;
+
−
      transition-timing-function: ease;
+
−
                color: #FFFFFF;
+
−
        padding: 10px 16px;
+
−
      text-decoration: none;
+
−
    font-family: Raleway;
+
−
    letter-spacing: 2px;
+
−
    font-weight: bold;}
+
  
 +
@media(max-width:960px){
 +
.bigtitle {font-size: 13px; width: 65%;}
 +
.arrow {font-size: 40px;}
 +
.memberdescriptionL, .memberdescriptionR  {width: 90%; display: inline; float: none;}
 +
.portraitR {margin-left: 20px; margin-bottom: -6px; width: 42%;}
 +
.portraitL {margin-right: 20px;  margin-bottom: -6px; width: 42%;}
 +
.memberdescriptionL p, .memberdescriptionR p {line-height: 1.6;}
  
−
    @media(max-width:1280px){
+
}
  
−
    .bigtitle {font-size: 15px;}
 
−
    .bigtitle {width: 50%;}
 
−
    .buttonblack {padding: 5px 11px;}
 
  
−
    }
 
  
  
−
    @media(max-width:1152px){
+
@media(max-width:850px){  
  
−
    .bigtitle {font-size: 14px;}
+
.bigtitle p {line-height: 1.7 !important; margin-top: -15px !important;}
−
    .bigtitle {width: 52%;}
+
}
−
    .titlecircle {width: 80%;}
+
−
    a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
+
−
    .buttonblack {padding: 5px 8px;}
+
−
    }
+
  
 +
@media(max-width:820px){
 +
.titlecircle {padding-top: 4%;}
 +
}
  
−
    @media(max-width:1024px){
 
−
    .bigtitle {width: 58%;}
 
−
    .titlecircle {padding-top: 15%; width: 75%;}
 
−
    #wrapper {top: 100px;}
 
−
    a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
 
−
    #header2:before {background-image: none;}
 
−
    #mobilebackground {display: block;}
 
−
    .constructs {font-size: 15px;}
 
  
 +
@media(max-width: 768px){
  
−
    }
+
.bigtitle {width: 80%; font-size: 13px; padding: 14%; margin-left: -4%;}
 +
.bigtitle p { font-size: 14px; margin-top: -20px !important;}
 +
.titlecircle {width: 70%; padding-top: 8%;}
 +
.memberwrapper {width: 100%; margin-left: -3%;}
  
−
    @media(max-width:960px){
 
  
−
    .bigtitle {font-size: 13px; width: 65%;}
+
}
−
    .arrow {font-size: 40px;}
+
−
    .buttonblack {padding: 5px 5px;}
+
−
    #submenu {width: 110%; margin-left: -5%;}
+
−
    .constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
+
−
    .constructs {text-align: center;}
+
−
    }
+
  
  
−
    @media(max-width:910px){
 
−
    }
 
  
−
    @media(max-width:850px){
 
−
    a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
 
−
    .buttonblack {padding: 4px 3px;}
 
−
    #submenu {width: 112%; margin-left: -6%;}
 
−
    .constructs img {min-width: 80% !important;}
 
  
 +
@media(max-width:670px){
 +
.bigtitle {margin-left: -4%;}
 +
#wrapper {width: 100%;}
  
 +
.memberwrapper {width: 80%; margin: 0 auto; margin-bottom: 30px;}
 +
.memberwrapper p {font-size: 14px;}
 +
.bigtitle p { font-size: 14px; }
 +
.titlecircle {width: 65%;}
  
  
−
    }
 
  
 +
}
  
 +
@media(max-width:640px){
 +
.arrow {font-size: 30px;}
 +
.titlecircle {width: 65%;}
 +
.portraitR, .portraitL {width: 50%;}
 +
}
  
−
    @media(max-width: 768px){
 
−
    .bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
 
−
    .bigtitle p { font-size: 13px; margin-top: -20px !important;}
 
−
    .titlecircle {width: 70%; padding-top: 8%;}
 
−
    a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
 
−
    #submenu {width: 80%; margin: 0 auto;}
 
−
    .buttonblack {line-height: 3.8;}
 
−
    a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 
−
    .buttonblack {padding: 5px 8px;}
 
−
    .citecryan {margin-left: 50px;}
 
  
−
    }
 
  
 +
@media(max-width:530px){
 +
.titlecircle {width: 75%;}
 +
.bigtitle {padding: 14%;color:white;}
 +
  .title2 {font-size:500%;}
 +
.memberdescriptionL p, .memberdescriptionR p {font-size: 13px; line-height: 1.5;}
 +
}
  
 +
@media(max-width: 480px) {
  
  
−
    @media(max-width:680px){
 
−
    #wrapper {width: 100%;}
 
−
    #text {margin: 50px 25px 0 25px;}
 
−
    #text h4 {font-size: 13px;}
 
−
    .constructs {font-size: 13px;}
 
−
    .bigtitle p { font-size: 13px; }
 
−
    .titlecircle {width: 60%;}
 
−
    #submenu {width: 70%; margin: 0 auto;}
 
−
    .buttonblack {line-height: 3.8;}
 
−
    a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 
−
    .buttonblack {padding: 5px 8px;}
 
  
−
    }
+
.bigtitle {padding: 13%;}
 +
.bigtitle p { font-size: 13px; text-align: center;}
 +
.titlecircle {width: 70%; padding-top: 0; }
 +
.portraitR, .portraitL {width: 97%; float: none; margin: 0 auto; padding-bottom: 10px; display: block;}
 +
.portraitR img, .portraitL img {float: none; padding: 0;}
 +
.memberdescriptionL, .memberdescriptionR {width: 98%; display: block; margin: 0 auto !important; padding: 0 !important;}
 +
.memberdescriptionL p, .memberdescriptionR p {font-size: 14px; line-height: 1.5;}
  
−
    @media(max-width:640px){
+
}
−
    .arrow {font-size: 30px;}
+
−
    .titlecircle {width: 60%;}
+
−
    #submenu {width: 80%; margin: 0 auto;}
+
  
 +
@media(max-width: 460px) {
  
−
    }
+
.titlecircle {width: 75%;  padding-top: 0; margin-top: -4%;}
 +
.memberdescriptionL p, .memberdescriptionR p {font-size: 13px; line-height: 1.5; letter-spacing: 1;}
 +
}
  
 +
@media(max-width: 420px) {
  
 +
.titlecircle {width: 80%;  padding-top: 0; margin-top: -6%;}
 +
.bigtitle p {line-height: 1.5 !important;}
  
−
    @media(max-width:530px){
+
}
−
    a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
+
−
    .bigtitle p {}
+
−
    .titlecircle {width: 60%;}
+
−
    .title2 {font-size: 320%;}
+
−
    #text h4 {line-height: 1.7;}
+
−
    .citecryan {margin-left: 10px;}
+
  
 +
@media(max-width: 380px) {
  
−
    }
+
.titlecircle {width: 80%;}
 +
.bigtitle p {font-size: 12px; }
  
−
    @media(max-width: 480px) {
 
−
    .bigtitle p { font-size: 13px; text-align: center;}
 
−
    .titlecircle {width: 70%;}
 
−
    #submenu {width: 90%; margin: 0 auto;}
 
  
 +
}
  
  
−
    }
+
@media(max-width: 360px) {
  
−
    @media(max-width: 410px) {
+
.titlecircle {width: 80%;}
−
    .titlecircle {width: 75%;}
+
.bigtitle p {line-height: 1.3 !important;}
−
    .title2 {font-size: 300%;}
+
}
−
    .bigtitle p {line-height: 1.5 !important;}
+
 
−
    }
+
 
  
−
    @media(max-width: 380px) {
 
−
    .titlecircle {width: 75%; padding-top: 10%;}
 
−
    .bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
 
−
    .title2 {font-size: 260%;}
 
  
−
    }
 
  
  
−
    @media(max-width: 360px) {
+
</style>
−
    .titlecircle {width: 80%;}
+
</head>
−
    .title2 {font-size: 240%;}
+
−
    .buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
+
−
    }
+
  
−
    .idea:before {content: ""; background: url('https://static.igem.org/mediawiki/2015/d/d6/UCL_Screenshot_2015-09-03_at_00.png'); background-position: top right; opacity: 0.2; top: 0px; left: 0px; width: 100%; height: 300px; position: absolute; background-repeat: no-repeat; z-index: 1; pointer-events: none;}
 
  
 +
<div id="mobilebackground"></div>
  
 +
<div id="header2">
  
−
    .idea {line-height: 2; position: relative; z-index: 2; margin-top: 15px; padding-top: 20px;  border-top: 0px dotted #FF9B8E; border-bottom: 0px dotted #FF9B8E; padding-bottom: 20px;}
+
<div id="wrapper">
  
 +
<div class="bigtitle" style="color:white">
 +
<div class="titlecircle">
  
  
−
 
+
<br><br>
−
    .constructsdiv {position: relative; z-index: 1; width: 140%; height: 100%; background-color: #fff; opacity: 1;    margin-left: -20%;
+
  <span class="title2">Software</span><hr style="height:1px; border:none; color:white; background-color:#fff;"><br><p style="margin-top: 5%; line-height: 1.7;font-family:Raleway;">
−
    border-radius: 15px; box-shadow: 0px 0px 20px #eaeaea;}
+
              We have developed <b>two incredible tools</b> to help not only our project but all of iGEM! <br>
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
    .constructsdiv:before {content: ""; background-image: url('https://static.igem.org/mediawiki/2015/4/40/UCLScreenshot_2015-09-03_at_13.png'); background-repeat: no-repeat; background-position: top 0% left 9%; opacity: 0.3;  top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: 2; pointer-events: none;   transition-duration: 1s; transition-property: opacity;
+
−
        transition-timing-function: ease; }
+
−
 
+
−
 
+
−
    .constructsdiv:hover:before {opacity: 1; transition-duration: 1s; transition-property: opacity;
+
−
        transition-timing-function: ease;}
+
−
 
+
−
 
+
−
    </style>
+
−
  </head>
+
−
 
+
−
  <div id="mobilebackground"></div>
+
−
  <div id="header2">
+
−
  <div id="wrapper">
+
−
 
+
−
  <div class="bigtitle">
+
−
        <div class="titlecircle">
+
−
            <span class="title2">Software</span>
+
−
            <p style="margin-top: -30px; line-height: 1.7;margin-left: 20px;margin-right: 10px;">
+
−
            We have developed two incredible tools to help not only our project but all of iGEM! <br>
+
 
                 <span class="arrow">  
 
                 <span class="arrow">  
 
                     <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a>
 
                     <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a>
 
                 </span>
 
                 </span>
−
             </p>
+
             </p></div> </div>
−
         </div>  
+
    <div id="submenu">
 +
         <a data-scroll data-options='{ "easing": "linear" }' href="#mark" class="buttonblack">Mind-the-Mark</a>       
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#growth" class="buttonblack">Mind-the-Growth</a>
 
     </div>
 
     </div>
  
 +
 
 +
 
 +
<div id="members">
 +
 +
<div id="mark" style="height: 50px"></div>
  
−
    <div id="submenu" style="padding-top: 150px;">
 
−
        <a data-scroll data-options='{ "easing": "linear" }' href="#background" class="buttonblack">Mind-the-Mark</a>       
 
−
        <a data-scroll data-options='{ "easing": "linear" }' href="#constructs" class="buttonblack">Mind-the-Model</a>
 
−
        <a data-scroll data-options='{ "easing": "linear" }' href="#modelling" class="buttonblack">Users</a>
 
−
        <a data-scroll data-options='{ "easing": "linear" }' href="#characterization" class="buttonblack">Developers</a>
 
−
    </div>
 
  
 +
<div class="memberwrapper">
 +
<h2>Mind-the-Mark</h2>
 +
<br><br><span style="text-align: center; margin: 0 auto; display: block;"><img src="https://static.igem.org/mediawiki/2015/d/d6/UCL_Mind_the_Mark_icon_small.png"/></span><br>
 +
   
 
    
 
    
 
    
 
    
 
    
 
    
−
    <div id="text">
+
  <div style="width:90%;padding:5%;border:1px solid grey;">
−
 
+
    <h3 style="margin-top:40px;">The Tool</h3>
−
      <h1>Mind-the-Mark</h1>
+
    <p style="margin:0 0 0 20px;">By taking advantage of Google's easy to use extension system for the Chrome Browser, we devised a powerful
−
      <h2>Summary</h2>
+
      and lightweight extension that transforms the iGEM wiki editor on whatever page you choose to edit; be it in the
−
      <p>
+
      future in 2020 or now in 2015. The extension is easily downloaded and then drag-and-dropped into the Chrome browser,
−
            This tool takes the bland and boring wiki input box and transforms it into a proper code editor with several
+
       to install, or installed with a click from the chrome store. Then its working!</p>
−
        interactive and assistive features. Having talked to several iGEM teams this year, and years past, one of the
+
    <table style="width:100%; margin:20px auto; z-index:999;">
−
        issues they lamented over was the issue of entering code into the wiki. The bland and simple text input on each
+
−
        page made developing interactive and pretty wikis a real hassle. Due to this many teams developed their code
+
−
        externally and then transfered it in, costing them time and effort. We have changed that.
+
−
       </p>
+
−
      <table style="width:100%;margin:0 auto;border:1px solid grey;">
+
 
       <tr>
 
       <tr>
 
         <td><div class="bigCenterText">Before</div></td>
 
         <td><div class="bigCenterText">Before</div></td>
Line 455: Line 441:
 
         <td>
 
         <td>
 
           <div class="centerRize">
 
           <div class="centerRize">
−
             <img src="https://static.igem.org/mediawiki/2015/9/91/UCLSoft2.png"  width="100%"/>
+
             <img src="https://static.igem.org/mediawiki/2015/9/91/UCLSoft2.png"  width="100%" style="margin:0 auto;"/>
 
           </div>
 
           </div>
 
         </td>
 
         </td>
 
         <td>
 
         <td>
 
           <div class="centerRize">
 
           <div class="centerRize">
−
             <img src="https://static.igem.org/mediawiki/2015/b/b3/UCLBit_6.png" width="100%"/>
+
             <img src="https://static.igem.org/mediawiki/2015/b/b3/UCLBit_6.png" width="100%" style="margin:0 auto;"/>
 
           </div>
 
           </div>
 
         </td>  
 
         </td>  
 
       </tr>
 
       </tr>
 
     </table>
 
     </table>
−
 
−
      <p>The boring wiki input box</p>
 
  
−
      <p>By taking advantage of Google's easy to use extension system for the Chrome Browser, we devised a powerful
+
    <h3>Description</h3>
−
       and lightweight extension that transforms the wiki editor on whatever page you choose to edit; be it in the
+
    <p>
−
       future in 2020 or now in 2015. The extension is easily downloaded and then drag-and-dropped into the Chrome browser,
+
      The Mind-the-Mark tool takes the bland and boring wiki input box and transforms it into a proper code editor with several
−
       to install. Then its working!</p>
+
       interactive and assistive features. Having talked to several iGEM teams this year, and years past, one of the
−
       <img src="https://static.igem.org/mediawiki/2015/d/df/UCLSoft3.png"/>
+
      issues they lamented over was the issue of entering code into the wiki. The bland and simple text input on each
−
       <p>For more information, the source code, and the extension go to <a href="https://github.com/ucligem2015/Mind-The-Mark" style="color:red;">
+
      page made developing interactive and pretty wikis a real hassle. Due to this many teams developed their code
−
         Our Github Page</a>.</p>
+
       externally and then transfered it in, costing them time and effort. We have changed that.
−
 
+
    </p>
−
 
+
    <h3>Features</h3>
−
       <h2>Construction</h2>
+
    <ul>
 +
      <li>Syntax Markup for HTML, XML, CSS, Javascript</li>
 +
      <li>Customized Layout and Design</li>
 +
      <li>Tag Highlighting and linking</li>
 +
      <li>Line Count</li>
 +
      <li>Ctrl-F for Finding, replacing, and searching with RegExp</li>
 +
       <li>Open Source and Fully Changeable</li>
 +
      <li>Much More!</li>
 +
    </ul>
 +
    <p>For a more indepth update history and singular repository see the following <a href='https://github.com/ucligem2015/Mind-The-Mark' style="color:blue;"> link</a> beside the one below</p>
 +
    <div style="font-weight:bold;font-size:20px;width:20%;margin:30px auto;text-alignment:center;">Download the Tool!</div>
 +
    <div style="width:100%;display:inline-flex;">
 +
       <div style="width:50%;">
 +
        <a href="https://github.com/igemsoftware/UCL2015">
 +
          <!--https://github.com/ucligem2015/Mind-The-Mark-->
 +
          <img src="https://static.igem.org/mediawiki/2015/3/32/UCLGitHubLogo.png" width="20%" style="margin:0 40%;"/>
 +
        </a>
 +
       </div>
 +
      <div style="width:50%;">
 +
        <a href="https://chrome.google.com/webstore/detail/mind-the-mark/jkagocihmkabhekcmdgiloihalnoliai?utm_campaign=en&utm_source=en-et-na-us-oc-webstrhm&utm_medium=et">
 +
          <img src="https://static.igem.org/mediawiki/2015/1/10/UCLAppicns_Chrome.png" width="20%" style="margin:0 40%;"/>
 +
         </a>
 +
      </div>
 +
    </div>
 +
    <div style="width:100%;display:inline-flex;margin-bottom:20px;">
 +
       <div style="width:50%;text-align:center;font-size:20px;">
 +
        <div>GitHub</div>
 +
      </div>
 +
      <div style="width:50%;text-align:center;font-size:20px;">
 +
        <div>Chrome Store</div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
   
 +
   
 +
   
 +
    <h3>Construction</h3>
  
−
      <p>The spirit of the tool is to make editing and working on the iGEM wiki easier and more interactive for all.
+
    <p>The spirit of the tool is to make editing and working on the iGEM wiki easier and more interactive for all.
 
       It was with this spirit that we built the tool. Although the code is part of chrome extension, it is really
 
       It was with this spirit that we built the tool. Although the code is part of chrome extension, it is really
 
       a lightweight javascript tool.</p>
 
       a lightweight javascript tool.</p>
−
      <h3>What is a Chrome Extension?</h3>
+
 
−
      <p>A chrome extension at its base is a <b>.json</b> file called the "Manifest" file that contains the file
+
    <h3>What is a Chrome Extension?</h3>
 +
    <p>A chrome extension at its base is a <b>.json</b> file called the "Manifest" file that contains the file
 
       reference's and basic information about the tool. When used this tells the browser to load a piece of javascript or other files  
 
       reference's and basic information about the tool. When used this tells the browser to load a piece of javascript or other files  
 
       on to specified pages. These then interact with the DOM (Document Object Model) of the page.</p>
 
       on to specified pages. These then interact with the DOM (Document Object Model) of the page.</p>
−
      <h3>Why use a Chrome Extension?</h3>
+
 
−
      <p>Chrome is one of the most modern and widely used browser on the internet and has an easy to use and develop
+
    <h3>Why use a Chrome Extension?</h3>
 +
    <p>Chrome is one of the most modern and widely used browser on the internet and has an easy to use and develop
 
       extension system, on top of a very rich API. When loading files that interact with the DOM chrome extensions
 
       extension system, on top of a very rich API. When loading files that interact with the DOM chrome extensions
 
       also make sure that there is no interaction with any of the loaded scripts of libraries from the page, protecting
 
       also make sure that there is no interaction with any of the loaded scripts of libraries from the page, protecting
 
       the user. To top it all off, the chrome extensions are very easy to install and distribute.</p>
 
       the user. To top it all off, the chrome extensions are very easy to install and distribute.</p>
−
      <h3>How did we Implement it?</h3>
+
 
−
      <p>Our tool uses the commonly implemented "Content_Scripts" method for loading our extension. This allows
+
    <h3>How did we Implement it?</h3>
 +
    <p>Our tool uses the commonly implemented "Content_Scripts" method for loading our extension. This allows
 
       chrome to load specific js and css files whenever a URL, defined by a certain patern, is loaded. In our case
 
       chrome to load specific js and css files whenever a URL, defined by a certain patern, is loaded. In our case
 
       we load both js and css whenever an iGEM edit page is loaded. The javascipt that is loaded
 
       we load both js and css whenever an iGEM edit page is loaded. The javascipt that is loaded
Line 500: Line 523:
 
       to then load the script file is that it allows for a cleaner separation of files as well as a faster loading solution
 
       to then load the script file is that it allows for a cleaner separation of files as well as a faster loading solution
 
       when the scipt is large.</p>
 
       when the scipt is large.</p>
−
      <p>The script.js file contains the source code and several add-on pieces of code from a js library called CodeMirror.
+
    <p>The script.js file contains the source code and several add-on pieces of code from a js library called CodeMirror.
 
       This provides the majority of functions that alter the page. It also contains the final function that runs when the  
 
       This provides the majority of functions that alter the page. It also contains the final function that runs when the  
 
       Document OnLoad call is made. This final function finds the textarea tag by its ID and makes the call to CodeMirror
 
       Document OnLoad call is made. This final function finds the textarea tag by its ID and makes the call to CodeMirror
Line 506: Line 529:
 
       and applies the css. As well as defining and instigating a few other features, this performs the majority of the  
 
       and applies the css. As well as defining and instigating a few other features, this performs the majority of the  
 
       work</p>
 
       work</p>
−
      <p>By packing the majority of the js into one file it reduces the overall space required and time neaded to load.
+
    <p>By packing the majority of the js into one file it reduces the overall space required and time neaded to load.
 
       That being said it is well commented and laid out so that it is easily editable in the future. The same runs
 
       That being said it is well commented and laid out so that it is easily editable in the future. The same runs
 
       true for the css.</p>
 
       true for the css.</p>
−
      <h2>Future Work</h2>
+
 
−
      <p>There are several features we would like to implement in the future to make this the best tool, and the only
+
    <h3>Future Work</h3>
 +
    <p>There are several features we would like to implement in the future to make this the best tool, and the only
 
       as far as we know, for editing the iGEM wiki. Javascipt, CSS, and HTML are all currently supported but providing  
 
       as far as we know, for editing the iGEM wiki. Javascipt, CSS, and HTML are all currently supported but providing  
 
       syntax for SCSS and other CSS variants, as well as PHP would complete the language mark up types. Providing  
 
       syntax for SCSS and other CSS variants, as well as PHP would complete the language mark up types. Providing  
 
       code suggestion as well as auto complete would make this a tool to rival the best code editors out there.</p>
 
       code suggestion as well as auto complete would make this a tool to rival the best code editors out there.</p>
−
      <p>Another project we have begun work on is developing a larger tool coaltes our tool with other team's
+
    <p>Another project we have begun work on is developing a larger tool coaltes our tool with other team's
 
       to create a complete IDE for developing iGEM wikis.</p>
 
       to create a complete IDE for developing iGEM wikis.</p>
−
      <p>This tool will and can make a massive difference to teams current and futrue by making the process of creating  
+
  <div id="growth"style="height:1px;background-colour:transparent;"> </div> 
 +
  <p>This tool will and can make a massive difference to teams current and future by making the process of creating  
 
       a wiki infinitely more easy and enjoyable to do!</p>
 
       a wiki infinitely more easy and enjoyable to do!</p>
−
      <!--<img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png" width="50%"/>
 
−
      <img src="https://static.igem.org/mediawiki/2015/9/9e/UCLSoft4.png" width="50%"/>-->
 
  
−
      <h1>Mind-the-Model</h1>
 
−
      <h1>Mind-the-Maybe</h1>
 
  
−
      <style>
+
 
−
        .bodyx {
+
  <h2>Mind-the-Growth</h2>
−
          width:75%;
+
  <span style="text-align: center; margin: 0 auto; display: block;"><img src="https://static.igem.org/mediawiki/2015/5/5c/Mind_the_Growth_icon.png" width="15%" style="margin:50px 0;"/></span>
−
          margin:0 auto;
+
  <div style="width:90%;padding:5%;border:1px solid grey;">
−
          background-color:51E8C5;
+
    <h3>The Tool</h3>
−
          padding-top:100px;
+
    <p>When we first discussed adding a probiotic bacteria into the human gut one of the questions
−
        }
+
      that come up was what effect would it have on the human’s microbiome. 
−
        .centerRize {
+
      In order to understand and gain some insight into the functioning of the
−
            width: 80%;
+
      human microbiome we decided to model it! </p>
−
            margin:0 auto;
+
<p>Many of the current models that model the human microbiome are descriptive, and use
−
            padding-bottom:20px;
+
      mathematical models and other logical operations to create a system that mimics the
−
         }
+
      gut loosely.
−
        .bigCenterText {
+
 
−
            width:100%;
+
<span class="content"><span class="tooltip"><a href="http://www.sciencedirect.com/science/article/pii/S0022283614001788" target="_blank"><b>[Link]</b></a>Bucci v. and Xavier J. Towards Predictive Models of the Human Gut Microbiome, Journal of Molecular Biology Volume 426, Issue 23, 25 November 2014, Pages 3907–3916
−
            text-align:center;
+
</span><b>[1]</b></span>
−
            font-size:20px;
+
 
−
            padding: 20px 0px;
+
One of the challenges is that although there exist complex models of single cell
−
         }
+
      dynamics, that use operations like mean-field partial differential equations, the
−
       </style>
+
      computational power needed to expand any discrete models to a population is very high.
 +
</p>
 +
    <img src="https://static.igem.org/mediawiki/2015/0/0f/UCLGifSoft.gif" width="100%"/>
 +
    <p>A potential solution to this is using metabolic analysis as a descriptive tool
 +
      for modelling the activity of the populations. What we have done is built a lightweight
 +
      framework in both C++ and in C# to enable researchers to expand and build upon this
 +
      concept in the future. Not only does this tool render cell population graphics in a physics
 +
      engine but it also has been used to examine the effect that consuming probiotics and prebiotics
 +
      (inulin in this case) has on the gut microbiome. </p>
 +
   
 +
    <p>For a more indepth update history and singular repository see the following <a href='https://github.com/ucligem2015/Mind-The-Growth'  style="color:blue;"> link</a> beside the one below</p>
 +
   
 +
    <div style="font-weight:bold;font-size:20px;width:20%;margin:30px auto;text-alignment:center;">Download the Tool!</div>
 +
    <div style="width:100%;display:inline-flex;">
 +
      <div style="width:100%;">
 +
         <a href="https://github.com/igemsoftware/UCL2015">
 +
          <!--https://github.com/ucligem2015/Mind-The-Growth-->
 +
          <img src="https://static.igem.org/mediawiki/2015/3/32/UCLGitHubLogo.png" width="10%" style="margin:0 45%;"/>
 +
        </a>
 +
      </div>
 +
    </div>
 +
    <div style="width:100%;display:inline-flex;margin-bottom:20px;">
 +
      <div style="width:100%;text-align:center;font-size:20px;">
 +
         <div>GitHub</div>
 +
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
  <h3>Construction</h3>
 +
<p>
 +
Cellular automata are discrete models used across a variety of disciplines. The model consists of a grid of cells that are assigned one of several possible states which can be thought of as the identity of the cell. Each of these possible states has a set of rules which determine if and how the state of the that cell will change as time progresses. The model operates on discrete time, so all the states at t+1 are determined by how the grid looks at time t.
 +
  </p><p>
 +
The purpose of the creation of this particular model was to determine the optimum way in which a combination of probiotics and prebiotics can be used to change an initial microbiome profile to a pre-determined one.
 +
  </p><p>
 +
This model is a simplification that offers a framework to which more variables can be added, as well as experimental data.
 +
  </p><p>
 +
The states 1-5 represent different five different bacterial phyla, with state 6 representing all other phyla.
 +
  </p><p>
 +
The bacteria were randomly generated on a grid of cells according to a pre-determined proportion using a random number generator. As time progressed the state of each cell on the grid changed according to a set of rules that took into account the following variables:
 +
  </p>
 +
  <ul>
 +
  <li>
 +
The states of the eight cells that surround it.</li>
 +
  <li>
 +
  Durability and strength constants that were defined for each of the phyla
 +
  </li><li>
 +
  A cooperation/competition constant that take into account the proportion of the overall population that belongs to the same phyla
 +
  </li><li>
 +
  A constant to take into account each phylum’s response to the prebiotic (inulin)
 +
  </li>
 +
  </ul>
 +
  <p>
 +
Each of these factors is set to zero or one in the source code, so as to eliminate its influence on the model. Each user can then set the constants as he or she sees fit.
 +
  </p><p>
 +
The system is disrupted periodically by the addition of a dose of Prokao containing inulin and bacteria of different phyla, whose values can also be adjusted as needed.
 +
  </p>
 +
 
 +
  <h3>Future Work</h3>
 +
  <p>
 +
Given the amount of variables involved we would need to incorporate machine learning, such as a genetic algorithm, in order to come up with a composition of Prokao that’s even close to the ideal. </p>
 +
 +
<p>Quorum sensing could be incorporated by having particular actions at a distance between cells, and have those effects diminish with the distance between them.</p>
 +
 
 +
<p>More complex functions based on particular limiting nutrients could be used to define the nature of cooperation and competition between different states.</p>
 +
 +
<p>Experimental data could be interpreted in the context of the model and used to make the simulation more accurate. Current theoretical frameworks could also be incorporated in future versions of this model.</p>
 +
 +
<p>More possible states could be represented, in this case going down to the genus or even species level. With overarching characteristics that defining a phyla and particular characteristics to each genus and so on. Non-bacterial actors such as archaea, fungi and parasites could also be considered.</p>
 +
 +
<p>The “other” state could be more accurately modelled by having each of it’s cells behave in a different way and thus eliminating any competition or cooperation between them.</p>
 +
 +
<p>Empty space can be considered as one of the possible states, thereby making it possible to model initial colonisation.</p>
 +
 +
<p>Limiting factors which increase periodically such as carbon sources or specific nutrients which are essential for the growth of particular bacteria.</p>
 +
 +
<p>Cellular products could be produced, consumed and accumulated leading to different effects.
 +
  </p>
 +
 
 +
 +
 
 +
  </div>
 +
 
 +
 +
 +
</div>
 +
</div>
 +
 +
</div>
 +
  <style>
 +
    .bigCenterText {
 +
    margin:10px auto;
 +
    font-size:20px;
 +
    width:25%;
 +
    text-align:center;
 +
   
 +
    }
 +
    .editorGit {
 +
    margin:0 auto;
 +
    float:left;
 +
    width:80%;
 +
    }
 +
    .overlayx {
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    top: 0;
 +
    left: 0;
 +
    z-index: 1;
 +
    background-image: url('empty.gif');
 +
}
 +
  </style>
 +
 
 +
 
 +
 
 +
<div style="clear:both;"></div>
 +
 +
 +
 
</html>
 
</html>

Latest revision as of 23:58, 18 September 2015

'



Software

We have developed two incredible tools to help not only our project but all of iGEM!
▼

Mind-the-Mark




The Tool

By taking advantage of Google's easy to use extension system for the Chrome Browser, we devised a powerful and lightweight extension that transforms the iGEM wiki editor on whatever page you choose to edit; be it in the future in 2020 or now in 2015. The extension is easily downloaded and then drag-and-dropped into the Chrome browser, to install, or installed with a click from the chrome store. Then its working!

Before
After

Description

The Mind-the-Mark tool takes the bland and boring wiki input box and transforms it into a proper code editor with several interactive and assistive features. Having talked to several iGEM teams this year, and years past, one of the issues they lamented over was the issue of entering code into the wiki. The bland and simple text input on each page made developing interactive and pretty wikis a real hassle. Due to this many teams developed their code externally and then transfered it in, costing them time and effort. We have changed that.

Features

  • Syntax Markup for HTML, XML, CSS, Javascript
  • Customized Layout and Design
  • Tag Highlighting and linking
  • Line Count
  • Ctrl-F for Finding, replacing, and searching with RegExp
  • Open Source and Fully Changeable
  • Much More!

For a more indepth update history and singular repository see the following link beside the one below

Download the Tool!
GitHub
Chrome Store

Construction

The spirit of the tool is to make editing and working on the iGEM wiki easier and more interactive for all. It was with this spirit that we built the tool. Although the code is part of chrome extension, it is really a lightweight javascript tool.

What is a Chrome Extension?

A chrome extension at its base is a .json file called the "Manifest" file that contains the file reference's and basic information about the tool. When used this tells the browser to load a piece of javascript or other files on to specified pages. These then interact with the DOM (Document Object Model) of the page.

Why use a Chrome Extension?

Chrome is one of the most modern and widely used browser on the internet and has an easy to use and develop extension system, on top of a very rich API. When loading files that interact with the DOM chrome extensions also make sure that there is no interaction with any of the loaded scripts of libraries from the page, protecting the user. To top it all off, the chrome extensions are very easy to install and distribute.

How did we Implement it?

Our tool uses the commonly implemented "Content_Scripts" method for loading our extension. This allows chrome to load specific js and css files whenever a URL, defined by a certain patern, is loaded. In our case we load both js and css whenever an iGEM edit page is loaded. The javascipt that is loaded is the background.js file which adds a script refecence to the page, loads the script, and then deletes it. In this instance the script in question is the script.js file. The extension also has the ability to access other js and css file which are referenced in the Manifest file. The reason the background.js file is used to then load the script file is that it allows for a cleaner separation of files as well as a faster loading solution when the scipt is large.

The script.js file contains the source code and several add-on pieces of code from a js library called CodeMirror. This provides the majority of functions that alter the page. It also contains the final function that runs when the Document OnLoad call is made. This final function finds the textarea tag by its ID and makes the call to CodeMirror to change the textarea into the new snazzy code editor. CodeMirror then alters the shape of the divs in the tag and applies the css. As well as defining and instigating a few other features, this performs the majority of the work

By packing the majority of the js into one file it reduces the overall space required and time neaded to load. That being said it is well commented and laid out so that it is easily editable in the future. The same runs true for the css.

Future Work

There are several features we would like to implement in the future to make this the best tool, and the only as far as we know, for editing the iGEM wiki. Javascipt, CSS, and HTML are all currently supported but providing syntax for SCSS and other CSS variants, as well as PHP would complete the language mark up types. Providing code suggestion as well as auto complete would make this a tool to rival the best code editors out there.

Another project we have begun work on is developing a larger tool coaltes our tool with other team's to create a complete IDE for developing iGEM wikis.

This tool will and can make a massive difference to teams current and future by making the process of creating a wiki infinitely more easy and enjoyable to do!

Mind-the-Growth

The Tool

When we first discussed adding a probiotic bacteria into the human gut one of the questions that come up was what effect would it have on the human’s microbiome. In order to understand and gain some insight into the functioning of the human microbiome we decided to model it!

Many of the current models that model the human microbiome are descriptive, and use mathematical models and other logical operations to create a system that mimics the gut loosely. [Link]Bucci v. and Xavier J. Towards Predictive Models of the Human Gut Microbiome, Journal of Molecular Biology Volume 426, Issue 23, 25 November 2014, Pages 3907–3916 [1] One of the challenges is that although there exist complex models of single cell dynamics, that use operations like mean-field partial differential equations, the computational power needed to expand any discrete models to a population is very high.

A potential solution to this is using metabolic analysis as a descriptive tool for modelling the activity of the populations. What we have done is built a lightweight framework in both C++ and in C# to enable researchers to expand and build upon this concept in the future. Not only does this tool render cell population graphics in a physics engine but it also has been used to examine the effect that consuming probiotics and prebiotics (inulin in this case) has on the gut microbiome.

For a more indepth update history and singular repository see the following link beside the one below

Download the Tool!
GitHub

Construction

Cellular automata are discrete models used across a variety of disciplines. The model consists of a grid of cells that are assigned one of several possible states which can be thought of as the identity of the cell. Each of these possible states has a set of rules which determine if and how the state of the that cell will change as time progresses. The model operates on discrete time, so all the states at t+1 are determined by how the grid looks at time t.

The purpose of the creation of this particular model was to determine the optimum way in which a combination of probiotics and prebiotics can be used to change an initial microbiome profile to a pre-determined one.

This model is a simplification that offers a framework to which more variables can be added, as well as experimental data.

The states 1-5 represent different five different bacterial phyla, with state 6 representing all other phyla.

The bacteria were randomly generated on a grid of cells according to a pre-determined proportion using a random number generator. As time progressed the state of each cell on the grid changed according to a set of rules that took into account the following variables:

  • The states of the eight cells that surround it.
  • Durability and strength constants that were defined for each of the phyla
  • A cooperation/competition constant that take into account the proportion of the overall population that belongs to the same phyla
  • A constant to take into account each phylum’s response to the prebiotic (inulin)

Each of these factors is set to zero or one in the source code, so as to eliminate its influence on the model. Each user can then set the constants as he or she sees fit.

The system is disrupted periodically by the addition of a dose of Prokao containing inulin and bacteria of different phyla, whose values can also be adjusted as needed.

Future Work

Given the amount of variables involved we would need to incorporate machine learning, such as a genetic algorithm, in order to come up with a composition of Prokao that’s even close to the ideal.

Quorum sensing could be incorporated by having particular actions at a distance between cells, and have those effects diminish with the distance between them.

More complex functions based on particular limiting nutrients could be used to define the nature of cooperation and competition between different states.

Experimental data could be interpreted in the context of the model and used to make the simulation more accurate. Current theoretical frameworks could also be incorporated in future versions of this model.

More possible states could be represented, in this case going down to the genus or even species level. With overarching characteristics that defining a phyla and particular characteristics to each genus and so on. Non-bacterial actors such as archaea, fungi and parasites could also be considered.

The “other” state could be more accurately modelled by having each of it’s cells behave in a different way and thus eliminating any competition or cooperation between them.

Empty space can be considered as one of the possible states, thereby making it possible to model initial colonisation.

Limiting factors which increase periodically such as carbon sources or specific nutrients which are essential for the growth of particular bacteria.

Cellular products could be produced, consumed and accumulated leading to different effects.