Difference between revisions of "Team:TJUSLS China/Software"

Line 1: Line 1:
 +
 
<html>
 
<html>
  
 
<head>
 
<head>
−
     <!-- head -->
+
     <meta charset="UTF-8">
−
    <link href="https://2016.igem.org/Team:TJUSLS_China/home/home_style?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" media="all" />
+
     <title></title>
−
     <!--start slider -->
+
     <link rel="stylesheet" href="https://2016.igem.org/Team:TJUSLS_China/home/index_style?action=raw&amp;ctype=text/css">
−
    <link href="https://2016.igem.org/Team:TJUSLS_China/home/home_lrtk?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" media="all" />
+
     <script type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/index_js_two?action=raw&ctype=text/javascript"></script>
−
     <link rel="stylesheet" href="https://2016.igem.org/Team:TJUSLS_China/home/home_fwslider?action=raw&amp;ctype=text/css" media="all">
+
     <script type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/index_js_one?action=raw&ctype=text/javascript"></script>
−
     <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_lrtk_js?action=raw&ctype=text/javascript"></script>
+
−
     <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_jquery_min?action=raw&ctype=text/javascript"></script>
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_jquery_min?action=raw&ctype=text/javascript"></script>
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_jquery-ui_min?action=raw&ctype=text/javascript"></script>
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_fwslider1?action=raw&ctype=text/javascript"></script>
+
−
    <!--end slider -->
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_jquery-hover-effect?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript">
+
−
        //Image Hover
+
−
        jQuery(document).ready(function(){
+
−
            jQuery(function() {
+
−
                jQuery('ul.da-thumbs > li').hoverdir();
+
−
            });
+
−
        });
+
−
    </script>
+
−
    <!-- Add fancyBox main JS and CSS files -->
+
−
    <script src="https://2016.igem.org/Team:TJUSLS_China/home/home_jquery.magnific-popup?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
−
    <link href="https://2016.igem.org/Team:TJUSLS_China/home/home_magnific-popup?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">
+
−
    <script>
+
−
        $(document).ready(function() {
+
−
            $('.popup-with-zoom-anim').magnificPopup({
+
−
                type: 'inline',
+
−
                fixedContentPos: false,
+
−
                fixedBgPos: true,
+
−
                overflowY: 'auto',
+
−
                closeBtnInside: true,
+
−
                preloader: false,
+
−
                midClick: true,
+
−
                removalDelay: 300,
+
−
                mainClass: 'my-mfp-zoom-in'
+
−
            });
+
−
        });
+
−
    </script>
+
−
    <!--nav-->
+
−
    <script>
+
−
        $(function() {
+
−
            var pull = $('#pull');
+
−
            menu = $('nav ul');
+
−
            menuHeight = menu.height();
+
−
 
+
−
            $(pull).on('click', function(e) {
+
−
                e.preventDefault();
+
−
                menu.slideToggle();
+
−
            });
+
−
 
+
−
            $(window).resize(function(){
+
−
                var w = $(window).width();
+
−
                if(w > 320 && menu.is(':hidden')) {
+
−
                    menu.removeAttr('style');
+
−
                }
+
−
            });
+
−
        });
+
−
    </script>
+
−
 
+
−
    <!-- origin -->
+
−
    <script>
+
−
        buttonClick = {};
+
−
    </script>
+
−
    <title>Home</title>
+
−
    <!--<script src="js/jquery.min.js"></script>-->
+
−
    <link href="https://2016.igem.org/Team:TJUSLS_China/CSS_Home_bootstr?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" media="all">
+
−
    <link href="https://2016.igem.org/Team:TJUSLS_China/CSS_Home_style?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" media="all" />
+
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
−
    <meta name="keywords" content="Solutem  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
+
−
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
+
−
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/js/jquery-min?
+
−
action=raw&ctype=text/javascript"></script>
+
−
    <!---- start-smoth-scrolling---->
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/js/move-top?
+
−
action=raw&ctype=text/javascript"></script>
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/js/easing?
+
−
action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript">
+
−
        jQuery(document).ready(function($) {
+
−
            $(".scroll").click(function(event){
+
−
                event.preventDefault();
+
−
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
+
−
            });
+
−
        });
+
−
    </script>
+
−
    <!---End-smoth-scrolling---->
+
−
    <link href="https://2016.igem.org/Team:TJUSLS_China/CSS_Home_component?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"  />
+
−
    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/js/modernizr.custom?
+
−
action=raw&ctype=text/javascript"></script>
+
 
</head>
 
</head>
 
<style>
 
<style>
−
     #bodyContent h2 {
+
     .sec-list-wenzi .sec-wenzi-list {
−
        font-size: 2em;
+
−
    }
+
  
−
    .cbp-spmenu-push-toleft {
+
        text-align: left;
−
        left: -115px;
+
 
     }
 
     }
−
 
+
     .sec-list-wenzi{
−
     #content {
+
         text-align: center;
−
        width: 100%;
+
−
        padding: 15px;
+
−
        border: none;
+
−
        color: black;
+
−
        margin-left: 20px;
+
−
        margin-right: auto;
+
−
         background-color: #ffffff;
+
−
        position: relative;
+
 
     }
 
     }
 +
 +
    #content{width:100%;padding:0px;margin:0px;background-color: #ededed;}
 
     #sideMenu, #top_title
 
     #sideMenu, #top_title
 
     {
 
     {
 
         display: none;
 
         display: none;
 +
    }
 +
    body{font: 16px sans-serif;}
 +
    .footer_bg .footer {
 +
        padding: 0;
 +
        border-top: 6px solid #222222;
 +
    }
 +
    .footer_bg .footer_btm {
 +
        margin-top: 4%;
 +
        border-top: none;
 +
        padding: 2% 4%;
 +
        padding-top: 2%;
 +
        max-width: 1458px;
 +
        margin: 0 auto;
 +
    }
 +
    .sec-list-wenzi h3 {
 +
 +
        text-align: left;
 
     }
 
     }
  
−
     .right10{
+
     .sec-list-wenzi h2 {
−
         right: 10px;
+
         font-size: 35px;
 +
        color: #6AA788;
 +
        padding-top: 30px;
 
     }
 
     }
−
     .right190{
+
     .sec-list-wenzi h4 {
−
         right: 190px;
+
         color: #6AA788;
 +
        padding-top: 30px;
 
     }
 
     }
  
 +
    .sec-list-wenzi .sec-wenzi-content {
 +
 +
        text-align: left;
 +
        font-family: Microsoft YaHei;
 +
    }
 
</style>
 
</style>
 
<body>
 
<body>
−
<div class="cbp-spmenu-push" id="body">
+
<!--menu-->
−
    <div class="header_bg">
+
<div class="header-box">
−
        <div class="wrap">
+
    <div class="header">
−
            <div class="header">
+
        <!-- start h_menu4 -->
−
                <div class="logo">
+
        <div class="h_menu4">
−
                    <a href="index.html"><img src="images/logo.png" alt="" /></a>
+
            <a class="toggleMenu" href="">Menu</a>
−
                </div>
+
            <ul id="top_ul_my" class="nav">
−
                <!-- start h_menu4 -->
+
                <script>
−
                <div class="h_menu4">
+
                    function getHover(number){
−
                    <a class="toggleMenu" href="">Menu</a>
+
                        var top_ul_my_lis = $("#top_ul_my").find(">li");
−
                    <ul id="top_ul_my" class="nav">
+
                        console.log(top_ul_my_lis);
−
                        <script>
+
                        if(number == 0) top_ul_my_lis[0].setAttribute("class", "active hover");
−
                            function getHover(number){
+
                        else top_ul_my_lis[0].setAttribute("class", "active");
−
                                var top_ul_my_lis = $("#top_ul_my").find(">li");
+
−
                                if(number == 0) top_ul_my_lis[0].setAttribute("class", "active hover");
+
−
                                else top_ul_my_lis[0].setAttribute("class", "active");
+
  
−
                                for(var i = 1; i < top_ul_my_lis.length; i++){
+
                        for(var i = 1; i < top_ul_my_lis.length; i++){
−
                                    if(i == number) {
+
                            if(i == number) {
−
                                        top_ul_my_lis[i].setAttribute("class", "hover");
+
                                top_ul_my_lis[i].setAttribute("class", "hover");
−
                                    }else{
+
                            }else{
−
                                        top_ul_my_lis[i].setAttribute("class", "");
+
                                top_ul_my_lis[i].setAttribute("class", "");
−
                                    }
+
−
                                }
+
 
                             }
 
                             }
 +
                        }
 +
                    }
  
−
                            $(document).ready(function() {
+
                    $(".header").hover(function(event){
−
                                //console.log("ready");
+
                        event.stopPropagation();
−
                                var top_ul_my_lis = $("#top_ul_my").find(">li");
+
                        $('#top_ul_my li').attr("class","");
−
                                for(var i = 1; i < top_ul_my_lis.length; i++) {
+
                    });
−
                                    $(top_ul_my_lis[i]).mouseover(getHover(i));
+
−
                                }
+
−
                            });
+
  
−
                        </script>
+
                </script>
−
                        <li class="active"><a class="active" href="https://2016.igem.org/Team:TJUSLS_China/home">TJUSLS</a></li>
+
                <li onmouseover="getHover(0)"><a href="https://2016.igem.org/Team:TJUSLS_China">TJUSLS</a></li>
−
                        <li ><a href="https://2016.igem.org/Team:TJUSLS_China/Project" class="root">project</a>
+
                <li onmouseover="getHover(1)" class=""><a href="" class="root">project</a>
−
                            <ul>
+
                    <ul>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Description">Description</a></li>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Description">Description</a></li>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Design">Design</a></li>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Design">Design</a></li>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Experiments">Experiments</a></li>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Experiments">Experiments</a></li>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Proof">Proof of Concept</a></li>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Proof">Proof of Concept</a></li>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Demonstrate">Demonstrate</a></li>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Demonstrate">Demonstrate</a></li>
−
                               
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/PROJECT/PROTOCOLS">protocols</a></li>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Notebook">Notebook</a></li>
+
−
                            </ul>
+
−
                        </li>
+
−
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Parts">PARTS</a>
+
−
                            <ul>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Basic_Part">Basic Parts</a></li>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Composite_Part">Composite Parts</a></li>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Part_Collection">Part Collection</a></li>
+
  
−
                            </ul>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Notebook">Notebook</a></li>
−
                         </li>
+
                         <li><a href="https://2016.igem.org/Team:TJUSLS_China/Results">Results</a></li>
−
<li><a href="https://2016.igem.org/Team:TJUSLS_China/Modeling">MODELING</a>
+
                    </ul>
−
                            <ul>
+
                </li>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Modeling">Modeling</a></li>
+
                <li onmouseover="getHover(2)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Parts">PARTS</a>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Software">Software</a></li>
+
                    <ul>
−
                             
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Basic_Part">Basic Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Composite_Part">Composite Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Part_Collection">Part Collection</a></li>
  
−
                            </ul>
+
                    </ul>
−
                        </li>
+
                </li>
−
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Safety">SAFETY</a></li>
+
                <li class="active" onmouseover="getHover(3)"><a class="active" href="https://2016.igem.org/Team:TJUSLS_China/Safety">SAFETY</a></li>
−
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Attributions">ATTRIBUTIONS</a>
+
                <li onmouseover="getHover(4)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Attributions">ATTRIBUTIONS</a>
−
                        </li>
+
  
−
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Human_Practices">HUMAN PRACTICES</a>
+
                </li>
−
                            <ul>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/HP/Silver">Silver</a></li>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/HP/Gold">Gold</a></li>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Integrated_Practices">Integrated Practices</a></li>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Engagement">Engagement</a></li>
+
−
                             
+
  
−
                            </ul>
+
                <li onmouseover="getHover(5)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Human_Practices">HUMAN PRACTICES</a>
−
</li>
+
                    <ul>
−
                       
+
                         <li><a href="https://2016.igem.org/Team:TJUSLS_China/HP/Silver">Silver</a></li>
−
                         <li><a href="https://2016.igem.org/Team:TJUSLS_China/Team">TEAM</a>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/HP/Gold">Gold</a></li>
−
 
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Integrated_Practices">Integrated Practices</a></li>
−
                            <ul>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Engagement">Engagement</a></li>
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Team">Team</a></li>
+
−
                                <li><a href="https://2016.igem.org/Team:TJUSLS_China/Collaborations">Collaborations</a></li>
+
−
                            </ul>
+
−
                        </li>
+
 
                     </ul>
 
                     </ul>
−
                    <script type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_nav?action=raw&ctype=text/javascript"></script>
+
                </li>
−
                 </div>
+
                <li onmouseover="getHover(6)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Modeling">MODELING</a>
−
                 <!-- end h_menu4 -->
+
                    <ul>
 +
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Modeling">Modeling</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Software">Software</a></li>
 +
                    </ul>
 +
                 </li>
 +
                 <li onmouseover="getHover(7)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Team">TEAM</a>
  
−
                <div class="clear"></div>
+
                    <ul>
−
             </div>
+
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Team">Team</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:TJUSLS_China/Collaborations">Collaborations</a></li>
 +
                    </ul>
 +
                </li>
 +
             </ul>
 +
            <!--<script type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_nav?action=raw&amp;ctype=text/javascript"></script>-->
 
         </div>
 
         </div>
 +
        <!-- end h_menu4 -->
 +
        <div class="clear"></div>
 
     </div>
 
     </div>
 +
    <div class="sec-menu">
 +
        <img class="sec-menu-dot" src="https://static.igem.org/mediawiki/2016/f/f9/T--TJUSLS_China--sec-menu.png"/>
 +
        <img class="sec-menu-close" src="https://static.igem.org/mediawiki/2016/b/b5/T--TJUSLS_China--sec-menu-close.png"/>
 +
        <ul>
 +
            <li><a href="#part1">Introduction</a></li>
 +
            <li><a href="#part2">Run the Software</a></li>
 +
            <li><a href="#part3">Operation</a></li>
 +
            <li><a href="#part4">Code</a></li>
 +
        </ul>
 +
    </div>
 +
</div>
 +
<!--title-->
 +
<div class="second-title">
 +
    Software
 +
    <div class="second-title-img">
 +
        <img src="https://static.igem.org/mediawiki/2016/8/86/T--TJUSLS_China--second-logo.png"/>
 +
    </div>
 +
</div>
 +
<!--content-->
 +
<div class="second-content">
 +
    <div class="sec-list-wenzi">
 +
        <div class="fengmian">
 +
            <h2>Operation Guide Book of Calculate Software</h2>
 +
            <br><br><br><br><br>
 +
            <h4>TJUSLS_China Modeling Group</h4>
 +
        </div>
 +
        <h3 id="part1">Introduction</h3>
 +
        <div class="sec-wenzi-content">We utilize High Performance Liquid Chromatography (HPLC) in gaining the production. Our experiment needs a mass of HPLC data. However, it is not convenient to use the integrating software of HPLC apparatus. So we developed a software to process HPLC data using the MATLAB GUI module.
 +
            <br>Our software can calculate peak area of any substance by the raw data of HPLC conveniently and accurately. It can display the image details saved at any period of time. It also can automatically identify substance peak and calculate the area. In addition, we can manually select the range of the area calculated. What’s more, in order to facilitate the analysis, it can store the results of calculations in a same file which contains the filename of the HPLC data.
 +
        </div>
  
−
    <!--header-banner-->
+
        <h3 id="part2">Run the Software</h3>
−
    <div class="header-banner">
+
        <img src="https://static.igem.org/mediawiki/2016/b/b5/T--TJUSLS_China--software_new1.png" height="500" width="600">
−
         <div class="banner-grids">
+
         <div class="sec-wenzi-content">On the pop-up window “GUIDE Quick Start”, choose the “Open Existing GUI”, click “Browse” button. Find the software downloaded and open it. (<a href="https://2016.igem.org/File:T--TJUSLS_China--user.zip">Download link</a>) </div>
−
            <div class="baneer-grid1">
+
  
−
            </div>
+
        <img src="https://static.igem.org/mediawiki/2016/a/a0/T--TJUSLS_China--software_new2.png" height="500" width="600">
−
            <div class="baneer-grid2">
+
  
−
            </div>
+
        <img src="https://static.igem.org/mediawiki/2016/a/a7/T--TJUSLS_China--software_new3.png" height="500" width="600">
−
            <div class="baneer-grid3">
+
  
−
            </div>
+
        <div class="sec-wenzi-content">Finally, click “▶” (Run Figure) button on the “fig” window. The software is open.
 +
</div>
  
−
            <div class="clearfix"></div>
+
         <img src="https://static.igem.org/mediawiki/2016/d/dc/T--TJUSLS_China--software_new4.png" height="500" width="600">
−
         </div>
+
−
        <div class="top-header">
+
−
            <div class="container">
+
−
                <div class="logo">
+
−
                    <a href="index.html">TJUSLS</a>
+
−
                </div>
+
−
                <div class="top-nav">
+
−
                    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
+
−
                        <h3>Modeling</h3>
+
−
                        <a href="https://2016.igem.org/wiki/index.php?title=Team:TJUSLS_China" class="active">home</a>
+
−
                        <a href="#part1">part1</a>
+
−
                        <a href="#part2">part2</a>
+
−
                        <a href="#part3">part3</a>
+
−
                        <a href="#part4">part4</a>
+
−
                        <a href="#part5">part5</a>
+
−
                    </nav>
+
−
                    <div class="main buttonset">
+
−
                        <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
+
−
                        <button id="showrightpush" onclick="buttonClick.showRightPush()"><img src="https://static.igem.org/mediawiki/2016/f/f6/Menu-icon.png" alt=""/></button>
+
−
                        <!--<span class="menu"></span>-->
+
−
                    </div>
+
−
                    <script>
+
−
                        buttonClick.swapClass=function(id, classa, classb){
+
−
                            var body = $("#"+id);
+
−
                            var classnames = body.attr("class").split(" ");
+
−
                            var isFirst = true;
+
−
                            var newclassname = "";
+
−
                            for(i=0; i < classnames.length; i++){
+
−
                                if(classnames[i] == "") continue;
+
−
                                if(classnames[i] == classa){
+
−
                                    newclassname += " " + classb;
+
−
                                    isFirst = false;
+
−
                                }else if(classnames[i] == classb){
+
−
                                    newclassname += " " + classa;
+
−
                                    isFirst = false;
+
−
                                }else{
+
−
                                    newclassname += " " + classnames[i];
+
−
                                }
+
−
                            }
+
−
                            if(isFirst) newclassname += " " + classa;
+
−
                            body.attr("class", newclassname);
+
−
                        };
+
−
                        buttonClick.showRightPush=function(){
+
−
                            buttonClick.swapClass('body', 'cbp-spmenu-push-toleft', '');
+
−
                            buttonClick.swapClass('cbp-spmenu-s2', 'cbp-spmenu-open', '');
+
−
                            buttonClick.swapClass('toTop', 'right190', 'right10');
+
−
                        }
+
−
                    </script>
+
  
−
                    <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
+
        <div class="sec-wenzi-content">
−
                    <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/js/classie?
+
         If the GUIDE window pop-up, click the “Change Folder” button.</div>
−
action=raw&ctype=text/javascript"></script>
+
        <img src="https://static.igem.org/mediawiki/2016/b/b4/T--TJUSLS_China--software_new5.png" height="500" width="600">
−
                    <!-- /script-for-menu -->
+
        <h3 id="part3">Operation</h3>
−
                </div>
+
        <div class="sec-wenzi-list">Names and Functions of Parts</div>
−
                <div class="clearfix"> </div>
+
−
            </div>
+
−
        </div>
+
−
    </div>
+
−
    <!--end-header-->
+
−
    <div class="content">
+
−
         <!--welcome-->
+
−
        <!--<div class="welcome">
+
−
            <div class="container">
+
−
                <div class="welcome-grid">
+
−
                    <div class="col-md-6 welcom-grid">
+
−
                        <img src="https://static.igem.org/mediawiki/2016/f/fd/Img7.jpg" class="img-responsive" alt="/">
+
−
                    </div>
+
−
                    <div class="col-md-6 welcom-grid1">
+
−
                        <h3>welcome!</h3>
+
−
                        <p>Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus.Dolor nunc vule putateulr ips dol consec.Donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam accumsan dolore. </p>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
  
−
         </div>-->
+
         <img src="https://static.igem.org/mediawiki/2016/6/67/T--TJUSLS_China--software_new6.png" height="500" width="600">
−
        <!--end-welcome-->
+
−
        <!--charities-->
+
−
        <!--<div class="charities">
+
−
            <div class="container">
+
−
                <h3>our charities</h3>
+
−
                <div class="charitie-grids">
+
−
                    <div class="col-md-3 charitie-grid">
+
−
                        <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
+
−
                        <h4>Adoption Child</h4>
+
−
                        <p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
+
−
                    </div>
+
−
                    <div class="col-md-3 charitie-grid">
+
−
                        <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
+
−
                        <h4>Charity actions</h4>
+
−
                        <p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
+
−
                    </div>
+
−
                    <div class="col-md-3 charitie-grid">
+
−
                        <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+
−
                        <h4>Child Protection</h4>
+
−
                        <p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
+
−
                    </div>
+
−
                    <div class="col-md-3 charitie-grid">
+
−
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+
−
                        <h4>Pellentesque sed</h4>
+
−
                        <p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
+
−
                    </div>
+
−
                    <div class="clearfix"></div>
+
−
                </div>
+
−
            </div>
+
−
        </div>-->
+
−
        <!--charities-->
+
−
        <!--<div class="Testimonials" id="testimonials">
+
−
            <div class="container">
+
−
                <div class="testimonial-header">
+
−
                    <h3>testimonial</h3>
+
−
                </div>
+
−
                <div class="test-monials">
+
−
                    &lt;!&ndash; start content_slider &ndash;&gt;
+
−
                    <div id="owl-demo" class="owl-carousel">
+
−
                        <div class="item">
+
−
                            <div class="testmonial-text">
+
−
                                <p>Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. </p>
+
−
                                <h4><a href="#">John Doe</a></h4>
+
−
                            </div>
+
−
                            <div class="clearfix"> </div>
+
−
                        </div>
+
−
                        <div class="item">
+
−
                            <div class="testmonial-text">
+
−
                                <p>Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante.</p>
+
−
                                <h4><a href="#">Mark Trand</a></h4>
+
−
                            </div>
+
−
                            <div class="clearfix"> </div>
+
−
                        </div>
+
−
                        <div class="item">
+
−
                            <div class="testmonial-text">
+
−
                                <p>Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante.</p>
+
−
                                <h4><a href="#">John Doe</a></h4>
+
−
                            </div>
+
−
                            <div class="clearfix"> </div>
+
−
                        </div>
+
  
−
                    </div>
+
        <div class="sec-wenzi-content"><p style="text-align: center">Picture 1: interface of the software</p></div>
  
−
                    &lt;!&ndash;&#45;&#45;sreen-gallery-cursual&#45;&#45;&ndash;&gt;
+
        <div class="sec-wenzi-content">Menu bar: The functions of opening a new data file and close the window are available here in menu format.
−
                    <div class="sreen-gallery-cursual">
+
−
                        &lt;!&ndash; requried-jsfiles-for owl &ndash;&gt;
+
−
                        <link rel="stylesheet" href="https://2016.igem.org/Team:TJUSLS_China/CSS_Home_owl_carousel?action=raw&amp;ctype=text/css">
+
−
                        <script language="javascript" type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/js/owl_carousel?action=raw&amp;ctype=text/javascript"></script>
+
−
                        <script>
+
−
                            $(document).ready(function() {
+
−
                                $("#owl-demo").owlCarousel({
+
−
                                    items : 1,
+
−
                                    lazyLoad : true,
+
−
                                    autoPlay : true,
+
−
                                    navigation : false,
+
−
                                    navigationText :  false,
+
−
                                    pagination : true,
+
−
                                });
+
−
                            });
+
−
                        </script>
+
−
                        &lt;!&ndash; //requried-jsfiles-for owl &ndash;&gt;
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
        </div>-->
+
−
        <!---- testmonials ---->
+
−
        <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >aaaa</a></div>
+
−
        <!--event-water-->
+
−
        <div class="event">
+
−
            <div class="container">
+
−
                <h3>Recent from the event</h3>
+
−
                <div class="event-grids">
+
−
                    <div class="col-md-4 event-grid">
+
−
                        <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg"  class="img-responsive" alt="/">
+
−
                        <p class="link">09/05/2015 by<a href="#">Admin</a>13 comments</p>
+
−
                        <h4><a href="#">Vestibulum iaculis</a></h4>
+
−
                        <p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing.</p>
+
−
                    </div>
+
−
                    <div class="col-md-4 event-grid">
+
−
                        <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg"  class="img-responsive" alt="/">
+
−
                        <p class="link">19/8/2013 by<a href="#">Admin</a>10 comments</p>
+
−
                        <h4><a href="#">Pellentesque sed dolor</a></h4>
+
−
                        <p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing.</p>
+
−
                    </div>
+
−
                    <div class="col-md-4 event-grid">
+
−
                        <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg"  class="img-responsive" alt="/">
+
−
                        <p class="link">29/9/2015 by<a href="#">Admin</a>09 comments</p>
+
−
                        <h4><a hrf="#">Vestibulum iaculis</a></h4>
+
−
                        <p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing.</p>
+
−
                    </div>
+
−
                    <div class="clearfix"></div>
+
−
                    <div style="background-color: #eee">
+
−
                        <div id="part1">
+
−
                            <p>
+
−
                                1111111111111111111111111111111111111111111111111
+
−
                                PETase
+
−
                                PET降解酶发现于一种以PET为主要碳源的微生物（Ideonella sakaiensis 201-F6），该酶能将大分子聚合物降解为单体。表面展示技术是通过目的蛋白或多肽的编码基因与锚定蛋白的基因融合，通过融合蛋白的后翻译、折叠，将目的蛋白展示在宿主细胞壁的表面，从而获得全细胞催化剂的一种方法。我团队课题以PETase为主体，利用表面展示技术，从三个方面进行研究：
+
−
                                第一，通过蛋白质晶体学以及X射线衍射技术来解析PETase的结构，找到酶的催化中心和结合中心，并依据其结构特性指导突变位点的选择，从而对PETase进行定向突变以提高其降解效率和热稳定性；第二，将其进行原核（大肠杆菌）和真核（毕赤酵母）表面展示以进行全细胞酶催化反应。第三，将其与疏水蛋白在毕赤酵母中进行融合分泌，利用疏水蛋白两面性中的强疏水性为PET降解反应提供疏水环境以促进降解效率。同时，将疏水蛋白与PETase在毕赤酵母中进行共展示，利用疏水蛋白能改造细胞表面性质以适应极端环境的特点进一步提高全细胞催化剂的降解效率，打破了反应条件的限制，极大地拓宽了PETase降解反应的条件，以实现PETase的工业应用。
+
−
                            </p>
+
−
                            <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg" alt="/">
+
−
                        </div>
+
  
−
                        <div id="part2">
+
            <br>Filename display bar: Display the opened filename.
−
                            <p>
+
−
                                2222222222222222222222222222222222222222222222222
+
−
                                PETase
+
−
                                PET降解酶发现于一种以PET为主要碳源的微生物（Ideonella sakaiensis 201-F6），该酶能将大分子聚合物降解为单体。表面展示技术是通过目的蛋白或多肽的编码基因与锚定蛋白的基因融合，通过融合蛋白的后翻译、折叠，将目的蛋白展示在宿主细胞壁的表面，从而获得全细胞催化剂的一种方法。我团队课题以PETase为主体，利用表面展示技术，从三个方面进行研究：
+
−
                                第一，通过蛋白质晶体学以及X射线衍射技术来解析PETase的结构，找到酶的催化中心和结合中心，并依据其结构特性指导突变位点的选择，从而对PETase进行定向突变以提高其降解效率和热稳定性；第二，将其进行原核（大肠杆菌）和真核（毕赤酵母）表面展示以进行全细胞酶催化反应。第三，将其与疏水蛋白在毕赤酵母中进行融合分泌，利用疏水蛋白两面性中的强疏水性为PET降解反应提供疏水环境以促进降解效率。同时，将疏水蛋白与PETase在毕赤酵母中进行共展示，利用疏水蛋白能改造细胞表面性质以适应极端环境的特点进一步提高全细胞催化剂的降解效率，打破了反应条件的限制，极大地拓宽了PETase降解反应的条件，以实现PETase的工业应用。
+
−
                            </p>
+
−
                            <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg" alt="/">
+
−
                        </div>
+
−
                        <div id="part3">
+
−
                            <p>
+
−
                                333333333333333333333333333333333333333333333333
+
−
                                PETase
+
−
                                PET降解酶发现于一种以PET为主要碳源的微生物（Ideonella sakaiensis 201-F6），该酶能将大分子聚合物降解为单体。表面展示技术是通过目的蛋白或多肽的编码基因与锚定蛋白的基因融合，通过融合蛋白的后翻译、折叠，将目的蛋白展示在宿主细胞壁的表面，从而获得全细胞催化剂的一种方法。我团队课题以PETase为主体，利用表面展示技术，从三个方面进行研究：
+
−
                                第一，通过蛋白质晶体学以及X射线衍射技术来解析PETase的结构，找到酶的催化中心和结合中心，并依据其结构特性指导突变位点的选择，从而对PETase进行定向突变以提高其降解效率和热稳定性；第二，将其进行原核（大肠杆菌）和真核（毕赤酵母）表面展示以进行全细胞酶催化反应。第三，将其与疏水蛋白在毕赤酵母中进行融合分泌，利用疏水蛋白两面性中的强疏水性为PET降解反应提供疏水环境以促进降解效率。同时，将疏水蛋白与PETase在毕赤酵母中进行共展示，利用疏水蛋白能改造细胞表面性质以适应极端环境的特点进一步提高全细胞催化剂的降解效率，打破了反应条件的限制，极大地拓宽了PETase降解反应的条件，以实现PETase的工业应用。
+
−
                            </p>
+
−
                            <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg" alt="/">
+
−
                        </div>
+
−
                        <div id="part4">
+
−
                            <p>
+
−
                                44444444444444444444444444444444444444444444444444
+
−
                                PETase
+
−
                                PET降解酶发现于一种以PET为主要碳源的微生物（Ideonella sakaiensis 201-F6），该酶能将大分子聚合物降解为单体。表面展示技术是通过目的蛋白或多肽的编码基因与锚定蛋白的基因融合，通过融合蛋白的后翻译、折叠，将目的蛋白展示在宿主细胞壁的表面，从而获得全细胞催化剂的一种方法。我团队课题以PETase为主体，利用表面展示技术，从三个方面进行研究：
+
−
                                第一，通过蛋白质晶体学以及X射线衍射技术来解析PETase的结构，找到酶的催化中心和结合中心，并依据其结构特性指导突变位点的选择，从而对PETase进行定向突变以提高其降解效率和热稳定性；第二，将其进行原核（大肠杆菌）和真核（毕赤酵母）表面展示以进行全细胞酶催化反应。第三，将其与疏水蛋白在毕赤酵母中进行融合分泌，利用疏水蛋白两面性中的强疏水性为PET降解反应提供疏水环境以促进降解效率。同时，将疏水蛋白与PETase在毕赤酵母中进行共展示，利用疏水蛋白能改造细胞表面性质以适应极端环境的特点进一步提高全细胞催化剂的降解效率，打破了反应条件的限制，极大地拓宽了PETase降解反应的条件，以实现PETase的工业应用。
+
−
                            </p>
+
−
                            <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg" alt="/">
+
−
                        </div>
+
−
                        <div id="part5">
+
−
                            <p>
+
−
                                55555555555555555555555555555555555555555555555555
+
−
                                PETase
+
−
                                PET降解酶发现于一种以PET为主要碳源的微生物（Ideonella sakaiensis 201-F6），该酶能将大分子聚合物降解为单体。表面展示技术是通过目的蛋白或多肽的编码基因与锚定蛋白的基因融合，通过融合蛋白的后翻译、折叠，将目的蛋白展示在宿主细胞壁的表面，从而获得全细胞催化剂的一种方法。我团队课题以PETase为主体，利用表面展示技术，从三个方面进行研究：
+
−
                                第一，通过蛋白质晶体学以及X射线衍射技术来解析PETase的结构，找到酶的催化中心和结合中心，并依据其结构特性指导突变位点的选择，从而对PETase进行定向突变以提高其降解效率和热稳定性；第二，将其进行原核（大肠杆菌）和真核（毕赤酵母）表面展示以进行全细胞酶催化反应。第三，将其与疏水蛋白在毕赤酵母中进行融合分泌，利用疏水蛋白两面性中的强疏水性为PET降解反应提供疏水环境以促进降解效率。同时，将疏水蛋白与PETase在毕赤酵母中进行共展示，利用疏水蛋白能改造细胞表面性质以适应极端环境的特点进一步提高全细胞催化剂的降解效率，打破了反应条件的限制，极大地拓宽了PETase降解反应的条件，以实现PETase的工业应用。
+
−
                            </p>
+
−
                            <img src="https://static.igem.org/mediawiki/2016/7/77/B1.jpg" alt="/">
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
        <!--event-->
+
−
        <!--contact-->
+
−
        <!--    <div class="contactus">
+
−
                <div class="container">
+
−
                    <div class="contactus-grids">
+
−
                        <div class="col-md-6 contactus-grid">
+
−
                            <h3>contact us</h3>
+
  
−
                                <span>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
+
            <br>Image display field: Display the HPLC data image entirely or partly.
−
                                    for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum
+
−
                                    et Malorum" by Cicero are also reproduced in their exact original form,
+
−
                                    accompanied by English versions from the 1914 translation by H. Rackham.</span>
+
−
                            <address>
+
−
                                <p>The Company Name Inc.</p>
+
−
                                <p>7899 St Vincent Place,</p>
+
−
                                <p>Glasgow,Le 99 Pr 45.</p>
+
−
                                <p>Telephone: +1 800 603 6035</p>
+
−
                                <p>FAX: +1 800 889 9898</p>
+
−
                                <p>E-mail: <a href="mailto:example@mail.com">example@mail.com</a></p>
+
−
                            </address>
+
  
−
                        </div>
+
            <br>Operation field: When a data is input, process setting and calculate method can be selected using the mouse and the function keys located here.
−
                        <div class="col-md-6 google-map">
+
</div>
−
                        </div>
+
        <div class="sec-wenzi-list">Basic Operation</div>
−
                        <div class="clearfix"></div>
+
             <div class="sec-wenzi-list">Open a data file</div>
−
                    </div>
+
−
                </div>
+
−
            </div>-->
+
−
        <!--end-contact-->
+
−
    </div >
+
−
    <div class="footer-section">
+
−
        <div class="container">
+
−
             <div class="footer-top">
+
−
                <p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">aaa</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">aaa</a></p>
+
−
            </div>
+
−
            <script type="text/javascript">
+
−
                $(document).ready(function() {
+
−
                    /*
+
−
                    var defaults = {
+
−
                    containerID: 'toTop', // fading element id
+
−
                    containerHoverID: 'toTopHover', // fading element hover id
+
−
                    scrollSpeed: 1200,
+
−
                    easingType: 'linear'
+
−
                    };
+
−
                    */
+
  
−
                    $().UItoTop({ easingType: 'easeOutQuart' });
+
        <div class="sec-wenzi-content">Verify the data file type before open it.
  
−
                });
+
          <br> Pure data file is as picture 2; data file with text is as picture 3.
−
             </script>
+
</div>
−
             <a href="#" id="toTop" class="right10" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
+
 
 +
        <img src="https://static.igem.org/mediawiki/2016/d/d1/T--TJUSLS_China--software_new7.png" height="600" width="400">
 +
        <div class="sec-wenzi-content"><p style="text-align: center">Picture 2: pure data file</p></div>
 +
        <img src="https://static.igem.org/mediawiki/2016/2/2a/T--TJUSLS_China--software_new8.png" height="600" width="400">
 +
        <div class="sec-wenzi-content"><p style="text-align: center">Picture 3: data file with text</p></div>
 +
 
 +
        <div class="sec-wenzi-content">If the data file is with text, ensure the radio button (Data file with text) in “Setting” is selected.
 +
             <br>If the data file is pure data, ensure it is unselected.
 +
</div>
 +
 
 +
        <img src="https://static.igem.org/mediawiki/2016/8/8b/T--TJUSLS_China--software_new9.png" height="500" width="600">
 +
        <div class="sec-wenzi-content">Click the menu bar “File-open”, data file can be opened in this window.</div>
 +
        <img src="https://static.igem.org/mediawiki/2016/e/e6/T--TJUSLS_China--software_new10.png" height="400" width="600">
 +
 
 +
        <div class="sec-wenzi-content">When the filename is displayed, this file is opened successfully.</div>
 +
        <img src="https://static.igem.org/mediawiki/2016/4/49/T--TJUSLS_China--software_new11.png" height="100" width="600">
 +
 
 +
        <div class="sec-wenzi-list"> Plot the data image </div>
 +
        <div class="sec-wenzi-content">
 +
             Click the “Plot All” button, the entire data image will be displayed.</div>
 +
        <img src="https://static.igem.org/mediawiki/2016/e/ed/T--TJUSLS_China--software_new12.png" height="500" width="600">
 +
 
 +
        <div class="sec-wenzi-content">The detail of the image can be displayed when the “Plot Part” button is clicked.</div>
 +
 
 +
        <img src="https://static.igem.org/mediawiki/2016/9/92/T--TJUSLS_China--software_new13.png" height="500" width="600">
 +
        <div class="sec-wenzi-content">Its default range is 21min~22min for our objective peak is in this range.
 +
            This range can also be changed by inputting appropriate numbers in the textbox of “tmin” and “tmax”, then click the “Plot All” button, a new image can be displayed.</div>
 +
 
 +
        <img src="https://static.igem.org/mediawiki/2016/7/79/T--TJUSLS_China--software_new14.png" height="500" width="600">
 +
 
 +
        <div class="sec-wenzi-list">Calculate the peak area</div>
 +
 
 +
        <div class="sec-wenzi-content">If there is only one clear peak in this window, the peak area can be identified and calculated automatically by click the “Auto Calculate” button.</div>
 +
        <img src="https://static.igem.org/mediawiki/2016/d/d2/T--TJUSLS_China--software_new15.png" height="500" width="600">
 +
 
 +
        <div class="sec-wenzi-content">But when there are several peaks or the peak is unclear, it can’t be identified exactly. Then the manual calculate function can be used.
 +
          <br> First, click the “Manual Select” button, there will be a focus point. The range can be selected by clicking the image window.
 +
</div>
 +
        <img src="https://static.igem.org/mediawiki/2016/3/3a/T--TJUSLS_China--software_new16.png" height="500" width="600">
 +
        <div class="sec-wenzi-content">Then click the “Manual Calculate” button, peak area of the range selected can be calculated.</div>
 +
 
 +
        <img src="https://static.igem.org/mediawiki/2016/7/7f/T--TJUSLS_China--software_new17.png" height="500" width="600">
 +
 
 +
        <div class="sec-wenzi-list">Output the peak area</div>
 +
        <div class="sec-wenzi-content">Click the “Save area” button, the filename of the HPLC data and the peak area will be save into a file whose name is “Peak_area”.</div>
 +
 
 +
        <img src="https://static.igem.org/mediawiki/2016/b/b6/T--TJUSLS_China--software_new18.png" height="500" width="600">
 +
 
 +
        <img src="https://static.igem.org/mediawiki/2016/3/30/T--TJUSLS_China--software_new19.png" height="500" width="600">
 +
        <div class="sec-wenzi-content">Every time you click the “Save area” button, there will be one line data saved into this file.</div>
 +
 
 +
 
 +
        <img src="https://static.igem.org/mediawiki/2016/0/06/T--TJUSLS_China--software_new20.png" height="500" width="600">
 +
 
 +
        <h3 id="part4">Code</h3>
 +
        <div class="sec-wenzi-list">Here is our program code:</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
        <div class="clear"></div>
 +
    </div>
 +
 
 +
    <div class="wenzi-end"></div>
 +
    <div class="up"><img src="https://static.igem.org/mediawiki/2016/6/62/T--TJUSLS_China--up.jpg"/></div>
 +
</div>
 +
<!--foot-->
 +
<div class="footer_bg">
 +
    <div class="foot_wrap">
 +
        <div class="footer">
 +
            <div class="footer_btm">
 +
                <div class="copy">
 +
                    <p class="w3-link">Copyright 2016 TJUSLS</p>
 +
                </div>
 +
                <div class="clear"></div>
 +
            </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
</div>
 
</div>
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 08:48, 19 October 2016

Menu
Software

Operation Guide Book of Calculate Software






TJUSLS_China Modeling Group

Introduction

We utilize High Performance Liquid Chromatography (HPLC) in gaining the production. Our experiment needs a mass of HPLC data. However, it is not convenient to use the integrating software of HPLC apparatus. So we developed a software to process HPLC data using the MATLAB GUI module.
Our software can calculate peak area of any substance by the raw data of HPLC conveniently and accurately. It can display the image details saved at any period of time. It also can automatically identify substance peak and calculate the area. In addition, we can manually select the range of the area calculated. What’s more, in order to facilitate the analysis, it can store the results of calculations in a same file which contains the filename of the HPLC data.

Run the Software

On the pop-up window “GUIDE Quick Start”, choose the “Open Existing GUI”, click “Browse” button. Find the software downloaded and open it. (Download link)
Finally, click “▶” (Run Figure) button on the “fig” window. The software is open.
If the GUIDE window pop-up, click the “Change Folder” button.

Operation

Names and Functions of Parts

Picture 1: interface of the software

Menu bar: The functions of opening a new data file and close the window are available here in menu format.
Filename display bar: Display the opened filename.
Image display field: Display the HPLC data image entirely or partly.
Operation field: When a data is input, process setting and calculate method can be selected using the mouse and the function keys located here.
Basic Operation
Open a data file
Verify the data file type before open it.
Pure data file is as picture 2; data file with text is as picture 3.

Picture 2: pure data file

Picture 3: data file with text

If the data file is with text, ensure the radio button (Data file with text) in “Setting” is selected.
If the data file is pure data, ensure it is unselected.
Click the menu bar “File-open”, data file can be opened in this window.
When the filename is displayed, this file is opened successfully.
Plot the data image
Click the “Plot All” button, the entire data image will be displayed.
The detail of the image can be displayed when the “Plot Part” button is clicked.
Its default range is 21min~22min for our objective peak is in this range. This range can also be changed by inputting appropriate numbers in the textbox of “tmin” and “tmax”, then click the “Plot All” button, a new image can be displayed.
Calculate the peak area
If there is only one clear peak in this window, the peak area can be identified and calculated automatically by click the “Auto Calculate” button.
But when there are several peaks or the peak is unclear, it can’t be identified exactly. Then the manual calculate function can be used.
First, click the “Manual Select” button, there will be a focus point. The range can be selected by clicking the image window.
Then click the “Manual Calculate” button, peak area of the range selected can be calculated.
Output the peak area
Click the “Save area” button, the filename of the HPLC data and the peak area will be save into a file whose name is “Peak_area”.
Every time you click the “Save area” button, there will be one line data saved into this file.

Code

Here is our program code:

Copyright 2016 TJUSLS