Difference between revisions of "Team:Peking/Software"

 
(156 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 
 
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
 
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
 
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
 
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
Line 8: Line 7:
 
         <!--- Basic Page Needs========================================================================= -->
 
         <!--- Basic Page Needs========================================================================= -->
 
         <meta charset="utf-8"/>
 
         <meta charset="utf-8"/>
         <title>Home</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/priorstyle?action=raw&ctype=text/css"/>
+
         <link rel="stylesheet" href="https://2018.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
+
 
         <style>
 
         <style>
 +
                        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 38: Line 37:
 
                 font-weight: 350;
 
                 font-weight: 350;
 
                 text-align: center;
 
                 text-align: center;
 +
                padding-top:40px;
 
             }
 
             }
 
         sup{font-size:11px;}
 
         sup{font-size:11px;}
 
         .references{margin-top:150px;margin-bottom:40px;}
 
         .references{margin-top:150px;margin-bottom:40px;}
 
         .references p{font-size:14px !important; color:#666161 !important;}
 
         .references p{font-size:14px !important; color:#666161 !important;}
         .classic-title {font-weight: 300;}
+
         .classic-title {font-weight: 300;padding-top:30px;}
 
         .classic-title span {
 
         .classic-title span {
 
             padding-bottom: 8px;
 
             padding-bottom: 8px;
 
             border-bottom: 1px solid #383232;
 
             border-bottom: 1px solid #383232;
 
             font-weight: 400;
 
             font-weight: 400;
        }
 
        a, a:visited{
 
          color:#00afd1;
 
 
 
         }
 
         }
 
         figure{margin-top:40px;margin-bottom:40px;height:auto;}
 
         figure{margin-top:40px;margin-bottom:40px;height:auto;}
Line 57: Line 53:
 
          
 
          
 
     </head>
 
     </head>
   
 
   
 
   
 
 
     <body>
 
     <body>
         <!-- Home Section -->
+
         <!--sidebar 引用==============================================================================-->
         <div id="home">
+
         <style>
              
+
             #primary span{
            <a id="slider_left"><img src="https://static.igem.org/mediawiki/2015/d/d1/Peking-left.png" style="margin-top:100%" alt="Slide Left"></a>
+
                display:block;
             <a id="slider_right"><img src="https://static.igem.org/mediawiki/2015/f/fc/Peking-right.png" style="margin-top:100%" alt="Slide Right"></a>
+
                word-break:break-all
              
+
            }
             <img id="cycle-loader" src="https://static.igem.org/mediawiki/2016/7/78/T--Peking--images_ajax_loader.gif" />
+
       
            <div id="fullscreen-slider">
+
        #page-wrap {
 +
            width: 25%;
 +
             margin: 0px;
 +
            position: relative;
 +
        }
 +
        #page-wrap a:hover {color:#6495ED;}
 +
       
 +
        #sidebar {
 +
             width: 25%;
 +
             margin-left: 0px;
 +
        }
 +
        @media (min-width:1024px){
 +
            #sidebar{position:relative;top:120px;max-width:200px;}}
 +
        @media (max-width: 1023px){
 +
            #sidebar{display:none;
 +
            }
 +
            #page-wrap{display:none;}
 +
        }
 +
        </style>
 +
       
 +
       
 +
        <script type="text/javascript">
 +
            function menuFixed(id){
 +
                var obj = document.getElementById(id);
 +
                var _getHeight = obj.offsetTop;
 
                  
 
                  
                 <div>
+
                 window.onscroll = function(){
                    <img src="https://static.igem.org/mediawiki/2016/f/fa/T--Peking--images_Uranium_Reaper1.jpg" alt="" />
+
                     changePos(id,_getHeight);
                     <!--div class="pattern">
+
                 }
                    <div class="slide-content light">
+
            }
                    <div class="div-align-center">
+
        function changePos(id,height){
                    <p class="georgia">Welcome to our website</p>
+
            var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
                    <h1>We are newave</h1>
+
            if(w>=1024){
                    <a href="#we-are-newave" class="newave-button medium white outline">See What we do</a>
+
                 if($(window).scrollTop() + $(window).height() > $(document).height() - 230){
                    </div>
+
                     $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");}
                    </div>
+
            }
                    </div>-->
+
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop -230;
                 </div>
+
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
               
+
            var w = window.innerWidth;
                <div>
+
                    <img src="https://static.igem.org/mediawiki/2016/5/5d/T--Peking--image_home_uranium_reaper_02.jpg" alt="" />
+
                    <!-- <div class="pattern">
+
                    <div class="slide-content light">
+
                    <div class="div-word-on-picture1">
+
                    <h1>Uranium </h1>
+
                    </div>
+
                   
+
                    <div class="div-word-on-picture2">
+
                    <h1>Reaper</h1>
+
                    </div>
+
                   
+
                    <p><span style="font-family:Verdana;font-size:15px">iGEM 2016</span></p>
+
                    </div>
+
                    </div>-->
+
                 </div>
+
               
+
                <div>
+
                    <img src="https://static.igem.org/mediawiki/2016/archive/c/c9/20161016085229%21T--Peking--images_Uranium_Reaper3.jpg" alt="" />
+
                     <!--<div class="pattern">
+
                    <div class="slide-content light">
+
                    <div class="div-align-center">
+
                    <p class="georgia">Welcome to our website</p>
+
                    <h1>We are newave</h1>
+
                    <a href="#we-are-newave" class="newave-button medium white outline">See What we do</a>
+
                    </div>
+
                    </div>
+
                    </div>-->
+
                </div>
+
               
+
               
+
                <div>
+
                    <img src="https://static.igem.org/mediawiki/2016/0/0c/T--Peking--image_home_uranium_reaper_03.jpg" alt="" />
+
                    <!--<div class="pattern">
+
                    <div class="slide-content light">
+
                    <div class="div-align-center">
+
                    <p class="georgia">Welcome to our website</p>
+
                    <h1>We are newave</h1>
+
                    <a href="#we-are-newave" class="newave-button medium white outline">See What we do</a>
+
                    </div>
+
                    </div>
+
                    </div>-->
+
                </div>
+
               
+
            </div>
+
            <!-- End Home Section -->
+
           
+
           
+
 
              
 
              
 +
            if(scrollTop < height){ obj.style.position = 'relative';
 +
            }else{
 +
                obj.style.position = 'fixed';
 +
            }
 +
        }
 +
        </script>
 +
       
 +
        <script type="text/javascript">
 +
            window.onload = function(){
 +
                menuFixed('sidebar');
 +
            }
 +
        </script>
 +
        <script>
 +
            function naver(id){
 +
                var obj=document.getElementById(id);
 +
                var oPos=obj.offsetTop;
 +
                return window.scrollTo(0,oPos+250);
 +
            }
 +
        </script>
 +
        <!--sidebar 引用 end ==============================================================================-->
 +
        <!--panel 引用==================================================================================-->
 +
        <style type="text/css">
 +
            .panel-default .panel-heading a{
 +
                text-decoration: none;
 +
                display:block;
 +
                padding:10px;
 +
            }
 +
        .panel-heading.panel-title{
 +
            text-decoration: none;
 +
            padding-top:0px;
 +
            padding-bottom:0px;
 +
            padding-left:0px;
 +
            padding-right:0px;
 +
            text-align:center;
 +
            font-size:19px;
 
              
 
              
 +
        }
 +
        a[aria-expanded="true"] {
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 +
       
 +
        .panel-default .panel-heading a[aria-expanded="false"]{
 +
            -o-transition: background-color 1s linear;
 +
            -moz-transition: background-color 1s linear;
 +
            -khtml-transition: background-color 1s linear;
 +
            -webkit-transition: background-color 1s linear;
 +
            -ms-transition: background-color 1s linear;
 +
            transition: background-color 1s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="false"]:hover{
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]{
 +
            -o-transition: opacity 1s linear;
 +
            -moz-transition: opacity 1s linear;
 +
            -khtml-transition: opacity 1s linear;
 +
            -webkit-transition: opacity 1s linear;
 +
            -ms-transition: opacity 1s linear;
 +
            transition: opacity 0.7s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]:hover{
 +
            opacity:0.7;
 +
        }
 +
       
 +
        .coll p a{
 +
            color:#6495ED !important;
 +
        }
 +
        .coll p a:hover{
 +
            color:#6495ED!important;
 +
        }
 +
        .coll {
 +
            width:100%;
 +
            float:left;
 +
        }
 +
        .coll .info {
 +
            width:6%;
 +
            font-size:11px;
 +
            color:#a4a4a4;
 +
            margin-top:0px;
 +
            float:left;
 
              
 
              
 +
        }
 +
        .coll .content {
 +
            width:94%;
 +
            float:left;
 +
            margin-left:40px;
 +
            margin-top:-3px;
 +
        }
 +
        .coll .ordi {
 +
            width;100%;
 +
            margin:0px 0px 0px 0px;
 +
            font-size:35px;
 +
            font-style:italic;
 +
            float:left;
 +
            color:#1E90FF;
 +
            opacity:0.8;
 +
        }
 +
       
 +
            </style>
 +
       
 +
        <script type="text/javascript">
 +
            $(document).ready(function(){
 +
                              $("#button1").click(function(){
 +
                                                  $(".panel-collapse").collapse("show");
 +
                                                  });
 +
                              });
 +
                              $(document).ready(function(){
 +
                                                $("#button2").click(function(){
 +
                                                                    $(".panel-collapse").collapse("hide");
 +
                                                                    });
 +
                                                });
 +
                                                $("#notebook").addClass("navbar-active");
 +
            </script>
 +
        <!--panel 引用 end ==================-->
 +
       
 
           <!-- Navigation -->
 
           <!-- Navigation -->
 
         <div id="navigation" class="navbar navbar-fixed-top">
 
         <div id="navigation" class="navbar navbar-fixed-top">
Line 141: Line 227:
 
                     </a>
 
                     </a>
 
                     <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img
 
                     <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img
                     src="https://static.igem.org/mediawiki/2018/e/e2/T--Peking--_toolbar.jpeg" width="45%"></a></div>
+
                     src="https://static.igem.org/mediawiki/2018/3/36/T--Peking--Logo.png"></a></div>
 
                    
 
                    
 
                     <div class="nav-collapse collapse">
 
                     <div class="nav-collapse collapse">
                         <ul class="nav">
+
                         <ul class="nav">                          
                             <li class="dropdown menu-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Project</a>
+
 
 +
                             <li class="menu-1"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking">Home</a>
 +
                            </li>
 +
 
 +
                            <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Project</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
                                     <li><a href="https://2018.igem.org/Team:Peking/Project">Project</a></li>
+
                                     <li><a href="https://2018.igem.org/Team:Peking/Project" class="barfont1">Description</a></li>
                                    <li><a href="https://2018.igem.org/Team:Peking/Description" class="barfont1">Description</a></li>
+
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a></li>
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a></li>
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a></li>
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a></li>
                                     <li><a href="https://2018.igem.org/Team:Peking/Future_Plan" class="barfont1">Future Plan</a></li>
+
                                     <li><a href="https://2018.igem.org/Team:Peking/Perspective" class="barfont1">Perspective</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </li>
 
                             </li>
                             <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Data Page</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/Results">Data Page</a></li>
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_D" class="barfont1">Phase Separation</a></li>
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Functions_D" class="barfont1">Functions</a></li>
+
                                </ul>
+
 
                             </li>
 
                             </li>
                             <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Model</a>
+
                             <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software">Software</a>
                                <ul class="dropdown-menu">
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Model">Model</a></li>
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_M" class="barfont1">Phase Separation</a></li>
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Functions_M" class="barfont1">Functions</a></li>
+
                                </ul>
+
 
                             </li>
 
                             </li>
                             <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software" >Software</a>
+
 
 +
 
 +
                             <li class="menu-6"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Human_Practices">Human Practices</a>
 
                             </li>
 
                             </li>
                            <li class="dropdown menu-5"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Human Practices</a>
+
                                 <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Achievement</a>
                                <ul class="dropdown-menu">
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Human_Practices/Gold" class="barfont1">Human Practices</a></li>
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Public_Engagement" class="barfont1">Public Engagement</a></li>
+
                                </ul>
+
                            </li>
+
                                 <li class="dropdown menu-6"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Team</a>
+
 
                                     <ul class="dropdown-menu">
 
                                     <ul class="dropdown-menu">
                                         <li><a href="https://2018.igem.org/Team:Peking/Team_Members" class="barfont1">Team Members</a></li>
+
                                         <li><a href="https://2018.igem.org/Team:Peking/Judging_Form" class="barfont1">Judging Form</a></li>
                                         <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li>
+
                                         <li><a href="https://2018.igem.org/Team:Peking/Parts" class="barfont1">Parts</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/Improve" class="barfont1">Improvement</a></li>
                                         <li><a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</a></li>
+
                                         <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li>
 +
 
 
                                     </ul>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
                                 <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Collaborations</a>
+
                                 <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Lab</a>
 
                                     <ul class="dropdown-menu">
 
                                     <ul class="dropdown-menu">
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Team_Members">Team Members</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</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/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/Acknowledgement" class="barfont1">Acknowledgement</a></li>
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Acknowledgement" class="barfont1">Acknowledgement</a></li>
                                         <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li>
+
                                          
                                    </ul>
+
                                </li>
+
                                <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Parts</a>
+
                                    <ul class="dropdown-menu">
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Parts">Parts</a></li>
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Favorite_Parts" class="barfont1">Favorite Parts</a></li>
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Part_Table" class="barfont1">Part Table</a></li>
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Part_Collection" class="barfont1">Part Collection</a></li>
+
 
                                     </ul>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
Line 204: Line 276:
 
         </div>
 
         </div>
 
         <!--/Navigation -->
 
         <!--/Navigation -->
 +
       
 +
       
 +
        <!-- Page Title======================================================================== -->
 +
        <div id="page-title">
 +
            <div class="row">
 +
                <div class="twelve columns centered text-center">
 +
                    <h1>Software </h1>
 +
                   
 +
                </div>
 +
            </div>
 +
        </div><!-- Page Title End-->
 +
       
 +
       
 +
        <div id="page-content" class="row page">
 +
            <div id="primary" class="twelve columns">
 +
                <section>
 +
                    <div class="row">
 +
                       
 +
                       
 +
                       
 +
                    <div class="row">
 +
                       
 +
                       
 +
                       
 +
                                <div class="three columns">
 +
                            <div id="page-wrap">
 +
                                <div id="sidebar" style="color:#000000">
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('A')">&bull;Overview</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 class="nine columns">
 +
<div class="coll">                         
 +
<div class="texttitle"> Overview
 +
<a id="A"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
           
+
                           
            <style>
+
                .home_img{
+
                    padding: 10px;
+
                    margin: 10px;
+
                    width: 420px;
+
                    float: left;
+
                    height: 300px;
+
                }
+
            .home_text{
+
                padding-top: 20px;
+
                margin: 10px;
+
                float: left;
+
                height: 300px;
+
            }
+
            .texttitle{
+
                color: #11abb0;
+
                font-size: 38px;
+
                line-height: 48px;
+
                margin-bottom: 12px;
+
                font-family: raleway-bold, sans-serif;
+
                background: transparent;
+
                letter-spacing: 3px;
+
                text-transform: uppercase;
+
                font-weight: 350;
+
                text-align: center;
+
            }
+
            </style>
+
           
+
           
+
           
+
           
+
           
+
           
+
           
+
         
+
                              <div class="twelve columns" >
+
 
                                  
 
                                  
                                 <div class="four columns" style="text-align:center;">
+
                                 <div class="content">
                                <p style="text-align:center;"><a href="https://2016.igem.org/Team:Peking/Crosslinking"><img style="width: %;" src="https://static.igem.org/mediawiki/2016/b/b3/T--Peking--image_H1.png " alt="" /></p></a>
+
                                    <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 style="font-family:raleway-bold, sans-serif !important;font-size:24px !important; text-align:center; margin-top:20px;">Crosslinking</p>
+
<br/><a href="https://github.com/igemsoftware2018/Team_Peking">(Github: https://github.com/igemsoftware2018/Team_Peking)</a><br/>
                                <p style="font-family:raleway-regular, sans-serif !important; font-weight:100;font-size:18px !important; text-align:justify;">By taking advantage of the covalent crosslinking of SpyTag and SpyCatcher, a polymer network was designed to possess special properties, such as strong mechanical strength, large contact area and stable structure. </p>
+
<p style="text-align:justify; text-justify:inter-ideograph">This software was written specifically for the problems we encountered. </p><br/>
                                <p><a href="https://2016.igem.org/Team:Peking/Crosslinking">Learn more...</a></p>
+
<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>
+
                                 <div class="content">
 +
                                    <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/>
 +
<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/>
 +
 
 +
 
 +
</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/>
 +
 +
<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>
 +
 +
<br/><br/>
 +
 +
</div>
 +
</div>
 +
                            <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/>
 +
<div align="center">
 +
<img src="https://static.igem.org/mediawiki/2018/7/77/T--Peking--video.png"><br/>
 +
<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>
 +
</div>
 +
                            <div class="coll">
 +
<div class="texttitle">Cropping
 +
<a id="E"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
 +
 
                                  
 
                                  
                                 <div class="four columns" style="text-align:center;">
+
                                 <div class="content">
                                <p style="text-align:center;"><a href="https://2016.igem.org/Team:Peking/Secretion"><img style="width:  %;" src="https://static.igem.org/mediawiki/2016/1/1f/T--Peking--image_H2.png" /></p></a>
+
                                    <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>
                                <p style="font-family:raleway-bold, sans-serif !important;font-size:24px !important; text-align:center; margin-top:20px;">Secretion</p>
+
<br/><br/>
                                <p style="font-family:raleway-regular, sans-serif !important; font-weight:100;font-size:18px !important; text-align:justify;">To make the polymer network reproductive and economical, a signal peptide library was constructed. We carried out a series of experiments to find an optimal secretion strategy.</p>
+
<div align="center">
                                <p><a href="https://2016.igem.org/Team:Peking/Secretion">Learn more...</a></p>
+
<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>
                                </div>
+
 
                               
+
<br/><br/>
                               
+
 
                               
+
</div>
                                <div class="four columns" style="text-align:center;">
+
</div>
                                <p style="text-align:center;"><a href="https://2016.igem.org/Team:Peking/Clearance"><img style="width:  %;" src="https://static.igem.org/mediawiki/2016/9/95/T--Peking--image_H3.png" alt=""/></p></a>
+
<div class="coll">
                                <p style="font-family:raleway-bold, sans-serif !important;font-size:24px !important; text-align:center; margin-top:20px;">Clearance</p>
+
<div class="texttitle">Fixing Drift and Rotation
                                <p style="font-family:raleway-regular, sans-serif !important; font-weight:100;font-size:18px !important; text-align:justify;">The monomeric streptavidin constructed in the polymer network could realize the clearance of Spy Crosslinking Network in the environment by interacting with biotinylated magnetic beads. </p>
+
<a id="F"></a></div>  
                                <p><a href="https://2016.igem.org/Team:Peking/Clearance">Learn more...</a></p>
+
                            <hr style="border:2px dashed; height:2px" color="#666666">
                               
+
 
                                </div>
+
                            <div class="coll">
                               
+
                                </div>
+
 
                                  
 
                                  
 +
                                <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>
 +
<br/><br/>
 +
<div align="center">
 +
<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/>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e3/T--Peking--RotationN.gif" width=" 250 px" height="250 px">
 +
<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="texttitle">Time Scale and Scale Plate
 +
<a id="G"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
<div class="twelve columns"  style="margin-top:25px;">
 
 
                                  
 
                                  
                               
+
                                 <div class="content">
                               
+
                                    <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">
                                 <div class="four columns" style="text-align:center;">
+
<br/><br/>
                                <p style="text-align:center;"><a href="https://2016.igem.org/Team:Peking/Model"><img style="width:  %;" src="https://static.igem.org/mediawiki/2016/a/aa/T--Peking--image_H4.png
+
<img src="https://static.igem.org/mediawiki/2018/2/26/T--Peking--Addinfo.gif"><br/>
" /></p></a>
+
<img src="https://static.igem.org/mediawiki/2018/e/eb/T--Peking--GrayS.png">
                                <p style="font-family:raleway-bold, sans-serif !important;font-size:24px !important; text-align:center; margin-top:20px;">Model</p>
+
<p><div align="center">Figure. 9 The GUI of adding information and the image with time and scale bar</div></p>
                                <p style="font-family:raleway-regular, sans-serif !important; font-weight:100;font-size:18px !important; text-align:justify;">To accurately describe the Gel Point (GP) and the Mass Distribution (MD) for our polymer network, we built up two amendatory models that can adequately describe the characters and deepen our knowledge of our novel biomaterial.</p>
+
<br/><br/>
                                <p><a href="https://2016.igem.org/Team:Peking/Mode">Learn more...</a></p>
+
</div>
                               
+
                                </div>
+
                               
+
                                <div class="four columns" style="text-align:center;">
+
  
                                <p style="text-align:center;"><a href="https://2016.igem.org/Team:Peking/Software"><img style="width: %;" src="https://static.igem.org/mediawiki/2016/b/b3/T--Peking--image_H5.png
+
<br/><br/>
" alt="" /></p></a>
+
 
                                <p style="font-family:raleway-bold, sans-serif !important;font-size:24px !important; text-align:center; margin-top:20px;">Software</p>
+
</div>
                                <p style="font-family:raleway-regular, sans-serif !important; font-weight:100;font-size:18px !important; text-align:justify;">To calculate the Gel Point (GP) and the Mass Distribution (MD) for our polymer network, we established a useful software called SoP that can apply to all the crosslinking reactions between the chosen monomers.</p>
+
 
                                <p><a href="https://2016.igem.org/Team:Peking/Software">Learn more...</a></p>
+
 
                               
+
 
                                </div>
+
<hr style="border:2px dashed; height:2px" color="#666666">
                               
+
<br/><br/>
                                <div class="four columns" style="text-align:center;">
+
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.
                                <p style="text-align:center;"><a href="https://2016.igem.org/Team:Peking/HP/Gold"><img style="width:  %;" src="https://static.igem.org/mediawiki/2016/c/ce/T--Peking--image_H6.png
+
" alt=""/></p></a>
+
                                <p style="font-family:raleway-bold, sans-serif !important;font-size:24px !important; text-align:center; margin-top:20px;">Human practices</p>
+
                                <p style="font-family:raleway-regular, sans-serif !important; font-weight:100;font-size:18px !important; text-align:justify;">The Peking iGEM 2016 focuses on current treatments of uranium pollution worldwide, and looks for solutions using synthetic biology. We visited a institution of nuclear industry, conducted a questionnaire survey and provided public education.</p>
+
                                <p><a href="https://2016.igem.org/Team:Peking/HP/Gold">Learn more...</a></p>
+
                               
+
                                </div>
+
                               
+
                                </div>
+
                               
+
                            </div><!--row ended-->
+
 
                              
 
                              
                        </section>
+
                   
 +
                      </div><!--9 columns end-->
 +
                       
 
                     </div>
 
                     </div>
                </div>
+
                   
             </div>
+
                   
           
+
                   
           
+
                    </div><!--row end-->
           
+
             </section>
            <br />
+
        </div><!--12 columes end-->
           
+
        </div><!--page-content end-->
 
+
       
 +
       
 
          
 
          
 
 
          
 
          
            <!--/content-outer-->
+
       
           
+
       
           
+
                                <!-- footer============================================================================== -->
           
+
        <style>
            <!-- footer(Home special)
+
             footer .copyright span:before {
            ================================================== -->
+
                content: "|";
             <footer id="page-footer">
+
                padding-left: 10px;
 +
                padding-right: 12px;
 +
                color: #b4bbbb;
 +
            }
 +
        footer .copyright span:after {
 +
            content: "|";
 +
            padding-left: 10px;
 +
            padding-right: 12px;
 +
            color: #b4bbbb;
 +
        }
 +
        </style>
 +
        <footer id="page-footer">
 +
<footer id="page-footer">
 
                 <div class="row,row1">
 
                 <div class="row,row1">
 
                     <ul class="footer-social">
 
                     <ul class="footer-social">
 
                         <li class="col-md-6" id="PKU-administration" style="margin-bottom:25px;max-width:300px">
 
                         <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/2016/7/7a/T--Peking--images_PKU_Administration_logo.png"></a>
+
                             <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>
 
                         <li class="col-md-6" id="PKU-SLS" style="margin-bottom:25px;max-width:300px">
 
                         <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/2016/0/04/T--Peking--images_PKU_SLS_logo.png"></a>
+
                             <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="IMCAS" style="margin-bottom:25px;max-width:300px">
+
                            <a href="http://english.im.cas.cn/"><img src="https://static.igem.org/mediawiki/2016/9/93/T--Peking--images_PKU_IMCAS_logo.png"></a>
+
 
                         </li>
 
                         </li>
 +
                     
 
                         <li class="col-md-6" id="PKU-CQB" style="margin-bottom:25px;max-width:300px">
 
                         <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/2016/e/e1/T--Peking--images_PKU_CQB_logo.png"></a>
+
                             <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>
+
                        <!--<li class="col-md-6" id="BluePha" style="margin-bottom:25px; max-width:300px">
+
                        <a href="http://www.bluepha.com/"><img src="images/PKU/Bluepha-logo.png"></a>
+
                        </li>-->
+
                        <li class="col-md-6" id="PKU-CCME" style="margin-bottom:25px;max-width:300px">
+
                            <a href="http://www.chem.pku.edu.cn/index.php?styleid=2"><img src="https://static.igem.org/mediawiki/2016/0/05/T--Peking--images_PKU_CCME_logo.png"></a>
+
 
                         </li>
 
                         </li>
 +
 
                     </ul>
 
                     </ul>
 
                 </div>
 
                 </div>
               
+
            <div class="row">
               
+
                 <div class="twelve columns" >
                <style><!-----style of copyright---->
+
                    footer .copyright span:before {
+
                        content: "|";
+
                        padding-left: 10px;
+
                        padding-right: 12px;
+
                        color: #b4bbbb;
+
                    }
+
                footer .copyright span:after {
+
                    content: "|";
+
                    padding-left: 10px;
+
                    padding-right: 12px;
+
                    color: #b4bbbb;
+
                }
+
                </style>
+
                  
+
              <div class="row" >
+
 
                     <ul class="copyright">
 
                     <ul class="copyright">
                         <li><a href="Home.html">Home</a>&nbsp;&nbsp;&nbsp;<a href="#">Contact</a></li>
+
                        <!--<li>&copy; 2014 Sparrow</li> -->
                         <span> &copy;2016 PEKING IGEM. All Rights Reserved.</span>
+
                         <li><a href="https://2018.igem.org/Team:Peking">Home</a>&nbsp;&nbsp;&nbsp;<a href="mailto:pekingigem2018@126.com">Contact</a></li>
                         <li style="padding-right:20px"><a href="https://www.facebook.com/pekingigem"><img style="height:22px; margin-top:4px; margin-bottom:-4px;" src="https://static.igem.org/mediawiki/2016/c/c4/T--Peking--image_homefacebook.png"/></a></li>
+
                         <span> &copy;2018 PEKING IGEM. All Rights Reserved.</span>
                        <li style="padding-right:20px"><a href="https://twitter.com/iGEM_Peking"><img style="height:22px; margin-top:4px; margin-bottom:-4px;" src="https://static.igem.org/mediawiki/2016/3/39/T--Peking--image_hometwitter.png"/></a></li>
+
                         <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li>
                        <li style="padding-right:20px"><a href="#"><img style="height:22px; margin-top:4px; margin-bottom:-4px;" src="https://static.igem.org/mediawiki/2016/c/cc/T--Peking--image_homeskype.png"/></a></li>
+
 
                     </ul>
 
                     </ul>
                 </div>           
+
                 </div>
                <!-----go-to-top------>
+
                 <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;z-index:1000;"><a title="Back to Top" href="#">Go To Top</a></div>
+
             </div>
               
+
 
             </footer>
+
 
            <!-- Footer End-->
+
<!-- Footer End-->
           
+
                       
           
+
                       
 
             <!-- Java Script======================================================================= -->
 
             <!-- 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>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 type="text/javascript" src="https://2016.igem.org/Template:Peking/Javascript/jquery_migrate_1_2_1_min?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/jquery_flexslider?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://2016.igem.org/Template:Peking/Javascript/doubleaptogo?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://2016.igem.org/Template:Peking/Javascript/init?action=raw&ctype=text/javascript"></script>
+
             <script src="https://2018.igem.org/Template:Peking/Javascript/init?action=raw&ctype=text/javascript"></script>
 
              
 
              
 
             <!--quotations from flexslider: start-->
 
             <!--quotations from flexslider: start-->
             <script src='https://2016.igem.org/Template:Peking/Javascript/modernizr_js?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/fjquery_polaroid?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/fjquery_easing?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/fjquery_transform_0_8_0_min?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/fjquery_preloader?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>
 
                 <!--quotations from flexslider: end-->
 
                 <!--quotations from flexslider: end-->
 
                  
 
                  
 
                 <!--quotations from black: start-->
 
                 <!--quotations from black: start-->
                 <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery?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_sticky?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_easing_1_3_pack?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/bootstrap_min?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>
                 <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/jquery_patallax_1_1_3?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/appear?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>
+
                 <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://2016.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/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>
+
                 <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://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_bxslider_min?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_cycle_all?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_maximage?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/scripts?action=raw&ctype=text/javascript "></script>
 
                 <!--quotations from black: end-->
 
                 <!--quotations from black: end-->
               
+
                           
               
+
                           
                </body>
+
                            </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.