Team:iHKU/software

From 2008.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
-
#content{
+
body{
-
padding:0px;
+
background-color: black;
}
}
-
table{<html>
 
-
<style>
 
#content{
#content{
padding:0px;
padding:0px;
 +
width:975px;
}
}
table{
table{
Line 42: Line 41:
#main
#main
{
{
-
width:965px;
+
width:975px;
-
         background-image:url(https://static.igem.org/mediawiki/2008/9/98/Bg.jpg);
+
         background-image:url(https://static.igem.org/mediawiki/2008/1/19/Bg_new.jpg);
         float:left;
         float:left;
}
}
#up1
#up1
{
{
-
width:965px;
+
width:975px;
height:25px;
height:25px;
background-image:url(https://static.igem.org/mediawiki/2008/d/d7/Up1.gif);
background-image:url(https://static.igem.org/mediawiki/2008/d/d7/Up1.gif);
Line 55: Line 54:
#down1
#down1
{
{
-
width:965px;
+
width:975px;
float:left;
float:left;
}
}
Line 73: Line 72:
width:230px;
width:230px;
height:600px;
height:600px;
 +
        background-image:url(https://static.igem.org/mediawiki/2008/8/8b/Leftside.jpg);
}
}
#left_extend
#left_extend
Line 83: Line 83:
#down1right
#down1right
{
{
-
width:700px;
+
width:745px;
float:left;
float:left;
}
}
Line 93: Line 93:
#rightside
#rightside
{
{
-
width:20px;
+
width:40px;
-
         float:left;
+
height:700px;
 +
         float:right;
 +
        background-image:url(https://static.igem.org/mediawiki/2008/7/7e/Rightside.jpg);
}
}
#rightsidepic
#rightsidepic
{
{
-
width: 20px;
+
width: 40px;
height: 746px;
height: 746px;
background-image:url(https://static.igem.org/mediawiki/2008/7/7e/Rightside.jpg);
background-image:url(https://static.igem.org/mediawiki/2008/7/7e/Rightside.jpg);
Line 104: Line 106:
#right_extend
#right_extend
{
{
-
width:20px;
+
width:40px;
background-image:url(https://static.igem.org/mediawiki/2008/6/6b/Rightext.jpg);
background-image:url(https://static.igem.org/mediawiki/2008/6/6b/Rightext.jpg);
}
}
Line 135: Line 137:
}
}
</style>
</style>
 +
  <style> 
 +
  <!-- 
 +
  a:link 
 +
  { 
 +
  color:#3366CC;
 +
  text-decoration:none 
 +
  } 
 +
  a:visited 
 +
  {
 +
  color:#FF6600;
 +
  text-decoration:none 
 +
  } 
 +
  a:hover 
 +
  { 
 +
  color:#66CCFF;text-decoration:underline 
 +
  } 
 +
  --> 
 +
  </style>
<div id="main">
<div id="main">
<div id="up1">
<div id="up1">
-
  <table width="100%" border="0">
+
<table width="100%" border="0">
         <tr>
         <tr>
-
           <th width="50%" scope="row">&nbsp;</th>
+
           <th width="61%" scope="row">&nbsp;</th>
-
           <td width="50%"><span class="style3"><a href="http://www.hku.hk/">The University of Hong Kong</a> | <a href="http://www.hku.hk/facmed/">The Faculty of Medicine</a></span></td>
+
           <td width="39%"><span class="headline"><a href="http://www.hku.hk">The University of Hong Kong</a> | <a href="http://www.hku.hk/facmed/">Li Ka Shing Faculty of Medicine</a></span></td>
         </tr>
         </tr>
       </table>
       </table>
Line 217: Line 237:
                   </tr>
                   </tr>
                 </table>
                 </table>
-
             </div>          
+
             </div>
 +
           
         </div>
         </div>
       <div id="down1right">
       <div id="down1right">
Line 223: Line 244:
             <div id="preheader"></div>
             <div id="preheader"></div>
             <div id="header"></div>
             <div id="header"></div>
-
        <div id="content1">
+
<div id="content1">
-
            <table width="100%" border="0">
+
-
                      <tr>
+
-
                      <th width="10%"><p>&nbsp;</p>
+
-
                      <p>&nbsp;</p></th>
+
-
                        <td width="80%" align="left"><h1 class="style7"><a name="top" id="top"></a>Software</h1>
+
-
                          <ol>
+
-
                            <li class="style18"><u><a href="#java">Java</a></u></li>
+
-
                            <li class="style18"><u><a href="#imagej">ImageJ</br></br></br></br></a></u><span class="style16"></li>
+
-
                          </ol>
+
-
                          <h2><span class="style16">A. Java</span></h2>
+
-
                          <p class="special">A simple Java program is used to automate  the picture capturing process.<br />
+
-
This Java program will simulate a mouse  left-click for every INTERVAL  ms, and will stop after DURATION  ms.</p>
+
-
                          <cite>import java.awt.AWTException;<br />
+
-
                            import java.awt.Robot;<br />
+
-
                          import java.awt.event.InputEvent;</br>
+
-
                          public class MouseController implements  Runnable {<br />
+
-
                            private  Robot robot; <br />
+
-
                            private  volatile boolean stop = false;<br />
+
-
                            // you can adjust these two  variables for your own needs.<br />
+
-
                            private  static int INTERVAL =  1000;<br />
+
-
                            private  static int DURATION =  15000;</br>
+
-
                          public  MouseController() { <br />
+
-
                            try { <br />
+
-
                            robot  = new Robot(); <br />
+
-
                            } catch (AWTException ex) { <br />
+
-
                            ex.printStackTrace(); <br />
+
-
                            } <br />
+
-
                            } <br />
+
-
                            public  void run() { <br />
+
-
                            while(!stop) { <br />
+
-
                            robot.mousePress(InputEvent.BUTTON1_MASK); <br />
+
-
                            robot.mouseRelease(InputEvent.BUTTON1_MASK);<br />
+
-
                            try { <br />
+
-
                            Thread.sleep(INTERVAL); <br />
+
-
                            } catch (InterruptedException ex) { <br />
+
-
                            ex.printStackTrace(); <br />
+
-
                            } <br />
+
-
                            } <br />
+
-
                            } <br />
+
-
                            public  synchronized void stop() { <br />
+
-
                            stop = true; <br />
+
-
                            } <br />
+
-
                            public  static void main(String[] args) { <br />
+
-
                            MouseController mc = new MouseController(); <br />
+
-
                            Thread mcThread = new Thread(mc); <br />
+
-
                            System.out.println(&quot;Picture capturing  started&quot;); <br />
+
-
                            mcThread.start(); <br />
+
-
                            try { <br />
+
-
                            Thread.sleep(DURATION);<br />
+
-
                            } catch (InterruptedException ex) { <br />
+
-
                            ex.printStackTrace(); <br />
+
-
                            } <br />
+
-
                            mc.stop(); <br />
+
-
                            System.out.println(&quot;Picture capturing  stopped&quot;); <br />
+
-
                            }<br />
+
-
                          }</cite>
+
-
                          <p align="right"><a href="#top">[Back to Top]</a><br />
+
-
                          </p>
+
-
                          <h2 class="style16"><a name="imagej" id="imagej"></a>B. ImageJ</h2>
+
-
                          <p clss="special">ImageJ, a  powerful medical image analyze tool, is used to measure the plate brightness.  The Region of Interest (ROI) is set to the entire plate excluding the edge area  where the high level of signal intensity caused by reflection of light source  from the plate’s side wall will distort the signal.<br />
+
-
                            The light  intensity 3D plot is achieved by using ImageJ’s interactive 3D surface plot  plug-in accompanied with the automatic mouse control program. Pattern at each  time point will be plotted and finally integrated into a real-time growth  pattern.<br />
+
-
                            For example, at  a time-point, the following pattern:</p>
+
-
                          <p align="center"><img src="/wiki/images/8/8b/Software_pic4.JPG" width="286" height="275" /></p>
+
-
                          <p>Will be plotted  like this:</p>
+
-
                          <p align="center"><img src="/wiki/images/b/b1/Software_pic5.JPG" width="286" height="286" /></p>
+
-
                          <p>and finally integrate the plot of different  time point into a single pattern growth animation.<br />
+
-
                            Furthermore, we are hoping to extend this  method of measurement to other application, like recording total band  brightness on gel photo to measure the chromosome expression level by using  ImageJ with its build-in Gel analyze function. (refer  to Roy’s design).<br />
+
-
                            The steps to  calculate the band is as follow:<br />
+
-
                            After taking the  gel photo, use image to open it. </p>
+
-
                          <p align="center"><img src="/wiki/images/1/14/Software_pic6.JPG" width="412" height="79" /></p>
+
-
                          <p>Use rectangular  tool to select the band as small as possible to just cover the band</p>
+
-
                          <div align="center"><img src="/wiki/images/d/dc/Software_pic7.JPG" width="429" height="25" />                          </div>
+
-
                          <p>Use  Analyze-Gels-Select First Lane (Or Ctrl+1)</p>
+
-
                          <p align="center"><img src="/wiki/images/6/6e/Software_pic8.JPG" width="398" height="83" /></p>
+
-
                          <p>Invert the  selected ROI</p>
+
-
                          <div align="center">
+
-
                            <p><img src="/wiki/images/6/63/Software_pic9.JPG" width="399" height="83" /></p>
+
-
                          </div>
+
-
                          <p>Use mouse  pointer to move the square selection to the second lane, select  Analyze-Gels-Plot Lane (Or Ctrl+3)</p>
+
-
                          <p align="center"><img src="/wiki/images/e/e6/Software_pic10.JPG" width="399" height="186" /></p>
+
-
                          <p>Use Straight  Line Selection tool to separate each lane</p>
+
-
                          <p align="center"><img src="/wiki/images/3/3c/Software_pic11.JPG" width="419" height="186" /></p>
+
-
                          <p align="left">Use Wand Tools to measure area of each line</p>
+
-
                          <p align="center"><img src="/wiki/images/b/be/Software_pic12.JPG" width="419" height="186" /></p>
+
-
                          <p>Finally, record  the result and plot graph</p>
+
-
                          <div align="center"><img src="/wiki/images/d/d2/Software_pic13.JPG" width="372" height="163" /></div>
+
-
                          <p align="right"><a href="#top">[Back to Top]</a></p></td>
+
-
                        <td width="10%">&nbsp;</td>
+
-
                      </tr>
+
-
</table>               
+
-
             
+
-
        </div>
+
                  
                  
-
            <div id="footer1"></div>
 
-
        </div>
 
-
           
 
-
        </div>
 
-
    </div>
 
-
</div>
 
-
</html>
 
-
 
-
background-color: transparent;
 
-
}
 
-
p
 
-
{
 
-
font-family: Calibri;
 
-
font-size: 13px;
 
-
}
 
-
p.special:first-letter
 
-
{
 
-
color:#990000;
 
-
font-size:x-large;
 
-
}
 
-
h1
 
-
{
 
-
font-family: Copperplate Gothic Bold;
 
-
font-size: 200%;
 
-
color: #993300;
 
-
}
 
-
h3
 
-
{
 
-
font-family: Copperplate Gothic Bold;
 
-
font-size: 150%;
 
-
color: #993300;
 
-
}
 
-
h2
 
-
{
 
-
font-family: Verdana;
 
-
font-size: 130%;
 
-
color: #993300;
 
-
}
 
-
#main
 
-
{
 
-
width:965px;
 
-
        background-image:url(https://static.igem.org/mediawiki/2008/9/98/Bg.jpg);
 
-
        float:left;
 
-
}
 
-
#up1
 
-
{
 
-
width:965px;
 
-
height:25px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/d/d7/Up1.gif);
 
-
float:left;
 
-
}
 
-
#down1
 
-
{
 
-
width:965px;
 
-
float:left;
 
-
}
 
-
#down1left
 
-
{
 
-
width:230px;
 
-
float:left;
 
-
}
 
-
#logo
 
-
{
 
-
width:230px;
 
-
height:150px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/d/d4/Logo.jpg);
 
-
}
 
-
#menu
 
-
{
 
-
width:230px;
 
-
height:600px;
 
-
}
 
-
#left_extend
 
-
{
 
-
width:230px;
 
-
 
-
background-image:url(https://static.igem.org/mediawiki/2008/e/ef/Leftext.jpg);
 
-
float:left;
 
-
}
 
-
#down1right
 
-
{
 
-
width:700px;
 
-
float:left;
 
-
}
 
-
#rightmain
 
-
{
 
-
width:705px;
 
-
float:left;
 
-
}
 
-
#rightside
 
-
{
 
-
width:20px;
 
-
        float:left;
 
-
}
 
-
#rightsidepic
 
-
{
 
-
width: 20px;
 
-
height: 746px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/7/7e/Rightside.jpg);
 
-
}
 
-
#right_extend
 
-
{
 
-
width:20px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/6/6b/Rightext.jpg);
 
-
}
 
-
#preheader
 
-
{
 
-
width:705px;
 
-
height:65px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/4/4e/Up2.jpg);
 
-
float:left;
 
-
}
 
-
#header
 
-
{
 
-
width:705px;
 
-
height:59px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/5/5e/Header.jpg);
 
-
float:left;
 
-
}
 
-
#content1
 
-
{
 
-
width:705px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/3/38/Contentbg.jpg);
 
-
        float: left;
 
-
}
 
-
#footer1
 
-
{
 
-
width:705px;
 
-
height:59px;
 
-
background-image:url(https://static.igem.org/mediawiki/2008/e/e9/Footer.jpg);
 
-
float:left;
 
-
}
 
-
</style>
 
-
<div id="main">
 
-
<div id="up1">
 
-
  <table width="100%" border="0">
 
-
        <tr>
 
-
          <th width="50%" scope="row">&nbsp;</th>
 
-
          <td width="50%"><span class="style3"><a href="http://www.hku.hk/">The University of Hong Kong</a> | <a href="http://www.hku.hk/facmed/">The Faculty of Medicine</a></span></td>
 
-
        </tr>
 
-
      </table>
 
-
</div>
 
-
<div id="down1">
 
-
 
-
    <div id="down1left">
 
-
        <div id="logo"></div>
 
-
            <div id="menu">
 
-
            <table width="100%" border="0">
 
-
                </table>
 
-
                <table width="100%" border="0">
 
-
 
-
                  <tr>
 
-
                    <th width="7%" height="335" scope="row">&nbsp;</th>
 
-
                    <td width="88%"><table width="100%" border="0">
 
-
                        <tr>
 
-
                          <th width="5%" scope="row">&nbsp;</th>
 
-
                          <td width="90%"><a href="/Team:iHKU/home"><img src="/wiki/images/4/44/Button_home.jpg" width="200" height="25" /></a></td>
 
-
                          <td width="5%">&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/team"><img src="/wiki/images/9/9f/Button_team.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/design"><img src="/wiki/images/1/12/Button_design.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/modeling"><img src="/wiki/images/9/9f/Button_model.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/result"><img src="/wiki/images/c/cc/Button_result.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/software"><img src="/wiki/images/7/70/Button_software.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/device"><img src="/wiki/images/6/6c/Button_devices.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/biobrick"><img src="/wiki/images/f/f0/Button_biobrick.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td><a href="/Team:iHKU/protocol"><img src="/wiki/images/f/f2/Button_protocol.jpg" width="200" height="25" /></a></td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                        <tr>
 
-
                          <th scope="row">&nbsp;</th>
 
-
                          <td>&nbsp;</td>
 
-
                          <td>&nbsp;</td>
 
-
                        </tr>
 
-
                      </table>
 
-
                      <p class="style15">&nbsp;</p>
 
-
                    </td>
 
-
                    <td width="5%">&nbsp;</td>
 
-
                  </tr>
 
-
                  <tr>
 
-
                    <th scope="row">&nbsp;</th>
 
-
                    <td>&nbsp;</td>
 
-
                    <td>&nbsp;</td>
 
-
                  </tr>
 
-
                </table>
 
-
            </div>           
 
-
        </div>
 
-
      <div id="down1right">
 
-
      <div id="rightmain">
 
-
            <div id="preheader"></div>
 
-
            <div id="header"></div>
 
-
        <div id="content1">
 
             <table width="100%" border="0">
             <table width="100%" border="0">
                       <tr>
                       <tr>
Line 545: Line 252:
                         <td width="80%" align="left"><h1 class="style7"><a name="top" id="top"></a>Software</h1>
                         <td width="80%" align="left"><h1 class="style7"><a name="top" id="top"></a>Software</h1>
                           <ol>
                           <ol>
-
                             <li class="style18"><u><a href="#java">Java</a></u></li>
+
                             <li class="style18"><a href="#java">Java</a></li>
-
                             <li class="style18"><u><a href="#imagej">ImageJ</a></u><span class="style16"></li>
+
                             <li class="style18"><a href="#imagej">ImageJ</a><span class="style16"></li>
-
                            <li class="style18"></li>
+
                           </ol>
                           </ol>
 +
                          <p>&nbsp;</p>
 +
                          <p>&nbsp;</p>
 +
                          <p>&nbsp;</p>
 +
                          <p>&nbsp;</p>
                           <h2><span class="style16">A. Java</span></h2>
                           <h2><span class="style16">A. Java</span></h2>
                           <p class="special">A simple Java program is used to automate  the picture capturing process.<br />
                           <p class="special">A simple Java program is used to automate  the picture capturing process.<br />
Line 630: Line 340:
                       </tr>
                       </tr>
</table>                 
</table>                 
-
             
+
                   
         </div>
         </div>
                  
                  
             <div id="footer1"></div>
             <div id="footer1"></div>
         </div>
         </div>
-
           
+
                <div id="rightside">
 +
           
 +
        </div>   
         </div>
         </div>
     </div>
     </div>
</div>
</div>
</html>
</html>
 +
<html>

Latest revision as of 18:05, 29 October 2008

 

 

Software

  1. Java
  2. ImageJ

 

 

 

 

A. Java

A simple Java program is used to automate the picture capturing process.
This Java program will simulate a mouse left-click for every INTERVAL ms, and will stop after DURATION ms.

import java.awt.AWTException;
import java.awt.Robot;
import java.awt.event.InputEvent;
public class MouseController implements Runnable {
private Robot robot;
private volatile boolean stop = false;
// you can adjust these two variables for your own needs.
private static int INTERVAL = 1000;
private static int DURATION = 15000;
public MouseController() {
try {
robot = new Robot();
} catch (AWTException ex) {
ex.printStackTrace();
}
}
public void run() {
while(!stop) {
robot.mousePress(InputEvent.BUTTON1_MASK);
robot.mouseRelease(InputEvent.BUTTON1_MASK);
try {
Thread.sleep(INTERVAL);
} catch (InterruptedException ex) {
ex.printStackTrace();
}
}
}
public synchronized void stop() {
stop = true;
}
public static void main(String[] args) {
MouseController mc = new MouseController();
Thread mcThread = new Thread(mc);
System.out.println("Picture capturing started");
mcThread.start();
try {
Thread.sleep(DURATION);
} catch (InterruptedException ex) {
ex.printStackTrace();
}
mc.stop();
System.out.println("Picture capturing stopped");
}
}

[Back to Top]

B. ImageJ

ImageJ, a powerful medical image analyze tool, is used to measure the plate brightness. The Region of Interest (ROI) is set to the entire plate excluding the edge area where the high level of signal intensity caused by reflection of light source from the plate’s side wall will distort the signal.
The light intensity 3D plot is achieved by using ImageJ’s interactive 3D surface plot plug-in accompanied with the automatic mouse control program. Pattern at each time point will be plotted and finally integrated into a real-time growth pattern.
For example, at a time-point, the following pattern:

Will be plotted like this:

and finally integrate the plot of different time point into a single pattern growth animation.
Furthermore, we are hoping to extend this method of measurement to other application, like recording total band brightness on gel photo to measure the chromosome expression level by using ImageJ with its build-in Gel analyze function. (refer to Roy’s design).
The steps to calculate the band is as follow:
After taking the gel photo, use image to open it.

Use rectangular tool to select the band as small as possible to just cover the band

Use Analyze-Gels-Select First Lane (Or Ctrl+1)

Invert the selected ROI

Use mouse pointer to move the square selection to the second lane, select Analyze-Gels-Plot Lane (Or Ctrl+3)

Use Straight Line Selection tool to separate each lane

Use Wand Tools to measure area of each line

Finally, record the result and plot graph

[Back to Top]

  

Retrieved from "http://2008.igem.org/Team:iHKU/software"