Team:SUSTC-Shenzhen-B/clotho.html

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> ...")
m
 
(17 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<head>
+
  <head>
-
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
    <meta charset="utf-8" />
-
                <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
+
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
                <script type="text/javascript" src="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/bootstrap.min.js?action=raw&amp;ctype=text/javascript"></script>
+
-
                <link type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/CSS/style.css?action=raw&amp;ctype=text/css" />
+
-
<link type="text/css" rel="stylesheet" href="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/CSS/bootstrap.min.css?action=raw&amp;ctype=text/css" />
+
-
<link type="text/css" rel="stylesheet" href="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/CSS/bootstrap-responsive.min.css?action=raw&amp;ctype=text/css" />
+
-
<style type="text/css">
+
-
p {
+
-
text-indent: 2em;
+
-
}
+
-
#content-inner {
+
-
margin: 82px;
+
-
}
+
-
</style>
+
-
                <script>
+
-
$(document).ready(function(){
+
-
                        $("head style").remove();
+
-
                        $("#top-section").remove();
+
-
                        $("#top").remove();
+
-
                        $("#siteSub").remove();
+
-
                        $("#footer-box").remove(); 
+
-
                        $(".printfooter").remove();   
+
-
                        $(".firstHeading").remove();               
+
-
});
+
-
</script>
+
-
</head>
+
-
<body data-spy="scroll" data-target=".bs-docs-sidebar">
+
-
<div class="navbar navbar-inverse navbar-fixed-top">
+
-
  <div class="navbar-inner">
+
-
    <div class="container">
+
-
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
-
        <span class="icon-bar"></span>
+
-
        <span class="icon-bar"></span>
+
-
        <span class="icon-bar"></span>
+
-
      </a>
+
-
      <ul class="nav">
+
-
  <li class="dropdown"><a id="iGEM_nav" href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="https://static.igem.org/mediawiki/2013/2/26/2013ustcigem_IGEM_basic_Logo.png" /><b class="caret"></b></a>
+
-
    <ul class="dropdown-menu">
+
-
                                                        <li><a href="2013.igem.org">Back to iGEM Homepage</a></li>
+
-
                                                        <li><a href="https://igem.org/Team_Wikis?year=2013">Back to iGEM Wiki Page</a></li>
+
-
                                                        <li class="divider"></li>
+
-
                                                        <li><a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/clotho.html&amp;action=edit">Edit</a></li>
+
-
                                                        <li><a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/clotho.html&amp;action=history">History</a></li>
+
-
                                                        <li><a href="https://igem.org/User_Information">My Account</a></li>
+
-
    </ul>
+
-
  </li>
+
-
</ul>
+
-
      <div class="nav-collapse collapse">
+
-
      <ul class="nav">
+
-
                                                        <li class="active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<b class="caret"></b></a>
+
-
                        <ul class="dropdown-menu">
+
-
                          <li><a href="project.html">Overview</a></li>
+
-
                          <li><a href="circuit.html">Circuit Registry</a></li>
+
-
                          <li><a href="lgd.html">LGD</a></li>
+
-
                          <li><a href="clotho.html">Clotho</a></li>
+
-
                          <li><a href="safty.html">Safety Form</a></li>
+
-
                          <li><a href="achievement.html">Achievement</a></li>
+
-
                                                                    </ul>
+
-
                                                        </li>
+
-
                                                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<b class="caret"></b></a>
+
-
                        <ul class="dropdown-menu">
+
-
                          <li><a href="team.html">Team Member</a></li>
+
-
                          <li><a href="lgd.html">Contribution</a></li>
+
-
                          <li><a href="sustc.html">About SUSTC</a></li>
+
-
                          <li><a href="notebook.html">Notebook</a></li>
+
-
                                                                    </ul>
+
-
                                                        </li>
+
-
                                                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice<b class="caret"></b></a>
+
-
                        <ul class="dropdown-menu">
+
-
                          <li><a href="team.html">Team Member</a></li>
+
-
                          <li><a href="lgd.html">Contribution</a></li>
+
-
                          <li><a href="sustc.html">About SUSTC</a></li>
+
-
                          <li><a href="notebook.html">Notebook</a></li>
+
-
                                                                    </ul>
+
-
                                                        </li>
+
-
  <li><a href="thank.html">Special Thanks</a></li>
+
-
</ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
<div id="content-inner" class="container">
+
-
<div class="row">
+
-
<div class="span3 bs-docs-sidebar">
+
-
<ul class="nav nav-list" data-spy="affix" data-offset-top="200">
+
-
                                                <li class="nav-header">Clotho</li>
+
-
  <li class="active"><a href="#introduction">Introduction</a></li>
+
-
                                                <li><a href="#mindroad">TTEC</a></li>
+
-
                                                <li><a href="#lgd">Bio Search</a></li>
+
-
                                                <li><a href="#tutorial">Tutorail</a></li>
+
-
</ul>
+
-
</div>
+
-
<div class="span9">
+
-
<h2 id="introduction">Introduction</h2>
+
-
<h3>Mind Road</h3>
+
-
<p>A useful net structural mind map to help users know what the existing synthetic biology projects and what else they can do.</p>
+
-
<h3>LGD</h3>
+
-
<p>Short for logical genetic designer, LGD is a genetic circuit CAD that can present the detail information of the engineering bacteria and “calculate” the relationship of related parts based on our database.</p>
+
-
<h3>TTEC</h3>
+
-
<p>TTEC is the abbreviation of Transcriptional Terminator Efficiency Calculator. It is the last year’s project of SUSTC and can calculate the efficiency of a terminator. TTEC plays an important role of building up our synthetic biology community in the future.</p>
+
-
<h2 id="circuit">Circuit Registry</h2>
+
    <meta name="description" content="" />
-
                                        <h4>Mind Road</h4>
+
    <meta name="author" content="SUSTC-ShenZhen-B" />
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
 
-
                                        <h4>Circuit List</h4>
+
    <title>SUSTC-ShenZhen-B</title>
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
 
-
<h2 id="lgd">LGD</h2>
+
    <style type="text/css">
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #globalWrapper {width: 100%;font-size: 100%;}
-
<h2 id="ttec">TTEC on Clotho</h2>
+
      #top-section {width: 100%; height:100%; border:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #p-logo {display:none;}
-
<h2 id="tutorial">Tutorial</h2>
+
      #search-controls {display:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      .printfooter {display:none;}
-
<h2 id="feedback">Feedback</h2>
+
      #footer-box {border:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      .firstHeading {display:none;}
-
<h2 id="safety">Safety Form</h2>
+
      #content { border:none !important; width:1024px !important; background: url('') !important;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #bodyContent {border:none;}
-
<h2 id="achievement">Achievement</h2>
+
      #catlinks {display:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #footer-box {display:none;}
-
</div>
+
      #menubar {display:none;}
-
</div>
+
      body {
-
</div>
+
        padding: 0;
-
</body>
+
      }
 +
 
 +
      .caret {
 +
        display: inline-block;
 +
        width: 0;
 +
        height: 0;
 +
        margin-left: 2px;
 +
        vertical-align: middle;
 +
        border-top: 4px solid #000000;
 +
        border-right: 4px solid transparent;
 +
        border-bottom: 0 dotted;
 +
        border-left: 4px solid transparent;
 +
        content: "";
 +
      }
 +
      .icon.caret {
 +
        opacity: 0.75;
 +
      }
 +
      .white.caret {
 +
        border-top-color: #FFFFFF;
 +
      }
 +
      .main.menu {
 +
        top: 0;
 +
      }
 +
      .script.image {
 +
        display: none;
 +
      }
 +
      .minimize {
 +
        max-width: 90%;
 +
      }
 +
    </style>
 +
    <link rel="stylesheet" type="text/css" href="/SUSTC-SZ-B_2013iGEM/CSS/wiki-all.min.css?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700" />
 +
 
 +
  </head>
 +
  <body id="example">
 +
    <div class="ui fixed transparent inverted main menu">
 +
      <div class="container">
 +
        <a href="#" class="brand">SUSTC-ShenZhen-B</a>
 +
        <div class="right menu">
 +
          <a href="http://circuitplus.org" class="item">Visit Circuit+</a>
 +
        </div>
 +
        <div href="/" class="ui dropdown link item">
 +
          iGEM
 +
          <span class="icon white caret"></span>
 +
          <div class="menu">
 +
            <a href="https://2013.igem.org/Main_Page" class="item">iGEM homepage</a>
 +
            <a href="/Team:SUSTC-Shenzhen-B" class="item">wiki homepage</a>
 +
            <a href="https://igem.org/User_Information" class="item">My Account</a>
 +
            <a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/clotho.html&amp;action=edit" class="item">Edit</a>
 +
          </div>
 +
        </div>
 +
        <a href="project.html" class="item">Overview</a>
 +
        <a href="standard.html" class="item">Standard and database</a>
 +
        <div href="/Team:SUSTC-Shenzhen-B/Software" class="ui dropdown link active item">
 +
          Software
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="circuitplus.html" class="item">Circuit+</a>
 +
            <a href="tutorial.html" class="item">Tutorial</a>
 +
            <a href="safety.html" class="item">Safety</a>
 +
            <a href="feedback.html" class="item">Feedback</a>
 +
            <a href="future.html" class="item">Future</a>
 +
            <a href="lab.html" class="item">Lab Manager</a>
 +
            <a href="clotho.html" class="item">Clotho</a>
 +
          </div>
 +
        </div>
 +
        <div href="/Team:SUSTC-Shenzhen-B/HumanPractice" class="ui dropdown link item">
 +
          Human practice
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="workshop.html" class="item">Workshop meeting</a>
 +
            <a href="publicity.html" class="item">Publicity</a>
 +
          </div>
 +
        </div>
 +
        <a href="achievement.html" class="item">Achievement</a>
 +
        <div href="/Team:SUSTC-Shenzhen-B/Team" class="ui dropdown link item">
 +
          Team
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="about.html" class="item">About us</a>
 +
            <a href="notebook.html" class="item">Notebook</a>
 +
            <a href="acknowledgement.html" class="item">Acknoledgement</a>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="header">
 +
      <div class="segment">
 +
        <div id="overview" class="container">
 +
          <div class="introduction">
 +
            <h1 class="ui dividing header">Clotho</h1>
 +
            <p class="lead">Clotho applications.</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="main container page">
 +
      <div class="peek">
 +
        <div class="ui vertical pointing secondary menu">
 +
          <a class="active item">Introduction</a>
 +
          <a class="item">Circuit List</a>
 +
          <a class="item">TTEC</a>
 +
          <a class="active item" href="/Team:SUSTC-Shenzhen-B">Back to Homepage</a>
 +
        </div>
 +
      </div>
 +
      <div class="page-container">
 +
        <h2 class="ui dividing header">Introduction</h2>
 +
        <section id=""></section>
 +
        <p>Clotho is a popular software framework in synthetic biology. It provides many applications which are very useful in synthetic biology. It can also extend itself by utilizing applications developed by others. So, in order to enrich the function of Clotho and to make more people experience our software, we developed two applications, Circuit List and TTEC.</p>
 +
        <h2 class="ui dividing header">Circuit List</h2>
 +
        <section id=""></section>
 +
        <p>We developed a Clotho verion of Circuit+, Circuit List. Though it's not very perfect, it can make users experience Circuit+ on Clotho.</p>
 +
        <img class="minimize" src="https://static.igem.org/mediawiki/2013/e/eb/Circuit_list_all.png" />
 +
        <h2 class="ui dividing header">TTEC</h2>
 +
        <section id=""></section>
 +
        <p>TTEC, which is short for Transcriptional Terminator Efficiency Calculator, was developed by team SUSTC-Shenzhen-B in 2012. It calculate the efficiency of transcription terminator from the primary nucleotide sequences. We transplanted TTEC to Clotho platform to make more people use this useful tool. And this is prompted by iGEM that use existing iGEM software to develop new tools.If you want to know more about TTEC, the older one, please visit <a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B">wiki of SUSTC-Shenzhen-B 2012</a>. </p>
 +
        <img class="minimize" src="https://static.igem.org/mediawiki/2013/7/71/Ttec_all.png" />
 +
      </div>
 +
    </div>
 +
 
 +
    <div class="footer">
 +
      <div class="ui divider">
 +
      </div>
 +
      <div class="ui divided horizontal footer link list">
 +
        <div class="item">
 +
          &copy; SUSTC-ShenZhen-B
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
 +
    <script type="text/javascript" src="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/wiki-all.min.js?action=raw&amp;ctype=text/javascript"></script>
 +
 
 +
    <script type="text/javascript">
 +
      function png2text(pngurl, id, callback) {
 +
        var canvas = document.createElement("canvas"),
 +
        ctx = canvas.getContext("2d");
 +
        img = new Image();
 +
   
 +
        img.id = 'pt-' + id;
 +
        img.className = 'script image';
 +
        img.style.position = "absolute";
 +
        img.style.left = "-10000px";
 +
        document.body.appendChild(img);
 +
 
 +
        img.onload = function() {
 +
          var
 +
            w = this.width,
 +
            h = this.height;
 +
 
 +
          canvas.width = w;
 +
          canvas.height = h;
 +
          canvas.style.width = w+"px";
 +
          canvas.style.height = h+"px";
 +
 
 +
          ctx.drawImage(this, 0, 0);
 +
 
 +
          var data = ctx.getImageData(0, 0, w, h).data,
 +
            a = [],
 +
            len = data.length,
 +
            p = -1;
 +
         
 +
          for (var i=0; i < len; i += 4) {
 +
            if (data[i] > 0)
 +
              a[++p] = String.fromCharCode(data[i]);
 +
          };
 +
 
 +
          canvas = undefined;
 +
          try {
 +
            //document.body.removeChild(img);
 +
            $('#pt-' + id).remove();
 +
          } catch (e) {
 +
          }
 +
 
 +
          if (callback) callback(a.join(""));
 +
        };
 +
 
 +
        img.src = pngurl;
 +
      }
 +
 
 +
      function baseRemove() {
 +
        $('#top-section').remove();
 +
        $('#content').attr('id', '');
 +
        $('#bodyContent').attr('id', '');
 +
        $('#globalWrapper').attr('id', '');
 +
 
 +
        $('.main.container.page').parent().attr('id', 'example');
 +
      }
 +
 
 +
      function loadJavascript() {
 +
        /* $.get("https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/wiki-all.min.js?action=raw&ctype=text/javascript", function (data) {
 +
          eval(data);
 +
        }); */
 +
        /* png2text('https://static.igem.org/mediawiki/2013/4/43/Wiki-all-min-js.png', 'wiki-all', function (text) {
 +
          eval(text);
 +
        }); */
 +
      }
 +
 
 +
      $(document).ready(function () {
 +
        baseRemove();
 +
        loadJavascript();
 +
      });
 +
    </script>
 +
  </body>
</html>
</html>

Latest revision as of 03:53, 29 October 2013

SUSTC-ShenZhen-B

Clotho

Clotho applications.

Introduction

Clotho is a popular software framework in synthetic biology. It provides many applications which are very useful in synthetic biology. It can also extend itself by utilizing applications developed by others. So, in order to enrich the function of Clotho and to make more people experience our software, we developed two applications, Circuit List and TTEC.

Circuit List

We developed a Clotho verion of Circuit+, Circuit List. Though it's not very perfect, it can make users experience Circuit+ on Clotho.

TTEC

TTEC, which is short for Transcriptional Terminator Efficiency Calculator, was developed by team SUSTC-Shenzhen-B in 2012. It calculate the efficiency of transcription terminator from the primary nucleotide sequences. We transplanted TTEC to Clotho platform to make more people use this useful tool. And this is prompted by iGEM that use existing iGEM software to develop new tools.If you want to know more about TTEC, the older one, please visit wiki of SUSTC-Shenzhen-B 2012.