Difference between revisions of "Team:Peking/Software"

 
(149 intermediate revisions by 6 users not shown)
Line 9: Line 9:
 
         <title></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 2018" />
         <meta name="author" content="Li Jiamian & Wang Yuqing"/>
+
         <meta name="author" content="Peking iGEM"/>
 
         <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://2018.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://2018.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://2018.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://2018.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://2018.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://2018.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css"/>
         <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
+
         <link rel="stylesheet" href="https://2018.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
 
         <style>
 
         <style>
 +
                        body { background: #D2D8D8 url(https://static.igem.org/mediawiki/2018/7/78/T--Peking--images_bodyBackground.jpeg); background-attachment:fixed;}
 
             .texttitle{
 
             .texttitle{
                 color: #11abb0;
+
                 color:#6495ED;
                 font-size: 38px;
+
                 font-size: 32px;
 
                 line-height: 48px;
 
                 line-height: 48px;
 
                 margin-bottom: 12px;
 
                 margin-bottom: 12px;
Line 65: Line 66:
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 +
        #page-wrap a:hover {color:#6495ED;}
 
          
 
          
 
         #sidebar {
 
         #sidebar {
Line 168: Line 170:
 
          
 
          
 
         .coll p a{
 
         .coll p a{
             color:#5c9085 !important;
+
             color:#6495ED !important;
 
         }
 
         }
 
         .coll p a:hover{
 
         .coll p a:hover{
             color:#11abb0 !important;
+
             color:#6495ED!important;
 
         }
 
         }
 
         .coll {
 
         .coll {
Line 197: Line 199:
 
             font-style:italic;
 
             font-style:italic;
 
             float:left;
 
             float:left;
             color:#11abb0;
+
             color:#1E90FF;
 
             opacity:0.8;
 
             opacity:0.8;
 
         }
 
         }
Line 238: Line 240:
 
                                     <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/Prospective" class="barfont1">Prospective</a></li>
+
                                     <li><a href="https://2018.igem.org/Team:Peking/Perspective" class="barfont1">Perspective</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </li>
 
                             </li>
                             <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Modeling</a>
+
                             <li class="menu-3"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Model">Modeling</a>
                                <ul class="dropdown-menu">
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Model">Overview</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/Application" class="barfont1">Application</a></li>
+
                                </ul>
+
 
                             </li>
 
                             </li>
 
                             <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software">Software</a>
 
                             <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software">Software</a>
Line 252: Line 249:
  
  
                                <li class="dropdown menu-6"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices</a>
+
                            <li class="menu-6"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Human_Practices">Human Practices</a>
                                    <ul class="dropdown-menu">
+
                            </li>
                                        <li><a href="https://2018.igem.org/Team:Peking/Human_Practices" class="barfont1">Overview</a></li>
+
                                 <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Achievement</a>
                                        <li><a href="https://2018.igem.org/Team:Peking/Statistics" class="barfont1">Statistics</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/Other" class="barfont1">Other</a></li>
+
                                    </ul>
+
                                </li>
+
                                 <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/Judging_Form" class="barfont1">Judging Form</a></li>
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Judging_Form" class="barfont1">Judging Form</a></li>
Line 276: Line 267:
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</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>
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Safety" class="barfont1">Safety</a></li>
                                                                            <li><a href="https://2018.igem.org/Team:Peking/Acknowledgement" class="barfont1">Acknowledgement</a></li></ul>
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Acknowledgement" class="barfont1">Acknowledgement</a></li>
 +
                                       
 +
                                    </ul>
 
                                 </li>
 
                                 </li>
 
                                 </div>
 
                                 </div>
Line 289: Line 282:
 
             <div class="row">
 
             <div class="row">
 
                 <div class="twelve columns centered text-center">
 
                 <div class="twelve columns centered text-center">
                     <h1>Demonstrate</h1>
+
                     <h1>Software </h1>
                     <p class="title1" style="text-align:center">In this section, you could see the demonstration.</p>
+
                      
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 303: Line 296:
 
                          
 
                          
 
                          
 
                          
 +
                    <div class="row">
 
                          
 
                          
                         <div class="three columns">
+
                          
 +
                       
 +
                                <div class="three columns">
 
                             <div id="page-wrap">
 
                             <div id="page-wrap">
 
                                 <div id="sidebar" style="color:#000000">
 
                                 <div id="sidebar" style="color:#000000">
                                     <h4><a href="https://2018.igem.org/wiki/index.php?title=Team:Peking/Demonstrate#A">Overview</a></h4>
+
                                     <h4><a href="javascript:void(0);" onclick="naver('A')">&bull;Overview</a></h4>
                                     <h4><a href="javascript:void(0);" onclick="naver('B')">Phase&nbsp;Separation</a></h4>
+
                                     <h4><a href="javascript:void(0);" onclick="naver('B')">&bull;Naming&nbsp;Rules&nbsp;Management</a></h4>
                                     <ul>
+
                                     <h4><a href="javascript:void(0);" onclick="naver('C')">&bull;Grayscale&nbsp;&&nbsp;Merge</a></h4>
                                        <li><a href="javascript:void(0);" onclick="naver('B1')">Spontaneous</a></li>
+
                   
                                        <li><a href="javascript:void(0);" onclick="naver('B2')">The&nbsp;formation</a></li>
+
                                    <h4><a href="javascript:void(0);" onclick="naver('D')">&bull;Video&nbsp;&&nbsp;Z&nbsp;Stacks</a></h4>
                                     </ul>
+
                                     <h4><a href="javascript:void(0);" onclick="naver('E')">&bull;Cropping</a></h4>
                                     <h4><a href="javascript:void(0);" onclick="naver('C')">Functional&nbsp;Organelles</a></h4>
+
                                     <h4><a href="javascript:void(0);" onclick="naver('F')"> &bull;Fixing&nbsp;Drift&nbsp;&&nbsp;Rotation</a></h4>
                                     <h4><a href="javascript:void(0);" onclick="naver('D')">Perspective</a></h4>
+
                                     <h4><a href="javascript:void(0);" onclick="naver('G')">  
 +
                                  &bull;Time&nbsp;Scale&nbsp;&&nbsp;Scale&nbsp;Plate</a></h4>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 +
                       
 
                         </div>
 
                         </div>
 
                          
 
                          
Line 323: Line 321:
 
                          
 
                          
 
                         <div class="nine columns">
 
                         <div class="nine columns">
                           
+
<div class="coll">                         
                            <div class="texttitle">Overview
+
<div class="texttitle"> Overview
 
<a id="A"></a></div>  
 
<a id="A"></a></div>  
 
                             <hr style="border:2px dashed; height:2px" color="#666666">
 
                             <hr style="border:2px dashed; height:2px" color="#666666">
  
                             <div class="coll">
+
                              
 
                                  
 
                                  
 
                                 <div class="content">
 
                                 <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>
+
                                     <p>We produce abundant fluorescence images in our experiments. However, there are many challenges in the processing of such data, which can be extremely large. Even in the case of 1 hour of imaging for 25 positions at 3 channels every minute, the microscope will yield 4500 high-resolution images. To help with the image processing in such a high throughput, we developed software for microscope image batching(Fig. 1).
                                </div>
+
<br/><a href="https://github.com/igemsoftware2018/Team_Peking">(Github: https://github.com/igemsoftware2018/Team_Peking)</a><br/>
                            </div>
+
<p style="text-align:justify; text-justify:inter-ideograph">This software was written specifically for the problems we encountered. </p><br/>
                            <div class="coll">
+
<div align="center">
 +
<img src="https://static.igem.org/mediawiki/2018/5/52/T--Peking--Software.png" width="300 px" height="300 px"></div>
 +
<p><div align="center">Figure. 1 The GUI of the software</div></p>
 +
<br/><br/>
 +
 
 +
 
 +
 
 +
</div>
 +
</div>  
 +
<div class="coll">                          
 +
<div class="texttitle">Naming Rules management
 +
<a id="B"></a></div>
 +
    <hr style="border:2px dashed; height:2px" color="#666666">
 +
 
 +
                         
 
                                  
 
                                  
 
                                 <div class="content">
 
                                 <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>
+
                                     <p>The first problem we met is that the file names of the exported images are generated according to <b>fuzzy rules</b>. Confusingly, the rules for the number of the positions, channels and times vary among files. To address the diversity of file names of images derived from different microscopes, we managed to build a <b>naming rule manager</b> (Fig. 2), which can create and modify the naming rule. The rules that can be made are <b>flexible</b>, and can contain up to 4 variables and 4 customized strings. Every variable has a customized zero filling function that can solve annoying problems such as the numbers 01 to 99. The users can also <b>share</b> their rules in the form of a file, which may benefit group projects.<a href="https://static.igem.org/mediawiki/2018/3/32/T--Peking--Users_manual.pdf"> Please refer to the user manuals for more details.</a>  
                                </div>
+
<br/><br/>
                            </div>
+
<div align="center">
<div class="coll">
+
<img src="https://static.igem.org/mediawiki/2018/d/dd/T--Peking--Namerule.png"><br/>
                               
+
<p><div align="center">Figure. 2 The GUI of naming rules manager</div></p>
                                <div class="content">
+
</div>
                                    <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>
+
<br/><br/>
                                </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
+
</div>
<a id="B"></a></div>
+
</div>
 +
<div class="coll">
 +
<div class="texttitle">Grayscale and Channels Merge
 +
<a id="C"></a></div>  
 
                             <hr style="border:2px dashed; height:2px" color="#666666">
 
                             <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">
 
  
 +
                         
 +
                               
 
                                 <div class="content">
 
                                 <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>
+
                                     <p>After solving the problem of obtaining the files, we can now address their processing.The most important difference between fluorescence microscope images and ordinary photographs is the channel function. We needed to contrast different fluorescence channels to assess the result. However, exporting a great number of large images can be exceedingly time-consuming. Thus, if we can merge the channels or convert the images to grayscale after cropping, we will save much time. Thus, we added the functions of <b>merging</b>(Fig. 3) and <b>grayscale conversion</b> (Fig. 4)to our software first.<a href="https://static.igem.org/mediawiki/2018/3/32/T--Peking--Users_manual.pdf"> Please refer to the user manuals for more details.</a> </p>
                                </div>
+
<br/><br/>
                            </div>
+
                           
+
                            <div class="coll">
+
  
                                <div class="content">
+
<div align="center">
                                    <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>
+
<img src="https://static.igem.org/mediawiki/2018/e/ee/T--Peking--MergeG.png" width="150 px" heigth="150 px">
                                </div>
+
<img src="https://static.igem.org/mediawiki/2018/e/ef/T--Peking--MergeR.png" width="150 px" heigth="150 px">
                            </div>
+
<img src="https://static.igem.org/mediawiki/2018/2/27/T--Peking--MergeM.png" width="150 px" heigth="150 px">
                           
+
</div>
                            <div class="coll">
+
<p><div align="center">Figure. 3 The images before and after channels merging</div></p>
  
                                <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/>
 
  
                            </div>
+
<div align="center">
 +
<img src="https://static.igem.org/mediawiki/2018/e/eb/T--Peking--GrayS.png" width="150 px" heigth="150 px">
 +
<img src="https://static.igem.org/mediawiki/2018/4/49/T--Peking--GrayG.png"width="150 px" heigth="150 px">
 +
</div>
 +
<p><div align="center">Figure. 4 The images before and after grayscale conversion</div></p>
  
 +
<br/><br/>
  
 +
</div>
 +
</div>
 
                             <div class="coll">
 
                             <div class="coll">
                                <div class="info">
+
<div class="texttitle">Video and Z Stacks
<a id="B2"></a>
+
<a id="D"></a></div>  
                                    <div class="ordi">2.</div>
+
                            <hr style="border:2px dashed; height:2px" color="#666666">
                                 </div>
+
 
 +
                                  
 
                                 <div class="content">
 
                                 <div class="content">
                                     <h3>The formation of organelles has flexible but predictable properties and kinetics in different conditions</h3>
+
                                     <p>In living organisms, if we want to show dynamic processes using video recordings, we will need to fuse the images in the correct order to make a video. We therefore wrote functions to <b>export video</b> by time or by z axis.(Fig. 5) <a href="https://static.igem.org/mediawiki/2018/3/32/T--Peking--Users_manual.pdf"> Please refer to the user manuals for more details.</a> </p>
                                </div>
+
<br/><br/>
                            </div>
+
<div align="center">
                           
+
<img src="https://static.igem.org/mediawiki/2018/7/77/T--Peking--video.png"><br/>
                            <div class="coll">
+
<img src="https://static.igem.org/mediawiki/2018/0/09/T--Peking--driftE.gif"></div>
 +
<p><div align="center">Figure. 5 The GUI of the video functions and the video exported</div></p>
 +
<br/><br/>
  
                                <div class="content">
+
</div>
                                    <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>
+
                           
+
 
                             <div class="coll">
 
                             <div class="coll">
 +
<div class="texttitle">Cropping
 +
<a id="E"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
 +
                               
 
                                 <div class="content">
 
                                 <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>
+
                                     <p>In scientific research, cropping is widely used to beautify the images and emphasize the target. To meet the need for flexible cropping, we provided two cropping methods. <b>Drawing cropping</b> can draw the range to be cropped while <b>position cropping</b> crops the given position.(Fig. 6) Please refer to the user manuals for more details.  <a href="https://static.igem.org/mediawiki/2018/3/32/T--Peking--Users_manual.pdf"> Please refer to the user manuals for more details.</a></p>
                                </div>
+
<br/><br/>
                            </div>
+
<div align="center">
                           
+
<img src="https://static.igem.org/mediawiki/2018/9/96/T--Peking--cropping.png" width="600px" height="300 px"></div>
                            <div class="coll">
+
<p><div align="center">Figure. 6 The cropping process</div></p>
<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.
+
<br/><br/>
(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/>
+
</div>
 +
</div>
 +
<div class="coll">
 +
<div class="texttitle">Fixing Drift and Rotation
 +
<a id="F"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
                            </div>
 
 
                             <div class="coll">
 
                             <div class="coll">
 
+
                               
 
                                 <div class="content">
 
                                 <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>
+
                                     <p>What’s more, sometime the cells float during the process of photographing, which results in the cells drifting or even rotating in the video. We will have to make a larger cropping to ensure that the cell will not move out of the field of view. To solve this problem, we wrote a function that can move the cropping frame with the cell linearly, which can <b>fix the drifting</b> of cells to some extent(Fig. 7). Also, we can rotate the image using the setting before cropping, by which we may also <b>fix the rotation</b> of the cells(Fig. 8). Please refer to the user manuals for more details. <a href="https://static.igem.org/mediawiki/2018/3/32/T--Peking--Users_manual.pdf"> Please refer to the user manuals for more details.</a> </p>
                                </div>
+
<br/><br/>
                            </div>
+
<div align="center">
                            <div class="coll">
+
<img src="https://static.igem.org/mediawiki/2018/7/79/T--Peking--driftN.gif">
 +
<img src="https://static.igem.org/mediawiki/2018/0/09/T--Peking--driftE.gif"><br/>
 +
<p><div align="center">Figure. 7 The videos before and after drift fixing. The yeast are less locomotive after fixing.</div></p>
 +
</div>
 
<br/>
 
<br/>
Figure3 (a) A simulation of organelle formation process in different interaction strength of components.
+
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e3/T--Peking--RotationN.gif" width=" 250 px" height="250 px">
(b) The speed of FKBP-Frb mediated organelle formation increases with the increasing concentration of rapamycin.
+
<img src="https://static.igem.org/mediawiki/2018/e/e9/T--Peking--RotationF.gif" width=" 250 px" height="250 px"></div>
 +
<p><div align="center">Figure. 8 The videos before and after rotation and drift fixing, The yeast are less rotational after fixing.</div></p>
 +
 
 
<br/><br/>
 
<br/><br/>
  
                            </div>                          
+
</div>
 +
</div>
 +
 
 
                             <div class="coll">
 
                             <div class="coll">
 +
<div class="texttitle">Time Scale and Scale Plate
 +
<a id="G"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
 +
                               
 
                                 <div class="content">
 
                                 <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/>
+
                                     <p>Eventually, the micrographs in science need information attached to them before they can be shown to the public. The time scale of every frame and the scale of the cells are the most common features.(Fig. 9) We can add the <b>time scale</b> information to the image by the given position, start time, interval and unit. Furthermore, <b>the scale bar</b>, which indicates the scale of the cells, can be added by the given position, total length, length/pixel and unit.<a href="https://static.igem.org/mediawiki/2018/3/32/T--Peking--Users_manual.pdf"> Please refer to the user manuals for more details.</a> </p>
                                </div>
+
<br/><br/>
                            </div>
+
<div align="center">
 +
<br/><br/>
 +
<img src="https://static.igem.org/mediawiki/2018/2/26/T--Peking--Addinfo.gif"><br/>
 +
<img src="https://static.igem.org/mediawiki/2018/e/eb/T--Peking--GrayS.png">
 +
<p><div align="center">Figure. 9 The GUI of adding information and the image with time and scale bar</div></p>
 +
<br/><br/>
 +
</div>
  
                       
+
<br/><br/>
                           
+
  
                            <div class="texttitle">Functional Organelles
+
</div>
<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 class="texttitle">Perspective
+
 
<a id="D"></a></div>
+
<hr style="border:2px dashed; height:2px" color="#666666">
                            <hr style="border:2px dashed; height:2px" color="#666666">
+
<br/><br/>
                            <div class="coll">
+
Almost all micrographs shown in our wiki and ppt were processed using this software. It helped us a lot and we wish to share it with anyone who needs it. If you want more detail, please refer to the user manuals. The software is available at:<a href="https://github.com/igemsoftware2018/Team_Peking">https://github.com/igemsoftware2018/Team_Peking (Github)</a>. If you want an updated version after the project freeze and after iGEM, check<a href="https://github.com/IndigoMad/Microscopic-Images-Batching"> here: (Github)</a>, we will release all the updates there.
                                <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><!--9 columns end-->
 
                          
 
                          
 
                     </div>
 
                     </div>
                   
 
 
                      
 
                      
 
                      
 
                      
Line 495: Line 492:
 
          
 
          
 
          
 
          
       
+
                                <!-- footer============================================================================== -->
       
+
        <!-- footer============================================================================== -->
+
 
         <style>
 
         <style>
 
             footer .copyright span:before {
 
             footer .copyright span:before {
Line 513: Line 508:
 
         </style>
 
         </style>
 
         <footer id="page-footer">
 
         <footer id="page-footer">
 +
<footer id="page-footer">
 +
                <div class="row,row1">
 +
                    <ul class="footer-social">
 +
                        <li class="col-md-6" id="PKU-administration" style="margin-bottom:25px;max-width:300px">
 +
                            <a href="http://dean.pku.edu.cn/pkudean/index.html"><img src="https://static.igem.org/mediawiki/2018/7/7a/T--Peking--images_PKU_Administration_logo.png"></a>
 +
                        </li>
 +
                        <li class="col-md-6" id="PKU-SLS" style="margin-bottom:25px;max-width:300px">
 +
                            <a href="http://www.bio.pku.edu.cn/"><img src="https://static.igem.org/mediawiki/2018/0/04/T--Peking--images_PKU_SLS_logo.png"></a>
 +
                        </li>
 +
                     
 +
                        <li class="col-md-6" id="PKU-CQB" style="margin-bottom:25px;max-width:300px">
 +
                            <a href="http://cqb.pku.edu.cn/en/"><img src="https://static.igem.org/mediawiki/2018/e/e1/T--Peking--images_PKU_CQB_logo.png"></a>
 +
                        </li>
 +
 +
                    </ul>
 +
                </div>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="twelve columns" >
 
                 <div class="twelve columns" >
 
                     <ul class="copyright">
 
                     <ul class="copyright">
 
                         <!--<li>&copy; 2014 Sparrow</li> -->
 
                         <!--<li>&copy; 2014 Sparrow</li> -->
                         <li><a href="https://2018.igem.org/Team:Peking">Home</a>&nbsp;&nbsp;&nbsp;<a href="mailto:indigomad@pku.edu.cn">Contact</a></li>
+
                         <li><a href="https://2018.igem.org/Team:Peking">Home</a>&nbsp;&nbsp;&nbsp;<a href="mailto:pekingigem2018@126.com">Contact</a></li>
 
                         <span> &copy;2018 PEKING IGEM. All Rights Reserved.</span>
 
                         <span> &copy;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 524: Line 535:
 
                 <div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
 
                 <div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
 
             </div>
 
             </div>
        </footer> <!-- Footer End-->
+
 
       
+
 
       
+
<!-- Footer End-->
        <!-- Java Script======================================================================= -->
+
                       
        <script>window.jQuery || document.write('<script src="https://2016.igem.org/Template:Peking/Javascript/jquery_1_10_2_min?action=raw&ctype=text/javascript"><\/script>')</script>
+
                       
        <script type="text/javascript" src="https://2016.igem.org/Template:Peking/Javascript/jquery_migrate_1_2_1_min?action=raw&ctype=text/javascript"></script>
+
            <!-- Java Script======================================================================= -->
       
+
            <script>window.jQuery || document.write('<script src="https://2018.igem.org/Template:Peking/Javascript/jquery_1_10_2_min?action=raw&ctype=text/javascript"><\/script>')</script>
        <script src="https://2016.igem.org/Template:Peking/Javascript/jquery_flexslider?action=raw&ctype=text/javascript"></script>
+
            <script type="text/javascript" src="https://2018.igem.org/Template:Peking/Javascript/jquery_migrate_1_2_1_min?action=raw&ctype=text/javascript"></script>
        <script src="https://2016.igem.org/Template:Peking/Javascript/doubleaptogo?action=raw&ctype=text/javascript"></script>
+
           
        <script src="https://2016.igem.org/Template:Peking/Javascript/init?action=raw&ctype=text/javascript"></script>
+
            <script src="https://2018.igem.org/Template:Peking/Javascript/jquery_flexslider?action=raw&ctype=text/javascript"></script>
       
+
            <script src="https://2018.igem.org/Template:Peking/Javascript/doubleaptogo?action=raw&ctype=text/javascript"></script>
       
+
            <script src="https://2018.igem.org/Template:Peking/Javascript/init?action=raw&ctype=text/javascript"></script>
        <!--quotations from black: start-->
+
           
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery?action=raw&ctype=text/javascript"></script>
+
            <!--quotations from flexslider: start-->
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_sticky?action=raw&ctype=text/javascript"></script>
+
            <script src='https://2018.igem.org/Template:Peking/Javascript/modernizr_js?action=raw&ctype=text/javascript'></script>
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_easing_1_3_pack?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_polaroid?action=raw&ctype=text/javascript'></script>
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/bootstrap_min?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_easing?action=raw&ctype=text/javascript'></script>
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_patallax_1_1_3?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_transform_0_8_0_min?action=raw&ctype=text/javascript'></script>
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/appear?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_preloader?action=raw&ctype=text/javascript'></script>
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/modernizr?action=raw&ctype=text/javascript"></script>
+
                <!--quotations from flexslider: end-->
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_prettyPhoto?action=raw&ctype=text/javascript"></script>
+
               
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/isotope?action=raw&ctype=text/javascript"></script>
+
                <!--quotations from black: start-->
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_bxslider_min?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery?action=raw&ctype=text/javascript"></script>
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_cycle_all?action=raw&ctype=text/javascript" ></script>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_sticky?action=raw&ctype=text/javascript"></script>
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_maximage?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_easing_1_3_pack?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>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/bootstrap_min?action=raw&ctype=text/javascript"></script>
        <!--quotations from black: end-->
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_patallax_1_1_3?action=raw&ctype=text/javascript"></script>
    </body>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/appear?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/modernizr?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_prettyPhoto?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/isotope?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_bxslider_min?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_cycle_all?action=raw&ctype=text/javascript" ></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_maximage?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/scripts?action=raw&ctype=text/javascript "></script>
 +
                <!--quotations from black: end-->
 +
                           
 +
                           
 +
                            </body>
 
</html>
 
</html>

Latest revision as of 00:22, 18 October 2018

Software

Overview

We produce abundant fluorescence images in our experiments. However, there are many challenges in the processing of such data, which can be extremely large. Even in the case of 1 hour of imaging for 25 positions at 3 channels every minute, the microscope will yield 4500 high-resolution images. To help with the image processing in such a high throughput, we developed software for microscope image batching(Fig. 1).
(Github: https://github.com/igemsoftware2018/Team_Peking)

This software was written specifically for the problems we encountered.


Figure. 1 The GUI of the software



Naming Rules management

The first problem we met is that the file names of the exported images are generated according to fuzzy rules. Confusingly, the rules for the number of the positions, channels and times vary among files. To address the diversity of file names of images derived from different microscopes, we managed to build a naming rule manager (Fig. 2), which can create and modify the naming rule. The rules that can be made are flexible, and can contain up to 4 variables and 4 customized strings. Every variable has a customized zero filling function that can solve annoying problems such as the numbers 01 to 99. The users can also share their rules in the form of a file, which may benefit group projects. Please refer to the user manuals for more details.


Figure. 2 The GUI of naming rules manager



Grayscale and Channels Merge

After solving the problem of obtaining the files, we can now address their processing.The most important difference between fluorescence microscope images and ordinary photographs is the channel function. We needed to contrast different fluorescence channels to assess the result. However, exporting a great number of large images can be exceedingly time-consuming. Thus, if we can merge the channels or convert the images to grayscale after cropping, we will save much time. Thus, we added the functions of merging(Fig. 3) and grayscale conversion (Fig. 4)to our software first. Please refer to the user manuals for more details.



Figure. 3 The images before and after channels merging

Figure. 4 The images before and after grayscale conversion



Video and Z Stacks

In living organisms, if we want to show dynamic processes using video recordings, we will need to fuse the images in the correct order to make a video. We therefore wrote functions to export video by time or by z axis.(Fig. 5) Please refer to the user manuals for more details.




Figure. 5 The GUI of the video functions and the video exported



Cropping

In scientific research, cropping is widely used to beautify the images and emphasize the target. To meet the need for flexible cropping, we provided two cropping methods. Drawing cropping can draw the range to be cropped while position cropping crops the given position.(Fig. 6) Please refer to the user manuals for more details. Please refer to the user manuals for more details.



Figure. 6 The cropping process



Fixing Drift and Rotation

What’s more, sometime the cells float during the process of photographing, which results in the cells drifting or even rotating in the video. We will have to make a larger cropping to ensure that the cell will not move out of the field of view. To solve this problem, we wrote a function that can move the cropping frame with the cell linearly, which can fix the drifting of cells to some extent(Fig. 7). Also, we can rotate the image using the setting before cropping, by which we may also fix the rotation of the cells(Fig. 8). Please refer to the user manuals for more details. Please refer to the user manuals for more details.




Figure. 7 The videos before and after drift fixing. The yeast are less locomotive after fixing.


Figure. 8 The videos before and after rotation and drift fixing, The yeast are less rotational after fixing.



Time Scale and Scale Plate

Eventually, the micrographs in science need information attached to them before they can be shown to the public. The time scale of every frame and the scale of the cells are the most common features.(Fig. 9) We can add the time scale information to the image by the given position, start time, interval and unit. Furthermore, the scale bar, which indicates the scale of the cells, can be added by the given position, total length, length/pixel and unit. Please refer to the user manuals for more details.






Figure. 9 The GUI of adding information and the image with time and scale bar








Almost all micrographs shown in our wiki and ppt were processed using this software. It helped us a lot and we wish to share it with anyone who needs it. If you want more detail, please refer to the user manuals. The software is available at:https://github.com/igemsoftware2018/Team_Peking (Github). If you want an updated version after the project freeze and after iGEM, check here: (Github), we will release all the updates there.