Team:SYSU-Software

From 2012.igem.org

(Difference between revisions)
 
(110 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
-
<html>
 
-
 
-
<head>
 
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-
<title>HomeHTML/CSSJavaScriptResourcesT</title>
 
-
<link rel="stylesheet" href="style.css" />
 
-
 
-
<link href="examples.css" rel="stylesheet" />
 
-
<link href="style/carousel.css" rel="stylesheet" />
 
-
<link href="layout.css" rel="stylesheet" type="text/css" />
 
-
 
-
<script src="js/ext-core-debug.js"></script>
 
-
<script src="js/carousel.js"></script>
 
-
<script>
 
-
            Ext.onReady(function() {
 
-
                new Ext.ux.Carousel('simple-example');
 
-
               
 
-
                new Ext.ux.Carousel('full-example', {
 
-
                    itemSelector: 'img',
 
-
                    interval: 3,
 
-
                    autoPlay: true,
 
-
                    showPlayButton: true,
 
-
                    pauseOnNavigate: true,
 
-
                    freezeOnHover: true,
 
-
                    transitionType: 'fade',
 
-
                    navigationOnHover: true     
 
-
                });
 
-
               
 
-
                new Ext.ux.Carousel('html-example', {
 
-
                    itemSelector: 'div.item',
 
-
                    interval: 5,
 
-
                    autoPlay: true,
 
-
                    transitionEasing: 'easeIn'               
 
-
                });
 
-
            })
 
-
        </script>
 
-
        <!-- ----------------------------------------------------- -->
 
<style type="text/css">
<style type="text/css">
-
body{background: url('bg.png') repeat scroll 0 0 #FEFEFE;}
+
.style1 {
-
a {
+
color: #525252;
-
color: #808080;
+
-
font-size: 9pt;
+
-
text-decoration: none;
+
-
}
+
-
a:hover { color: white; }
+
-
.blk_18 { overflow:hidden; zoom:1; font-size:9pt; border:1px solid #e3e3e3; background:#eee; width:692px; margin-top:8px; }
+
-
.blk_18 .pcont { width:638px; float:left; overflow:hidden; padding-left:5px; }
+
-
.blk_18 .ScrCont { width:32766px; zoom:1; margin-left:-5px; }
+
-
.blk_18 #List1_1, .blk_18 #List2_1 { float:left; }
+
-
.blk_18 .LeftBotton, .blk_18 .RightBotton { width:15px; height:74px; float:left; background:url(ax.gif) no-repeat; }
+
-
.blk_18 .LeftBotton { background-position: 0 0; margin:8px 5px 0; }
+
-
.blk_18 .RightBotton { background-position: 0 -100px; margin:8px 1px 10px 5px; }
+
-
.blk_18 .LeftBotton:hover { background-position: -20px 0; }
+
-
.blk_18 .RightBotton:hover { background-position: -20px -100px; }
+
-
.blk_18 .pl img { display:block; cursor:pointer; border:none; margin:6px auto 1px auto; }
+
-
.blk_18 .pl { width:105px; border:1px solid #f3f3f3; float:left; float:left; text-align:center; line-height:24px; }
+
-
.blk_18 a.pl:hover { border:1px solid #5dacec; color:#5dacec; background:#fff; }
+
-
</style>
+
-
<script type="text/javascript">
+
-
 
+
-
var Speed_1 = 10; //速度(毫秒)
+
-
var Space_1 = 20; //每次移动(px)
+
-
var PageWidth_1 = 107 * 6; //翻页宽度
+
-
var interval_1 = 5000; //翻页间隔时间
+
-
var fill_1 = 0; //整体移位
+
-
var MoveLock_1 = false;
+
-
var MoveTimeObj_1;
+
-
var MoveWay_1="right";
+
-
var Comp_1 = 0;
+
-
var AutoPlayObj_1=null;
+
-
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
+
-
function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)}
+
-
function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);}
+
-
function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false}
+
-
AutoPlay_1()}
+
-
function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft<=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth}
+
-
GetObj('ISL_Cont_1').scrollLeft-=Space_1}
+
-
function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)}
+
-
function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1>=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false}
+
-
AutoPlay_1()}
+
-
function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth}
+
-
GetObj('ISL_Cont_1').scrollLeft+=Space_1}
+
-
function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return}
+
-
var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)<PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace<1){TempSpace=1}}
+
-
if(Comp_1<0){if(Comp_1<-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0}
+
-
GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1>TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0}
+
-
GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}}
+
-
function picrun_ini(){
+
-
GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML;
+
-
GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1);
+
-
GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)}
+
-
GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()}
+
-
AutoPlay_1();
+
-
}
+
-
</script>
+
-
 
+
-
<style>
+
-
 
+
-
.menu {
+
-
height: 45px;
+
-
display: block;
+
-
}
+
-
 
+
-
.menu ul {
+
-
list-style: none;
+
-
padding: 0;
+
-
margin: 0;
+
-
}
+
-
 
+
-
.menu ul li {
+
-
float: left;
+
-
/* 菜单子元素的内容超出不可见 */ 
+
-
overflow: hidden;
+
-
position: relative;
+
-
text-align: center;
+
-
line-height: 45px;
+
-
}
+
-
 
+
-
.menu ul li a {
+
-
/* 必须是相对定位  */
+
-
position: relative;
+
-
display: block;
+
-
width: 110px;
+
-
height: 45px;
+
-
font-family: Arial;
+
-
font-size: 11px;
+
-
font-weight: bold;
+
-
letter-spacing: 1px;
+
-
text-transform: uppercase;
+
-
text-decoration: none;
+
-
cursor: pointer;
+
-
}
+
-
 
+
-
.menu ul li a span {
+
-
/* 所有层将使用绝对定位 */
+
-
position: absolute;
+
-
left: 0;
+
-
width: 110px;
+
-
}
+
-
 
+
-
.menu ul li a span.out {
+
-
top: 0px;
+
-
}
+
-
 
+
-
.menu ul li a span.over,
+
-
.menu ul li a span.bg {
+
-
/* 起初.over层和.bg层相对a元素-45px以达到隐藏 */ 
+
-
top: -45px;
+
-
}
+
-
+
-
/** 完整版示例 **/
+
-
 
+
-
#menu {
+
-
background:url(bg_menu.gif) scroll 0 -1px repeat-x;
+
-
border:1px solid #CCC;
+
-
}
+
-
 
+
-
#menu ul li a {
+
-
color: #000;
+
-
}
+
-
 
+
-
#menu ul li a span.over {
+
-
color: #FFF;
+
-
}
+
-
 
+
-
#menu ul li span.bg {
+
-
height: 45px;
+
-
background: url(bg_over.gif) center center no-repeat;
+
-
}
+
-
+
-
/** 简化版示例 **/
+
-
+
-
#menu2 {
+
-
background: #000000;
+
-
}
+
-
 
+
-
#menu2 ul li a {
+
-
color:#FFF;
+
-
}
+
-
+
-
#menu2 ul li a span.over {
+
-
background: #A6DD00;
+
-
color:#333;
+
-
}
+
-
#menu2 ul li.nav1 a span.over {
+
-
background: #fea274;
+
-
}
+
-
#menu2 ul li.nav2 a span.over {
+
-
background: #b0bbba;
+
-
}
+
-
#menu2 ul li.nav3 a span.over {
+
-
background: #a3f091;
+
-
}
+
-
#menu2 ul li.nav4 a span.over {
+
-
background: #86dbf9;
+
-
}
+
-
#menu2 ul li.nav5 a span.over {
+
-
background: #e0caf0;
+
-
}
+
-
#menu2 ul li.nav6 a span.over {
+
-
background: #9dace9;
+
-
}
+
-
 
+
-
.style1 {
+
-
color: #FFFFFF;
+
-
}
+
-
 
+
-
+
-
 
+
-
</style>
+
-
<script type="text/javascript" src="jquery.min.js"></script>
+
-
<script language="javascript">
+
-
$(document).ready(function() {
+
-
+
-
/* 完整版示例 */
+
-
 
+
-
// 把每个a中的内容包含到一个层(span.out)中,在span.out层后面追加背景图层(span.bg)
+
-
$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
+
-
 
+
-
// 循环为菜单的a每个添加一个层(span.over)
+
-
$("#menu li a").each(function() {
+
-
$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
+
-
});
+
-
 
+
-
$("#menu li a").hover(function() {
+
-
// 鼠标经过时候被触发的函数
+
-
$(".out",this).stop().animate({'top':'45px'},250); // 向下滑动 - 隐藏
+
-
$(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示
+
-
$(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑动 - 显示
+
-
 
+
-
}, function() {
+
-
// 鼠标移出时候被触发的函数
+
-
$(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示
+
-
$(".over",this).stop().animate({'top':'-45px'},250); // 向上滑动 - 隐藏
+
-
$(".bg",this).stop().animate({'top':'-45px'},120); // 向上滑动 - 隐藏
+
-
});
+
-
+
-
 
+
-
/* 简化版示例 */
+
-
+
-
$("#menu2 li a").wrapInner( '<span class="out"></span>' );
+
-
+
-
$("#menu2 li a").each(function() {
+
-
$('<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
+
-
});
+
-
 
+
-
$("#menu2 li a").hover(function() {
+
-
$(".out",this).stop().animate({'top':'45px'},200); // 向下滑动 - 隐藏
+
-
$(".over",this).stop().animate({'top':'0px'},200); // 向下滑动 - 显示
+
-
 
+
-
}, function() {
+
-
$(".out",this).stop().animate({'top':'0px'},200); // 向上滑动 - 显示
+
-
$(".over",this).stop().animate({'top':'-45px'},200); // 向上滑动 - 隐藏
+
-
});
+
-
 
+
-
});
+
-
 
+
-
</script>
+
-
<!-- ----------------------------------------------------------------------------------- -->
+
-
<style  type="text/css">
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
.projecttext {
+
-
font-family: "Times New Roman", Times, serif;
+
-
font-size: large;  padding: 8px;
+
}
}
.style2 {
.style2 {
-
font-family: "Times New Roman", Times, serif;
+
font-size: xx-large;
-
font-size: x-large;
+
}
}
-
 
-
 
-
 
-
 
-
 
-
.softwaretext {
 
-
font-family: "Times New Roman", Times, serif;
 
-
font-size: large;
 
-
}
 
-
 
-
 
-
 
-
 
-
 
</style>
</style>
-
<!-- ----------------------------------------------------------------------------------- -->
+
{{:Team:SYSU-Software/menu}}
-
<link href="stylesoftware.css" rel="stylesheet" type="text/css" />
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-
<script type="text/javascript" src="jquery-latest.pack.js"></script>
+
<head>
-
<script type="text/javascript">
+
<title>Team:SYSU-Software</title>
-
function loadnext(divout,divin){
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
 
+
<meta http-equiv="Content-Style-Type" content="text/css" />
-
$("." + divout).hide();
+
<link href="https://2012.igem.org/Team:SYSU-Software/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" ><link href="https://2012.igem.org/Team:SYSU-Software/layout.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
-
$("." + divin).fadeIn("fast");
+
<script src="https://2012.igem.org/Team:SYSU-Software/js/jquery-1.4.2.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
-
}
+
<script src="https://2012.igem.org/Team:SYSU-Software/js/jquery.faded.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
-
 
+
<script src="https://2012.igem.org/Team:SYSU-Software/js/tabs.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
-
 
+
<script src="https://2012.igem.org/Team:SYSU-Software/js/script.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
-
 
+
<!--[if lt IE 7]>
-
</script>
+
<link href="./ie_style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
-
<!-- ----------------------------------------------------------------------------------- -->
+
  <script type="text/javascript" src="./js/ie_png.js?action=raw&ctype=text/javascript"></script>
-
 
+
  <script type="text/javascript">
-
 
+
      ie_png.fix('.png, #header, #header .nav a, #faded strong, #faded .controls a');
-
 
+
  </script>
 +
<![endif]-->
</head>
</head>
-
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
+
<body id="page1">
 +
  <div class="tail-top">
 +
    <div id="main">
 +
      <!-- header -->
 +
      <div id="header">
 +
        <div id="logopic"><font SIZE="3">
 +
<p>
 +
<img src= https://static.igem.org/mediawiki/igem.org/1/11/5556.png width="300" height="100"></p>
 +
</font>&nbsp;</div>
 +
        <!-- .nav -->
 +
        <ul class="nav">
 +
           
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Project" >Project<span>Software Project</span></a></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Models">
 +
Models<span>Models &amp; Algorithm</span></a></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Tutorial">Tutorial<span>Guidance book and videos</span></a></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Team">Team<span>Instructor and members</span></a></li>
 +
         
 +
             
 +
                 
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/WorldJamboree">
 +
For Special Awards <span>For World Jamboree awards</span></a><span lang="zh-cn"><span class="style1">
 +
</span></span></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Practice">Tips<span>Human practice, safety...</span></a></li>
-
<div id="content">
+
        </ul>
-
+
        <!-- /.nav -->
-
<div id="menu2" class="menu">
+
        <!-- faded slider -->
-
<ul>
+
        <div id="faded">
-
<li class="nav1"><a href="javascript:;" >Home</a></li>
+
          <ul><li>
-
<li class="nav2"><a href="javascript:;">Project</a></li>
+
            <a href="https://2012.igem.org/Team:SYSU-Software/WorldJamboree">
-
<li class="nav3"><a href="javascript:;">Software</a></li>
+
            <img  src= https://static.igem.org/mediawiki/2012/5/57/Golden-crystal-butterfly.png  alt="" width="494" height="444" ></a>
-
                <li class="nav4"><a href="javascript:;">Extra</a></li>
+
           
-
<li class="nav5"><a href="javascript:;">Team</a></li>
+
            </li>
-
<li class="nav6"><a href="javascript:;">About</a></li>
+
         
-
</ul>
+
            <li>
-
</div><h3>Project</h3>
+
            <img src= https://static.igem.org/mediawiki/igem.org/4/46/Sdgsfsdd3.png alt="" >
-
</div>
+
              <strong>creative ideas</strong>
-
<!-- ----------------------------------------------------------------------------------- -->
+
              </li>
-
<div style="margin:auto;width:980px;height: 364px; background:#b0bbba;"><div style="position: absolute;width:420px;height: 120px;"><p class="projecttext">
+
           
-
<span class="style2">W</span><span >e have inclination to
+
-
develop a multifunctional toolbox “Blablabla”, that integrates different
+
-
modules together and help researchers approach information they need.</span></p>
+
-
</div>
+
-
<img alt="" style="position: absolute; margin-top:110px;  top: 115px;"; src=  ssss.png width="400" height="132" />
+
-
<img  src= 搜狗截图_2012-07-05_12-53-06.png style=" position: absolute ; margin-left:420px;" width="565" height="364" />
+
          </ul>
 +
          <ul class="controls">
 +
          <li><a href="#" class="prev"></a></li>
 +
            <li><a href="#" class="next"></a></li>
 +
          </ul>
 +
        </div>
 +
        <!-- //faded slider -->
 +
      </div>
 +
      <!-- content -->
 +
      <div id="content2">
 +
      <!-- tabs -->
 +
        <div class="wrapper">
 +
          <div class="wrapper">
 +
            <ul class="tabs">
 +
            <li class="first"><a href="#tab0">Overview</a></li>
-
<img  style="position: absolute;top: 350px;  margin-left: 90px;"src=  782d390aae3c898ea8db9493cb53c3e0.png width="234" height="100" />
+
              <li style="left: 0px; top: 0px" ><a href="#tab1">Browser</a></li>
-
</div>
+
              <li><a href="#tab2">Biobrick</a></li>
-
+
              <li><a href="#tab3">Riboswitch</a></li>
-
+
-
<!-- ----------------------------------------------------------------------------------- -->
+
-
<div style="margin:auto;width:980px;  height: 500px; position:  static">
+
-
<h3>SOFTWARE </h3>
+
-
<div id="wizardwrapper">
+
-
  <div class="1">
+
<li><a href="#tab5">MetaNetwork</a></li>
 +
              <li><a href="#tab6">Simulator</a></li>
 +
              <li><a href="#tab7">G-Circle</a></li>
 +
              <li><a href="#tab8">Clotho</a></li>
-
    <h4>Genome Viewer</h4>
 
-
    <div id="wizardcontent" class="softwaretext"><p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Firstly, we consider the Genome Viewer, which visualizes the E coli genome, locates the genes on the genome and make it easy to study the characteristics of the genome.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;With this Genome Browser, researchers can approach most information on biotechnology. Users are able to search Biobricks, plasmids and genomes of model microorganisms, in the same time, gene annotations and information of GenBank are presented. The protein sequence is also showed according to the DNA sequences. Aside from searching sequences, users can also input or modify the sequences, insert annotation and build target plasmids they need. The Genome Browser support the format of FASTA  when import and export the sequences.</p></div>
 
-
    <div class="buttons">
 
-
      <button type="submit" class="previous"  disabled="disabled"> <img src="images/arrow_left.png" alt=""/> Back </button>
 
-
      <button type="submit" class="next" onclick="loadnext(1,2);"> Next <img src="images/arrow_right.png" alt="" /> </button>
 
-
    </div>
 
-
    <ul id="mainNav" class="fiveStep">
 
-
      <li class="current"><a title=""><em>Part 1: Genome Viewer</em></a></li>
 
-
      <li><a title=""><em>Part 2: Database</em></a></li>
 
-
      <li><a title=""><em>Part 3: Riboswitch Designer</em></a></li>
 
-
      <li><a title=""><em>Part 4: Network Illustrator</em></a></li>
 
-
      <li class="mainNavNoBg"><a title=""><em>Part 5: Simulator</em> </a></li>
+
            </ul>
-
    </ul>
+
          </div>
-
    <div style="clear:both"></div>
+
          <div class="tab_container">
-
  </div>
+
          <div id="tab0" class="tab_content">
-
+
            <div class="wrapper">
-
  <div id="wizardpanel" class="2">
+
             
-
    <h4>Database</h4>
+
                <div class="extra-wrap">
-
    <div id="wizardcontent" class="softwaretext"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Secondly, to meet the need of protein-protein interaction researches, we optimize the methods of scanning and output of the existing database, and also supplement the biological information by building novel database. </p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This part of the software focus on the design of regulatory elements of metabolic networks, mainly non-coding RNAs including SiRNA and Riboswitch. When a certain gene or protein is given, the Designer would generate the elements. What’s more, the primary and secondary structure can be predicted and presented in the Designer. The function of structure prediction can be also applied in other non-coding RNAs, for instance, microRNAs.</p></div>
+
                <p><img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/7/7c/Cvvxx.png" alt="" width="300px" height="230px" style="float: left ;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Synthetic Biology, depending on interdisciplinary knowledge and experience , cooperates wet and dry experiments to create artificial biological systems . Our team has developed a novel software system,
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project">BiArkit</a>, to facilitate the design and engineering of specially functional systems. For visualization of genomic data and expression level of functional genes, we develop
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r2"><FONT color="blue">GenomeBrowser</FONT></a> and  
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r8"><FONT color="blue">G-Circle</FONT></a>  Besides,
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r3"><FONT color="blue">Biobrick</FONT></a> is localized and transformed into searching kit for users to get comprehensive information conveniently. Further,  
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r4"><FONT color="blue">Riboswitch</FONT></a> and
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r5"><FONT color="blue">SiRNA</FONT></a> are designed to compute out potential regulatory parts for engineering systems. For processing data from system level,
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r6"><FONT color="blue">MetaNetwork</FONT></a> can illustrate information of various biological pathways on the graphical and user-friendly interface. And
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r7"><FONT color="blue">Simulator</FONT></a> is intended for modifying and simulating genome-scale metabolic models, which involves many kinds of analyses to predict possible results of conditional changes in experiments.All the functional modules have been successfully added to the
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Clotho">Clotho</a> Frame.
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"  style="float: right ;""><b>read more</b></a></p>
 +
                 
 +
                  <div class="wrapper"></div>
 +
                </div>
 +
              </div>
 +
            </div>
-
    <div class="buttons">
+
          <div id="tab1" class="tab_content">
-
      <button type="submit" class="previous" onclick="loadnext(2,1);"> <img src="images/arrow_left.png" alt="" /> Back </button>
+
            <div class="wrapper">
-
      <button type="submit" class="next" onclick="loadnext(2,3);"> Next <img src="images/arrow_right.png" alt="" /> </button>
+
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/3/3e/Genome.png" alt="" width="300px" height="230px"/>
-
    </div>
+
                <div class="extra-wrap">
-
    <ul id="mainNav" class="fiveStep">
+
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This
-
      <li class="lastDone"><a href="/" title=""><em>Part 1: Genome Viewer</em></a></li>
+
is the section for sequences information. With this browser, researchers can
 +
surf for genomes from the typical model organisms. Users can locate the
 +
interested genes in terms of the input items, including name, product or
 +
coordinate. In addition, new genomes data will be saved on our website as
 +
downloadable contents.</p>
 +
                 
 +
                  <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r2" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab2" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/4/4f/Biobrick.png" alt="" width="300px" height="230px"/>
 +
                <div class="extra-wrap">
 +
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the section for parts information. It can facilitate researchers to search features and functions of Biobricks documented in the Registry of Standard Biological Parts. All of the relevant operations can be completed without connecting with the Internet.</p>                 
 +
                  <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r3" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab3" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/a/ad/Riboswitch.png" alt="" width="300px" height="230px" />
 +
                <div class="extra-wrap">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for generating parts
 +
information. It can assist researchers to design the
 +
sequences and structures of potential riboswitches according
 +
to their inputs and choices of aptamers. Both of the
 +
up-regulation and down-regulation riboswiches can be
 +
provided by this kit.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r4" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab4" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/f/f9/Sirna.png" alt="" width="300px" height="230px" />
 +
                <div class="extra-wrap">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for generating parts
 +
information. It can design another regulator in engineering
 +
biological systems – siRNA. According to the input
 +
sequences, it can figure out the potential siRNA
 +
automatically.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r5" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab5" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/b/b2/Designer.png" alt="" width="300px" height="230px" />
 +
                <div class="extra-wrap">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for system information. Given the friendly interface, researchers can explore and acquire their interested gene’s relevant pathways and networks in one map. Users can even drag every graphic element in the maps to check the information conveniently and effectively.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r6" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab6" class="tab_content">
 +
            <div class="wrapper">
 +
             
 +
                <div class="extra-wrap"><img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/6/6b/Simulator.png" alt="" width="300px" height="230px" style="float: left ;"/>
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for generating system
 +
information. Based on the reconstruction of genome-scale
 +
models, researcher can use this kit to edit the existent
 +
models according to their needs. Then, they can choose
 +
different combination of analysis to predict effect from a
 +
intended loss-of –function mutation, find necessary and
 +
basic genes maintaining the whole system, predict phenotypic
 +
behavior under the given environmental conditions and
 +
interpret the coupled reaction activities.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r7" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
<div id="tab8" class="tab_content">
 +
            <div class="wrapper">
 +
             
 +
                <div class="extra-wrap">
 +
<img class="img-indent" src="http://www.autodeskresearch.com/img/header_projects_clotho.jpg" alt="" width="256" height="230px"  style="float: left ;">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Clotho assists researchers to engineer synthetic biological systems and manage the data which is used to create them. It has been developed as the App environment that anyone can create and share new tools in it. These tools facilitate synthetic biologists to arrange their researches under the computer-based and automated- designed environment.
 +
Thus, to advanced develop the Clotho frame, we have successfully transfer the seven parts of our software, BiArkit, into Apps. Users can choose to employ our software through the Clotho media.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Clotho" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
-
      <li class="current"><a title=""><em>Part 2: Database</em></a></li>
 
-
      <li><a title=""><em>Part 3: Riboswitch Designer</em></a></li>
 
-
      <li><a title=""><em>Part 4: Network Illustrator</em></a></li>
 
-
      <li class="mainNavNoBg"><a title=""><em>Part 5: Simulator</em> </a></li>
 
-
    </ul><div style="clear:both"></div>
+
            <div id="tab7" class="tab_content">
-
  </div>
+
            <div class="wrapper">
-
 
+
            <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/4/43/G-circle.png" alt="" width="300px" height="230px" />
-
 
+
              <div class="extra-wrap">
-
  <div id="wizardpanel" class="3">
+
              <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
-
    <h4>Riboswitch Designer</h4>
+
<span lang="EN-US">This is the section for sequence information.
-
    <div id="wizardcontent" class="softwaretext"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Thirdly, we develop a Riboswitch Designer, to help the design of riboswitch, a thriving method applied in biological research, by building an optimized algorithm.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Relying on the KEGG Pathway database, the Illustrator exports the optimized relevant pathway map of a gene or transcription factor the user interests in. </p> </div>
+
It can illustrate the given genome and the expression level of  
-
    <div class="buttons">
+
genes within it under different environment in one graph. In
-
      <button type="submit" class="previous" onclick="loadnext(3,2);"> <img src="images/arrow_left.png" alt="" /> Back </button>
+
addition, we have developed it as one app and integrated it into
 +
<i>Clotho</i>.</span></p>
 +
                <p class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r8" class="link1"><b>read more</b></a></p>
 +
                </div>
-
      <button type="submit" class="next"  onclick="loadnext(3,4);"> Next <img src="images/arrow_right.png" alt=""/> </button>
+
              </div>
-
    </div>
+
            </div>
-
    <ul id="mainNav" class="fiveStep">
+
          </div>
-
      <li class="done"><a href="/" title=""><em>Part 1: Genome Viewer</em></a></li>
+
        </div>
-
      <li class="lastDone"><a href="/" title=""><em>Part 2: Database</em></a></li>
+
-
      <li class="current"><a title=""><em>Part 3: Riboswitch Designer</em></a></li>
 
-
      <li><a title=""><em>Part 4: Network Illustrator</em></a></li>
 
-
      <li class="mainNavNoBg"><a title=""><em>Part 5: Simulator</em> </a></li>
 
-
    </ul><div style="clear:both"></div>
 
-
  </div>
 
-
+
            <div id="tab8" class="tab_content">
-
  <div id="wizardpanel" class="4" >
+
            </div>
-
    <h4>Network Illustrator</h4>
+
        <!-- .box -->
-
    <div id="wizardcontent" class="softwaretext"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fourthly, to analyze the dynamic change in various metabolic networks, we present a simulator that help the researchers analyze the network in silico, in method of flux balance analysis (FBA).</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Simulator is a tool to analyze target metabolic network in method of flux balance analysis (FBA). The Simulator would help researchers rebuild the metabolic network and search key genes in the network, in order to simplify the synthesis design. Relying on the KEGG Pathway database, a novel rFBA model is formed when regulation-relevant conditions are added into the primitive FBA model, which would help the researchers observe the dynamic change in the metabolic system. Moreover, unlike the mainstream of FBA, the analysis of the Simulator is not based on Matlab and is simple for users.</p></div>
+
        <div class="box">
-
    <div class="buttons">
+
        <div class="right-bot-corner">
-
      <button type="submit" class="previous" onclick="loadnext(4,3);"> <img src="images/arrow_left.png" alt="" /> Back </button>
+
          <div class="left-bot-corner">
-
      <button type="submit" class="next" onclick="loadnext(4,5);"> Next <img src="images/arrow_right.png" alt="" /> </button>
+
            <div class="inner">
 +
              <div class="">
 +
                  <div class="wrapper ">
 +
                   
 +
                    <div >
 +
                      <ul >
 +
                        <li  style="text-align: center ;"><h2> <span lang="zh-cn">&nbsp;&nbsp; </span>
 +
<span class="style2">video</span></h2>
 +
<table>
 +
<tr>
 +
<td>Version 1.00 <span lang="zh-cn">Sept.2012</span></td><td>Version 1.05<span lang="zh-cn">  
 +
Oct.2012</span></td>
 +
</tr>
 +
<tr>
 +
<td><iframe width="380" height="320" src="http://www.youtube.com/embed/en_OuQ8Ur_8" frameborder="0" allowfullscreen style="float: left ;margin-right: 10px;"></iframe></td>
 +
<td><iframe width="380" height="320" src="http://www.youtube.com/embed/vgP_uKks2Cg" frameborder="0" allowfullscreen style="float: left "></iframe></td>
 +
</tr>
 +
</table>
 +
                                                  </li>
 +
                      </ul>
 +
                    </div>
 +
                   
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <!-- /.box -->
 +
        <!-- .banners -->
 +
        <ul class="banners">
 +
        <li>
 +
<img src= "https://static.igem.org/mediawiki/2012/c/ca/Xinke.png"  alt="" width="160" height="164" ></a></li>
 +
          <li >
 +
<img src=  "https://static.igem.org/mediawiki/2012/4/45/Shengke.png"  alt="" width="160" height="163" ></a></li>
 +
          <li>
 +
<img src= "https://static.igem.org/mediawiki/2012/0/0c/Shuji.png" alt="" width="152" height="156" ></a></li>
 +
          <li class="last">
 +
<img src="https://static.igem.org/mediawiki/2012/b/b4/Ruanjian.png"  alt="" width="167" height="64" style=" margin-top:50px;/></a><a href="#"> </li>
 +
        </ul>
 +
        <!-- /.banners -->
 +
      </div>
 +
      <!-- footer -->
 +
     
     </div>
     </div>
-
    <ul id="mainNav" class="fiveStep">
 
-
      <li class="done"><a href="/" title=""><em>Part 1: Genome Viewer</em></a></li>
 
-
      <li class="done"><a href="/" title=""><em>Part 2: Database</em></a></li>
 
-
      <li class="lastDone"><a href="/" title=""><em>Part 3: Riboswitch Designer</em></a></li>
 
-
      <li class="current"><a title=""><em>Part 4: Network Illustrator</em></a></li>
 
-
 
-
      <li class="mainNavNoBg"><a title=""><em>Part 5: Simulator</em> </a></li>
 
-
    </ul><div style="clear:both"></div>
 
   </div>
   </div>
-
+
   <script type="text/javascript">
-
   <div id="wizardpanel" class="5">
+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-
    <h4>Simulator</h4>
+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-
    <div id="wizardcontent" class="softwaretext"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Further, to make it more convenient, the software is localized; that is to say, all functions mentioned above can be achieved without linkage to Internet.</p> </div>
+
</script>
-
 
+
<script type="text/javascript">
-
    <div class="buttons">
+
try {
-
      <button type="submit" class="previous" onclick="loadnext(5,4);"> <img src="images/arrow_left.png" alt="" /> Back </button>
+
var pageTracker = _gat._getTracker("UA-7078796-1");
-
      <button type="submit" class="next" onclick="submit()"> Finish <img src="images/arrow_right.png" alt="" /> </button>
+
pageTracker._trackPageview();
-
    </div>
+
} catch(err) {}</script>
-
    <ul id="mainNav" class="fiveStep">
+
-
      <li class="done"><a href="/" title=""><em>Part 1: Genome Viewer</em></a></li>
+
-
 
+
-
      <li class="done"><a href="/" title=""><em>Part 2: Database</em></a></li>
+
-
      <li class="done"><a href="/" title=""><em>Part 3: Riboswitch Designer</em></a></li>
+
-
      <li class="lastDone"><a href="/" title=""><em>Part 4: Network Illustrator</em></a></li>
+
-
      <li class="mainNavNoBg current"><a title=""><em>Part 5: Simulator</em> </a></li>
+
-
 
+
-
    </ul>
+
-
  </div>
+
-
  <div style="clear:both"></div>
+
-
</div>
+
-
 
+
-
 
+
-
<!-- ----------------------------------------------------------------------------------- -->
+
-
<div role="contentinfo" id="footer-contents">
+
-
<h3>our TEAM </h3>
+
-
<div id="simple-example" style="padding: 5px; height: 280px; width: 420px; background-color: #E6E6E0"> <img src="demoimages/1.jpg" title="Masterpiece"> <img src="demoimages/2.jpg" title="Teeth"> <img src="demoimages/3.jpg" title="Roar"> <img src="demoimages/4.jpg" title="Feed me"> <img src="demoimages/5.jpg" title="Debugging"> <img src="demoimages/6.jpg" title="Baby">
+
-
    <div style="width:525px;height: 280px; background:#e0caf0 ; position:  absolute;  margin-left:  450px;">
+
-
      <article style="width:inherit; height: 250px; position: absolute; table-layout:auto; text-align: center; vertical-align: middle;"><p>
+
-
&nbsp;</p></article>
+
-
</div>
+
-
</div>
+
-
<!-- ----------------------------------------------------- -->
+
-
+
-
<h3>SYSU-SOFTWARE </h3>
+
-
   
+
-
<div id="firefox"> <p style="background-color:black ; " >&nbsp;</p>
+
-
        <!-- start menu #footer-menu  -->
+
-
    <div  role="navigation" id="footer-menu">
+
-
    <img  src="footer-img.gif"; style="  margin-bottom: -40px;padding: -10px;" width="25" height="34"/><ul>
+
-
<li>
+
-
    <a href="/features/" class="style1">Project</a>
+
-
<ul>
+
-
    <li class="first"><a href="/features/"><span >Overview</span></a></li>
+
-
    <li><a href="/security/">Genome Viewer</a></li>
+
-
    <li><a href="/performance/">Database</a></li>
+
-
   
+
-
    <li class="last"><a target="_blank" href="http://support..com/zh-CN/home/" class="external">
+
-
Riboswitch Designer</a></li>
+
-
<li class="last"><a target="_blank" href="http://support..com/zh-CN/home/" class="external">
+
-
Network Illustrator</a></li>
+
-
<li class="last"><a target="_blank" href="http://support..com/zh-CN/home/" class="external">
+
-
Simulator</a></li>
+
-
+
-
 
+
-
 
+
-
</ul>
+
-
        </li>
+
-
+
-
        <li style="left: 0px; top: 0px">
+
-
            <a href="/addon/" class="style1">Software</a>
+
-
<ul>
+
-
    <li class="first"><a href="/addon/">Download</a></li>
+
-
    <li><a target="_blank" class="external" href="http://.com.cn/selections/">
+
-
Protocols</a></li>
+
-
   
+
-
   
+
-
</ul>
+
-
        </li>
+
-
        <li style="left: 0px; top: 0px">
+
-
            <a href="/addon/" class="style1">Extra</a>
+
-
<ul>
+
-
    <li class="first"><a href="/addon/">Safety</a></li>
+
-
    <li><a target="_blank" class="external" href="http://.com.cn/selections/">
+
-
Notebook</a></li>
+
-
    <li><a target="_blank" class="external" href="https://addons..org/zh-cn/firefox/">
+
-
Source Code</a></li>
+
-
    <li><a target="_blank" class="external" href="https://developer..org/">
+
-
Tools &amp; Protocols</a></li>
+
-
    <li><a href="/addon/personas/">References</a></li>
+
-
   
+
-
</ul>
+
-
        </li>
+
-
 
+
-
        <li>
+
-
            <a target="_blank" class="style1" href="http://.com.cn/">
+
-
About</a>
+
-
    <ul>
+
-
        <li class="first"><a target="_blank" class="external" href="http://.com.cn/">
+
-
Team</a></li>
+
-
        <li><a target="_blank" class="external" href="http://.com.cn/home/open/">
+
-
Logos</a></li>
+
-
        <li><a target="_blank" class="external" href="http://.com.cn/topic/5/">
+
-
Sun Yat-sen University</a></li>
+
-
        <li><a target="_blank" class="external" href="http://.com.cn/topic/4/">
+
-
Acknowledgement</a></li>
+
-
        <li class="last"><a target="_blank" class="external" href="http://.com.cn/topic/2/">
+
-
Contacts Us</a></li>
+
-
    </ul>
+
-
        </li>
+
-
       
+
-
</ul>
+
-
    </div>
+
-
        <!-- end menu #footer-menu  -->
+
-
 
+
-
    <div id="copyright">
+
-
    <p>Copyright &copy; </p>
+
-
    <p style="height: 239px"><a target="_blank" href=""></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span></span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href=""></a></p>
+
-
    </div>
+
-
 
+
-
   
+
-
</div></div>
+
-
<!-- ----------------------------------------------------- -->
+
-
 
+
</body>
</body>
-
 
</html>
</html>

Latest revision as of 04:03, 27 October 2012

<style type="text/css"> .style1 { color: #525252; } .style2 { font-size: xx-large; } </style>

Team:SYSU-Software

      Synthetic Biology, depending on interdisciplinary knowledge and experience , cooperates wet and dry experiments to create artificial biological systems . Our team has developed a novel software system, BiArkit, to facilitate the design and engineering of specially functional systems. For visualization of genomic data and expression level of functional genes, we develop GenomeBrowser and G-Circle Besides, Biobrick is localized and transformed into searching kit for users to get comprehensive information conveniently. Further, Riboswitch and SiRNA are designed to compute out potential regulatory parts for engineering systems. For processing data from system level, MetaNetwork can illustrate information of various biological pathways on the graphical and user-friendly interface. And Simulator is intended for modifying and simulating genome-scale metabolic models, which involves many kinds of analyses to predict possible results of conditional changes in experiments.All the functional modules have been successfully added to the Clotho Frame. read more

      This is the section for sequences information. With this browser, researchers can surf for genomes from the typical model organisms. Users can locate the interested genes in terms of the input items, including name, product or coordinate. In addition, new genomes data will be saved on our website as downloadable contents.

     This is the section for parts information. It can facilitate researchers to search features and functions of Biobricks documented in the Registry of Standard Biological Parts. All of the relevant operations can be completed without connecting with the Internet.

      This is the section for generating parts information. It can assist researchers to design the sequences and structures of potential riboswitches according to their inputs and choices of aptamers. Both of the up-regulation and down-regulation riboswiches can be provided by this kit.

      This is the section for generating parts information. It can design another regulator in engineering biological systems – siRNA. According to the input sequences, it can figure out the potential siRNA automatically.

      This is the section for system information. Given the friendly interface, researchers can explore and acquire their interested gene’s relevant pathways and networks in one map. Users can even drag every graphic element in the maps to check the information conveniently and effectively.

      This is the section for generating system information. Based on the reconstruction of genome-scale models, researcher can use this kit to edit the existent models according to their needs. Then, they can choose different combination of analysis to predict effect from a intended loss-of –function mutation, find necessary and basic genes maintaining the whole system, predict phenotypic behavior under the given environmental conditions and interpret the coupled reaction activities.

      Clotho assists researchers to engineer synthetic biological systems and manage the data which is used to create them. It has been developed as the App environment that anyone can create and share new tools in it. These tools facilitate synthetic biologists to arrange their researches under the computer-based and automated- designed environment. Thus, to advanced develop the Clotho frame, we have successfully transfer the seven parts of our software, BiArkit, into Apps. Users can choose to employ our software through the Clotho media.

      This is the section for sequence information. It can illustrate the given genome and the expression level of genes within it under different environment in one graph. In addition, we have developed it as one app and integrated it into Clotho.

read more

  •    video

    Version 1.00 Sept.2012Version 1.05 Oct.2012