Difference between revisions of "Team:Fudan-TSI/Hardware"

m
 
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
+
{{Fudan-TSI}}<!-- jquery loaded by HQ 1.12.4 -->
<!DOCTYPE html>
+
<html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8">
<html lang="en" dir="ltr" class="client-nojs">
+
  <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css">
<head>
+
  <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
<meta charset="UTF-8" />
+
  <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-css.css&action=raw&ctype=text/css" />
<title>Team:Fudan-TSI/Software - 2019.igem.org</title>
+
<style>
<meta name="generator" content="MediaWiki 1.24.1" />
+
/*****************************************************************************/
<link rel="alternate" type="application/x-wiki" title="Edit" href="/wiki/index.php?title=Team:Fudan-TSI/Software&amp;action=edit" />
+
/* DEFAULT WIKI SETTINGS */
<link rel="edit" title="Edit" href="/wiki/index.php?title=Team:Fudan-TSI/Software&amp;action=edit" />
+
/*****************************************************************************/
<link rel="shortcut icon" href="/favicon.ico" />
+
  #home_logo, #sideMenu { display:none; }
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2019.igem.org (en)" />
+
  #sideMenu, #top_title, .patrollink { display:none; }
<link rel="alternate" hreflang="x-default" href="/Team:Fudan-TSI/Software" />
+
  #content { margin-left: 0; padding:0px; width:100%; }
<link rel="copyright" href="https://creativecommons.org/licenses/by/3.0/" />
+
  .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; }
<link rel="alternate" type="application/atom+xml" title="2019.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
+
/* css clean * */
<link rel="stylesheet" href="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
+
  #FudanTSIBody li { list-style: none; }
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
+
    </style>
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
+
    <title>Hardware | 2019 iGEM Team:Fudan-TSI</title>
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
+
/* cache key: 2019_igem_org:resourceloader:filter:minify-css:7:35f114711b15fda1f15f5df02b43e4bc */</style>
+
<script src="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
+
<script>if(window.mw){
+
mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Team:Fudan-TSI/Software","wgTitle":"Team:Fudan-TSI/Software","wgCurRevisionId":302772,"wgRevisionId":302772,"wgArticleId":6664,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"Kiyochou","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Team:Fudan-TSI/Software","wgUserId":3675,"wgUserEditCount":52,"wgUserRegistration":1562576588000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[]});
+
}</script><script>if(window.mw){
+
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
+
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"71bf4b9e2f13ab69c28a95f01a99688a+\\","patrolToken":"decfdbfbd6de823d292555dfd93c1e7e+\\","watchToken":"3b2fc45f8fb292001c5d4f18a4a27151+\\"});},{},{});
+
/* cache key: 2019_igem_org:resourceloader:filter:minify-js:7:60b7dcc51683c9700024b0a1fc22071d */
+
}</script>
+
<script>if(window.mw){
+
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
+
}</script>
+
 
</head>
 
</head>
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject page-Team_Fudan-TSI_Software skin-igem action-view">
+
<body>
 +
<div id="FudanTSIdivWrapper"><div id="FudanTSIBody">
 +
  <header>
 +
  <div id="emptyBar" style="position:relative;width: 100%;"></div><nav id="topNav" class="black z-depth-0_5"><div class="nav-wrapper"><div id="teamLogo" class="brand-logo"> <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif"></a></div><ul id="nav-mobile" class="right">
  
        <script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
+
    <li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown1">Project</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown2">Results</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown3">Model</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown4">Parts</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown5">Human&nbsp;practices</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown6">Team</a></li>
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
+
    <li class="hide-on-med-and-down"><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
+
    <li> <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right"> <i class="fa fa-navicon" style="font-size: 24px"></i> </a></li></ul></div> </nav>
 +
  <!-- Dropdown and List elements in navigation bar -->
 +
  <ul id="dropdown1" class="dropdown-content">
 +
      <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Applied_Design">Applied&nbsp;design</a></li>
 +
  </ul>
 +
  <ul id="dropdown2" class="dropdown-content">
 +
      <li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse&nbsp;transcription</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
 +
  </ul>
 +
  <ul id="dropdown3" class="dropdown-content">
 +
      <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
 +
  </ul>
 +
  <ul id="dropdown4" class="dropdown-content">
 +
      <li><a href="/Team:Fudan-TSI/Basic_Part">Basic&nbsp;parts</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Composite_Part">Composite&nbsp;parts</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Improve">Part&nbsp;improvement</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Part_Collection">Part&nbsp;collection</a></li>
 +
  </ul>
 +
  <ul id="dropdown5" class="dropdown-content">
 +
      <li><a href="/Team:Fudan-TSI/Public_Engagement">Public&nbsp;engagement</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated&nbsp;HP</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
 +
  </ul>
 +
  <ul id="dropdown6" class="dropdown-content">
 +
      <li><a href="/Team:Fudan-TSI/Team">Members</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li>
 +
      <li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li>
 +
  </ul>
  
        <script type='text/javascript'        src ='/wiki/skins/Igem/resources/2019_skin.js'></script>
 
  
 +
  <ul id="slide-out" class="sidenav">
 +
    <li style="padding: 0"><div class="sidenavBanner">
 +
      <div class="background"></div>
 +
      <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">Hardware</span></p>
 +
    </div></li>
 +
    <li>
 +
      <ul class="collapsible expandable">
 +
        <li class="onThisPageNav"><span>On this page</span></li>
 +
        <li class="onThisPageNav"><a href="#section1">Motivation</a></li>
 +
        <li class="onThisPageNav"><a href="#section2">Demonstration</a></li>
 +
        <li class="onThisPageNav"><a href="#section3">Future work</a></li>
  
    <div id='globalWrapper'>
+
        <li><span class="pageSidebar">Team: Fudan-TSI</span></li><li><div class="collapsible-header"><span class="pageSidebar">Project</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Description">Background</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Design">Design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Results</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div></li><li><div class="collapsible-header active"><span class="pageSidebar">Model</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Software">Software</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Parts</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Human practices</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Team</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Team">Members</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div></li>
        <div id='top_menu_under' class='noprint'></div>
+
      </ul><!-- .expandable -->
        <div id='top_menu_14' class='noprint'>Loading menubar.....</div> <!-- Will be replaced with the jQuery.load -->
+
    </li>
<script>jQuery('#top_menu_14').load('https://2019.igem.org/cgi/top_menu_14/menubar_reply.cgi',
+
    <li><div class="placeHolder"></div></li>
    {  t:"Team%3AFudan-TSI%2FSoftware",
+
  </ul>
a:"View+%2FTeam%3AFudan-TSI%2FSoftware++Edit+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AFudan-TSI%2FSoftware%26action%3Dedit++History+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AFudan-TSI%2FSoftware%26action%3Dhistory++Move+%2FSpecial%3AMovePage%2FTeam%3AFudan-TSI%2FSoftware++Unwatch+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AFudan-TSI%2FSoftware%26action%3Dunwatch%26token%3Dfc635ca858d08bbbd0d7e6e567895de0%252B%255C++Page+%2FTeam%3AFudan-TSI%2FSoftware++Discussion+%2Fwiki%2Findex.php%3Ftitle%3DTalk%3ATeam%3AFudan-TSI%2FSoftware%26action%3Dedit%26redlink%3D1++" });
+
  </header>
</script>
+
 
+
        <!-- Content div contains HQ_page for HQ styles, Logo and title div, and USER CONTENT -->
+
<div id="content" class="mw-body" role="main">
+
    <a id="top"></a>
+
 
+
            <div id="top_title">
+
                <div class="logo_2019">
+
                    <a href="https://2019.igem.org">
+
                    <img src="https://static.igem.org/mediawiki/2019/8/8b/HQ_page_logo.jpg" width="100px">
+
                    </a>
+
                </div>
+
 
+
        <h1 id="firstHeading" class="firstHeading">
+
            <span dir="auto">Team:Fudan-TSI/Software</span>
+
        </h1>
+
            </div>
+
 
+
            <div id="HQ_page">
+
                <div id="bodyContent">
+
            <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><p>
+
 
+
 
+
<script>
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 
+
$(document).ready(function() {
+
 
+
//remove the HQ_page id
+
$("#HQ_page").attr('id','');
+
+
 
+
//highlight current page on the menu
+
highlight_current_page_menu();
+
+
//accessing submenus
+
$(".menu_item").click(function(){
+
$(".submenu_control_icon", this).toggleClass("open");
+
$(this).next(".submenu").fadeToggle(400);
+
});
+
+
//mobile menu access
+
$(".igem_2019_team_mobile_bar").click(function(){
+
$(this).next().toggleClass("displaying_menu");
+
});
+
+
});
+
 
+
 
+
function highlight_current_page_menu() {
+
+
var page_url="https://2019.igem.org/";
+
page_url = page_url + wgPageName;
+
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
+
//if the page is in a submenu, open the submenu and make the appropiate changes
+
if( $( ".current_page" ).hasClass( "submenu_item" )){
+
+
$(".current_page").parent().parent().fadeToggle(400);
+
$(".current_page").parent().parent().prev().addClass("current_page");
+
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
+
}
+
}
+
 
+
 
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
</script>
+
 
+
  
 +
  <div id="pageContent">
 +
      <div id="contentBanner" class="figureBanner">
 +
          <div class="row">
 +
              <div class="col s12 hide-on-med-and-up">
 +
                  <h1><br/>Hardware</h1>
 +
              </div>
 +
          </div>
 +
          <div class="hide-on-small-only">
 
<style>
 
<style>
/**************************************************************************************************************************************************************************************************/
+
#demo {width:100%;height:100%;position:relative;z-index:-100;}
 
+
#demo svg {width:100%;height:100%;position:fixed;}
 
+
#demo svg g {mix-blend-mode:lighten;}
 
+
#demo svg polygon {stroke:none;fill:white;}
/**************************************************************************************************************************************************************************************************/
+
/* DEFAULT WIKI SETTINGS */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
#home_logo, #sideMenu { display:none; }
+
#sideMenu, #top_title, .patrollink  {display:none;}
+
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
+
+
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* MENU */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*wrapping for the menu*/
+
.igem_2019_team_menu {
+
background-color:#cecece;
+
border-left: 1px solid #635d5d;
+
float:right;
+
height:100vh;
+
max-width: 270px;
+
overflow-y: auto;
+
overflow-x: hidden;
+
padding:0px;
+
position:fixed;
+
right:0%;
+
text-align:left;
+
width: 15%;
+
}
+
 
+
/*controlling menu visibility*/
+
.igem_2019_team_menu.displaying_menu{
+
display:block;
+
}
+
 
+
/*links in the menu*/
+
.igem_2019_team_menu  a {
+
color: #484848;
+
text-decoration:none;
+
}
+
 
+
/*images in the menu*/
+
.igem_2019_team_menu img {
+
width:100%;
+
}
+
 
+
/*level 1 menu items*/
+
.igem_2019_team_menu .menu_item {
+
    background-color: #cecece;
+
    border-bottom: 1px solid #635d5d;
+
    clear: both;
+
color: #484848;
+
    cursor: pointer;
+
float: left;
+
    font-size: 120%;
+
    font-weight: bold;
+
    padding: 15px 0px 15px 5%;
+
  width: 100%;
+
}
+
 
+
/*level 1 menu items without submenus*/
+
.igem_2019_team_menu .menu_item.direct_link {
+
color: #484848;
+
padding-left: 15%;
+
}
+
 
+
+
/*level 1 menu items on hover*/
+
.igem_2019_team_menu .menu_item:hover {
+
background-color: #ecb656 !important;
+
}
+
 
+
/*icon for expanding and collapsing level 1 menut items*/
+
.igem_2019_team_menu .menu_item .submenu_control_icon {
+
color: #484848;
+
float: left;
+
width: 10%;
+
}
+
 
+
/* submenu icon  "-"*/
+
.igem_2019_team_menu .menu_item .submenu_control_icon::before {
+
content: "+";
+
}
+
 
+
/* submenu icon  "-"*/
+
.igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
+
content: "-";
+
}
+
 
+
+
/*level 2 menu (submenu) wrapper*/
+
.igem_2019_team_menu .submenu{
+
background-color: #ececec;
+
clear:both;
+
display:none;
+
float: left; 
+
width:100%;
+
}
+
 
+
/*level 2 menu (submenu) item*/
+
.igem_2019_team_menu .submenu .submenu_item {
+
border-bottom: 1px solid #cecece;
+
  color: #635d5d;
+
    height: 30px;
+
  float: left;
+
    font-size: 110%;
+
font-weight: bold;
+
    padding: 12px 0px 0px 15%;
+
    width: 100%;
+
}
+
 
+
/*level 2 menu (submenu) items on hover*/
+
.igem_2019_team_menu .submenu .submenu_item:hover {
+
background-color: #ecb656 !important;
+
}
+
 
+
/*color for highlighting current page on the wiki*/
+
.igem_2019_team_menu .submenu .submenu_item.current_page,
+
.igem_2019_team_menu .menu_item.current_page,
+
.igem_2019_team_menu .menu_item.direct_link.current_page {
+
background-color:#a2d3d0;
+
}
+
 
+
 
+
/*mobile menu bar styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*mobile bar that controls the menu*/
+
.igem_2019_team_mobile_bar {
+
background-color:#ececec;
+
border-bottom: 1px solid #cecece;
+
cursor:pointer;
+
display:none;
+
float:left;
+
margin-top: 0;
+
padding: 5px 0;
+
position:fixed;
+
width:100%;
+
}
+
+
/*mobile logo*/
+
.igem_logo_mobile {
+
float:left;
+
padding-left: 5%;
+
width: 30%;
+
}
+
 
+
/*image within the mobile logo*/
+
.igem_logo_mobile img {
+
width:70px;
+
}
+
+
/*mobile expand collapse button*/
+
.igem_menu_control_mobile {
+
float:right;
+
padding-right:5%;
+
padding-top:5px;
+
text-align:right;
+
width: 30%;
+
}
+
 
+
/*image for mobile expand collapse button*/
+
.igem_menu_control_mobile img {
+
width:25px;
+
}
+
 
+
 
+
/*add extra padding to the menu to improve mobile scrolling*/
+
.menu_padding{
+
float:left;
+
height:100px;
+
}
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* CONTENT OF THE PAGE */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/* general wrapper for the content */
+
.igem_2019_team_content {
+
background-color:white;
+
display:block;
+
width: 87%;
+
}
+
 
+
/* subwrapper to center content */
+
.igem_2019_team_content .igem_2019_team_column_wrapper {
+
margin:auto;
+
max-width: 1400px;
+
width:90%;
+
}
+
 
+
 
+
 
+
/*general styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*size for title h tags*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
+
 
+
 
+
/*titles h1, h2*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
+
border-bottom:0px;
+
color: white;
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 10px 0px;
+
}
+
 
+
/*titles h3, h3, h5, h6 */
+
.igem_2019_team_content .igem_2019_team_column_wrapper h3,
+
.igem_2019_team_content .igem_2019_team_column_wrapper h4,
+
.igem_2019_team_content .igem_2019_team_column_wrapper h5,
+
.igem_2019_team_content .igem_2019_team_column_wrapper h6 {
+
border-bottom:0px;
+
color: white; 
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 5px 0px;
+
}
+
 
+
/* text p tag*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper p {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding: 5px 0px;
+
text-align: left;
+
color: white;
+
}
+
 
+
/* Links a tag*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper a {
+
color: #00a19b;
+
font-weight: bold;
+
text-decoration: underline;
+
text-decoration-color:#00a19b;
+
transition: all 0.4s ease;
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
}
+
 
+
/* hover for the links */
+
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover {  
+
color: #085156;
+
text-decoration:none;
+
}
+
 
+
 
+
/* Table tag*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper table {
+
border: 1px solid #635d5d;
+
border-collapse: collapse;  
+
font-size: 130%;
+
width: 100%;
+
}
+
 
+
/* table cells */
+
.igem_2019_team_content .igem_2019_team_column_wrapper td {
+
border: 1px solid #cecece;
+
border-collapse: collapse;
+
font-size: 105%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
/* table headers */
+
.igem_2019_team_content .igem_2019_team_column_wrapper th {  
+
background-color:#cecece;
+
border: 1px solid #635d5d;
+
border-collapse: collapse;
+
font-size: 110%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
 
+
 
+
/* non numbered lists */
+
.igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding:0px 20px;
+
}
+
 
+
 
+
/*font sizing within list nesting*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
+
 
+
 
+
 
+
/*layout classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*main layout class */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column  {
+
float:left;
+
margin: 1% 2%;
+
padding: 0px;
+
}
+
 
+
/* 100% */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
+
 
+
/* 66% */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
 
+
/* 33% */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
+
 
+
 
+
 
+
 
+
/*all images*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
+
margin-bottom: 15px;
+
width: 100%;
+
}
+
 
+
 
+
/* page break */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .clear {
+
clear:both;
+
}
+
/*add extra space to page break with clear class*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
+
height: 30px;
+
}
+
 
+
/* horizontal line to divide the page*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
+
    border-top: 1px solid #cecece;
+
  margin: auto;
+
  width: 98%;
+
}
+
 
+
 
+
 
+
+
/*support classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/*Button  */
+
/************************************************/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
+
font-size: 130%;
+
margin: 30px auto;
+
text-align: center;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a  {
+
background-color: #00a19bad !important;
+
color: #000 !important;
+
font-weight: bold;
+
margin: auto;
+
text-decoration: none !important;
+
padding: 10px 15px !important;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
+
background-color: #ffb819 !important; 
+
}
+
 
+
+
 
+
/*highlight */
+
/************************************************/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
+
padding: 15px 20px;
+
}
+
 
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
+
padding: 5px 15px;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
+
background-color: #ececec;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
+
    border-top: 4px solid #00a19bad;
+
}
+
 
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
+
    border: 4px solid #00a19bad;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
+
    border-top: 4px solid #ffb819
+
}
+
 
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
+
    border: 4px solid #ffb819;
+
}
+
 
+
 
+
 
+
 
+
/*mobile*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/* 1800px  */
+
/************************************************/
+
@media only screen and (max-width: 1800px) {
+
.igem_2019_team_content { width: 85%;}
+
.igem_2019_team_menu {display:block;}
+
+
}
+
 
+
/* 1400px  */
+
/************************************************/
+
@media only screen and (max-width: 1400px) {
+
.igem_2019_team_menu .menu_item { font-size:100%;}
+
.igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
+
.igem_2019_team_menu {display:block;}
+
}
+
 
+
 
+
/* 1100px  */
+
/************************************************/
+
@media only screen and (max-width: 1100px) {
+
.igem_2019_team_content {width:100%; margin-left:0px;}
+
+
.igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
+
+
.igem_2019_team_mobile_bar {display:block;}
+
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
+
 
+
}
+
 
+
/* 850px  */
+
/************************************************/
+
@media only screen and (max-width: 850px) {
+
.igem_2019_team_menu {width:40%;}
+
}
+
 
+
/*500px  */
+
/************************************************/
+
@media only screen and (max-width: 500px) {
+
.igem_2019_team_menu {min-width:100%;width:100%;}
+
}
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
 
+
 
+
 
+
 
</style>
 
</style>
 +
<div id="pageCover">
 +
  <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice">
 +
        <defs>
 +
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
          <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
 +
          <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
 +
        </linearGradient>
 +
        <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
          <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
 +
          <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
 +
        </linearGradient>
 +
        </defs>
 +
        <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
 +
        <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
 +
  </svg>
 +
</div><!-- #pageCover -->
 +
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script>
 +
        <script>
 +
      //////////////////////////////
 +
      // Demo Functions
 +
      //////////////////////////////
 +
      function bkgFunction(showStats) {
 +
        // stats
 +
        if (showStats) {
 +
        var stats = new Stats();
 +
        stats.domElement.style.position = 'absolute';
 +
        stats.domElement.style.left = '0';
 +
        stats.domElement.style.top = '0';
 +
        document.body.appendChild(stats.domElement);
 +
        requestAnimationFrame(function updateStats(){
 +
          stats.update();
 +
          requestAnimationFrame(updateStats);
 +
        });
 +
        }
 +
        // init
 +
        var svg = document.getElementById('demo');
 +
        tesselation.setup(svg);
 +
        gradients.setup();
 +
        var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
 +
        function playNextTransition() {
 +
        tesselation.next(transitionDuration);
 +
        gradients.next(transitionDuration);
 +
        };
 +
        function tick(time) {
 +
        if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
 +
          lastTransitionAt = time;
 +
          playNextTransition();
 +
        }
 +
        window.requestAnimationFrame(tick);
 +
        }
 +
        window.requestAnimationFrame(tick);
 +
      }
 +
      //////////////////////////////
 +
      // Delaunay Triangulation
 +
      //////////////////////////////
 +
      var calcDelaunayTriangulation = (function() {
 +
        var EPSILON = 1.0 / 1048576.0;
 +
        function getSuperT(vertices) {
 +
        var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
 +
          xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
 +
          i, xDiff, yDiff, maxDiff, xCenter, yCenter;
 +
        for(i = vertices.length; i--; ) {
 +
          if(vertices[i][0] < xMin) xMin = vertices[i][0];
 +
          if(vertices[i][0] > xMax) xMax = vertices[i][0];
 +
          if(vertices[i][1] < yMin) yMin = vertices[i][1];
 +
          if(vertices[i][1] > yMax) yMax = vertices[i][1];
 +
        }
 +
        xDiff = xMax - xMin;
 +
        yDiff = yMax - yMin;
 +
        maxDiff = Math.max(xDiff, yDiff);
 +
        xCenter = xMin + xDiff * 0.5;
 +
        yCenter = yMin + yDiff * 0.5;
 +
        return [
 +
          [xCenter - 20 * maxDiff, yCenter - maxDiff],
 +
          [xCenter, yCenter + 20 * maxDiff],
 +
          [xCenter + 20 * maxDiff, yCenter - maxDiff]
 +
        ];
 +
        }
 +
        function circumcircle(vertices, i, j, k) {
 +
        var xI = vertices[i][0], yI = vertices[i][1],
 +
          xJ = vertices[j][0], yJ = vertices[j][1],
 +
          xK = vertices[k][0], yK = vertices[k][1],
 +
          yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
 +
          xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
 +
        // bail condition
 +
        if(yDiffIJ < EPSILON){
 +
          if (yDiffJK < EPSILON){
 +
            throw new Error("Can't get circumcircle since all 3 points are y-aligned");
 +
          }
 +
        }
  
  
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        // calc circumcircle center x/y, radius
<!--- THIS IS WHERE THE HTML BEGINS --->
+
        m1  = -((xJ - xI) / (yJ - yI));
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        m2  = -((xK - xJ) / (yK - yJ));
 +
        xMidIJ = (xI + xJ) / 2.0;
 +
        xMidJK = (xJ + xK) / 2.0;
 +
        yMidIJ = (yI + yJ) / 2.0;
 +
        yMidJK = (yJ + yK) / 2.0;
 +
        xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
 +
          (yDiffJK < EPSILON) ? xMidJK :
 +
          (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
 +
        yCenter  = (yDiffIJ > yDiffJK) ?
 +
          m1 * (xCenter - xMidIJ) + yMidIJ :
 +
          m2 * (xCenter - xMidJK) + yMidJK;
 +
        xDiff = xJ - xCenter;
 +
        yDiff = yJ - yCenter;
 +
        // return
 +
        return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
 +
        }
 +
        function dedupeEdges(edges) {
 +
        var i, j, a, b, m, n;
 +
        for(j = edges.length; j; ) {
 +
          b = edges[--j]; a = edges[--j];
 +
          for(i = j; i; ) {
 +
          n = edges[--i]; m = edges[--i];
 +
          if(a === m){
 +
            if (b===n){
 +
              edges.splice(j, 2); edges.splice(i, 2);
 +
              break;
 +
            }
 +
          }
 +
          if(a === n){
 +
            if (b===m){
 +
              edges.splice(j, 2); edges.splice(i, 2);
 +
              break;
 +
            }
 +
          }
 +
          }
 +
        }
 +
        }
 +
        return function(vertices) {
 +
        var n = vertices.length,
 +
          i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
 +
        // bail if too few / too many verts
 +
        if(n < 3 || n > 2000)
 +
          return [];
 +
        // copy verts and sort indices by x-position
 +
        vertices = vertices.slice(0);
 +
        indices = new Array(n);
 +
        for(i = n; i--; )
 +
          indices[i] = i;
 +
        indices.sort(function(i, j) {
 +
          return vertices[j][0] - vertices[i][0];
 +
        });
 +
        // supertriangle
 +
        st = getSuperT(vertices);
 +
        vertices.push(st[0], st[1], st[2]);
 +
        // init candidates/locked tris list
 +
        candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
 +
        locked = [];
 +
        edges = [];
 +
        // scan left to right
 +
        for(i = indices.length; i--; edges.length = 0) {
 +
          c = indices[i];
 +
          // check candidates tris against point
 +
          for(j = candidates.length; j--; ) {
 +
          // lock tri if point to right of circumcirc
 +
          dx = vertices[c][0] - candidates[j].x;
 +
          if (dx > 0.0){
 +
            if(dx * dx > candidates[j].r){
 +
              locked.push(candidates[j]);
 +
            candidates.splice(j, 1);
 +
            continue;
 +
            }
 +
          }
  
<head>
 
  
<!-- This tells the browser that your page is responsive -->
+
          // point outside circumcirc = leave candidates
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
          dy = vertices[c][1] - candidates[j].y;
+
          if(dx * dx + dy * dy - candidates[j].r > EPSILON)
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&amp;action=raw&amp;ctype=text/javascript"></script>
+
            continue;
+
          // point inside circumcirc = break apart, save edges
+
          edges.push(
+
            candidates[j].i, candidates[j].j,
</head>
+
            candidates[j].j, candidates[j].k,
 +
            candidates[j].k, candidates[j].i
 +
          );
 +
          candidates.splice(j, 1);
 +
          }
 +
          // new candidates from broken edges
 +
          dedupeEdges(edges);
 +
          for(j = edges.length; j; ) {
 +
          b = edges[--j];
 +
          a = edges[--j];
 +
          candidates.push(circumcircle(vertices, a, b, c));
 +
          }
 +
        }
 +
        // close candidates tris, remove tris touching supertri verts
 +
        for(i = candidates.length; i--; )
 +
          locked.push(candidates[i]);
 +
        candidates.length = 0;
 +
        for(i = locked.length; i--; )
 +
          if(locked[i].i < n){
 +
            if(locked[i].j < n){
 +
              if(locked[i].k < n){
 +
                candidates.push(locked[i].i, locked[i].j, locked[i].k);
 +
              }
 +
            }
 +
          }
  
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&amp;action=raw&amp;ctype=text/css" />
 
  
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        // done
<!--- Menu --->
+
        return candidates;
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        };
+
      })();
 
+
      var tesselation = (function() {
<style>
+
        var svg, svgW, svgH, prevGroup;
+
        function createRandomTesselation() {
    *{margin: 0;padding: 0;list-style: none;}
+
        var wW = window.innerWidth;
/* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
+
        var wH = window.innerHeight;
 
+
        var gridSpacing = 250, scatterAmount = 0.75;
/** 清除内外边距 **/
+
        var gridSize, i, x, y;
body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+
        if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+
          gridSize = gridSpacing * svgW / wW;
pre, /* text formatting elements 文本格式元素 */
+
        } else { // window taller than svg = use height for gridSize
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+
          gridSize = gridSpacing * svgH / wH;
th, td /* table elements 表格元素 */ {
+
        }
margin: 0;
+
        var vertices = [];
padding: 0;
+
        var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
}
+
        for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
 
+
          for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
/** 设置默认字体 **/
+
          vertices.push(
 
+
            [
/* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
+
            xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+
            yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+
            ]
/* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
+
          );
 
+
          }
/** 重置列表元素 **/
+
        }
ul, ol { list-style: none; }
+
        var triangles = calcDelaunayTriangulation(vertices);
 
+
        var group = document.createElementNS('http://www.w3.org/2000/svg','g');
/** 重置文本格式元素 **/
+
        var polygon;
a { text-decoration: none; }
+
        for(i = triangles.length; i; ) {
a:hover { text-decoration: underline; }
+
          polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
 
+
          polygon.setAttribute('points',
 
+
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
/** 重置表单元素 **/
+
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
legend { color: #000; } /* for ie6 */
+
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
+
          );
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+
          group.appendChild(polygon);
/* 注:optgroup 无法扶正 */
+
        }
 
+
        return group;
/** 重置表格元素 **/
+
        }
table { border-collapse: collapse; border-spacing: 0; }
+
        return {
+
        setup: function(svgElement) {
</style>
+
          svg = svgElement;
 
+
          var vb = svg.getAttribute('viewBox').split(/\D/g);
 
+
          svgW = vb[2];
 
+
          svgH = vb[3];
 
+
        },
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content begins    --------------------------------------------------------------------------------------------------------------------------------->
+
        next: function(t) {
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
          var toRemove, i, n;
 
+
          t /= 1000;
+
          if(prevGroup){
+
            if(prevGroup.children){
+
              if(prevGroup.children.length){
+
                toRemove = prevGroup;
+
                n = toRemove.children.length;
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+
                for (i = n; i--; ) {
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
                  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
+
+
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&amp;action=raw&amp;ctype=text/css">
+
+
<style>
+
+
body{
+
margin:0;
+
padding:0;
+
background-color:#08273a;
+
}
+
a{
+
text-decoration:none;
+
}
+
#global_wrapper{
+
width:100%;
+
height:auto;
+
margin:0;
+
position:absolute;
+
}
+
#navUl{
+
width:100%;
+
height:110px;
+
padding:40px 0 0 0;
+
overflow:visible;
+
position:fixed;
+
list-style:none;
+
z-index:999;
+
background-color:#08273a;
+
margin:0;
+
top:0;
+
}
+
#mobileNav{
+
width:100%;
+
height:80px;
+
padding:20px 0 0 0;
+
top:0;
+
background-color:#001d2a;
+
position:fixed;
+
display:none;
+
text-align:center;
+
z-index:999;
+
}
+
#mobileNav img{
+
display:none;
+
margin:0;
+
padding:0;
+
}
+
#mobileLogo{
+
display:inline-block;
+
}
+
#mobileControl{
+
float:right;
+
display:inline-block;
+
margin-right:15px;
+
margin-top:3px;
+
}
+
#mobileCtrl{
+
height:25px;
+
}
+
#mobileTeamName{
+
display:inline-block;
+
}
+
#navImg{
+
display:inline-block;
+
float:left;
+
height:70px;
+
width:auto;
+
position:relative;
+
margin-left:4%;
+
margin-top:0;
+
}
+
.logo{
+
height:55px;
+
width:auto;
+
margin-top:1.3%;
+
}
+
.teamname{
+
height:28px;
+
}
+
 
+
#navBar{
+
float:right;
+
position:relative;
+
width:auto;
+
display:inline-block;
+
margin-right:4%;
+
}
+
.navLi{
+
float:left;
+
display:inline-block;
+
margin-top:3%;
+
color:white;
+
font-size:20px;
+
position:relative;
+
margin-left:18px;
+
text-align:center;
+
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
+
text-decoration:none;
+
}
+
.navA{
+
display:block;
+
text-align:center;
+
color:white;
+
text-decoration:none;
+
}
+
.navA2{
+
display:block;
+
overflow:visible;
+
color:white;
+
height:auto;
+
}
+
.ul2{
+
list-style:none;
+
position:absolute;
+
display:none;
+
overflow:hidden;
+
padding:10px 0 0 0 !important;
+
margin:0 !important;
+
font-size:17px;
+
left:50%;
+
transform:translateX(-50%);
+
border-bottom-left-radius: 10px;
+
border-bottom-right-radius: 10px;
+
background:linear-gradient(#08273a,rgba(0,138,201,1));
+
}
+
.li2{
+
padding:0;
+
margin:10px 20px;
+
text-align:center;
+
display:block;
+
}
+
.navA:link,.navA2:link{
+
text-decoration:none;
+
}
+
.navA:visited{
+
color:white;
+
}
+
.navA2:visited,.navA2:active{
+
color:white;
+
}
+
.navA:hover{
+
color:#7dded4;
+
}
+
.navA2:hover{
+
color:#7dded4;
+
}
+
.jqhover{
+
color:#7dded4;
+
}
+
.navA:hover{
+
text-decoration:none;
+
}
+
.navA:active{
+
text-decoration:none;
+
color:white;
+
}
+
 
+
</style>
+
 
+
+
 
+
+
<style>
+
+
#pageContent{
+
margin:100px 0 0 0;
+
text-align:center;
+
}
+
+
.row{
+
clear:both!important;
+
}
+
 
+
.title1{
+
font-size:2.3rem;
+
text-align:center;
+
color:white;
+
display:block;
+
margin-top:10%;
+
margin-bottom:7%;
+
line-height:110%;
+
}
+
.title2{
+
color:white;
+
text-align:left;
+
font-size:2rem;
+
line-height:130%;
+
display:block;
+
width:100%;
+
}
+
.title3{
+
font-size:1.4rem;
+
color:white;
+
text-align:left !important;
+
display:block;
+
width:100%;
+
line-height:110%;
+
padding-left:2%;
+
}
+
.para1{
+
color:white;
+
text-align:justify !important;
+
align-items:flex-start;
+
line-height:140%;
+
font-size:1.3rem;
+
margin-bottom:50px !important;
+
width:100%;
+
margin:auto 0;
+
}
+
                .para1>div{
+
                        margin:0!important;
+
 
                 }
 
                 }
.para1 a{
+
                TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
text-decoration:underline !important;
+
              }
color:white;
+
            }
}
+
          }
.para1 a:visited, .para1 a:active{
+
color:white;
+
}
+
.para1 a:hover{
+
color:rgba(96,255,249,1.00)!important;
+
}
+
.content1{
+
margin:7% auto;
+
}
+
.pic2{
+
width:150%;
+
}
+
.reverseDiv{
+
position:relative !important;
+
float:right !important;
+
}
+
 
+
+
.paraUl{
+
list-style-type:decimal !important;
+
list-style-position:outside;
+
padding-left:auto;
+
font-size:1rem;
+
}
+
.paraUl li{
+
padding-right:4% ;
+
}
+
+
+
#containerWithLeftNav{
+
display:block;
+
margin-left:25%;
+
}
+
.legend{
+
color:white;
+
text-align:center;
+
}
+
.legend>div{
+
width:100%;
+
text-align:justify!important;
+
font-size:1.1rem;
+
}
+
.legends{
+
margin:auto 15%;
+
}
+
 
+
 
+
</style>
+
+
<style>
+
+
@media only screen and (max-width:1200px){
+
#mobileBar{
+
margin-left:4%;
+
}
+
.navLi{
+
font-size:18px;
+
margin-top:3.5%;
+
}
+
}
+
+
+
@media only screen and (max-width:1100px){
+
+
#navUl{
+
display:block;
+
float:right;
+
margin-top:0;
+
top:80px;
+
right:0;
+
background-color:rgba(0,0,0,0);
+
padding:0;
+
}
+
+
#mobileNav{
+
display:block;
+
}
+
+
#navImg{
+
display:none;
+
}
+
+
+
#navBar{
+
margin:0 1% 0 0;
+
padding-right:2%;
+
padding-left:1%;
+
position:relative;
+
display:none;
+
}
+
+
#mobileNav img{
+
display:inline-block;
+
margin:5px 0;
+
padding:0;
+
}
+
#mobileControl{
+
margin-top:8px;
+
}
+
 
+
.logo{
+
height:45px;
+
margin-top:7px;
+
}
+
.navLi{
+
display:block;
+
position:relative;
+
float:right;
+
clear:both;
+
white-space:nowrap;
+
text-align:right;
+
margin:0;
+
height:60px;
+
width:100%;
+
background-color:#00324a;
+
}
+
.navA{
+
display:block;
+
text-align:right;
+
position:relative;
+
float:right;
+
padding:20px 20px !important;
+
}
+
.n2{
+
display:none;
+
width:0;
+
position:relative;
+
float:left;
+
text-align:right;
+
}
+
.ul2{
+
background:none;
+
padding-top:0;
+
background-color:#00557b;
+
text-align:right;
+
display:block;
+
position:relative;
+
float:right;
+
right:100%;
+
transform:translateX(0%);
+
top:0;
+
transform:translateY(1%);
+
border-radius:0 0 0 10px;
+
}
+
.open{
+
display:block;
+
}
+
+
.title2{
+
font-size:1.8rem;
+
line-height:140%;
+
}
+
.para1{
+
font-size:1.3rem;
+
}
+
.pic2{
+
width:120%;
+
}
+
+
.highlightIcon{
+
margin:20% auto 10% auto;
+
}
+
.highlightTitle{
+
margin-bottom:15%;
+
}
+
 
+
+
}
+
+
+
@media only screen and (max-width:992px){
+
+
#navUl{
+
display:block;
+
float:right;
+
margin:0;
+
top:80px;
+
right:0;
+
}
+
+
#mobileNav{
+
display:block;
+
}
+
+
#navImg{
+
display:none;
+
}
+
+
#navTeamName{
+
display:none;
+
}
+
+
#navBar{
+
margin:0 1% 0 0 ;
+
margin-right:2%;
+
padding-right:1%;
+
padding-left:1%;
+
position:relative;
+
display:none;
+
}
+
#mobileControl{
+
margin-top:10px;
+
}
+
#mobileNav img{
+
display:inline-block;
+
margin:5px 0;
+
padding:0;
+
}
+
.logo{
+
height:40px;
+
}
+
.navLi{
+
display:block;
+
position:relative;
+
float:right;
+
clear:both;
+
white-space:nowrap;
+
text-align:right;
+
height:60px;
+
width:100%;
+
}
+
.navA{
+
display:block;
+
text-align:right;
+
position:relative;
+
float:right;
+
font-size:15px;
+
}
+
.n2{
+
display:none;
+
width:0;
+
position:relative;
+
float:left;
+
}
+
.ul2{
+
font-size:13px;
+
}
+
.open{
+
display:block;
+
}
+
+
 
+
+
#animation_container{
+
display:none;
+
}
+
#teamLogo{
+
display:block;
+
}
+
 
+
+
.title2{
+
font-size:1.5rem;
+
}
+
.para1{
+
font-size:1.2rem;
+
}
+
.pic2{
+
width:100%;
+
}
+
 
+
+
}
+
+
+
@media only screen and (max-width:768px){
+
.col-md-4{
+
clear:both;
+
}
+
.col-md-8{
+
clear:both;
+
}
+
.pic2{
+
margin-bottom:10%;
+
width:80%;
+
}
+
.title2{
+
font-size:1.2rem;
+
}
+
.para1{
+
font-size:1rem;
+
}
+
.pic2{
+
width:80%;
+
}
+
#sponser img {
+
width:60%;
+
}
+
+
#containerWithLeftNav{
+
margin-left:auto;
+
}
+
+
}
+
+
</style>
+
 
+
 
+
+
+
 
+
 
+
<style>
+
#footContainer{
+
width:90%;
+
}
+
#FudanFooter{
+
margin:auto 0;
+
width:100%;
+
padding:3% 0;
+
}
+
#FudanFooter #usefulLinks {
+
color: #cacaca;
+
padding-left: 1rem;
+
}
+
 
+
#FudanFooter #usefulLinks ul {
+
font-size: 13px;
+
line-height: 14px;
+
border-top: solid 2px;
+
color: inherit;
+
text-decoration: none;
+
padding-top: 5px;
+
margin:0;
+
}
+
 
+
#FudanFooter #usefulLinks div {
+
color: #cacaca;
+
}
+
 
+
#FudanFooter #usefulLinks div:hover {
+
color: white;
+
}
+
 
+
#FudanFooter #usefulLinks a {
+
color: inherit;
+
}
+
 
+
#FudanFooter #usefulLinks a:hover {
+
text-decoration: underline;
+
}
+
 
+
#FudanFooter #usefulLinks div.active,
+
#FudanFooter #usefulLinks div.active a {
+
color: white;
+
}
+
 
+
#FudanFooter #usefulLinks div.active ul {
+
border-top: solid white 2px;
+
}
+
 
+
#FudanFooter #usefulLinks li {
+
padding: 3px 0 6px 3px;
+
list-style:none;
+
}
+
 
+
#usefulLinks span {
+
font-size: 20px;
+
}
+
+
 
+
#FudanFooter div.footer-copyright {
+
font-size: 13px;
+
line-height: 15px;
+
}
+
.footerUl{
+
margin:2% 4%;
+
}
+
</style>
+
 
+
<script>
+
+
$(document).ready(function(){
+
+
+
var winWidth=$(window).width();
+
+
if (winWidth>1100){
+
$(".navA").mouseenter(function(){
+
$(this).parent().find(".ul2").stop().fadeIn(400);
+
});
+
$(".navLi").mouseleave(function(){
+
$(this).find(".ul2").stop().fadeOut(400);
+
});
+
+
+
}
+
else{
+
$(".navA:not(.noSubmenu)").removeAttr("href");
+
$("#mobileNav").click(function(){
+
$("#navBar").toggle();
+
});
+
$(document).click(function(event){
+
var m = $("#mobileNav,#navBar");
+
if (!m.is(event.target)){
+
if (m.has(event.target).length===0){
+
$("#navBar").hide();
+
$(".open").parent().find(".navA").css("color","white");
+
$(".open").removeClass("open");
+
}
+
 
+
}
+
});
+
$(".navLi").click(function(){
+
if ($(this).find(".n2").hasClass("open")){
+
$(".open").parent().find(".navA").css("color","white");
+
$(this).find(".n2").removeClass("open");
+
}
+
else{
+
$(".open").parent().find(".navA").css("color","white");
+
$(".open").removeClass("open");
+
$(this).find(".n2").addClass("open");
+
$(this).find(".navA").css("color","#7dded4");
+
}
+
});
+
}
+
+
+
+
+
+
+
});
+
+
+
</script>
+
+
+
+
<div id="global_wrapper">
+
<div id="mobileNav">
+
+
<div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo"></div>
+
<div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
+
+
</div>
+
+
<ul id="navUl">
+
+
<li id="navImg">
+
<img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
+
+
</li>
+
+
+
<ul id="navBar">
+
+
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design" style="white-space:nowrap">Applied Design</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiment">Experiment</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Results">Results</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Reverse_Transcription">Reverse Transcription</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Recombination">Recombination</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Measurement">Measurement</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Notebook">Notebook</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Model_Software">Model</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Model">Modeling</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Software">Software</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Parts">Parts</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Basic_Part">Basic Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Composite_Part">Composite Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Improve">Improved Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection">Part Collection</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">Human Practices</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Public_Engagement">Education &amp; <br />Public Engagement</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Integrated_Human_Practice">Integrated <br />Human Practice</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Collaborations">Collaboration</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Safety">Safety</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team Members</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Team/Attribution">Attribution</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI/Awards">Awards</a></li>
+
+
</ul>
+
+
+
</ul>
+
 
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Cover ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
+
<div id="pageCover">
+
+
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&amp;action=raw&amp;ctype=text/javascript"></script>
+
<script>
+
$(document).ready(function($){
+
var $root = $('html, body');
+
$('a[href^="#"]').click(function() {
+
var href = $.attr(this, 'href');
+
$root.animate({
+
scrollTop: $(href).offset().top
+
}, 1000, function () {
+
window.location.hash = href;
+
});
+
return false;
+
});
+
})
+
</script>
+
+
<svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
+
  <defs>
+
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
+
  <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
+
  <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
+
</linearGradient>
+
<linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
+
  <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
+
  <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
+
</linearGradient>
+
  </defs>
+
  <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
+
  <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
+
</svg>
+
<div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/6/6f/T--Fudan-TSI--coverSoftware.gif"></div>
+
</div>
+
<style>
+
#pageCover{
+
width:100%;
+
margin:0;
+
padding-top:80px;
+
}
+
#demoCover{
+
width:100vw;
+
height:60vh;
+
position:absolute;
+
background-color:rgba(8,39,58,0.5);
+
top:80px;
+
left:0;
+
text-align:center;
+
}
+
#coverPic{
+
width:550px;
+
margin:15vh auto;
+
}
+
#demo{
+
width:100vw;
+
height:60vh;
+
position:relative;
+
}
+
#demo svg {
+
  width: 100%;
+
  height: 100%;
+
  position: fixed;
+
}
+
#demo svg g {
+
  mix-blend-mode: lighten;
+
}
+
#demo svg polygon {
+
  stroke: none;
+
  fill: white;
+
}
+
+
@media only screen and (max-width:1100px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#demo{
+
height:30vh;
+
}
+
#coverPic{
+
width:500px;
+
margin:7vh auto;
+
}
+
}
+
@media only screen and (max-width:992px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:500px;
+
margin:6vh auto;
+
}
+
}
+
@media only screen and (max-width:768px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:400px;
+
margin:8vh auto;
+
}
+
}
+
@media only screen and (max-width:500px){
+
#coverPic{
+
width:200px;
+
margin:8vh auto;
+
}
+
}
+
</style>
+
<script>
+
//////////////////////////////
+
// Demo Functions
+
//////////////////////////////
+
function bkgFunction(showStats) {
+
  // stats
+
  if (showStats) {
+
var stats = new Stats();
+
stats.domElement.style.position = 'absolute';
+
stats.domElement.style.left = '0';
+
stats.domElement.style.top = '0';
+
document.body.appendChild(stats.domElement);
+
requestAnimationFrame(function updateStats(){
+
  stats.update();
+
  requestAnimationFrame(updateStats);
+
});
+
  }
+
  // init
+
  var svg = document.getElementById('demo');
+
  tesselation.setup(svg);
+
  gradients.setup();
+
  var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
+
  function playNextTransition() {
+
tesselation.next(transitionDuration);
+
gradients.next(transitionDuration);
+
  };
+
  function tick(time) {
+
if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
+
  lastTransitionAt = time;
+
  playNextTransition();
+
}
+
window.requestAnimationFrame(tick);
+
  }
+
  window.requestAnimationFrame(tick);
+
}
+
//////////////////////////////
+
// Delaunay Triangulation
+
//////////////////////////////
+
var calcDelaunayTriangulation = (function() {
+
  var EPSILON = 1.0 / 1048576.0;
+
  function getSuperT(vertices) {
+
var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
+
xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
+
i, xDiff, yDiff, maxDiff, xCenter, yCenter;
+
for(i = vertices.length; i--; ) {
+
  if(vertices[i][0] < xMin) xMin = vertices[i][0];
+
  if(vertices[i][0] > xMax) xMax = vertices[i][0];
+
  if(vertices[i][1] < yMin) yMin = vertices[i][1];
+
  if(vertices[i][1] > yMax) yMax = vertices[i][1];
+
}
+
xDiff = xMax - xMin;
+
yDiff = yMax - yMin;
+
maxDiff = Math.max(xDiff, yDiff);
+
xCenter = xMin + xDiff * 0.5;
+
yCenter = yMin + yDiff * 0.5;
+
return [
+
  [xCenter - 20 * maxDiff, yCenter - maxDiff],
+
  [xCenter, yCenter + 20 * maxDiff],
+
  [xCenter + 20 * maxDiff, yCenter - maxDiff]
+
];
+
  }
+
  function circumcircle(vertices, i, j, k) {
+
var xI = vertices[i][0], yI = vertices[i][1],
+
xJ = vertices[j][0], yJ = vertices[j][1],
+
xK = vertices[k][0], yK = vertices[k][1],
+
yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
+
xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
+
// bail condition
+
if(yDiffIJ < EPSILON){
+
if (yDiffJK < EPSILON){
+
throw new Error("Can't get circumcircle since all 3 points are y-aligned");
+
}
+
}
+
+
+
// calc circumcircle center x/y, radius
+
m1  = -((xJ - xI) / (yJ - yI));
+
m2  = -((xK - xJ) / (yK - yJ));
+
xMidIJ = (xI + xJ) / 2.0;
+
xMidJK = (xJ + xK) / 2.0;
+
yMidIJ = (yI + yJ) / 2.0;
+
yMidJK = (yJ + yK) / 2.0;
+
xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
+
  (yDiffJK < EPSILON) ? xMidJK :
+
  (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
+
yCenter  = (yDiffIJ > yDiffJK) ?
+
  m1 * (xCenter - xMidIJ) + yMidIJ :
+
  m2 * (xCenter - xMidJK) + yMidJK;
+
xDiff = xJ - xCenter;
+
yDiff = yJ - yCenter;
+
// return
+
return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
+
  }
+
  function dedupeEdges(edges) {
+
var i, j, a, b, m, n;
+
for(j = edges.length; j; ) {
+
  b = edges[--j]; a = edges[--j];
+
  for(i = j; i; ) {
+
n = edges[--i]; m = edges[--i];
+
if(a === m){
+
  if (b===n){
+
  edges.splice(j, 2); edges.splice(i, 2);
+
  break;
+
  }  
+
}
+
if(a === n){
+
  if (b===m){
+
  edges.splice(j, 2); edges.splice(i, 2);
+
  break;
+
  }  
+
}
+
  }
+
}
+
  }
+
  return function(vertices) {
+
var n = vertices.length,
+
i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
+
// bail if too few / too many verts
+
if(n < 3 || n > 2000)
+
  return [];
+
// copy verts and sort indices by x-position
+
vertices = vertices.slice(0);
+
indices = new Array(n);
+
for(i = n; i--; )
+
  indices[i] = i;
+
indices.sort(function(i, j) {
+
  return vertices[j][0] - vertices[i][0];
+
});
+
// supertriangle
+
st = getSuperT(vertices);
+
vertices.push(st[0], st[1], st[2]);
+
// init candidates/locked tris list
+
candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
+
locked = [];
+
edges = [];
+
// scan left to right
+
for(i = indices.length; i--; edges.length = 0) {
+
  c = indices[i];
+
  // check candidates tris against point
+
  for(j = candidates.length; j--; ) {
+
// lock tri if point to right of circumcirc
+
dx = vertices[c][0] - candidates[j].x;
+
if (dx > 0.0){
+
if(dx * dx > candidates[j].r){
+
locked.push(candidates[j]);
+
  candidates.splice(j, 1);
+
  continue;
+
}
+
}
+
 
+
 
+
// point outside circumcirc = leave candidates
+
dy = vertices[c][1] - candidates[j].y;
+
if(dx * dx + dy * dy - candidates[j].r > EPSILON)
+
  continue;
+
// point inside circumcirc = break apart, save edges
+
edges.push(
+
  candidates[j].i, candidates[j].j,
+
  candidates[j].j, candidates[j].k,
+
  candidates[j].k, candidates[j].i
+
);
+
candidates.splice(j, 1);
+
  }
+
  // new candidates from broken edges
+
  dedupeEdges(edges);
+
  for(j = edges.length; j; ) {
+
b = edges[--j];
+
a = edges[--j];
+
candidates.push(circumcircle(vertices, a, b, c));
+
  }
+
}
+
// close candidates tris, remove tris touching supertri verts
+
for(i = candidates.length; i--; )
+
  locked.push(candidates[i]);
+
candidates.length = 0;
+
for(i = locked.length; i--; )
+
  if(locked[i].i < n){
+
  if(locked[i].j < n){
+
  if(locked[i].k < n){
+
  candidates.push(locked[i].i, locked[i].j, locked[i].k);
+
  }
+
  }
+
  }
+
+
+
// done
+
return candidates;
+
  };
+
})();
+
var tesselation = (function() {
+
  var svg, svgW, svgH, prevGroup;
+
  function createRandomTesselation() {
+
var wW = window.innerWidth;
+
var wH = window.innerHeight;
+
var gridSpacing = 250, scatterAmount = 0.75;
+
var gridSize, i, x, y;
+
if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
+
  gridSize = gridSpacing * svgW / wW;
+
} else { // window taller than svg = use height for gridSize
+
  gridSize = gridSpacing * svgH / wH;
+
}
+
var vertices = [];
+
var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
+
for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
+
  for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
+
vertices.push(
+
  [
+
xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
+
yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
+
  ]
+
);
+
  }
+
}
+
var triangles = calcDelaunayTriangulation(vertices);
+
var group = document.createElementNS('http://www.w3.org/2000/svg','g');
+
var polygon;
+
for(i = triangles.length; i; ) {
+
  polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
+
  polygon.setAttribute('points',
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
+
  );
+
  group.appendChild(polygon);
+
}
+
return group;
+
  }
+
  return {
+
setup: function(svgElement) {
+
  svg = svgElement;
+
  var vb = svg.getAttribute('viewBox').split(/\D/g);
+
  svgW = vb[2];
+
  svgH = vb[3];
+
},
+
next: function(t) {
+
  var toRemove, i, n;
+
  t /= 1000;
+
if(prevGroup){
+
if(prevGroup.children){
+
if(prevGroup.children.length){
+
toRemove = prevGroup;
+
n = toRemove.children.length;
+
for (i = n; i--; ) {
+
  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
+
}
+
TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
+
}
+
}
+
}
+
+
  var g = createRandomTesselation();
+
  n = g.children.length;
+
  for (i = n; i--; ) {
+
TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
+
  }
+
  svg.appendChild(g);
+
  prevGroup = g;
+
}
+
  }
+
})();
+
//////////////////////////////
+
// Gradients
+
//////////////////////////////
+
var gradients = (function() {
+
  var grad1, grad2, showingGrad1;
+
  // using colors from IBM Design Colors this time
+
  var colors = [ // 14 colors - use 3-5 span
+
'#3c6df0', // ultramarine50
+
'#12a3b4', // aqua40
+
'#00a78f', // teal40
+
'#00aa5e', // green40
+
'#81b532', // lime30
+
'#e3bc13', // yellow20
+
'#ffb000', // gold20
+
'#fe8500', // orange30
+
'#fe6100', // peach40
+
'#e62325', // red50
+
'#dc267f', // magenta50
+
'#c22dd5', // purple50
+
'#9753e1', // violet50
+
'#5a3ec8'  // indigo60
+
  ];
+
  function assignRandomColors(gradObj) {
+
var rA = Math.floor(colors.length * Math.random());
+
var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
+
rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
+
gradObj.stopA.setAttribute('stop-color', colors[rA]);
+
gradObj.stopB.setAttribute('stop-color', colors[rB]);
+
  }
+
  return {
+
setup: function() {
+
  showingGrad1 = false;
+
  grad1 = {
+
stopA: document.getElementById('stop1a'),
+
stopB: document.getElementById('stop1b'),
+
rect:  document.getElementById('rect1')
+
  };
+
  grad2 = {
+
stopA: document.getElementById('stop2a'),
+
stopB: document.getElementById('stop2b'),
+
rect:  document.getElementById('rect2')
+
  };
+
  grad1.rect.style.opacity = 0;
+
  grad2.rect.style.opacity = 0;
+
},
+
next: function(t) {
+
  t /= 1000;
+
  var show, hide;
+
  if (showingGrad1) {
+
hide = grad1;
+
show = grad2;
+
  } else {
+
hide = grad2;
+
show = grad1;
+
  }
+
  showingGrad1 = !showingGrad1;
+
  TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
+
  assignRandomColors(show);
+
  TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
+
}
+
  };
+
})();
+
//////////////////////////////
+
// Start
+
//////////////////////////////
+
bkgFunction();
+
</script>
+
+
 
+
 
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Left Navigator ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<ul class="leftNav" style="margin:0;padding:0;">
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">Summary</a></li>
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Motivation</a></li>
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Theoretical basis</a></li>
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">User guidelines</a></li>
+
 
+
</ul>
+
+
<style>
+
.leftNav{
+
position: absolute;
+
top:20vw;
+
left:4%;
+
list-style: none;
+
z-index: 3;
+
text-align:left !important;
+
width:15vw;
+
}
+
.leftNav .leftNavA2{
+
position: relative;
+
}
+
.leftNav .leftNavA2:before {
+
content: "";
+
display: inline-block;
+
width: 5px;
+
height: 5px;
+
background-color: rgba(55,55,62,0.7);
+
border-radius: 50%;
+
position: absolute;
+
left: 0.3vw;
+
top:50%;
+
margin: 0;
+
padding: 0;
+
transform: translateY(-50%);
+
}
+
.leftNavUl2{
+
list-style: none;
+
}
+
.leftNavA{
+
display: block;
+
font-size: 1.1vw;
+
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
+
padding: 0.2vw 0.8vw;
+
color:#4CA198;
+
text-decoration: none;
+
}
+
.leftNavLi2{
+
width: 13vw;
+
margin:0.3vw  0;
+
line-height: 17px;
+
}
+
.leftNavA:visited{
+
text-decoration: none;
+
color:#4CA198;
+
}
+
.leftNavA:focus{
+
text-decoration: none;
+
color:#4CA198;
+
}
+
.leftNavA:hover,.leftNavA:active{
+
text-decoration: none;
+
color: #B0EBE4;
+
}
+
 
+
.leftNavA2{
+
display: block;
+
font-size: 1vw;
+
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
+
padding: 0.1vw 1.5vw;
+
color:rgba(168,168,168,1);
+
text-decoration: none;
+
}
+
.leftNavA2:visited{
+
text-decoration: none;
+
color:rgba(168,168,168,1);
+
}
+
.leftNavA2:focus{
+
text-decoration: none;
+
color:rgba(168,168,168,1);
+
}
+
.leftNavA2:hover,.leftNavA2:active{
+
text-decoration: none;
+
color: white;
+
}
+
.menu-active,.menu-active:focus{
+
text-decoration: none;
+
color: white;
+
}
+
.menu-active2,.menu-active2:focus{
+
text-decoration:none;
+
color:#B0EBE4;
+
}
+
+
+
@media only screen and (max-width:768px){
+
.leftNav{
+
display:none;
+
}
+
}
+
</style>
+
 
+
 
+
+
<div id="pageContent">
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Content ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
+
<div class="container" id="containerWithLeftNav">
+
<div class="row">
+
<div class="row title2" id="mainTitle4">
+
                        <div class="col">Summary</div>
+
                    </div>
+
   
+
                    <div class="row para1">
+
                        <div class="row">
+
                            <div class="col">
+
                                To track bacteria growth on the plate and observe the recovery of fluorescence due to continuous mutagenesis of the starting mutated protein, we devised this hardware - the Fluorescence Tracker. It provides continuous, hands-off recording of the growth of bacteria on the plate as well as fluorescent protein expression. For users of our mutagenesis system, with the help of our hardware, they could plate, and then monitor quite a number of plates to increase the likelihood of spotting bacteria colonies with recovered fluorescence at the earliest time point. Through the discussion with our PI, we improved our hardware by adding remote access through TeamViewer, which allows visualizing the dynamic changes on smartphones.  Although the current hardware is only suitable for monitoring the recovery of fluorescence, it could be easily modified to monitor bacteria colonies growing out of any antibiotic plate. Our hardware allows us every time going to the lab will have a plate with desired colonies waiting for us.
+
                            </div>
+
                        </div>
+
                    </div>
+
+
<div class="row title2" id="mainTitle1">
+
<div class="col">Motivation</div>
+
</div>
+
+
<div class="row para1">
+
<div class="row">
+
<div class="col">
+
In our experimental setup, we decided to demonstrate whether desired mutations of our gene of interest occurs by viewing whether the stop codon ahead of the real stop codon of the mRNA of eGFP is mutated into a non-stop codon. This means that after removing IPTG and aTc from the bacteria that have been used to induce mutation, we should coat the plate and keep track on the color of each colony that forms on the plate. However, as the mutation rate of our system is not high enough, we need to coat quite a few plates to increase the probability that at least 1 colony can express eGFP. Finally, we should put them under the fluorescence microscope one by one. Those steps render the demonstration step laborious. As a result, we built this Fluorescence Tracker hardware to automatically track the fluorescence change with cell growth. The Fluorescence Tracker is composed of a camera and an Arduino board connected to your computer and is based on a software called Micro-Manager. The Arduino board is connected to a flashlight that can emit R/G/B light to stimulate the fluorescence of eGFP. The camera is used to record the cell growth and the change in fluorescence. Finally, using a mobile App called TeamViewer which can link your mobile phone with your computer, you can have access to viewing the fluorescence of any plates anywhere and anytime.
+
</div>
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle2">
+
<div class="col"><i>User guideline and demonstration</i></div>
+
</div>
+
+
<div class="row para1" style="margin:0">
+
<div class="row">
+
<div class="col">
+
                                Our Fluorescence Tracker is a hardware for potential users of our mutagenesis system to easily track whether the mutated protein has been expressed or not. Here we provide a step-by-step guide to using this hardware.<br /><br />
+
                                Step 1. Download and install the correct version of <i>Micro-Manager</i> from its <a href="https://micro-manager.org/wiki/Micro-Manager_Version_Archive">official website</a> according to your depending on your own computer setup (MacOS/Win-32/Win-64 are available). Older releases are recommended here.</div>
+
</div>
+
</div>
+
 
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/8/82/T--Fudan-TSI--HFig1.gif" style="width:100%; margin:auto;"><br />
+
</div>
+
</div>
+
 
+
                    <div class="row para1">
+
<div class="row">
+
<div class="col">
+
                                Step 2. Double click on the Micro-Manager icon to start the software. <br /><br />
+
</div>
+
</div>
+
</div>
+
 
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/b/be/T--Fudan-TSI--HFig2.gif" style="width:100%; margin:auto;">
+
</div>
+
</div>
+
 
+
                    <div class="row para1">
+
<div class="row">
+
<div class="col">
+
                                Step 3. Load Micro-Manager startup configuration file (.cfg files) that controls the camera and the Arduino board (the file <i>openCV.cfg</i> shown here only controls the camera). The file <i>arduino_LED.cfg</i> controls both the camera and the Arduino board.
+
</div>
+
</div>
+
                    </div>
+
                   
+
                    <div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/4/4c/T--Fudan-TSI--HFig3.gif" style="width:100%; margin:auto;">
+
</div>
+
                    </div>
+
                   
+
                    <div class="row para1">
+
<div class="row">
+
<div class="col">
+
                                The setup of our hardware is shown in the following picture. We developed the configuration script  arduino_LED.cfg can control both the camera and the Arduino board. However, due to the lack of a filter glass, when projecting the light to the plate that has colonied by E.coli expressing fluorescence protein, the images recorded by the camera was far below expectation. Because of our inability to select an appropriate filter glass, we just propose a theoretically feasible hardware setup.<br /><br />
+
</div>
+
</div>
+
                    </div>
+
 
+
                                            <div class="row para1">
+
<div class="row">
+
<div class="col col-lg-12">
+
                                <img src="https://static.igem.org/mediawiki/2019/6/6d/T--Fudan-TSI--HAddition.gif" style="width:100%; margin:auto;">
+
</div>
+
</div>
+
                                            </div>
+
                   
+
                    <div class="row para1">
+
<div class="row">
+
<div class="col col-lg-12">
+
                                Step 4. Click on the Multi-D Acq. icon to open multi-dimensional acquisition window.
+
</div>
+
</div>
+
                    </div>
+
 
+
                    <div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/d/d7/T--Fudan-TSI--HFig4.gif" style="width:100%; margin:auto;">
+
</div>
+
                    </div>
+
 
+
                    <div class="row para1">
+
<div class="row">
+
<div class="col">
+
                                Step 5. After Step 4, a setting window will pop up. Tick the Time Points box to set how many pictures you want to take and the intervals of taking these pictures. Suppose we decide to record for 12 hours, we only need to type 144 in the text box behind Number and set 5 min in the text box behind Interval.
+
</div>
+
</div>
+
                    </div>
+
 
+
                    <div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/e/e8/T--Fudan-TSI--HFig5.gif" style="width:100%; margin:auto;">
+
</div>
+
                    </div>
+
 
+
                    <div class="row para1">
+
<div class="row">
+
<div class="col">
+
                                Step 6. Tick the Save images box to save the pictures to a local folder. Finally, click the Acquire! icon to start the automatic image acuiring process. Now you can see your plate if it is placed right under the camera.
+
</div>
+
</div>
+
                    </div>
+
 
+
                    <div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/b/bc/T--Fudan-TSI--HFig6.gif" style="width:100%; margin:auto;">
+
</div>
+
                    </div>
+
 
+
                    <div class="row para1">
+
<div class="row">
+
<div class="col col-lg-12">
+
                                Step 7. Click on the green magnifier icon to zoom in for a better view.
+
</div>
+
</div>
+
                    </div>
+
 
+
                    <div class="row legend">
+
<div class="row">
+
                            <img src="https://static.igem.org/mediawiki/2019/9/98/T--Fudan-TSI--SHFig7.gif" style="width:100%; margin:auto;">
+
                            <img src="https://static.igem.org/mediawiki/2019/8/8d/T--Fudan-TSI--HFig7_5.gif" style="width:100%; margin:auto;">
+
</div>
+
                    </div>
+
                   
+
                    <div class="row para1">
+
                        <div class="row">
+
                            <div class="col">
+
                                **Step 8. If you want to access the recording device when you are not in the, you can use the software TeamViewer to connect your mobile phone and your computer, as is shown in the following figure. The picture is the screen shot from the mobile phone.
+
                            </div>
+
                        </div>
+
                    </div>
+
 
+
                    <div class="row legend">
+
                        <div class="row">
+
                            <img src="https://static.igem.org/mediawiki/2019/e/e8/T--Fudan-TSI--HFig8.gif" style="width:100%; margin:auto;">
+
                        </div>
+
                    </div>
+
  
<div class="row title2" id="mainTitle3">
+
          var g = createRandomTesselation();
                        <div class="col">Future work</div>
+
          n = g.children.length;
                    </div>
+
          for (i = n; i--; ) {
 +
          TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
 +
          }
 +
          svg.appendChild(g);
 +
          prevGroup = g;
 +
        }
 +
        }
 +
      })();
 +
      //////////////////////////////
 +
      // Gradients
 +
      //////////////////////////////
 +
      var gradients = (function() {
 +
        var grad1, grad2, showingGrad1;
 +
        // using colors from IBM Design Colors this time
 +
        var colors = [ // 14 colors - use 3-5 span
 +
        '#3c6df0', // ultramarine50
 +
        '#12a3b4', // aqua40
 +
        '#00a78f', // teal40
 +
        '#00aa5e', // green40
 +
        '#81b532', // lime30
 +
        '#e3bc13', // yellow20
 +
        '#ffb000', // gold20
 +
        '#fe8500', // orange30
 +
        '#fe6100', // peach40
 +
        '#e62325', // red50
 +
        '#dc267f', // magenta50
 +
        '#c22dd5', // purple50
 +
        '#9753e1', // violet50
 +
        '#5a3ec8'  // indigo60
 +
        ];
 +
        function assignRandomColors(gradObj) {
 +
        var rA = Math.floor(colors.length * Math.random());
 +
        var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
 +
        rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
 +
        gradObj.stopA.setAttribute('stop-color', colors[rA]);
 +
        gradObj.stopB.setAttribute('stop-color', colors[rB]);
 +
        }
 +
        return {
 +
        setup: function() {
 +
          showingGrad1 = false;
 +
          grad1 = {
 +
          stopA: document.getElementById('stop1a'),
 +
          stopB: document.getElementById('stop1b'),
 +
          rect:  document.getElementById('rect1')
 +
          };
 +
          grad2 = {
 +
          stopA: document.getElementById('stop2a'),
 +
          stopB: document.getElementById('stop2b'),
 +
          rect:  document.getElementById('rect2')
 +
          };
 +
          grad1.rect.style.opacity = 0;
 +
          grad2.rect.style.opacity = 0;
 +
        },
 +
        next: function(t) {
 +
          t /= 1000;
 +
          var show, hide;
 +
          if (showingGrad1) {
 +
          hide = grad1;
 +
          show = grad2;
 +
          } else {
 +
          hide = grad2;
 +
          show = grad1;
 +
          }
 +
          showingGrad1 = !showingGrad1;
 +
          TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
 +
          assignRandomColors(show);
 +
          TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
 +
        }
 +
        };
 +
      })();
 +
      //////////////////////////////
 +
      // Start
 +
      //////////////////////////////
 +
      bkgFunction();
 +
    </script>
 +
              <div style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover hardware" src="https://static.igem.org/mediawiki/2019/a/a7/T--Fudan-TSI--coverHardware.gif" /></center></div>
 +
          </div>
 +
      </div>
  
                    <div class="row para1">
+
<!--////////////////////////////////////////////////////
                        <div class="row">
+
      do not edit above, if must BE CAREFUL
                            <div class="col">
+
  //////////////////////////////////////////////////////-->
                                At present, we just proved that our recording setup could work properly. However, for lack of critical devices, we haven't come up with a good solution to record the fluorescence. Moreover, this system can only work for one plate, but there will be a lot of plates that need to be tracked in R-Evolution. As a result, we should further build a device that can record many plates with high resolution.
+
      <div class="container">
                            </div>
+
          <!-- side navigator of page content -->
                        </div>
+
          <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0">
                    </div>
+
              <li class="onThisPageNav"><a href="#section1">Motivation</a></li>
 +
              <li class="onThisPageNav"><a href="#section2">Demonstration</a></li>
 +
              <li class="onThisPageNav"><a href="#section3">Future&nbsp;work</a></li>
 +
          </ul>
 +
          <!-- main content of the page -->
 +
          <main><article>
  
                   
+
<div id="section1" class="section container scrolSpy">
               
+
<p class="flow-text">To track bacteria growth on the plate and observe the fluorescence recovery from nonsense mutation due to continuous mutagenesis, we devised this hardware - the Fluorescence Tracker. It provides continuous, hands-off recording of the growth of plate colonies as well as fluorescent protein expression. For users of our mutagenesis system, with the help of our hardware, they could plate, and then monitor all plates together to increase the likelihood of spotting bacteria colonies with recovered fluorescence at the earliest time point. After discussions with our PI, we improved our hardware by adding remote access through TeamViewer, which allows visualizing the dynamic changes on smartphones. Although the current hardware is only suitable for monitoring fluorescence recovery, it could be easily modified to monitor bacteria colonies growing out of any antibiotic plate. Our hardware allows us to come to lab knowing that a plate with desired colonies is waiting for us.</p>
+
</div>
+
+
  
 +
  <h2>Motivation</h2>
 +
  <p class="flow-text">In our experimental setup, we decided to demonstrate whether desired mutations of our gene of interest occurs by viewing whether the stop codon ahead of the real stop codon of the mRNA of eGFP is mutated into a non-stop codon. This means that after removing IPTG and aTc from the bacteria that have been used to induce mutation, we should coat the plate and keep track on the color of each colony that forms on the plate.</p>
 +
  <p class="flow-text">However, as the mutation rate of our system might not be high enough, we prefer to coat quite a few plates to increase the probability that at least 1 colony can express eGFP. Finally, we should put them under the fluorescence microscope one by one. Those steps render the experiments laborious. As a result, we built this Fluorescence Tracker hardware to automatically track the fluorescence change with cell growth. The Fluorescence Tracker is composed of a camera and an Arduino board connected to the computer and is controlled by a software called Micro-Manager. The Arduino board is connected to a flashlight that can emit R/G/B light to stimulate the fluorescence of eGFP. The camera is used to record the cell growth and the change in fluorescence.</p>
 +
  <p class="flow-text">Finally, using the mobile App from TeamViewer which view the computer on your mobile phone, you can have access to view the fluorescence of any plates anywhere and anytime.</p>
 +
</div>
  
</div>
+
<div id="section2" class="section container scrolSpy">
+
  <h2>Demonstration</h2>
 +
  <p class="flow-text">Our Fluorescence Tracker is a hardware for potential users of our mutagenesis system to easily track whether the mutated protein has been expressed or not. Here we provide a step-by-step guide to using this hardware.</p>
 +
  <p class="flow-text">Step 1. Download and install the correct version of Micro-Manager from <a href="https://micro-manager.org/wiki/Micro-Manager_Version_Archive" target="_blank">its official website</a> according to your depending on your own computer setup (MacOS/Win-32/Win-64 are available). Old 1.4 releases are recommended.</p>
  
+
  <div class="figureHolder">
</div>
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/8/82/T--Fudan-TSI--HFig1.gif" />
+
  </div>
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Foot ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
+
<footer id="FudanFooter" class="page-footer grey">
+
+
<div class="container" id="footContainer">
+
<div class="row">
+
<div class="col-md-4" id="sponser" style="padding-top:3%;">
+
<div class="row">
+
<div class="col-sm-6" style="padding:0;">
+
<div class="row align-items-center">
+
<div class="col">
+
<img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
+
</div>
+
<div class="col">
+
<img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
+
</div>
+
</div>
+
</div>
+
<div class="col-sm-6" style="padding:0;">
+
<div class="row align-items-center">
+
<div class="col">
+
<img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
+
</div>
+
<div class="col">
+
<img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
+
</div>
+
</div>
+
</div>
+
</div>
+
<div class="row">
+
<h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
+
</div>
+
</div>
+
+
<div class="col-md-8" id="usefulLinks">
+
<div class="row">
+
<div class="col-lg-6" style="padding:0;">
+
<div class="row">
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
<span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Description">Background</a></li>
+
<li><a href="/Team:Fudan-TSI/Design">Design</a></li>
+
<li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
+
<li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
+
<li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
<span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
+
<li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
+
<li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
+
<li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
+
<li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center active">
+
<span style="text-decoration:none;">Model</span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
+
<li><a href="/Team:Fudan-TSI/Software">Software</a></li>
+
<li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
+
</ul>
+
</div>
+
</div>
+
+
</div>
+
</div>
+
<div class="col-lg-6" style="padding:0;">
+
<div class="row">
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
  <span><a href="/Team:Fudan-TSI/Parts" style="text-decoration:none;">Parts</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
+
<li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
+
<li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
+
<li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
  <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Public_Engagement">Education &amp; Public engagement</a></li>
+
<li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
+
<li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
+
<li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
  <span><a href="/Team:Fudan-TSI/Team" style="text-decoration:none;">Team</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Team">Members</a></li>
+
<li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
+
<li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
+
<li><a href="/Team:Fudan-TSI">&#169; 2019</a></li>
+
</ul>
+
</div>
+
</div>
+
+
</div>
+
</div>
+
+
+
</div>
+
</div>
+
</div>
+
</div>
+
+
<div class="footer-copyright">
+
<div class="container" style="width:90%;">
+
<div class="contactUS row">
+
  <div class="col s12 m6 l6"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
+
  </div>
+
<div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
+
  </div>
+
<div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
+
  </div>
+
<div class="col s12 m6 l2"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
+
  </div>
+
</div>
+
</div>
+
</div>
+
</footer>
+
+
+
  
</div>
+
  <p class="flow-text">Step 2. Double click on the Micro-Manager icon to start the software.</p>
 +
  <p class="flow-text">Step 3. Load Micro-Manager startup configuration file (.cfg files) that controls the camera and the Arduino board (the file openCV.cfg shown here only controls the camera). The file arduino_LED.cfg controls both the camera and the Arduino board. Both cfg files are available upon request.</p>
  
+
  <div class="figureHolder">
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/4/4c/T--Fudan-TSI--HFig3.gif" />
<script>
+
  </div>
+
var winHeight=$(window).height();
+
var winWidth=$(window).width();
+
var pagePosition=$("#pageContent").offset().top;
+
var navHeight=$(".leftNav").height();
+
var footerHeight=$("#FudanFooter").height();
+
var maxTopDistance=$("#pageContent").height();
+
$(".leftNav").css({"position":"absolute","top":pagePosition});
+
$(window).resize(function(){
+
var winHeight=$(window).height();
+
var winWidth=$(window).width();
+
var topDistance=$(window).scrollTop();
+
var navHeight=$(".leftNav").height();
+
var footerHeight=$("#FudanFooter").height();
+
var maxTopDistance=$("#pageContent").height();
+
var leftNavFromTop=pagePosition-$(window).scrollTop();
+
if (leftNavFromTop<0.1*winWidth){
+
if(topDistance<maxTopDistance){
+
$(".leftNav").css({"position":"fixed","top":0.1*winWidth+$("#top_menu_14").height()});
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
+
}
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":pagePosition});
+
}
+
});
+
  
$(window).scroll(function(){
+
  <p class="flow-text">The setup of our hardware is shown in the following picture. We developed the configuration script arduino_LED.cfg can control both the camera and the Arduino board. However, due to the lack of a filter glass, when projecting the light to the plate that has colonied by <i>E. coli</i> expressing fluorescence protein, the images recorded by the camera was far below expectation. Due to lacking a motorized drive, we are not able to switch between appropriate filter glasss, what we shown here could be improved.</p>
var winHeight=$(window).height();
+
var winWidth=$(window).width();
+
var leftNavFromTop=pagePosition-$(window).scrollTop();
+
var topDistance=$(window).scrollTop();
+
if (leftNavFromTop<0.1*winWidth){
+
if(topDistance<maxTopDistance){
+
$(".leftNav").css({"position":"fixed","top":0.1*winWidth+$("#top_menu_14").height()});
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
+
};
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":pagePosition});
+
}
+
});
+
+
$(".leftNav a").click(function () {
+
$('html, body').animate({
+
scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
+
}, 500);
+
return false;
+
});
+
  
 +
  <div class="figureHolder">
 +
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/6/6d/T--Fudan-TSI--HAddition.gif" />
 +
  </div>
  
$(window).scroll(function(){
+
  <p class="flow-text">Step 4. Click on the Multi-D Acq. icon to open multi-dimensional acquisition window.</p>
+
var currentScroll=$(this).scrollTop();
+
var firstHeight=$("#pageCover").height();
+
var footerFromTop=$("#FudanFooter").offset().top;
+
var $currentSection=null;
+
$(".leftNavA").each(function(){
+
$('.leftNavA').removeClass('menu-active');
+
var hePoint=$($(this).attr("href"));
+
var divPosition=hePoint.offset().top-$("#navUl").height()-50;
+
if (divPosition-1<currentScroll){
+
$currentSection=$(this);
+
}
+
if (currentScroll>firstHeight){
+
$(".leftNavA").removeClass("menu-active");
+
$currentSection.addClass("menu-active");
+
}
+
});
+
+
var $currentSection2;
+
$('.leftNavA2').each(function(){
+
$('.leftNavA2').removeClass('menu-active2');
+
var hePoint2=$($(this).attr("href"));
+
var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
+
if (divPosition2-1<currentScroll){
+
$currentSection2=$(this);
+
}
+
if (currentScroll>firstHeight){
+
$('.leftNavA2').removeClass('menu-active2');
+
$currentSection2.addClass('menu-active2');
+
}
+
});
+
});
+
  
</script>
+
  <div class="figureHolder">
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/d/d7/T--Fudan-TSI--HFig4.gif" />
 +
  </div>
  
+
  <p class="flow-text">Step 5. After Step 4, a setting window will pop up. Tick the Time Points box to set how many pictures you want to take and the intervals of taking these pictures. Suppose we decide to record for 12 hours, we only need to type 144 in the text box behind Number and set 5 min in the text box behind Interval.</p>
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
  
 +
  <div class="figureHolder">
 +
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/e/e8/T--Fudan-TSI--HFig5.gif" />
 +
  </div>
  
 +
  <p class="flow-text">Step 6. Tick the Save images box to save the pictures to a local folder. Finally, click the Acquire! icon to start the automatic image acuiring process. Now you can see your plate if it is placed right under the camera.</p>
  
+
  <div class="figureHolder">
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/b/bc/T--Fudan-TSI--HFig6.gif" />
+
  </div>
+
+
+
+
  
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content ends    --------------------------------------------------------------------------------------------------------------------------------->
+
  <p class="flow-text">Step 7. Click on the green magnifier icon to zoom in for a better view.</p>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
  
 +
  <div class="figureHolder">
 +
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/archive/9/98/20191017193505%21T--Fudan-TSI--SHFig7.gif" />
 +
  </div>
  
</p>
+
  <p class="flow-text">Step 8. If you want to access the recording device when you are not in the, you can use the software TeamViewer to connect your mobile phone and your computer, as is shown in the following figure. The picture is the screen shot from the mobile phone.</p>
<!--
+
NewPP limit report
+
CPU time usage: 0.008 seconds
+
Real time usage: 0.009 seconds
+
Preprocessor visited node count: 6/1000000
+
Preprocessor generated node count: 34/1000000
+
Post‐expand include size: 0/2097152 bytes
+
Template argument size: 0/2097152 bytes
+
Highest expansion depth: 2/40
+
Expensive parser function count: 0/100
+
-->
+
  
<!-- Saved in parser cache with key 2019_igem_org:pcache:idhash:6652-0!*!*!*!*!*!* and timestamp 20191017160049 and revision id 305374
+
  <div class="figureHolder">
-->
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/e/e8/T--Fudan-TSI--HFig8.gif" />
</div>             <div class="visualClear"></div>
+
  </div>
            </div>
+
</div>
    </div>
+
  
        </div>
+
<div id="section3" class="section container scrolSpy">
    </div>
+
  <h2>Future work</h2>
 +
  <p class="flow-text">At present, we just proved that our recording setup could work properly. However, for lack of critical devices, we haven't come up with a good solution to record the fluorescence. Moreover, this system can only work for one plate, but there will be a lot of plates that need to be tracked in R-Evolution. As a result, we should further build a device that can record many plates with high resolution.</p>
 +
</div>
  
</p>
+
<!--////////////////////////////////////////////////////
<!--  
+
      do not edit below, if must BE CAREFUL
NewPP limit report
+
  //////////////////////////////////////////////////////-->
CPU time usage: 0.005 seconds
+
      </article></main></div><!-- end of side navigator and main of the page -->
Real time usage: 0.005 seconds
+
Preprocessor visited node count: 4/1000000
+
Preprocessor generated node count: 24/1000000
+
Post‐expand include size: 0/2097152 bytes
+
Template argument size: 0/2097152 bytes
+
Highest expansion depth: 2/40
+
Expensive parser function count: 0/100
+
-->
+
  
<!-- Saved in parser cache with key 2019_igem_org:pcache:idhash:6652-0!*!*!*!*!*!* and timestamp 20191017164046 and revision id 306118
+
<!-- Floating Btns, Footer with sponsors -->
-->
+
      <div class="floatingBtn"> <a href="#FudanTSIdivWrapper" class="btn"> <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i> </a></div> <footer id="FudanTSIfooter" class="page-footer blue-grey darken-1"><div class="container"><div class="row"><div id="sponsor" class="col m3 s12 row"> <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2019 Team:Fudan-TSI logo white" class="col s3 m6 l3" style="position:relative; padding: 0.45em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif"> </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* fig should be smaller, 2018 ht */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png"> </a><h3 class="col s12" style="text-align:left;font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3></div><div id="footerNavList" class="col m9 s12 row"><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Description">Project</a></span><ul><li><a href="/Team:Fudan-TSI/Description">Background</a></li><li><a href="/Team:Fudan-TSI/Design">Design</a></li><li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Demonstrate">Results</a></span><ul><li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div><div class="col s12 m4 active"> <span><a href="/Team:Fudan-TSI/Model">Model</a></span><ul><li><a href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a href="/Team:Fudan-TSI/Software">Software</a></li><li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></div><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span><ul><li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span><ul><li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Team">Team</a></span><ul><li><a href="/Team:Fudan-TSI/Team">Members</a></li><li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li><li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div><div class="col s12 m4">&nbsp;</div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="contactUS row"><div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai</div><div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727</div><div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn</div><div class="col s12 m6 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM</div></div></div></div> </footer>
</div>             <div class="visualClear"></div>
+
</div></div></div><!-- #pageContent #FudanTSIBody #FudanTSIdivWrapper -->
            </div>
+
    </div>
+
  
        </div>
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script><!-- Materialize 1.0.0-rc.2 -->
    </div>
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script>
 +
</body>
 
</html>
 
</html>

Latest revision as of 05:57, 16 November 2019

Hardware | 2019 iGEM Team:Fudan-TSI


Hardware

cover hardware

To track bacteria growth on the plate and observe the fluorescence recovery from nonsense mutation due to continuous mutagenesis, we devised this hardware - the Fluorescence Tracker. It provides continuous, hands-off recording of the growth of plate colonies as well as fluorescent protein expression. For users of our mutagenesis system, with the help of our hardware, they could plate, and then monitor all plates together to increase the likelihood of spotting bacteria colonies with recovered fluorescence at the earliest time point. After discussions with our PI, we improved our hardware by adding remote access through TeamViewer, which allows visualizing the dynamic changes on smartphones. Although the current hardware is only suitable for monitoring fluorescence recovery, it could be easily modified to monitor bacteria colonies growing out of any antibiotic plate. Our hardware allows us to come to lab knowing that a plate with desired colonies is waiting for us.

Motivation

In our experimental setup, we decided to demonstrate whether desired mutations of our gene of interest occurs by viewing whether the stop codon ahead of the real stop codon of the mRNA of eGFP is mutated into a non-stop codon. This means that after removing IPTG and aTc from the bacteria that have been used to induce mutation, we should coat the plate and keep track on the color of each colony that forms on the plate.

However, as the mutation rate of our system might not be high enough, we prefer to coat quite a few plates to increase the probability that at least 1 colony can express eGFP. Finally, we should put them under the fluorescence microscope one by one. Those steps render the experiments laborious. As a result, we built this Fluorescence Tracker hardware to automatically track the fluorescence change with cell growth. The Fluorescence Tracker is composed of a camera and an Arduino board connected to the computer and is controlled by a software called Micro-Manager. The Arduino board is connected to a flashlight that can emit R/G/B light to stimulate the fluorescence of eGFP. The camera is used to record the cell growth and the change in fluorescence.

Finally, using the mobile App from TeamViewer which view the computer on your mobile phone, you can have access to view the fluorescence of any plates anywhere and anytime.

Demonstration

Our Fluorescence Tracker is a hardware for potential users of our mutagenesis system to easily track whether the mutated protein has been expressed or not. Here we provide a step-by-step guide to using this hardware.

Step 1. Download and install the correct version of Micro-Manager from its official website according to your depending on your own computer setup (MacOS/Win-32/Win-64 are available). Old 1.4 releases are recommended.

Step 2. Double click on the Micro-Manager icon to start the software.

Step 3. Load Micro-Manager startup configuration file (.cfg files) that controls the camera and the Arduino board (the file openCV.cfg shown here only controls the camera). The file arduino_LED.cfg controls both the camera and the Arduino board. Both cfg files are available upon request.

The setup of our hardware is shown in the following picture. We developed the configuration script arduino_LED.cfg can control both the camera and the Arduino board. However, due to the lack of a filter glass, when projecting the light to the plate that has colonied by E. coli expressing fluorescence protein, the images recorded by the camera was far below expectation. Due to lacking a motorized drive, we are not able to switch between appropriate filter glasss, what we shown here could be improved.

Step 4. Click on the Multi-D Acq. icon to open multi-dimensional acquisition window.

Step 5. After Step 4, a setting window will pop up. Tick the Time Points box to set how many pictures you want to take and the intervals of taking these pictures. Suppose we decide to record for 12 hours, we only need to type 144 in the text box behind Number and set 5 min in the text box behind Interval.

Step 6. Tick the Save images box to save the pictures to a local folder. Finally, click the Acquire! icon to start the automatic image acuiring process. Now you can see your plate if it is placed right under the camera.

Step 7. Click on the green magnifier icon to zoom in for a better view.

Step 8. If you want to access the recording device when you are not in the, you can use the software TeamViewer to connect your mobile phone and your computer, as is shown in the following figure. The picture is the screen shot from the mobile phone.

Future work

At present, we just proved that our recording setup could work properly. However, for lack of critical devices, we haven't come up with a good solution to record the fluorescence. Moreover, this system can only work for one plate, but there will be a lot of plates that need to be tracked in R-Evolution. As a result, we should further build a device that can record many plates with high resolution.