Team:XMU-China/Notebook1

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>LinkUp - Multipurpose HTML Template</title> <link rel="icon" type="image/png" href="ima...")
 
(37 intermediate revisions not shown)
Line 15: Line 15:
<body>
<body>
-
<div id="wrapper3" style="margin-top: 40px">
+
<div id="wrapper3" style="position: relative;margin-left: 0px;left:1%;top:20px">
<style>
<style>
#wrapper2 {background:#fccccc}
#wrapper2 {background:#fccccc}
</style>
</style>
<div id="separator">
<div id="separator">
-
          
+
         <style>
 +
#separator{border-bottom:none;margin-left: -22px;}
 +
</style>
<div class="center-block">
<div class="center-block">
-
<a name="Abstract"></a>
+
<a name="Wetlab_Journal" href="https://2013.igem.org/Team:XMU-China/wetlab_journal">
-
<h3>Abstract</h3>
+
<h3>Wetlab Journal</h3></a>
       <span></span>
       <span></span>
</div>
</div>
Line 30: Line 32:
<!-- START CONTENT -->
<!-- START CONTENT -->
<div class="center-block-page clearfix">
<div class="center-block-page clearfix">
-
+
<div class="img-border">
-
<p style="font-size:20px;line-height:30px">
+
<a href="https://2013.igem.org/Team:XMU-China/wetlab_journal"><img src="https://static.igem.org/mediawiki/2013/e/ed/XMU-China_journal.png" width =385px height=300px class="border alignleft" alt="" /></a>
-
We coded two softwares by MATLAB related our experiment.<br /><br />
+
</div>
-
First one is Gene OS, the model of oscillation which simulates our circuit and compares various results with different initial conditions. This gave us a deeper understanding about the mechanism.<br /><br />
+
-
The other one is ImageMe which offers batch processing function and reduces much of time in analyzing the microfluidic images.
+
-
</p>
+
<div class="clear"></div>
<div class="clear"></div>
    <div class="clear"></div>   
    <div class="clear"></div>   
Line 46: Line 45:
<!-- END WRAPPER -->
<!-- END WRAPPER -->
-
<!-- START WRAPPER SECTION -->
+
<div id="wrapper3" style="position: absolute;margin-top: 40px;top: 82px;left: 35%;">
-
<div id="wrapper">
+
-
 
+
<style>
<style>
-
#wrapper {background:#fffccc}
+
#wrapper2 {background:#99ffcc}
-
p {font-family:Calibri ; font-size:20px ;line-height:30px;text-align: justify;}
+
</style>
</style>
-
        <div id="separator">
+
<div id="separator">
 +
       
<div class="center-block">
<div class="center-block">
-
<a name="Gene_OS"></a>
+
<a name="Protocol" href="https://2013.igem.org/Team:XMU-China/Protocol">
-
<h3>Gene Os: <small style="font-size:45px">Model of Synchronized Oscillator</small></h3>
+
<h3>Protocol</h3></a>
-
<span></span>
+
</div>
</div>
</div>
</div>
Line 63: Line 59:
<!-- START CONTENT -->
<!-- START CONTENT -->
<div class="center-block-page clearfix">
<div class="center-block-page clearfix">
-
+
<div class="img-border">
-
<div class="img-border">
+
<a href="https://2013.igem.org/Team:XMU-China/Protocol"><img src="https://static.igem.org/mediawiki/2013/c/c3/Xmu-protocol-1.png" width =385px height=300px class="border alignleft" alt="" /></a>
-
<img src="https://static.igem.org/mediawiki/2013/d/d2/Xmu-Image04.png" width =200px height=300px class="border alignleft" alt="" />
+
</div>
-
</div>
+
<div class="clear"></div>
-
<h4>Software & Function Introduction<br/><br/></h4>
+
-
<p>
+
-
Based on the DDEs,“Gene oscillate simulator” has two main modes of simulations. The basic simulation is designed for the oscillate circuit with LuxI, aiiA and LuxR, while the advanced simulation adds the effect of ndh gene. In each of the modes, users can make a series of graphs though designing the different parameters. The numbers of graphs mainly depend on the different parameters and the modes.
+
-
</p>
+
-
<div class="clear"></div><center>
+
-
<img src="https://static.igem.org/mediawiki/2013/2/2d/Xmus-Image005.png" width =350px height=300px class="border alignleft" alt="" />
+
-
<img src="https://static.igem.org/mediawiki/2013/2/2c/Xmus-Image006.png" width =350px height=300px class="border alignleft" alt="" /></center>
+
    <div class="clear"></div>   
    <div class="clear"></div>   
-
<p>
+
-
The meaning of each parameter can be displayed when click each parameter or right click each input box. For the people first use this software, we designed the “One example” function which can set the parameters suitably in a single time.<br/> <br/>
+
-
To get an idea about the different conditions in which oscillations could occur, we created a function which allows users to enter the range in which the variables should be varied and compare their results in the results. Due to the arithmetic speed, we finally apply this function in fluid flow speed and cell density, which are the most important parameters in the model. For example, people can set the cell density range from 0.1 to 0.9 with the step 0.2 by not selecting the “Fix the cell density” item.<br/> <br/>
+
-
A white noise system was coded to simulate the noisy environment in the medium. This function makes the model closer to the actual environment. Users can set the strength by clicking “add white noise” box and inputting the decibels.<br/> <br/>
+
-
A script calculates amplify and period of the oscillation is also added as an additional function. This allows our software detect and compare the characteristic of certain oscillation.<br/><br/>
+
-
After setting all the parameters, users can save and output these settings into a standard 2003 excel file through the file menu. Loading is also supported which makes more convince for transmitting the parameters.<br/> <br/>
+
-
Before draw the graphs users need to choose the plot mode when range parameters exist. For example, when set the cell density the software will ask user to draw separately or put curves with different cell density together. <br/> <br/>
+
-
 
+
-
</p>
+
-
<div class="clear"></div><center>
+
-
<img src="https://static.igem.org/mediawiki/2013/b/b9/Xmus-Image007.png" width =300px height=300px class="border alignleft" alt="" />
+
-
<img src="https://static.igem.org/mediawiki/2013/e/e1/Xmus-Image008.png" width =550px height=300px class="border alignleft" alt="" /></center>
+
-
    <div class="clear"></div>   
+
-
<p>Then clicking the “draw” button, the software iterates over the values and plots graphs of all combinations possible for that range of values. After calculating, at most 3 kinds of graphs can be given, (1) concentration alteration of four main protein (2) fluorescence alteration under different cell density and fluid flow speed (3) amplify and period alteration under different cell density and fluid flow speed. </p>
+
-
<div class="clear"></div><center>
+
-
<img src="https://static.igem.org/mediawiki/2013/5/55/Xmus-Image009.png" width =300px height=300px class="border alignleft" alt="" />
+
-
</center>
+
-
    <div class="clear"></div> 
+
-
<p>
+
-
To protect the software and computer, we designed an error-stop system which could stop the simulation as soon as one error was detected. This system also is called when users click “cancel” button to stop the calculation. But different with error happened; this stop process takes about 1 min.
+
-
 
+
-
The arithmetic speed of this software depends on the complexity of the parameters. Choosing both cell density range and fluid flow range to calculate can sometimes take more than 10 minutes. It is mainly because the large numbers of nested for-loops in the script and the slowly calculate speed about MATLAB core.<br /><br /></p>
+
-
<p>You can download the MATLAB code <a href="https://static.igem.org/mediawiki/2013/8/8c/XMU-China_GeneOS.zip" style="Font-size:19px">here</a>.
+
-
</p>
+
</div><!-- .center-block-page -->
</div><!-- .center-block-page -->
Line 104: Line 70:
</div><!-- #wrapper -->
</div><!-- #wrapper -->
-
<!-- END WRAPPER -->    
+
<!-- END WRAPPER -->
 +
 
-
<div id="wrapper1">
+
<div id="wrapper3" style="position: absolute;margin-top: 40px;top: 82px;left: 69%;">
<style>
<style>
-
#wrapper1 {background:#cfffcd}
+
#wrapper2 {background:#ffcc99}
</style>
</style>
<div id="separator">
<div id="separator">
 +
       
<div class="center-block">
<div class="center-block">
-
<a name="ImageMe"></a>
+
 
-
<h3>ImageMe: <small style="font-size:45px">Microfluidic Image Analyser</ small></h3>
+
<a name="Calendar" href="https://2013.igem.org/Team:XMU-China/Calendar">
-
<span></span>
+
<h3>Calendar</h3></a>
 +
      <span></span>
</div>
</div>
</div>
</div>
Line 121: Line 90:
<div class="center-block-page clearfix">
<div class="center-block-page clearfix">
-
+
<div class="img-border">
-
<div class="img-border">
+
<a href="https://2013.igem.org/Team:XMU-China/Calendar"><img src="https://static.igem.org/mediawiki/2013/6/6d/Xmu-Calender.jpg" width =385px height=300px class="border alignleft" alt="" /></a>
-
<img src="https://static.igem.org/mediawiki/2013/6/65/Xmus-Image010.png" width =200px height=300px class="border alignleft" alt="" />
+
</div>
-
</div>
+
<div class="clear"></div>
-
<h4>Background<br/><br/></h4>
+
    <div class="clear"></div>  
-
<p>
+
-
 
+
-
We usually got a great number of fluorescent images every time when we finished the 8-hours-long microfluidic experiment. However, to get the data we have to calculate each tray in each image though using the software. What’s worse, the software could only process one image each time. Obviously, a more humanized software is needed if we do not want to spend much time on the manual work.</p>
+
-
<div class="clear"></div>
+
-
<h4>Coding in MATLAB<br/><br/></h4>
+
-
    <div class="clear"></div> 
+
-
<p>
+
-
As we have not found such software on the net, we decided to design our own software. Thus, we used MATLAB coding the script and designed the user interface again for easy use.<br/><br/>
+
-
We called this one “ImageMe” which was related with our team name. The most advantage of ImageMe is that it can analyze all the trays in the all images once.<br/><br/>
+
-
 
+
-
</p>
+
-
<div class="clear"></div>
+
-
<h4>Arithmetic<br/><br/></h4>
+
-
<div class="clear"></div>
+
-
<p>
+
-
Thanks to the powerful image processing ability of MATLAB, the main arithmetic is concise and efficient. First ImageMe changes the 256-color image to gray scale image and then uses edge processing to make the edge of each tray easier to detect. This process also reduces the negative effect of the background. The final step is to calculate the total gray level using numerical integration.
+
-
 
+
-
</p>
+
-
<img src="https://static.igem.org/mediawiki/2013/2/2d/Xmus-Image011.png" width =200px height=200px class="border alignleft" alt="" />
+
-
<div class="clear"></div>
+
-
<h4>Software & function introduction<br/><br/></h4>
+
-
<div class="clear"></div>
+
-
<p>Comparing with the Gene OS, ImageMe has more concise interface arrangement and easier to use. Click “Start” to enter the main interface.<br/></p>
+
-
<div class="clear"></div>
+
-
<img src="https://static.igem.org/mediawiki/2013/a/aa/Xmus-Image012.png" width =200px height=200px class="border alignleft" alt="" /><div class="clear"></div>
+
-
<p>This is the main interface of ImageMe. Here, users can load the images by clicking the “Load” bottom and then choose the images. Then, ImageMe will pre-read all the images with “.jpg” suffix in this root directory. Make sure that no other .jpg images exist in the same folder. Click “Remove” bottom before changing the images to be analyzed.<br/><br/>
+
-
 
+
-
After clicking the “Begin” bottom, ImageMe will ask users to input two parameters (which are also the only two need to input through the whole process) to assist the analysis more correctly. The two parameters are very easy to get comparing with those in Gene OS. First one is the lines of the trays and the second one is the rows. To get correct and precise results, please do not change the view or magnification times while taking images.<br/><br/></p>
+
-
<div class="clear"></div>
+
-
<img src="https://static.igem.org/mediawiki/2013/4/4c/Xmu-Image013.png" width =300px height=250px class="border alignleft" alt="" />
+
-
<img src="https://static.igem.org/mediawiki/2013/2/25/Xmu-Image014.png" width =450px height=250px class="border alignleft" alt="" />
+
-
<img src="https://static.igem.org/mediawiki/2013/0/09/Xmus-Image015.png" width =800px height=250px class="border alignleft" alt="" /><div class="clear"></div>
+
-
<p>It is common that some images are indistinct or the edges are difficult to detect. When these situations occur to one image, ImageMe will use fuzzy calculation to analyze this one and make sure the result has the most correctness. <br/><br/>
+
-
The real time message will be written on the screen when some indistinct images are detected or some errors happened.<br/><br/>
+
-
If the analysis finished successfully, the graphs will show on the screen automatically. At most 2 kinds of graphs can be given, (1) fluorescence strength change in each tray (2) fluorescence strength change in each line.<br/><br/>
+
-
</p>
+
-
<p>You can download the MATLAB code <a href="https://static.igem.org/mediawiki/2013/0/0e/XMU-China_ImageMe.zip" style="Font-size:19px">here</a>. A package of text images is included.
+
-
</p>
+
-
 
+
</div><!-- .center-block-page -->
</div><!-- .center-block-page -->
Line 170: Line 101:
</div><!-- #wrapper -->
</div><!-- #wrapper -->
-
<!-- END WRAPPER -->  
+
<!-- END WRAPPER -->
 +
 
Line 178: Line 110:
  <div class="clear"></div>   
  <div class="clear"></div>   
<div id="home_s4"><center>
<div id="home_s4"><center>
-
<img src="https://static.igem.org/mediawiki/2013/c/cb/Xmusoftware_sponsor1.png" width="120px" height="120px">
+
<img src="https://static.igem.org/mediawiki/2013/c/cb/Xmusoftware_sponsor1.png" width="80px" height="80px">
-
<img src="https://static.igem.org/mediawiki/2013/1/18/Xmusoftware_sponsor2.png" width="120px" height="120px">
+
<img src="https://static.igem.org/mediawiki/2013/1/18/Xmusoftware_sponsor2.png" width="80px" height="80px">
-
<img src="https://static.igem.org/mediawiki/2013/7/7f/Xmusoftware_sponsor3.png" width="120px" height="120px">
+
<img src="https://static.igem.org/mediawiki/2013/6/6f/Xmu-Bg_header_mwlogo_notag.jpg" height="60px">
-
<img src="https://static.igem.org/mediawiki/2013/6/6c/Xmusoftware_sponsor4.png" width="120px" height="120px">
+
<img src="https://static.igem.org/mediawiki/2013/e/ed/Xmu-evernote.jpg" height="60px">
-
<img src="https://static.igem.org/mediawiki/2013/6/66/Xmusoftware_sponsor5.png" width="120px" height="120px">
+
-
<img src="https://static.igem.org/mediawiki/2013/7/77/Xmusoftware_sponsor6.png" width="120px" height="120px">
+
</center></div>
</center></div>
<div id="footer-menu">
<div id="footer-menu">
Line 193: Line 123:
<li><a href="https://2013.igem.org/Team:XMU-China/Notebook">Notebook</a></li>
<li><a href="https://2013.igem.org/Team:XMU-China/Notebook">Notebook</a></li>
                 <li><a href="https://2013.igem.org/Team:XMU-China/Software">Software</a></li>
                 <li><a href="https://2013.igem.org/Team:XMU-China/Software">Software</a></li>
-
<li><a href="https://2013.igem.org/Team:XMU-China/Human Practice">Human Practice</a></li>
+
<li><a href="https://2013.igem.org/Team:XMU-China/Human_Practice">Outreach</a></li>
<li><a href="https://2013.igem.org/Team:XMU-China/Safety">Safety</a></li>
<li><a href="https://2013.igem.org/Team:XMU-China/Safety">Safety</a></li>
 +
                <li style="margin-left: 450px"><a href="https://2013.igem.org/Team:XMU-China/Team1#Attribution">Contact us</a></li>
</ul>
</ul>
-
<div class="copyright">&copy; Copyright &copy; 2013.XMU-China iGEM All rights reserved.</div>
+
<div class="copyright" style="margin-right: -150px">&copy; Copyright 2013.XMU-China iGEM All rights reserved.</div>
</div><!-- .center-block -->
</div><!-- .center-block -->
</div><!-- #footer-menu -->
</div><!-- #footer-menu -->
<!-- END FOOTER MENU  -->
<!-- END FOOTER MENU  -->
</body>
</body>
 +
<style>
 +
.center-block-page {width:400px}
 +
#wrapper3 {width:400px}
 +
body {height: 800px}
 +
/* global setting*/
 +
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;}
 +
#content{
 +
    background-color:#c2edf4;
 +
    border:none;
 +
    width:1340px;
 +
    height:auto;
 +
    marign:0 auto;
 +
    padding:0 0 0 0;
 +
    top:0px;
 +
    }
 +
#bodyContent{
 +
    background-color:#c2edf4;}
 +
</style>
 +
</html>
</html>

Latest revision as of 12:03, 28 October 2013

LinkUp - Multipurpose HTML Template

Wetlab Journal

Retrieved from "http://2013.igem.org/Team:XMU-China/Notebook1"