Difference between revisions of "Team:Peking/Software"

 
(135 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:#6495ED;
 
                 color:#6495ED;
                 font-size: 20px;
+
                 font-size: 32px;
 
                 line-height: 48px;
 
                 line-height: 48px;
 
                 margin-bottom: 12px;
 
                 margin-bottom: 12px;
Line 35: Line 36:
 
                 text-transform: uppercase;
 
                 text-transform: uppercase;
 
                 font-weight: 350;
 
                 font-weight: 350;
              text-align:center;  
+
                text-align: center;
     
+
                padding-top:40px;
              padding-top:40px;
+
 
             }
 
             }
 
         sup{font-size:11px;}
 
         sup{font-size:11px;}
Line 66: Line 66:
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 +
        #page-wrap a:hover {color:#6495ED;}
 
          
 
          
 
         #sidebar {
 
         #sidebar {
Line 169: 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 242: Line 243:
 
                                 </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/Modeling_overview">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 253: 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/" class="barfont1">Judging Form</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/Parts" class="barfont1">Parts</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/Improve" class="barfont1">Improvement</a></li>
Line 277: 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>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
Line 291: Line 283:
 
                 <div class="twelve columns centered text-center">
 
                 <div class="twelve columns centered text-center">
 
                     <h1>Software </h1>
 
                     <h1>Software </h1>
                     <p class="title1" style="center;">You can see our software here.</p>
+
                      
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 308: Line 300:
 
                          
 
                          
 
                          
 
                          
                            <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/Team:Peking/Software">Software</a></h4>
+
                                     <h4><a href="javascript:void(0);" onclick="naver('A')">&bull;Overview</a></h4>
                                     <h4><a href="https://2018.igem.org/Team:Peking/Judging_Form">Judging&nbspForm</a></h4>
+
                                    <h4><a href="javascript:void(0);" onclick="naver('B')">&bull;Naming&nbsp;Rules&nbsp;Management</a></h4>
                                 
+
                                     <h4><a href="javascript:void(0);" onclick="naver('C')">&bull;Grayscale&nbsp;&&nbsp;Merge</a></h4>
 
+
                   
                                 
+
                                    <h4><a href="javascript:void(0);" onclick="naver('D')">&bull;Video&nbsp;&&nbsp;Z&nbsp;Stacks</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('E')">&bull;Cropping</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('G')">
 +
                                  &bull;Time&nbsp;Scale&nbsp;&&nbsp;Scale&nbsp;Plate</a></h4>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 +
                       
 
                         </div>
 
                         </div>
 
                          
 
                          
Line 324: Line 321:
 
                          
 
                          
 
                         <div class="nine columns">
 
                         <div class="nine columns">
                           
+
<div class="coll">                         
                            <div class="texttitle"> Software
+
<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>Generally, when intermolecular interaction is neglected (i.e. all molecules can be treated independently), two components tend to mix with each other where entropy reaches its maximum. Homogeneous mixed state remains stable in this case, for instance, water and alcohol mix at random ratio.  
+
                                     <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).
</p>
+
<br/><a href="https://github.com/igemsoftware2018/Team_Peking">(Github: https://github.com/igemsoftware2018/Team_Peking)</a><br/>
<img src= "https://static.igem.org/mediawiki/2018/f/f0/T--Peking--Modeling_SPOT_Formation_1.png">
+
<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">
                                     <p>Fig1.A: mixed binary mixture, rounds with different colors denote different molecules. Fig1.B: demixed binary mixture, one component forms a dense liquid droplet
+
                                     <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>
 
<br/><br/>
 
<br/><br/>
Things might get a little different when interaction among molecules are considered. Under the conditions of constant temperature, volume and particle numbers, the system is at equilibrium when the Helmholtz free energy F is the lowest. Based on regular solution model, the free energy density f takes the following form in the unit of <I>k<sub>B</sub>T</I>[1]:
+
<div align="center">
 +
<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>
 
<br/><br/>
 
<br/><br/>
<I>f</I> =<I>ϕ</I> ln⁡<I>ϕ</I> +(1-<I>ϕ</I> )ln⁡(1-<I>ϕ</I> )++<I>χ</I><I>ϕ</I> (1-<I>ϕ</I> )+<I>λ</I>/2 |<I>∇ϕ</I>|<sup>2</sup>,              (1)
+
 
 +
 
 +
</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">
 +
 
 +
                         
 +
                               
 +
                                <div class="content">
 +
                                    <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>
 
<br/><br/>
 
<br/><br/>
where <I>ϕ</I> is the volume fraction of one component (let us say component A), <I>χ</I> is a parameter characterizing the strength of intermolecular interactions and <I>λ</I> is related to the surface tension between interfaces. The volume fraction of A is defined as the volume of A molecules divided by the total volume of the system. In a binary system, the volume fraction of the other component, let us say component B, becomes naturally 1-<I>ϕ</I>.
 
<br/>
 
    First let’s focus on the symmetric part of <I>f</I> , i.e <I>f<sub>0</sub></I> =<I>ϕ</I> ln<I>⁡ϕ</I>+(1-<I>ϕ</I>)ln⁡(1-<I>ϕ</I>)+<I>χ</I> <I>ϕ</I>(1-<I>ϕ</I>), and see how its shape changes as we vary <I>χ</I>. When A and B attract, <I>χ</I> is less than 0; on the contrary, when A and B repulse, <I>χ</I> is greater than 0. Easily seen from fig2, when <I>χ</I><2, <I>f<sub>0</sub></I> only has one minimum; when <I>χ</I>>2, <I>f<sub>0</sub></I> has two minima and one maximum. A bifurcation takes place when <I>χ</I>=2 and essentially alters the feature of free energy density.
 
  
 +
<div align="center">
 +
<img src="https://static.igem.org/mediawiki/2018/e/ee/T--Peking--MergeG.png" width="150 px" heigth="150 px">
 +
<img src="https://static.igem.org/mediawiki/2018/e/ef/T--Peking--MergeR.png" width="150 px" heigth="150 px">
 +
<img src="https://static.igem.org/mediawiki/2018/2/27/T--Peking--MergeM.png" width="150 px" heigth="150 px">
 +
</div>
 +
<p><div align="center">Figure. 3 The images before and after channels merging</div></p>
 +
 +
 +
<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>
  
<img src="https://static.igem.org/mediawiki/2018/c/c2/T--Peking--Modeling_SPOT_Formation_2.png">
 
Fig2: plot of symmetric part of free energy density under various χ
 
 
<br/><br/>
 
<br/><br/>
For better illustration, we scrutinize two typical cases, <I>χ</I>=0 and <I>χ</I>=4. Fig3 shows the free energy density for mixed state in blue solid line and demixed state in green dotted line. Obviously seen from fig3, when <I>χ</I>=0, for any initial concentration represented by <I>ϕ</I><sub>0</sub>, it always requires extra free energy for the system to demix into any two separate states <I>ϕ</I><sub>1</sub> and <I>ϕ</I><sub>2</sub>, where the green dotted line is higher than any point on the blue solid line between <I>ϕ</I><sub>1</sub> and <I>ϕ</I><sub>2</sub>; when <I>χ</I>=4, there exists a range of <I>ϕ</I><sub>0</sub> to separate into two demixed compositions <I>ϕ</I><sub>1</sub> and <I>ϕ</I><sub>2</sub>, where the green dotted line is lower than any point on the blue solid line between <I>ϕ</I><sub>1</sub> and <I>ϕ</I><sub>2</sub>. This is the situation where phase separation could happen spontaneously.
 
  
<img src="https://static.igem.org/mediawiki/2018/c/c3/T--Peking--Modeling_SPOT_Formation_3.png">
+
</div>
<br/>
+
</div>
Fig3: The blue solid line and the green dotted line represent the free energy density for mixed state and demixed state respectively. (A)χ=0. The green dotted line is always higher than the blue solid line, indicating an extra energy for separation; (B)χ=4. The green dotted line is below the blue solid line, making spontaneous phase separation possible.
+
                            <div class="coll">
 +
<div class="texttitle">Video and Z Stacks
 +
<a id="D"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
 +
 
 +
                               
 +
                                <div class="content">
 +
                                    <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>
 
<br/><br/>
 
<br/><br/>
To be more precious, we can specify the conditions where separation could happen. According to fundamental work on liquid-liquid phase separation, when <I>d</I><sup>2</sup><I>f</I>/<I>d</I><I>ϕ</I><sup>2</sup><0, any local perturbation will result in spontaneous separation, such a formation is named spinodal decomposition; when <I>d</I><sup>2</sup><I>f</I>/<I>d</I><I>ϕ</I><sup>2</sup>>0 and between the two minima, only sufficiently large global perturbation can make phase separation happen, such an approach is called nucleation; and their boundary is named spinodal line. Now, if the free energy density function is symmetric, when <I>ϕ</I> lies outside the two minima, phase separation cannot happen. The boundary between whether phase separation can take place or not is called binodal line.
+
<div align="center">
<br/><br/>
+
<img src="https://static.igem.org/mediawiki/2018/7/77/T--Peking--video.png"><br/>
Based on the criteria above, we plot the phase diagram of a binary mixture. In fig4, we represent the initial concentration by <I>ϕ</I> in the x-axis and vary χ in the y-axis. The region confined by spinodal line is the unstable region, for separation can take place under any local perturbation. In contrast, the region between the binodal line and the spinodal line is the metastable region, where only sufficiently large global perturbation can initiate separation.
+
<img src="https://static.igem.org/mediawiki/2018/0/09/T--Peking--driftE.gif"></div>
<img src="https://static.igem.org/mediawiki/2018/4/4e/T--Peking--Modeling_SPOT_Formation_4.png">
+
<p><div align="center">Figure. 5 The GUI of the video functions and the video exported</div></p>
<br/>
+
Fig4: Binary phase diagram. Binodal line shows the boundary between whether phase can separate or not. Spinidal line shows the boundary between two different formations: spinodal decomposition and nucleation. The area confined by spinodal line is the unstable region while the area between bimodal line and spinodal line is the metastable region.
+
<br/><br/>
+
As aforementioned, our system is a ternary mixture system consisting of two multivalent proteins and water, which is a bit more complicated. To capture the basic feature of three-component phase separation, we use a similar theoretical model for simulation. The free energy density f is now written in the unit of k_B T as:
+
<br/><br/>
+
f=<I>ϕ</I><sub>1</sub> ln⁡<I>ϕ</I><sub>1</sub> +<I>ϕ</I><sub>2</sub> ln<I>ϕ</I><sub>2</sub> +<I>ϕ</I><sub>3</sub>  ln⁡<I>ϕ</I><sub>3</sub>  +χ_(1-2) <I>ϕ</I><sub>1</sub> <I>ϕ</I><sub>2</sub>+χ_(1-3) <I>ϕ</I><sub>1</sub> <I>ϕ</I><sub>3</sub> +χ_(2-3) <I>ϕ</I><sub>2</sub> <I>ϕ</I><sub>3</sub> +λ_1/2 |∇<I>ϕ</I><sub>1</sub> |^2+λ_2/2 |∇<I>ϕ</I><sub>2</sub> |^2+λ_3/2 |∇<I>ϕ</I><sub>3</sub>  |^2
+
where <I>ϕ</I><sub>1</sub> denotes the first multivalent protein (FKBP for example), ϕ_2 denotes the second multivalent protein (Frb for example) and <I>ϕ</I><sub>3</sub> denotes water. An intrinsic relation of the three is given by:
+
ϕ_1+ϕ_2+<I>ϕ</I><sub>3</sub> =1
+
Phenomenologically speaking, <I>ϕ</I><sub>1</sub>  and ϕ_2 condensate together and separate from <I>ϕ</I><sub>3</sub> . For computational convenience, χ_(1-2) and χ_(1-3) are taken value above 2 and χ_(2-3) below 2. A ternary phase diagram is calculated in a similar way by determining whether<I>ϕ</I><sub>1</sub>  and <I>ϕ</I><sub>3</sub>  separate and whether ϕ_2 and <I>ϕ</I><sub>3</sub> separate. The results are shown in fig5.
+
<img src="https://static.igem.org/mediawiki/2018/1/1e/T--Peking--Modeling_SPOT_Formation_5.png">
+
<img src="https://static.igem.org/mediawiki/2018/9/9e/T--Peking--Modeling_SPOT_Formation_6.png">
+
<br/>
+
Fig5: Ternary phase diagrams. (A)χ_(1-2)=0; χ_(1-3)=8; χ_(2-3)=3; (B) χ_(1-2)=0; χ_(1-3)=8; χ_(2-3)=4.
+
<br/><br/>
+
The phase diagram only provides a rough approximation on where phase separation can happen, it is insufficient to predict what happens after the separation. Hence, we further recur to the continuum model first proposed by Cahn and Hilliard to simulate a dynamic process.
+
<br/>
+
∂c/∂t=∇⋅(M∇μ)
+
μ=df/dc-λ∇^2 c
+
<br/><br/>
+
We use finite element method in a 100×100 mesh and select Neumann boundary condition to solve the partial differential equations above. Crank-Nicolson method is used for time-stepping with a footstep of 2.0×〖10〗^(-3). The initial composition is given by adding a perturbation of strength 〖10〗^(-2) to a homogenous sate. A typical result is given as followed:
+
<img src="https://static.igem.org/mediawiki/2018/6/62/T--Peking--Modeling_SPOT_Formation_7.png">
+
<br/>
+
Fig6: Simulation for dynamic evolution of phase separation under χ_(1-2)=0, χ_(1-3)=3, χ_(2-3)=4. (A) The concentration distribution of ϕ_1; (B) The centration of ϕ_1 on the sampled red dotted line in (A).
+
<br/><br/>
+
We further adjust the interaction strength between two proteins, thus affecting both χ_(1-3) and χ_(2-3). As χ increases, indicating a stronger interaction, the time for phase separation to occur is decreased, which is in accordance with our experimental results.
+
<img src="https://static.igem.org/mediawiki/2018/d/d5/T--Peking--Modeling_SPOT_Formation_8.png">
+
<br/>
+
Fig7: Simulation for phase separation under different interaction strengths. The stronger the interaction, the faster separation emerges.
+
 
<br/><br/>
 
<br/><br/>
  
 +
</div>
 +
</div>
 +
                            <div class="coll">
 +
<div class="texttitle">Cropping
 +
<a id="E"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
 +
                               
 +
                                <div class="content">
 +
                                    <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>
 +
<br/><br/>
 +
<div align="center">
 +
<img src="https://static.igem.org/mediawiki/2018/9/96/T--Peking--cropping.png" width="600px" height="300 px"></div>
 +
<p><div align="center">Figure. 6 The cropping process</div></p>
  
</p>
+
<br/><br/>
  
                                </div>
+
</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>
 
 
                             <div class="coll">
 
                             <div class="coll">
                               
 
                             
 
                            </div>
 
 
 
<div class="coll">
 
 
                                  
 
                                  
 
                                 <div class="content">
 
                                 <div class="content">
                                 
+
                                    <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>
+
</div>
                            <div class="texttitle">References
+
<br/>
<a id="A"></a></div>  
+
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e3/T--Peking--RotationN.gif" width=" 250 px" height="250 px">
                            <hr style="border:2px dashed; height:2px" color="#666666">
+
<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/>
 +
 
 +
</div>
 +
</div>
  
 
                             <div class="coll">
 
                             <div class="coll">
                                                                <div class="info">
+
<div class="texttitle">Time Scale and Scale Plate
<a id="B1"></a>
+
<a id="G"></a></div>  
                                 
+
                            <hr style="border:2px dashed; height:2px" color="#666666">
                                </div>
+
 
 +
                               
 
                                 <div class="content">
 
                                 <div class="content">
                                     <p>[1] Joel Berry el.al (2018). Physical principles of intracellular organization via active and passive phase transitions
+
                                     <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>
 +
<br/><br/>
 +
<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>
  
</p>
+
<br/><br/>
                                </div>
+
                            </div>
+
  
 +
</div>
 +
 +
 +
 +
<hr style="border:2px dashed; height:2px" color="#666666">
 +
<br/><br/>
 +
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><!--9 columns end-->
                        </div><!--9 columns end-->
+
 
                          
 
                          
 
                     </div>
 
                     </div>
                   
 
 
                      
 
                      
 
                      
 
                      
Line 453: Line 492:
 
          
 
          
 
          
 
          
       
+
                                <!-- footer============================================================================== -->
       
+
        <!-- footer============================================================================== -->
+
 
         <style>
 
         <style>
 
             footer .copyright span:before {
 
             footer .copyright span:before {
Line 471: 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 482: 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.