|
|
Line 6: |
Line 6: |
| <head> | | <head> |
| <!--- Basic Page Needs========================================================================= --> | | <!--- Basic Page Needs========================================================================= --> |
− | <meta charset="utf-8"> | + | <meta charset="utf-8"/> |
− | <title>Overview</title>
| + | <title></title> |
− | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" /> |
− | <meta name="description" content="Wiki of Peking iGEM 2016" />
| + | <meta name="description" content="Wiki of Peking iGEM 2016" /> |
− | <meta name="author" content="Li Jiamian & Wang Yuqing">
| + | <meta name="author" content="Li Jiamian & Wang Yuqing"/> |
− | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
− | <!-- Mobile Specific Metas===================================================================== -->
| + | <!-- Mobile Specific Metas===================================================================== --> |
− | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
| + | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> |
− | <!-- Fix Overwrite the original iGEM style=================================================== -->
| + | <!-- Fix Overwrite the original iGEM style=================================================== --> |
− | <link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" />
| + | <link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" /> |
− | <!-- CSS======================================================================================= -->
| + | <!-- CSS======================================================================================= --> |
− | <link href="https://2016.igem.org/Template:Peking/css/bootstrap_min?action=raw&ctype=text/css" rel="stylesheet" />
| + | <link href="https://2016.igem.org/Template:Peking/css/bootstrap_min?action=raw&ctype=text/css" rel="stylesheet" /> |
− | <link href="https://2016.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" />
| + | <link href="https://2016.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" /> |
− | <!-- CSS======================================================================================= -->
| + | <!-- CSS======================================================================================= --> |
− | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/default?action=raw&ctype=text/css">
| + | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/default?action=raw&ctype=text/css"/> |
− | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/layout?action=raw&ctype=text/css">
| + | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/layout?action=raw&ctype=text/css"/> |
− | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css">
| + | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css"/> |
− | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/priorstyle?action=raw&ctype=text/css">
| + | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/> |
− | <style>
| + | <style> |
− | .home_img{
| + | .texttitle{ |
− | padding: 10px;
| + | color: #11abb0; |
− | margin: 10px;
| + | font-size: 38px; |
− | width: 420px;
| + | line-height: 48px; |
− | float: left;
| + | margin-bottom: 12px; |
− | height: 300px;
| + | font-family: raleway-bold, sans-serif !important; |
− | }
| + | background: transparent; |
− | .home_text{
| + | letter-spacing: 3px; |
− | padding-top: 20px;
| + | text-transform: uppercase; |
− | margin: 10px;
| + | font-weight: 350; |
− | float: left;
| + | text-align: center; |
− | height: 300px;
| + | padding-top:40px; |
− | }
| + | } |
− | .texttitle{
| + | sup{font-size:11px;} |
− | color: #11abb0;
| + | .references{margin-top:150px;margin-bottom:40px;} |
− | font-size: 38px;
| + | .references p{font-size:14px !important; color:#666161 !important;} |
− | line-height: 48px;
| + | .classic-title {font-weight: 300;padding-top:30px;} |
− | margin-bottom: 12px;
| + | .classic-title span { |
− | font-family: raleway-bold, sans-serif;
| + | padding-bottom: 8px; |
− | background: transparent;
| + | border-bottom: 1px solid #383232; |
− | letter-spacing: 3px;
| + | font-weight: 400; |
− | text-transform: uppercase;
| + | } |
− | font-weight: 350;
| + | figure{margin-top:40px;margin-bottom:40px;height:auto;} |
− | text-align: center;
| + | .anchor{padding-top:100px;margin-top:-100px;} |
− | }
| + | </style> |
− | sup{
| + | |
− | font-size:11px;
| + | </head> |
− | }
| + | |
− | .references{margin-top:150px;margin-bottom:40px;}
| + | |
− | .references p{font-size:14px !important; color:#666161 !important;}
| + | |
− |
| + | |
− | .classic-title {font-weight: 300;}
| + | |
− | .classic-title span {
| + | |
− | padding-bottom: 8px;
| + | |
− | border-bottom: 1px solid #383232;
| + | |
− | font-weight: 400;
| + | |
− | }
| + | |
− | figure{margin-top:40px;margin-bottom:40px;height:auto;}
| + | |
− | </style>
| + | |
− |
| + | |
− | </head>
| + | |
− |
| + | |
| <body> | | <body> |
| + | <!--sidebar 引用==============================================================================--> |
| + | <style> |
| + | #primary span{ |
| + | display:block; |
| + | word-break:break-all |
| + | } |
| + | |
| + | #page-wrap { |
| + | width: 25%; |
| + | margin: 0px; |
| + | position: relative; |
| + | } |
| + | |
| + | #sidebar { |
| + | width: 25%; |
| + | margin-left: 0px; |
| + | } |
| + | @media (min-width:1024px){ |
| + | #sidebar{position:relative;top:120px;max-width:200px;}} |
| + | @media (max-width: 1023px){ |
| + | #sidebar{display:none; |
| + | } |
| + | #page-wrap{display:none;} |
| + | } |
| + | </style> |
| + | |
| + | |
| + | <script type="text/javascript"> |
| + | function menuFixed(id){ |
| + | var obj = document.getElementById(id); |
| + | var _getHeight = obj.offsetTop; |
| + | |
| + | window.onscroll = function(){ |
| + | changePos(id,_getHeight); |
| + | } |
| + | } |
| + | function changePos(id,height){ |
| + | var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight(); |
| + | if(w>=1024){ |
| + | if($(window).scrollTop() + $(window).height() > $(document).height() - 230){ |
| + | $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");} |
| + | } |
| + | var scrollTop = document.documentElement.scrollTop || document.body.scrollTop -230; |
| + | var windowBottom = $(window).scrollTop() + $(window).innerHeight(); |
| + | var w = window.innerWidth; |
| + | |
| + | if(scrollTop < height){ obj.style.position = 'relative'; |
| + | }else{ |
| + | obj.style.position = 'fixed'; |
| + | } |
| + | } |
| + | </script> |
| + | |
| + | <script type="text/javascript"> |
| + | window.onload = function(){ |
| + | menuFixed('sidebar'); |
| + | } |
| + | </script> |
| + | <script> |
| + | function naver(id){ |
| + | var obj=document.getElementById(id); |
| + | var oPos=obj.offsetTop; |
| + | return window.scrollTo(0,oPos+250); |
| + | } |
| + | </script> |
| + | <!--sidebar 引用 end ==============================================================================--> |
| + | <!--panel 引用==================================================================================--> |
| + | <style type="text/css"> |
| + | .panel-default .panel-heading a{ |
| + | text-decoration: none; |
| + | display:block; |
| + | padding:10px; |
| + | } |
| + | .panel-heading.panel-title{ |
| + | text-decoration: none; |
| + | padding-top:0px; |
| + | padding-bottom:0px; |
| + | padding-left:0px; |
| + | padding-right:0px; |
| + | text-align:center; |
| + | font-size:19px; |
| + | |
| + | } |
| + | a[aria-expanded="true"] { |
| + | background-color:rgba(70, 73, 76, 0.95); |
| + | text-decoration: none; |
| + | color:white; |
| + | } |
| + | |
| + | .panel-default .panel-heading a[aria-expanded="false"]{ |
| + | -o-transition: background-color 1s linear; |
| + | -moz-transition: background-color 1s linear; |
| + | -khtml-transition: background-color 1s linear; |
| + | -webkit-transition: background-color 1s linear; |
| + | -ms-transition: background-color 1s linear; |
| + | transition: background-color 1s linear; |
| + | } |
| + | .panel-default .panel-heading a[aria-expanded="false"]:hover{ |
| + | background-color:rgba(70, 73, 76, 0.95); |
| + | text-decoration: none; |
| + | color:white; |
| + | } |
| + | .panel-default .panel-heading a[aria-expanded="true"]{ |
| + | -o-transition: opacity 1s linear; |
| + | -moz-transition: opacity 1s linear; |
| + | -khtml-transition: opacity 1s linear; |
| + | -webkit-transition: opacity 1s linear; |
| + | -ms-transition: opacity 1s linear; |
| + | transition: opacity 0.7s linear; |
| + | } |
| + | .panel-default .panel-heading a[aria-expanded="true"]:hover{ |
| + | opacity:0.7; |
| + | } |
| + | |
| + | .coll p a{ |
| + | color:#5c9085 !important; |
| + | } |
| + | .coll p a:hover{ |
| + | color:#11abb0 !important; |
| + | } |
| + | .coll { |
| + | width:100%; |
| + | float:left; |
| + | } |
| + | .coll .info { |
| + | width:6%; |
| + | font-size:11px; |
| + | color:#a4a4a4; |
| + | margin-top:0px; |
| + | float:left; |
| + | |
| + | } |
| + | .coll .content { |
| + | width:94%; |
| + | float:left; |
| + | margin-left:40px; |
| + | margin-top:-3px; |
| + | } |
| + | .coll .ordi { |
| + | width;100%; |
| + | margin:0px 0px 0px 0px; |
| + | font-size:35px; |
| + | font-style:italic; |
| + | float:left; |
| + | color:#11abb0; |
| + | opacity:0.8; |
| + | } |
| + | |
| + | </style> |
| + | |
| + | <script type="text/javascript"> |
| + | $(document).ready(function(){ |
| + | $("#button1").click(function(){ |
| + | $(".panel-collapse").collapse("show"); |
| + | }); |
| + | }); |
| + | $(document).ready(function(){ |
| + | $("#button2").click(function(){ |
| + | $(".panel-collapse").collapse("hide"); |
| + | }); |
| + | }); |
| + | $("#notebook").addClass("navbar-active"); |
| + | </script> |
| + | <!--panel 引用 end ==================--> |
| + | |
| <!-- Navigation --> | | <!-- Navigation --> |
| <div id="navigation" class="navbar navbar-fixed-top"> | | <div id="navigation" class="navbar navbar-fixed-top"> |
Line 75: |
Line 225: |
| </a> | | </a> |
| <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img | | <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img |
− | src="https://static.igem.org/mediawiki/2018/e/e2/T--Peking--_toolbar.jpeg" width="45%"></a></div> | + | src="https://static.igem.org/mediawiki/2018/3/36/T--Peking--Logo.png"></a></div> |
| | | |
| <div class="nav-collapse collapse"> | | <div class="nav-collapse collapse"> |
− | <ul class="nav"> | + | <ul class="nav"> |
− | <li class="dropdown menu-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >             Project</a> | + | |
| + | <li class="menu-1"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking">Home</a> |
| + | </li> |
| + | |
| + | <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Project</a> |
| <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
− | <li><a href="https://2018.igem.org/Team:Peking/Project">Project</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Project" class="barfont1">Description</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Description" class="barfont1">Description</a></li>
| + | |
| <li><a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a></li> | | <li><a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a></li> |
| <li><a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a></li> | | <li><a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Future_Plan" class="barfont1">Future Plan</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Prospective" class="barfont1">Prospective</a></li> |
| </ul> | | </ul> |
| </li> | | </li> |
− | <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Data Page</a> | + | <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Modeling</a> |
| <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
− | <li><a href="https://2018.igem.org/Team:Peking/Results">Data Page</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Model">Overview</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_D" class="barfont1">Phase Separation</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/SPOT_Formation" class="barfont1">SPOT Formation</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Functions_D" class="barfont1">Functions</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Application" class="barfont1">Application</a></li> |
| </ul> | | </ul> |
| </li> | | </li> |
− | <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Model</a> | + | <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software">Software</a> |
− | <ul class="dropdown-menu">
| + | |
− | <li><a href="https://2018.igem.org/Team:Peking/Model">Model</a></li>
| + | |
− | <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_M" class="barfont1">Phase Separation</a></li>
| + | |
− | <li><a href="https://2018.igem.org/Team:Peking/Functions_M" class="barfont1">Functions</a></li>
| + | |
− | </ul>
| + | |
| </li> | | </li> |
− | <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software" >Software</a>
| + | |
− | </li>
| + | |
− | <li class="dropdown menu-5"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Human Practices</a>
| + | <li class="dropdown menu-6"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices</a> |
− | <ul class="dropdown-menu">
| + | |
− | <li><a href="https://2018.igem.org/Team:Peking/Human_Practices/Gold" class="barfont1">Human Practices</a></li>
| + | |
− | <li><a href="https://2018.igem.org/Team:Peking/Public_Engagement" class="barfont1">Public Engagement</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="dropdown menu-6"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Team</a>
| + | |
| <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
− | <li><a href="https://2018.igem.org/Team:Peking/Team_Members" class="barfont1">Team Members</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Human_Practices" class="barfont1">Overview</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Statistics" class="barfont1">Statistics</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Safety" class="barfont1">Safety</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Public_Engagement" class="barfont1">Public Engagement</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Other" class="barfont1">Other</a></li> |
| </ul> | | </ul> |
| </li> | | </li> |
− | <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Collaborations</a> | + | <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Achevement</a> |
| <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
− | <li><a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Judging_Form" class="barfont1">Judging Form</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Acknowledgement" class="barfont1">Acknowledgement</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Parts" class="barfont1">Parts</a></li> |
| + | <li><a href="https://2018.igem.org/Team:Peking/Improve" class="barfont1">Improvement</a></li> |
| <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li> | | <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li> |
| + | |
| </ul> | | </ul> |
| </li> | | </li> |
− | <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Parts</a> | + | <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Lab</a> |
| <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
− | <li><a href="https://2018.igem.org/Team:Peking/Parts">Parts</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Team_Members">Team Members</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Favorite_Parts" class="barfont1">Favorite Parts</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Part_Table" class="barfont1">Part Table</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</a></li> |
− | <li><a href="https://2018.igem.org/Team:Peking/Part_Collection" class="barfont1">Part Collection</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</a></li> |
| + | <li><a href="https://2018.igem.org/Team:Peking/Safety" class="barfont1">Safety</a></li> |
| </ul> | | </ul> |
| </li> | | </li> |
Line 138: |
Line 283: |
| </div> | | </div> |
| <!--/Navigation --> | | <!--/Navigation --> |
− |
| |
| | | |
− |
| |
| | | |
| + | <!-- Page Title======================================================================== --> |
| + | <div id="page-title"> |
| + | <div class="row"> |
| + | <div class="twelve columns centered text-center"> |
| + | <h1>Demonstrate</h1> |
| + | <p class="title1" style="text-align:center">In this section, you could see the demonstration.</p> |
| + | </div> |
| + | </div> |
| + | </div><!-- Page Title End--> |
| | | |
− | <div class="content-outer"> | + | |
− | <div id="page-content" class="row page"> | + | <div id="page-content" class="row page"> |
| + | <div id="primary" class="twelve columns"> |
| + | <section> |
| + | <div class="row"> |
| + | |
| + | |
| + | |
| + | |
| + | <div class="three columns"> |
| + | <div id="page-wrap"> |
| + | <div id="sidebar" style="color:#000000"> |
| + | <h4><a href="javascript:void(0);" onclick="naver('A')">Overview</a></h4> |
| + | <h4><a href="javascript:void(0);" onclick="naver('B')">Phase Separation</a></h4> |
| + | <ul> |
| + | <li><a href="javascript:void(0);" onclick="naver('B1')">Spontaneous</a></li> |
| + | <li><a href="javascript:void(0);" onclick="naver('B2')">The formation</a></li> |
| + | </ul> |
| + | <h4><a href="javascript:void(0);" onclick="naver('C')">Functional Organelles</a></h4> |
| + | <h4><a href="javascript:void(0);" onclick="naver('D')">Perspective</a></h4> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | |
| + | |
| + | |
| + | |
| + | <div class="nine columns"> |
| + | |
| + | <div class="texttitle">Overview |
| + | <a id="A"></a></div> |
| + | <hr style="border:2px dashed; height:2px" color="#666666"> |
| | | |
| + | <div class="coll"> |
| + | |
| + | <div class="content"> |
| + | <p>The aim of our project is to build a synthetic organelle based on phase separation as a multifunctional platform. Based on the principle of multivalence and interaction, we fused interactional modules into homo-oligomeric tags (HOtags) to form granules in S. cerevisiae.</p> |
| + | </div> |
| + | </div> |
| + | <div class="coll"> |
| + | |
| + | <div class="content"> |
| + | <p>We have built spontaneous and induced synthetic organelles by specific interaction modules, so that we can control the formation process by different ways for demands in biological engineering. Then we characterized the kinetics and properties of synthetic organelles theoretically and experimentally. These results confirm the potential of synthetic organelles in synthetic biology.</p> |
| + | </div> |
| + | </div> |
| + | <div class="coll"> |
| + | |
| + | <div class="content"> |
| + | <p>It inspired us to propose some specific applications of our synthetic organelles, including organization hub, sensor, and metabolism regulator. We have verified the feasibility of them by loading GFP-nanobody module, NAD+ sensor module and carotene production module to the whole system.</p> |
| + | </div> |
| + | </div> |
| + | <div class="coll"> |
| + | |
| + | <div class="content"> |
| + | <p>We believe that our work has reached the medal requirements of demonstration as we have confirmed that our synthetic organelles can be formed in vivo and deliver a range of functions both for engineering and research due to their amazing properties. The concrete demonstration of the whole platform is shown below. You can see more details of experiments and modeling in our <a href="https://2018.igem.org/Team:Peking/Results"/>Data Page</a> and <a href="https://2018.igem.org/Team:Peking/Model"/>Modeling</a></p><br/><br/><br/> |
| + | </div> |
| + | </div> |
| + | |
| + | |
| | | |
| + | <div class="texttitle">Phase Separation System |
| + | <a id="B"></a></div> |
| + | <hr style="border:2px dashed; height:2px" color="#666666"> |
| + | <div class="coll"> |
| + | <div class="info"> |
| + | <a id="B1"></a> |
| + | <div class="ordi">1.</div> |
| + | </div> |
| + | <div class="content"> |
| + | <h3>Spontaneous and induced synthetic organelles can be formed by phase separation</h3> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="coll"> |
| | | |
− | Software
| + | <div class="content"> |
| + | <p>Our basic system consists of two components of synthetic organelles. Either of them has a specific HOtag to form homo-oligomers. We expect that they are able to form synthetic organelles due to the principles of phase separation. To verify the feasibility of the design, we fused two fluorescence proteins with the two components of synthetic organelles (Figure1.a) so that we can observe the self-organization of components and the formation of granules under fluorescence microscope.</p> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="coll"> |
| | | |
− | We produce abundant fluorescent images in our experiments. However, there are many troubles when taking into the processing those data. The data can be extremely large. Even if you just take a 1 hour imaging for 25 positions in 3 channel for every minutes, the microscope will yield 4500 high resolution images. To help with the image processing in such a high throughput, we developed a software aim at microscope images batching. | + | <div class="content"> |
| + | <p>We used SUMO-SIM interaction module to build a spontaneous organelle. When two components are expressed in yeasts, granules with the two fluorescence proteins can be observed in vivo (Figure1.b). </p> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="coll"> |
| | | |
− | This software is wrote just for the problems we meet.
| + | <div class="content"> |
| + | <p>Meanwhile, by rapamycin induced interaction module, FKBP-Frb, we have built an inducible organelle. We can see granules occurs in yeasts within minutes after adding the inducer.</a> </p> |
| + | </div> |
| + | Figure1.a The basic design of synthetic organelles with florescence reporters. <img src="https://static.igem.org/mediawiki/2018/3/36/T--Peking--Logo.png" style="width:100%;" alt="">(这里可能需要一张cartoon的设计图) |
| + | b, c fluorescence images of spontaneous organelles (SUMO-SIM based) and inducible synthetic organelles (FKBP-Frb based, after adding 10000 nM rapamycin)<br/><br/> |
| | | |
− | The first problem we meet is the file name of the exported images are always in massy rules. What’s the most confusing, the rules of number of the positions, channels and time are various in files. Considering the diversity of file names of images derived from different microscopes, we manage to build a naming rule manager, which can create and modify the name rule. The rules can be made are flexible, which can contain up to 4 variables and 4 customized string. Every variables have a customized zero filling function that can solve the problem like the annoying number 01 to 99. The users can also shear their rules in the form of a file, which may benefit group working. Read the user manuals for more detail.
| + | </div> |
| | | |
− | After solving the problem of getting files, we can now stick to the practices functions practical.
| |
| | | |
− | The most important difference between fluorescent images of microscope and Ordinary photo is the function of channel. We need to contrast different fluorescent channel to discover the conclusion. However, export a large number of large images could be a time-wasting process. If we can merge channel or convert the images into grayscale after cropping, we will save much time. Thus we add the functions of merging and grayscale to our software first. Read the user manuals for more detail.(此处放处理前后的图)
| + | <div class="coll"> |
| + | <div class="info"> |
| + | <a id="B2"></a> |
| + | <div class="ordi">2.</div> |
| + | </div> |
| + | <div class="content"> |
| + | <h3>The formation of organelles has flexible but predictable properties and kinetics in different conditions</h3> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="coll"> |
| | | |
− | For the living organism, if we want to show the dynamic process with video, we will need to fuse the images by order to make video. We wrote the functions to export video by time or by z axis. Read the user manuals for more detail.(此处放导出的视频gif)
| + | <div class="content"> |
| + | <p>Then we combined <a href="https://2018.igem.org/Team:Peking/Phase_Separation_M"/>modeling of phase separation</a> and experiment to research the kinetics of the organelles formation process expecting that a well-characterized system can reach its whole potential in complex applications. </p> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="coll"> |
| | | |
− | In science research, cropping are widely used to beautify the images and emphasize the target. To meet the need of flexible cropping, we provide two cropping method. Drawing cropping can draw the range to be cropped while position cropping crop straightly by the given position. Read the user manuals for more detail. (此处放软件使用截图)
| + | <div class="content"> |
| + | <p>As the model predicts, the concentration of components and the interaction strength affect the kinetics of phase separation. First we controlled the expression levels of components by using several stable or inducible promoters and observe the system's behavior. We found that the formation of organelles happened in specific promoter combinations and can be controlled by inducible promoters. The analysis result does not only fit well with the simulation, but provides potential methods to control the organelles in applications. </p> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="coll"> |
| + | <br/> |
| + | Figure2 (a) Phase diagram of a phase separation system with three components(simulation). To fit our system, the x-axis and the y-axis stands for the two components in the granules. The asymmetry comes from the assumption that the two components have different interactions with water. |
| + | (b) Fluorescence movies of different promoter combinations of FKBP-Frb mediated system after adding rapamycin. Only in specific combinations, synthetic organelles can be formed by phase separation. |
| + | (c) The formation process of SUMO-SIM mediated synthetic organelles can be controlled by inducible promoters. While the expression of Tet07-SIM-mCherry-HoTag6 is induced by dox gradually, the granules will occur abruptly in some time.<br/><br/> |
| | | |
− | What’s more, sometime the cells float in the process of photographing, which result in the cell drift or even rotate in the video. We will have to make a larger cropping to ensure the cell will not go out of the edge. To solve this problem, We wrote a function that can move the cropping frame with the cell linearly, which can fix the drift of cell to some extent. Also, we can rotate the image by the setting before cropping, by which we may also fix the rotation of the cells. Read the user manuals for more detail. (漂移校正前后对比动图,旋转漂移校正前后对比动图)
| + | </div> |
| + | <div class="coll"> |
| | | |
− | Eventually, the microscopy images in science need some information on it before showing up in public. The time scale of every frame and the scale of the cell are the most common features. We can add the time scale information to the image by the given position, start time, interval and unit. And the scale plate, which indicate the scale of the cells, can be added by the given position, total length, length/pixel and unit. Read the user manuals for more detail. (加标尺和时间的动图)
| + | <div class="content"> |
− | | + | <p>The strength of interaction modules can be also controlled. In the rapamycin-induced organelle system, changing the concentration of rapamycin will affect the apparent value of K, a parameter reflecting the interaction strength in our model. In a gradient rapamycin-inducing experiment, the delay time from adding inducer to granules formation was found to be shorter when concentration of rapamycin increases. So we have confirmed the influence of two parameters in models and increased the flexibility of our synthetic organelles.</p> |
− | Almost all of the microscopy image shown in our wiki and ppt are processing with this software. It help us a lot and we wish to share it with anyone who need it. If you want more detail, read the user manuals and the software are available here. (Github链接) And if you want a update version after the project freeze after iGEM, check here (另一个Github链接), we will release all the update here.
| + | </div> |
| + | </div> |
| + | <div class="coll"> |
| + | <br/> |
| + | Figure3 (a) A simulation of organelle formation process in different interaction strength of components. |
| + | (b) The speed of FKBP-Frb mediated organelle formation increases with the increasing concentration of rapamycin. |
| + | <br/><br/> |
| | | |
| + | </div> |
| + | <div class="coll"> |
| | | |
| + | <div class="content"> |
| + | <p>We also tried to characterized other properties, like the liquid-like property of the synthetic organelles, as they may affect the functions. See more details about our characterizations in <a href="https://2018.igem.org/Team:Peking/Phase_Separation_D"/>DataPage Phase separation</a>.</p><br/><br/><br/> |
| + | </div> |
| + | </div> |
| | | |
| + | |
| + | |
| | | |
| + | <div class="texttitle">Functional Organelles |
| + | <a id="C"></a></div> |
| + | <hr style="border:2px dashed; height:2px" color="#666666"> |
| + | <div class="coll"> |
| + | <div class="content"> |
| + | <p>Since SPOT can form in the cell and be controlled, we go further to consider the functions of SPOT. The functions of SPOT can be descripted in three catalogs: Spatial segmentation, Sensor and metabolic regulation. We verified the spatial segmentation with the condensation of substrates, also we can load the protein we want by fusing it with nanobody. We then verified the sensor with detecting rapamycin and ABA, which shows strong relativity between the concentration and the proportion of yeasts with SPOT. To find the law behind metabolism in the SPOT, we fuse the enzymes that can produce β-carotene into SPOT and measure the difference between with or without SPOT in produce of β-carotene.</p> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="coll"> |
| + | Figure4 (organization hub) |
| + | Design of GFP-nanobody based system |
| + | fluorescence images of GFP-nanobody based system |
| + | Figure5 (sensor) |
| + | (a)~(?) fluorescence images of sensor based system |
| + | Figure6 (metabolism) |
| + | Characterization of carotene production system |
| + | (phase内和phase外的胡萝卜素生产实验)<br/><br/><br/><br/><br/> |
| | | |
| + | </div> |
| + | |
| | | |
− | </div> <!-- page-content End-->
| + | <div class="texttitle">Perspective |
− | </div> <!-- Content End-->
| + | <a id="D"></a></div> |
− |
| + | <hr style="border:2px dashed; height:2px" color="#666666"> |
− |
| + | <div class="coll"> |
− |
| + | <div class="content"> |
− | | + | <p>SPOT has been well verified and has various functions. And in the future, this modular system will have great potential in science and practice using. SPOT can change the modules to gain more different properties like diverse inducing method, we can also use it as a platform and then load other protein with some interactions like the interaction between nanobody and GFP. What’s more, we might have the ability to form differernt SPOTs in the cell and regulate them respectively. The functions of SPOT can also diverse. We can build a real time sensor for molecule in living cells to monitoring the concentration changing in environment or in cells. More metabolism pathway can be test in SPOT and we will find some laws of the function of regulate the metabolism. To be summary, more achievement is coming true with SPOT.</p> |
− | | + | </div> |
| + | </div> |
| + | |
| + | </div><!--9 columns end--> |
| + | |
| + | </div> |
| + | |
| + | |
| + | |
| + | |
| + | </div><!--row end--> |
| + | </section> |
| + | </div><!--12 columes end--> |
| + | </div><!--page-content end--> |
| | | |
| | | |
Line 210: |
Line 517: |
| <ul class="copyright"> | | <ul class="copyright"> |
| <!--<li>© 2014 Sparrow</li> --> | | <!--<li>© 2014 Sparrow</li> --> |
− | <li><a href="2018.igem.org/Team:Peking">Home</a> <a href="mailto:pkuigem2016@126.com">Contact</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking">Home</a> <a href="mailto:indigomad@pku.edu.cn">Contact</a></li> |
| <span> ©2018 PEKING IGEM. All Rights Reserved.</span> | | <span> ©2018 PEKING IGEM. All Rights Reserved.</span> |
| <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li> | | <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li> |
Line 244: |
Line 551: |
| <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/scripts?action=raw&ctype=text/javascript "></script> | | <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/scripts?action=raw&ctype=text/javascript "></script> |
| <!--quotations from black: end--> | | <!--quotations from black: end--> |
− |
| |
− |
| |
| </body> | | </body> |
| </html> | | </html> |