|
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | | | |
| − | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
| |
| − | <head>
| |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| − | <meta name="generator" content="MediaWiki 1.16.5" />
| |
| − | <link rel="shortcut icon" href="/favicon.ico" />
| |
| − | <link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2014.igem.org (en)" />
| |
| − | <link title="Creative Commons" type="application/rdf+xml" href="/wiki/index.php?title=WikitemplateA_home&action=creativecommons" rel="meta" />
| |
| − | <link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
| |
| − | <link rel="alternate" type="application/atom+xml" title="2014.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&feed=atom" /> <title>WikitemplateA home - 2014.igem.org</title>
| |
| − | <style type="text/css" media="screen, projection">/*<![CDATA[*/
| |
| − | @import "/wiki/skins/common/shared.css?270";
| |
| − | @import "/wiki/skins/igem/main.css?270";
| |
| − | /*]]>*/</style>
| |
| − | <link rel="stylesheet" type="text/css" media="print" href="/wiki/skins/common/commonPrint.css?270" />
| |
| − | <!--[if lt IE 5.5000]><style type="text/css">@import "/wiki/skins/igem/IE50Fixes.css?270";</style><![endif]-->
| |
| − | <!--[if IE 5.5000]><style type="text/css">@import "/wiki/skins/igem/IE55Fixes.css?270";</style><![endif]-->
| |
| − | <!--[if IE 6]><style type="text/css">@import "/wiki/skins/igem/IE60Fixes.css?270";</style><![endif]-->
| |
| − | <!--[if IE 7]><style type="text/css">@import "/wiki/skins/igem/IE70Fixes.css?270";</style><![endif]-->
| |
| − | <!--[if lt IE 7]><script type="text/javascript" src="/wiki/skins/common/IEFixes.js?270"></script>
| |
| − | <meta http-equiv="imagetoolbar" content="no" /><![endif]-->
| |
| − |
| |
| − | <script type="text/javascript" src="/wiki/skins/common/wikibits.js?270"><!-- wikibits js --></script>
| |
| − | <!-- Head Scripts -->
| |
| − | <script src="/wiki/skins/common/ajax.js?270"></script>
| |
| − | <script src="/wiki/skins/common/mwsuggest.js?270"></script>
| |
| − | <script type="text/javascript" src="/wiki/index.php?title=-&action=raw&gen=js&useskin=igem"><!-- site js --></script>
| |
| − | <!-- jQuery Javascript -->
| |
| − | <script type='text/javascript' src ='/common/jquery-latest.min.js'></script>
| |
| − | <script type='text/javascript' src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
| |
| − | <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
| |
| − | <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
| |
| − | <link rel='stylesheet' type='text/css' href='/forum/forum_styles.css' />
| |
| − | <script type='text/javascript' src ='/forum/forum_scripts.js'></script>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − |
| |
| − | <div id="top-section">
| |
| − |
| |
| − | <script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div class="right-menu noprint" id="menubar">
| |
| − | <ul>
| |
| − | <li id="pt-login"><a href="/wiki/index.php?title=Special:UserLogin&returnto=WikitemplateA_home" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o">Log in</a></li> </ul>
| |
| − | </div><!-- end right menubar -->
| |
| − |
| |
| − | <div id="search-controls" class="noprint">
| |
| − | <form action="/Special:Search" id="searchform">
| |
| − | <input id="searchInput" name="search" type="text" title="Search 2014.igem.org [f]" accesskey="f" value="" />
| |
| − | <input type='submit' name="go" class="searchButton" id="searchGoButton" value="Go" title="Go to a page with this exact name if exists" />
| |
| − | <input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
| |
| − | </form>
| |
| − | </div> <!-- close search controls -->
| |
| − | </div> <!-- close top-section-->
| |
| − | <div id="content">
| |
| − | <a name="top" id="top"></a>
| |
| − | <h1 class="firstHeading">WikitemplateA home</h1>
| |
| − | <div id="bodyContent">
| |
| − | <h3 id="siteSub" class='noprint'>From 2014.igem.org</h3>
| |
| − | <div id="contentSub"></div>
| |
| − | <!--
| |
| − | <div id="jump-to-nav">Jump to: <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div>-->
| |
| − | <!-- start content -->
| |
| − | <p>
| |
| − |
| |
| − |
| |
| − | <!-- this section changes the default wiki template to a
| |
| − | white full width background -->
| |
| − |
| |
| − | <style type="text/css">
| |
| − | #contentSub, #footer-box, #catlinks, #search-controls, #p-
| |
| − |
| |
| − | logo, #sideMenu, #menubar, .logo_2017, .printfooter, .firstHeading,.visualClear {display:
| |
| − |
| |
| − | none;} /*-- hides default wiki settings --*/
| |
| − |
| |
| − | #top-section { /*-- styling for default menu bar (edit, page,
| |
| − |
| |
| − | history, etc.) --*/
| |
| − |
| |
| − | border: 0 none;
| |
| − | height: 14px;
| |
| − | z-index: 100;
| |
| − | top: 0;
| |
| − | position: fixed;
| |
| − | width: 975px;
| |
| − | left: 50%;
| |
| − | margin-left: -487px;
| |
| − | }
| |
| − |
| |
| − | #globalWrapper, #content { /*-- changes default wiki settings
| |
| − |
| |
| − | --*/
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | border: 0px;
| |
| − | background-color: transparent;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | html, body, .wrapper { /*-- changes default wiki settings --
| |
| − |
| |
| − | */
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background-color: transparent;
| |
| − | }
| |
| − | </style>
| |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
| |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
| |
| − |
| |
| − |
| |
| − |
| |
| − | <style>@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);
| |
| − |
| |
| − | body {
| |
| − | margin: 0;
| |
| − | padding:0;
| |
| − | background-color: #393939;
| |
| − | font-size: 14px;
| |
| − | }
| |
| − | .wrapper {
| |
| − | width:100%;
| |
| − | margin: 0 auto;
| |
| − |
| |
| − | }
| |
| − | ::-webkit-scrollbar-track {
| |
| − | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
| |
| − | border-radius: 10px;
| |
| − | background-color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | ::-webkit-scrollbar
| |
| − | {
| |
| − | width: 12px;
| |
| − | background-color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | ::-webkit-scrollbar-thumb
| |
| − | {
| |
| − | border-radius: 10px;
| |
| − | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
| |
| − | background-color: #555;
| |
| − | }
| |
| − | /* Selfmade Icons */
| |
| − |
| |
| − |
| |
| − |
| |
| − | @media only screen and (min-width: 480px) {
| |
| − |
| |
| − | .navbar-brand {
| |
| − |
| |
| − | padding-left: 13px;
| |
| − | padding-top: 1px;
| |
| − | background-color: transparent;
| |
| − | pointer-events: none;
| |
| − |
| |
| − | }
| |
| − | .rotator {
| |
| − | width: 80px;/* update this */
| |
| − | height: 81px;/* update this */
| |
| − | border-radius: 60%;
| |
| − | border-bottom: 9px solid rgba(0,0,0,0.9);
| |
| − | border-top: 9px solid transparent;
| |
| − | border-left: 9px solid transparent;
| |
| − | border-right: 8px solid rgba(0,0,0,0.9);
| |
| − | transform: rotate(45deg);
| |
| − | }
| |
| − | .navbar-brand>.rotator>img {
| |
| − | transform: rotate(-45deg);
| |
| − | width: 101%;/* update this */
| |
| − | height: auto;/* update this */
| |
| − | border-radius: 60%;
| |
| − | }
| |
| − |
| |
| − | .navbar {
| |
| − | background-color: rgba(0,0,0,0.9);
| |
| − | transition: background-color 300ms linear;
| |
| − | height: 55px;
| |
| − | min-height: 55px;
| |
| − | z-index: 2;
| |
| − |
| |
| − | }
| |
| − | .clearspace {
| |
| − | height: 5px;
| |
| − | }
| |
| − | .clearspace::before{
| |
| − | content: "\200B";
| |
| − | }
| |
| − | #cssmenu ul,
| |
| − | #cssmenu ul li,
| |
| − | #cssmenu ul li a {
| |
| − |
| |
| − | list-style: none;
| |
| − | line-height: 1;
| |
| − | display: block;
| |
| − | position: relative;
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #cssmenu > ul {
| |
| − | padding-left: 160px;
| |
| − | }
| |
| − | #cssmenu > ul > li {
| |
| − | float: left;
| |
| − | background-color: transparent;
| |
| − | z-index: 5;
| |
| − | padding-left: 3%;
| |
| − | white-space: nowrap;
| |
| − | }
| |
| − |
| |
| − | #cssmenu > ul > li:hover > a {
| |
| − | color: gold;
| |
| − | }
| |
| − | #cssmenu > ul > li > a {
| |
| − | height: 50px;
| |
| − | width: auto;
| |
| − |
| |
| − | display: inline-block;
| |
| − | cursor: pointer;
| |
| − | z-index: 2;
| |
| − | font-size: 15px;
| |
| − | text-decoration: none;
| |
| − | color: #ffffff;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | text-align: center;
| |
| − | padding-top: 20px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #cssmenu > ul > li:nth-child(2):hover > a:after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | left: 10px;
| |
| − | top: 48px;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | border-left: 10px solid transparent;
| |
| − | border-right: 10px solid transparent;
| |
| − | border-bottom: 10px solid white;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /* New */
| |
| − | #cssmenu > ul > li > ul {
| |
| − | background-color: black;
| |
| − | width: 100%;
| |
| − | padding-left: 0px;
| |
| − | height: auto;
| |
| − | border-bottom-left-radius: 5px;
| |
| − | border-bottom-right-radius: 5px;
| |
| − | border-top: 2px solid white;
| |
| − | visibility: hidden;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #cssmenu > ul > li:hover > ul {
| |
| − | visibility: visible;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #cssmenu > ul > li:hover > ul > li {
| |
| − | text-align: center;
| |
| − | }
| |
| − | .Options {
| |
| − | color: white;
| |
| − | padding: 2px;
| |
| − | font-size: 14px;
| |
| − | font-family: -apple-system, BlinkMacSystemFont, sans-serif;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .Options:hover {
| |
| − | color: gold;
| |
| − | text-decoration: none;
| |
| − | -webkit-transition: color .3s ease;
| |
| − | -o-transition: color .3s ease;
| |
| − | transition: color .3s ease;
| |
| − | font-weight: 500;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 480px) {
| |
| − | .navbar-brand {
| |
| − |
| |
| − | padding-left: 20px;
| |
| − | background-color: transparent;
| |
| − | pointer-events: none;
| |
| − |
| |
| − | }
| |
| − | .rotator {
| |
| − | width: 80px;/* update this */
| |
| − | height: 81px;/* update this */
| |
| − | border-radius: 60%;
| |
| − | border-bottom: 9px solid rgba(0,0,0,0.9);
| |
| − | border-top: 9px solid transparent;
| |
| − | border-left: 9px solid transparent;
| |
| − | border-right: 8px solid rgba(0,0,0,0.9);
| |
| − | transform: rotate(45deg);
| |
| − | }
| |
| − | .navbar-brand>.rotator>img {
| |
| − | transform: rotate(-45deg);
| |
| − | width: 101%;/* update this */
| |
| − | height: auto;/* update this */
| |
| − | border-radius: 60%;
| |
| − | }
| |
| − |
| |
| − | .navbar {
| |
| − | background-color: rgba(0,0,0,0.9);
| |
| − | transition: background-color 300ms linear;
| |
| − | height: 60px;
| |
| − | min-height: 60px;
| |
| − | z-index: 2;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #cssmenu {
| |
| − | position: fixed;
| |
| − | background-color: red;
| |
| − | }
| |
| − | #cssmenu ul,
| |
| − | #cssmenu ul li,
| |
| − | #cssmenu ul li a {
| |
| − |
| |
| − | list-style: none;
| |
| − | line-height: 1;
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Menu Appearance */
| |
| − |
| |
| − | .pushy{
| |
| − | position: fixed;
| |
| − | width: 200px;
| |
| − | height: 100%;
| |
| − | top: 0;
| |
| − | z-index: 9999;
| |
| − | background: #333332;
| |
| − | font-size: 0.9em;
| |
| − | font-weight: bold;
| |
| − | -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
| |
| − | -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
| |
| − | box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
| |
| − | overflow: auto;
| |
| − | -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
| |
| − | }
| |
| − |
| |
| − | .pushy > ul {
| |
| − |
| |
| − | list-style: none;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .pushy a, #side_sub{
| |
| − | display: block;
| |
| − | color: #b3b3b1;
| |
| − | padding: 15px 30px;
| |
| − | list-style: none;
| |
| − | border-bottom: 1px solid rgba(0, 0, 0, .1);
| |
| − | border-top: 1px solid rgba(255, 255, 255, .1);
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .pushy a:click{
| |
| − | background: #00b4ff;
| |
| − | color: #FFF;
| |
| − | }
| |
| − |
| |
| − | /* Menu Movement */
| |
| − |
| |
| − |
| |
| − | .pushy-left{
| |
| − | left:0px;
| |
| − | -webkit-transform: translate3d(-200px,0,0);
| |
| − | -moz-transform: translate3d(-200px,0,0);
| |
| − | -ms-transform: translate3d(-200px,0,0);
| |
| − | -o-transform: translate3d(-200px,0,0);
| |
| − | transform: translate3d(-200px,0,0);
| |
| − | }
| |
| − |
| |
| − | .pushy-left-open{
| |
| − | left:0px;
| |
| − | -webkit-transform: translate3d(0,0,0);
| |
| − | -moz-transform: translate3d(0,0,0);
| |
| − | -ms-transform: translate3d(0,0,0);
| |
| − | -o-transform: translate3d(0,0,0);
| |
| − | transform: translate3d(0,0,0);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .container-left-push{
| |
| − | -webkit-transform: translate3d(200px,0,0);
| |
| − | -moz-transform: translate3d(200px,0,0);
| |
| − | -ms-transform: translate3d(200px,0,0);
| |
| − | -o-transform: translate3d(200px,0,0);
| |
| − | transform: translate3d(200px,0,0);
| |
| − | }
| |
| − |
| |
| − | .pushy-right{
| |
| − | right:0px;
| |
| − | -webkit-transform: translate3d(200px,0,0);
| |
| − | -moz-transform: translate3d(200px,0,0);
| |
| − | -ms-transform: translate3d(200px,0,0);
| |
| − | -o-transform: translate3d(200px,0,0);
| |
| − | transform: translate3d(200px,0,0);
| |
| − | }
| |
| − |
| |
| − | .pushy-right-open{
| |
| − | right:0px;
| |
| − | -webkit-transform: translate3d(0,0,0);
| |
| − | -moz-transform: translate3d(0,0,0);
| |
| − | -ms-transform: translate3d(0,0,0);
| |
| − | -o-transform: translate3d(0,0,0);
| |
| − | transform: translate3d(0,0,0);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .container-right-push{
| |
| − | -webkit-transform: translate3d(-200px,0,0);
| |
| − | -moz-transform: translate3d(-200px,0,0);
| |
| − | -ms-transform: translate3d(-200px,0,0);
| |
| − | -o-transform: translate3d(-200px,0,0);
| |
| − | transform: translate3d(-200px,0,0);
| |
| − | }
| |
| − |
| |
| − | .pushy-top{
| |
| − | height: auto;
| |
| − | width: 100%;
| |
| − | -webkit-transform: translate3d(0,-100%,0);
| |
| − | -moz-transform: translate3d(0,-100%,0);
| |
| − | -ms-transform: translate3d(0,-100%,0);
| |
| − | -o-transform: translate3d(0,-100%,0);
| |
| − | transform: translate3d(0,-100%,0);
| |
| − | }
| |
| − |
| |
| − | .pushy-top-open{
| |
| − | top:0px;
| |
| − | height: auto;
| |
| − | width: 100%;
| |
| − | -webkit-transform: translate3d(0,0,0);
| |
| − | -moz-transform: translate3d(0,0,0);
| |
| − | -ms-transform: translate3d(0,0,0);
| |
| − | -o-transform: translate3d(0,0,0);
| |
| − | transform: translate3d(0,0,0);
| |
| − | }
| |
| − |
| |
| − | .container-top-push{
| |
| − | -webkit-transform: translate3d(0,0,0);
| |
| − | -moz-transform: translate3d(0,0,0);
| |
| − | -ms-transform: translate3d(0,0,0);
| |
| − | -o-transform: translate3d(0,0,0);
| |
| − | transform: translate3d(0,0,0);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .push-push{
| |
| − | -webkit-transform: translate3d(200px,0,0);
| |
| − | -moz-transform: translate3d(200px,0,0);
| |
| − | -ms-transform: translate3d(200px,0,0);
| |
| − | -o-transform: translate3d(200px,0,0);
| |
| − | transform: translate3d(200px,0,0);
| |
| − | }
| |
| − |
| |
| − | /* Menu Transitions */
| |
| − |
| |
| − | .pushy, #container, .push{
| |
| − | -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
| |
| − | -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
| |
| − | -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
| |
| − | transition: transform .2s cubic-bezier(.16, .68, .43, .99);
| |
| − | }
| |
| − |
| |
| − | .pushy ul > li:active {
| |
| − | background-color: red;
| |
| − | }
| |
| − | /* Site Overlay */
| |
| − |
| |
| − | .overlay-pushy{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .overlay-pushy.overlay-active {
| |
| − | display: block;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | z-index: 9998;
| |
| − | background-color: rgba(0,0,0,0.5);
| |
| − | -webkit-animation: fade 500ms;
| |
| − | -moz-animation: fade 500ms;
| |
| − | -o-animation: fade 500ms;
| |
| − | animation: fade 500ms;
| |
| − | }
| |
| − |
| |
| − | @keyframes fade{
| |
| − | 0% { opacity: 0; }
| |
| − | 100% { opacity: 1; }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes fade{
| |
| − | 0% { opacity: 0; }
| |
| − | 100% { opacity: 1; }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fade{
| |
| − | 0% { opacity: 0; }
| |
| − | 100% { opacity: 1; }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes fade{
| |
| − | 0% { opacity: 0; }
| |
| − | 100% { opacity: 1; }
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | #sidesub > li.active > ul {
| |
| − | display: block;
| |
| − | }
| |
| − | .align-right {
| |
| − | float: right;
| |
| − | }
| |
| − | #sidesub > li > a {
| |
| − | padding: 16px 22px;
| |
| − | cursor: pointer;
| |
| − | z-index: 2;
| |
| − | font-size: 16px;
| |
| − | text-decoration: none;
| |
| − | color: #ffffff;
| |
| − | background: #3ab4a6;
| |
| − | -webkit-transition: color .2s ease;
| |
| − | -o-transition: color .2s ease;
| |
| − | transition: color .2s ease;
| |
| − | }
| |
| − | #sidesub > li > a:hover {
| |
| − | color: #d8f3f0;
| |
| − | }
| |
| − | #sidesub > li.has-sub > a:after {
| |
| − | position: absolute;
| |
| − | right: 26px;
| |
| − | top: 19px;
| |
| − | z-index: 5;
| |
| − | display: block;
| |
| − | height: 10px;
| |
| − | width: 2px;
| |
| − | background: #ffffff;
| |
| − | content: "";
| |
| − | -webkit-transition: all 0.1s ease-out;
| |
| − | -moz-transition: all 0.1s ease-out;
| |
| − | -ms-transition: all 0.1s ease-out;
| |
| − | -o-transition: all 0.1s ease-out;
| |
| − | transition: all 0.1s ease-out;
| |
| − | }
| |
| − | #sidesub > li.has-sub > a:before {
| |
| − | position: absolute;
| |
| − | right: 22px;
| |
| − | top: 23px;
| |
| − | display: block;
| |
| − | width: 10px;
| |
| − | height: 2px;
| |
| − | background: #ffffff;
| |
| − | content: "";
| |
| − | -webkit-transition: all 0.1s ease-out;
| |
| − | -moz-transition: all 0.1s ease-out;
| |
| − | -ms-transition: all 0.1s ease-out;
| |
| − | -o-transition: all 0.1s ease-out;
| |
| − | transition: all 0.1s ease-out;
| |
| − | }
| |
| − | #side_sub > li.has-sub.open > a:after,
| |
| − | #side_sub > li.has-sub.open > a:before {
| |
| − | -webkit-transform: rotate(45deg);
| |
| − | -moz-transform: rotate(45deg);
| |
| − | -ms-transform: rotate(45deg);
| |
| − | -o-transform: rotate(45deg);
| |
| − | transform: rotate(45deg);
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 768px){
| |
| − | .pushy{
| |
| − | font-size: 1.0em;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .bgimg-1, .bgimg-2, .bgimg-3 {
| |
| − | position: relative;
| |
| − | opacity: 0.7;
| |
| − | background-attachment: fixed;
| |
| − | background-position: center;
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: cover;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .bgimg-1 {
| |
| − | background-image: url("");
| |
| − | min-height: 600px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .caption {
| |
| − | position: absolute;
| |
| − | left: 0;
| |
| − | top: 50%;
| |
| − | width: 100%;
| |
| − | text-align: center;
| |
| − | color: #000;
| |
| − | }
| |
| − |
| |
| − | .caption span.border {
| |
| − | background-color: #111;
| |
| − | color: #fff;
| |
| − | padding: 18px;
| |
| − | font-size: 25px;
| |
| − | letter-spacing: 10px;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | letter-spacing: 5px;
| |
| − | text-transform: uppercase;
| |
| − | font: 20px "Lato", sans-serif;
| |
| − | color: #111;
| |
| − | }
| |
| − |
| |
| − | .AI {
| |
| − | padding: 4px;
| |
| − | border: 2px solid whitesmoke;
| |
| − | border-radius: 20px;
| |
| − | margin-top: 80px;
| |
| − | }
| |
| − |
| |
| − | table {
| |
| − | font-family: arial, sans-serif;
| |
| − | border-collapse: collapse;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | td, th {
| |
| − | border: 1px solid #dddddd;
| |
| − | text-align: left;
| |
| − | padding: 8px;
| |
| − | }
| |
| − |
| |
| − | tr:nth-child(even) {
| |
| − | background-color: #dddddd;
| |
| − | color: #393939
| |
| − | }
| |
| − |
| |
| − | .image_container {
| |
| − | margin: 0px 10px 0px 0px;
| |
| − | }
| |
| − |
| |
| − | #form1, #form2, #form3 {
| |
| − | padding-top: 30px;
| |
| − | height: 150px;
| |
| − | }
| |
| − | #form4 {
| |
| − | padding-top:30px;
| |
| − | height: 200px;
| |
| − | }
| |
| − | input {
| |
| − | border-radius: 5px;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | <div class="wrapper">
| |
| − | <nav class="navbar navbar-fixed-top" id="vert_nav">
| |
| − | <div class="container-fluid">
| |
| − | <div class="navbar-header">
| |
| − |
| |
| − | <div class="side-left-pushy-button" style="float:left;"><a class="navbar-brand" href="#">
| |
| − | </a></div>
| |
| − | </div>
| |
| − | <div class="navbar-collapse collapse" id="cssmenu">
| |
| − | <ul>
| |
| − | <li><a href="#">Achievements</a></li>
| |
| − | <li style="text-align: center;"><a href='#'>Project</a>
| |
| − | <ul>
| |
| − | <li><a class="Options">Overview</a></li>
| |
| − | <li><a class="Options">Description</a></li>
| |
| − | <li><a class="Options">Results</a></li>
| |
| − | <li><a class="Options">Parts</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a href='#'>Modeling</a></li>
| |
| − | <li><a href="#">Software</a></li>
| |
| − | <li><a href="#">Hardware</a></li>
| |
| − | <li><a href='#'>HP</a></li>
| |
| − | <li><a href='#'>Notebook</a></li>
| |
| − | <li><a href='#'>Credits </a></li>
| |
| − | <li><a href="#">Toolbox</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <!--/.nav-collapse -->
| |
| − | </div>
| |
| − | <!--/.container-fluid -->
| |
| − | </nav>
| |
| − | <nav id="sideLeftPushy" class="pushy pushy-left" >
| |
| − | <ul>
| |
| − | <li><a href="#">Item 1</a></li>
| |
| − | <li class="has-sub" onclick="sidebar()"><a href="#">Item 2</a></li>
| |
| − | <ul id="side_sub">
| |
| − | <li><a href="#">Item 2a</a></li>
| |
| − | <li><a href="#">Item 2b</a></li>
| |
| − | </ul>
| |
| − | <li><a href="#">Item 3</a></li>
| |
| − | <li><a href="#">Item 4</a></li>
| |
| − | <li><a href="#">Item 5</a></li>
| |
| − | <li><a href="#">Item 6</a></li>
| |
| − | </ul>
| |
| − | </nav>
| |
| − | <div class="container-fluid" style="margin-top: 100px; padding-bottom: 30px;">
| |
| − | <div class="row">
| |
| − | <div class="col-md-1 col-xs-2"></div>
| |
| − | <div class="col-md-10 col-xs-14" style="background-color: whitesmoke; color:#393939;">
| |
| − | <div class="row">
| |
| − |
| |
| − | <div class="col-md-12" align="justify">
| |
| − | <h1>Medium consumption model #iGEMgoesgreen </h1>
| |
| − | <p>PACE usually consumes an extraordinary amount of medium per experiment. This is due to the need for a continuous supply of host E. coli with a constant cell density. This can be achieved either by using a turbidostat or a chemostat.</p>
| |
| − | <p>Here we provide a tool to both the community and ourselves to calculate medium consumption based on different tunable parameters of PACE. We also want to gain an understanding on how we can reduce the amount of medium needed for an experiment.</p>
| |
| − | <p>Medium consumption is critical when it comes to the energy needed for an experiment because autoclaving needs a lot of energy.</p>
| |
| − | <p>In a turbidostat the cell density is held constant by adjusting the medium influx to the cell density. That means the growth of the E. coli is not affected, instead for every new E. coli one E. coli is put to waste.
| |
| − | $$\frac{\partial c_{E. coli}}{\partial t} = 0$$</p>
| |
| − | <p>In a Chemostat the cell density is controlled by adjusting the influx of an essential nutrient to the cell density, which limits the growth of the culture. This may cause the E. coli to be less efficient in producing producing the proteins needed for PACE and replicating the phage genome. Additionally there is a constant eflux from the chemostat to the lagoons, that compensates the growth of the E. coli.</p>
| |
| − | <p>Currently we are using a turbidostat, because probably PACE works better when the E. coli are allowed to grow at their maximum speed under the given conditions. So their ability to produce phage as fast as possible is not impaired.</p>
| |
| − | <p>Here we can make statements on how much energy we save with a specific setup relative to another one, but we do not estimate the absolute amount of energy that is used.</p>
| |
| − | <h2>Configure the plot:</h2>
| |
| − | <p>"Resolution" controls how many datapoints are calculated in each dimension, therefore complexity of both memory and computation increased with the square of Resolution. Increase for a smoother heatmap and decrease for a faster result. Values between 20 and 500 are reasonable</p>
| |
| − | <p>"Flow trough Chemostat", \(\Phi_{chemostat}\), the amount of medium that is pumped trough the chemostat during one hour. Depends on turbidostat volume, lagoon volume and quantity, flow trough lagoon. A greater total lagoon volume with a higher flow requires greater flow through the chemostat. For turbidostats the flow is calculated using the volume of the turbidostat and the generation time of the E. coli.$$\Phi_{turbidostat} = V_{Turbidostat} * \frac{\ln{2}}{t_{E. coli}}$$</p>
| |
| − | <p>"Maximum Duration", \(t_{E. coli}\) controls the upper border of the y-axis.</p>
| |
| − | <p>"Generation Time E. coli" sets the time in which the E. coli population doubles itself when in exponential phase. Only affects values for turbidostats, because chemostats control the generation time themselves.</p>
| |
| − | <p>"Volume of Turbidostat", actually the volume of the culture in the turbidostat. Only affects Turbidostats.</p>
| |
| − | <p>Calculation of the medium used in a turbidostat: $$V_{medium} = t * \Phi_{turbidostat} = t * V_{turbidostat} * \frac{\ln{2}}{t_{E. coli}}$$ </p>
| |
| − | <p>Calculation of the medium used in a chemostat: $$V_{medium} = t * \Phi_{chemostat}$$</p>
| |
| − | <h2>Read the plot:</h2>
| |
| − | <p>When working with a turbidostat the upper x axis is relevant, when working with a chemostat the lower is. Put the mouse pointer on the heatmap to show the exact values for that point. You can zoom in by drawing the rectangle that should be shown with pressed left mouse button. You can always save the current plot by clicking on the photo</p>
| |
| − | <h2>Caution</h2>
| |
| − | <p>Submitting one of the forms recalculates all values and the heatmap based on the values in all the forms.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-3"></div>
| |
| − | <div class="col-md-9">
| |
| − | <form action="" id="form1">
| |
| − | <div>
| |
| − | <p>
| |
| − | <label>
| |
| − | Resolution [#datapoints] <br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_res" value="500" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Flow trough chemostat, \(\Phi_{chemostat}\) [mL/h]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_ap" value="3000" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Maximum Duration [days]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_at" value="35" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Generation Time E. coli, \(t_{E. coli}\) [min]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_td" value="30" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Volume of Turbidostat, \(V_{turbidostat}\) [ml]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_v" value="1500" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <input type="button" value="Submit" id="input_form" onclick="return callcalc(0,0);">
| |
| − | </p>
| |
| − | </form>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="graph1" width="200px"></div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-12" align="justify">
| |
| − | <h2>Your experiment</h2>
| |
| − | <p>You can annotate a point in the heatmap by providing it's coordinates and it's name. If you have a turbidostat, the value for Flow is ignored, if you have a chemostat, the volume is ignored. For the calculation of the flow trough the turbidostat, the value for generation time from the form above is used.</p>
| |
| − | <p>Enter your specifications: </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-3"></div>
| |
| − | <div class="col-md-9">
| |
| − | <form action="" id="form2">
| |
| − | <div>
| |
| − | <p>
| |
| − | <label>
| |
| − | Volume of turbidostat, \(V_{turbidostat}\) [ml]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_vt" value="1000" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Duration [days] <br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_t" value="5" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Name <br>
| |
| − | <input type="text" id="id_name" value="exp1" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Flow trough chemostat, \(\Phi_{chemostat}\) [mL/h] <br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_p" value="1380" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Type (either 'turbo' or 'chemo') <br>
| |
| − | <input type="text" id="id_type" value="turbo" lang='en-150' step="any">
| |
| − | </label>
| |
| − |
| |
| − | <input type="button" value="Submit" id="input_form" onclick="return specifications();">
| |
| − | </p>
| |
| − | </div>
| |
| − | </form>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-12" align="justify">
| |
| − | <p id="yexperiment"></p>
| |
| − | <h2>Minmal Turbidostat Volume</h2>
| |
| − | <p>As larger turbidostats or chemostats with a larger flow need more medium for the same duration than smaller ones, working with the minimal required volume or flow is a way to save medium and thus energy. The minimal flow that is required can be calculated using $$V_{turbidostat} = b * V_{lagoon} * N_{lagoon} * \Phi_{lagoon}$$</p>
| |
| − | <p>In case of fluctuations in the generation time of the E. coli it is crucial to have a buffer so that the turbidostat is not diluted, when the culture grows slower. We currently use a buffer of 50 %. For a turbidostat, the volume can be calculated from the flow using
| |
| − | $$V_{turbidostat} = \Phi_{turbidostat} * \frac{t_{E. coli}}{\ln{2}}$$
| |
| − | </p>
| |
| − | <p>The calculation is based on wether turbidostatat or chemostat is picked above.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-4"></div>
| |
| − | <div class="col-md-8">
| |
| − | <form action="" id="form3">
| |
| − | <div>
| |
| − | <p>
| |
| − | <label>
| |
| − | Volume of Lagoons, \(V_{lagoon}\) [ml]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_vl" value="100" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Number of Lagoons, \(N_{lagoon}\)<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_nl" value="2" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Flow trough Lagoons, \(\Phi_{lagoon, V/h}\) [volumes/h]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_pl" value="1" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <input type="button" value="Submit" id="input_form" onclick="return calcvt();">
| |
| − | </p>
| |
| − | </div>
| |
| − | </form>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-12" align="justify">
| |
| − | <p id="mturbidostat"></p>
| |
| − | <h2>Minimal Lagoon Volume</h2>
| |
| − | <p>Obviously smaller lagoons require smaller turbidostats or chemostats with a lower flow and are therefore saving medium. However it there is a lower limit to lagoon size, if the phage population is too small, the sequence space that can be coverd is insufficient to find variants that are better than previous ones.</p>
| |
| − | <p>There are a lot of possible ways to estimate the size of the lagoons, here we show one based on the sequence length and mutation rate.</p>
| |
| − | <p>The size of the phage population per lagoon is
| |
| − | $$N_{phage} = c_{phage} * V_{lagoon}$$
| |
| − | , the total sequence length is
| |
| − | $$l_{total} = N_{phage} * l_{sequence}$$
| |
| − | , the number of mutations that occur during one generation is
| |
| − | $$\frac{N_{mutations}^{real}}{N_{generations}} = l_{total} * r_{mutation}$$
| |
| − | with \(N_{phage}\), the total number of phage in one lagoon, \(l_{total}\)total, the total sequence length and \(l_{sequence}\) the length of a single sequence. \(r_{mutation}\) is the mutation rate, \(N_{mutation}\) the number of mutations during one generation</p>
| |
| − | <p>The number of possible n-fold mutants of a sequence with length sl can be calculated by
| |
| − | $$N_{n-fold mutations}^{theoretical} = 3^{n} * r_{mutation}^n * \frac{l_{total}!}{(l_{total}-n)!}$$
| |
| − | , as there are three possibilities for each basepair to be exchanged to and with each additional mutation there is one possible position less. The number of n-fold mutants that can occur in a lagoon can be calculated using
| |
| − | $$N_{n-fold mutations}^{real} = N_{phage} * (r_{mutation} * l_{total})^n$$
| |
| − | , therefore the required lagoon volume is $$V_{lagoon} = a * \frac{N_{n-fold mutations}}{N_{n-fold mutations}^{real}}$$.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-3"></div>
| |
| − | <div class="col-md-9">
| |
| − | <form action="" id="form4">
| |
| − | <div>
| |
| − | <p>
| |
| − | <label>
| |
| − | Sequence Length, \(l_{sequnce}\) [bp]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_sl" value="1000" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Theoretical coverage of double mutants in the second phage generation, \(a\) [x]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_tc" value="5" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Mutation rate, \(r_{mutation}\) [BP/(BP*Generation)]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_mr" value="5e-5" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <label>
| |
| − | Phage concentration, \(c_{phage}\) [pfu]<br>
| |
| − | <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="id_cp" value="1e8" lang='en-150' step="any">
| |
| − | </label>
| |
| − | <input type="button" value="Submit" id="input_form" onclick="return calcvl();">
| |
| − | </p>
| |
| − | </div>
| |
| − | </form>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-12" align="justify">
| |
| − | <p id="mlagoon"></p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="clear"></div>
| |
| − | </div>
| |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
| |
| − | <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
| |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/numjs/0.13.1/numjs.js"></script>
| |
| − | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
| |
| − | <script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.min.js"></script>
| |
| − | <script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
| |
| − | <script>
| |
| − | var waste = callcalc(0,0);
| |
| − |
| |
| − | var plt = [];
| |
| − | function callcalc(phi, t){
| |
| − | g_res = document.getElementById('id_res').value;
| |
| − | var g_at = document.getElementById('id_at').value;
| |
| − | var g_ap = document.getElementById('id_ap').value;
| |
| − | var g_td = document.getElementById('id_td').value;
| |
| − | var g_v = document.getElementById('id_v').value;
| |
| − | if(1.1 * phi > g_ap){
| |
| − | g_ap = 1.1*phi;
| |
| − | }
| |
| − | if(1.1 * t > g_at){
| |
| − | g_at = 1.1*t;
| |
| − | }
| |
| − | plt = calc(g_res, g_at, g_ap, g_td, g_v);
| |
| − | waste = plot();
| |
| − |
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | function calc(i_res, i_at, i_ap, i_td, i_v) {
| |
| − |
| |
| − |
| |
| − | var res = Number(i_res);
| |
| − | var at = Number(i_at);
| |
| − | var ap = Number(i_ap);
| |
| − | var td = Number(i_td);
| |
| − | var v = Number(i_v);
| |
| − | var ln = Math.LN2;
| |
| − | GRAPH1 = document.getElementById('graph1');
| |
| − |
| |
| − | var para = nj.arange(0, ap+(ap/res), (ap/(res-1)));
| |
| − | var tara = nj.arange(0, at+(at/res), (at/(res-1)));
| |
| − | var parr = para.tolist();
| |
| − | var tarr = tara.tolist();
| |
| − |
| |
| − | var varr = new Array(res);
| |
| − | for(var i = 0; i < res; i++){
| |
| − | varr[i] = parr[i] * ((td/60)/ln);
| |
| − | }
| |
| − |
| |
| − | var pltz = new Array(res);
| |
| − | for(var i = 0; i < res; i++){
| |
| − | pltz[i] = new Array(res);
| |
| − | }
| |
| − | for(var it = 0; it < res; it++){
| |
| − | for(var ip = 0; ip < res; ip++){
| |
| − | pltz[it][ip] = (parr[ip]/1000) * (tarr[it]*24);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var pltz2 = new Array(res);
| |
| − | for(var i = 0; i < res; i++){
| |
| − | pltz2[i] = new Array(res);
| |
| − | }
| |
| − | for(var it = 0; it < res; it++){
| |
| − | for(var ip = 0; ip < res; ip++){
| |
| − | pltz2[it][ip] = 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var hovertext = new Array(res);
| |
| − | for(var i = 0; i < res; i++){
| |
| − | hovertext[i] = new Array(res);
| |
| − | }
| |
| − |
| |
| − | for(var i = 0; i < res; i++){
| |
| − | for(var j = 0; j < res; j++){
| |
| − | hovertext[i][j] = 'Consumption: ' + (Math.round(pltz[i][j])) + 'L for<br>Duration: ' + (Math.round(tarr[i])) + ' days,<br>Volume (Turbidostat): ' + (Math.round(varr[j])) + ' ml,<br>Flow (Chemostat): ' + (Math.round(parr[j])) + 'mL/h';
| |
| − | }
| |
| − | }
| |
| − | var esvelt = { //TODO: find actual values
| |
| − | x: (2000*ln/(td/60)), //for V = 2000
| |
| − | y: 3,
| |
| − | text: 'Esvelt et al.(Turbidostat)',
| |
| − |
| |
| − | font:{
| |
| − | family: 'Courier New, monospace',
| |
| − | size: 11,
| |
| − | color: '#FFFFFF'
| |
| − | },
| |
| − | showarrow: true,
| |
| − | arrowcolor: '#FFFFFF'
| |
| − | }
| |
| − | var dickinson = { //TODO: find actual values
| |
| − | x: 1800,
| |
| − | y: 30,
| |
| − | text: 'Dickinson et al.(Chemostat)',
| |
| − |
| |
| − | font:{
| |
| − | family: 'Courier New, monospace',
| |
| − | size: 11,
| |
| − | color: '#FFFFFF'
| |
| − | },
| |
| − | showarrow: true,
| |
| − | arrowcolor: '#FFFFFF'
| |
| − | }
| |
| − | var annotations = [];
| |
| − | if (esvelt['x']<1.1*ap) {
| |
| − | if (esvelt['y']<(at/1.1)) {
| |
| − | annotations.push(esvelt);
| |
| − | }
| |
| − | }
| |
| − | if (dickinson['x']<1.1*ap) {
| |
| − | if (dickinson['y']<(at/1.1)) {
| |
| − | annotations.push(dickinson);
| |
| − | }
| |
| − | }
| |
| − | var trace1 = {
| |
| − | z: pltz,
| |
| − | x: parr,
| |
| − | y: tarr,
| |
| − | hoverinfo: 'text',
| |
| − | text: hovertext,
| |
| − | name: 'Medium Consumption',
| |
| − | type: 'heatmap',
| |
| − | colorscale: [
| |
| − | ['0.0', 'rgb(20,80,0)'],
| |
| − | ['0.07', 'rgb(40,160,0)'],
| |
| − | ['0.15', 'rgb(200,200,0)'],
| |
| − | ['0.45', 'rgb(160,40,0)'],
| |
| − | ['1.0', 'rgb(80,20,0)']
| |
| − | ]
| |
| − | };
| |
| − |
| |
| − | var trace2 = {
| |
| − | z: pltz2,
| |
| − | y: tarr,
| |
| − | x: varr,
| |
| − | name:'',
| |
| − | type: 'heatmap',
| |
| − | xaxis: 'x2',
| |
| − | visible: false,
| |
| − | showlegend: false
| |
| − | };
| |
| − |
| |
| − | var data = [trace2, trace1];
| |
| − | var layout = {
| |
| − | title: '',
| |
| − | xaxis: {
| |
| − | title: 'Flow trough Turbidostat [mL/h]',
| |
| − | range: [0, ap],
| |
| − | titlefont: {
| |
| − | family: 'Courier New, monospace',
| |
| − | size: 18,
| |
| − | color: '#7f7f7f'
| |
| − | }
| |
| − | },
| |
| − | xaxis2:{
| |
| − | title: 'Volume of Turbidostat [mL]',
| |
| − | overlaying: 'x',
| |
| − | ticks: 'outside',
| |
| − | side: 'top',
| |
| − | range: [0, (ap*(td/(60*ln)))],
| |
| − | titlefont: {
| |
| − | family: 'Courier New, monospace',
| |
| − | size: 18,
| |
| − | color: '#7f7f7f'
| |
| − | }
| |
| − | },
| |
| − | yaxis: {
| |
| − | title: 'Duration [days]',
| |
| − | titlefont: {
| |
| − | family: 'Courier New, monospace',
| |
| − | size: 18,
| |
| − | color: '#7f7f7f'
| |
| − | }
| |
| − | },
| |
| − | annotations: annotations
| |
| − | };
| |
| − |
| |
| − | return([GRAPH1, data, layout]);
| |
| − | }
| |
| − | function specifications(){
| |
| − | var t = Number(document.getElementById('id_t').value);
| |
| − | var p = Number(document.getElementById('id_p').value);
| |
| − | var name = document.getElementById('id_name').value;
| |
| − | var type = document.getElementById('id_type').value;
| |
| − | var vt = Number(document.getElementById('id_vt').value);
| |
| − | var td = Number(document.getElementById('id_td').value);
| |
| − | calcspecifications(t, p, name, type, vt, td);
| |
| − | }
| |
| − |
| |
| − | function calcspecifications(t, p, name, type, vt, td){
| |
| − | if(type == "turbo"){
| |
| − | p = vt*(Math.LN2/(td/60));
| |
| − | //name +="(Turbidostat)";
| |
| − | var yexptext = "The flow trough your turbidostat will be " + (Math.round(p)) + " ml/h."; //TODO fix this is not rounding
| |
| − | }
| |
| − | else if(type == "chemo"){
| |
| − | //name += "(Chemostat)";
| |
| − | var yexptext = "";
| |
| − | }
| |
| − |
| |
| − | var annot = {
| |
| − | xref: 'x1',
| |
| − | yref: 'y1',
| |
| − | x: p,
| |
| − | y: t,
| |
| − | text: name,
| |
| − |
| |
| − | font:{
| |
| − | family: 'Courier New, monospace',
| |
| − | size: 11,
| |
| − | color: '#FFFFFF'
| |
| − | },
| |
| − | showarrow: true,
| |
| − | arrowcolor: '#FFFFFF'
| |
| − | };
| |
| − | waste = callcalc(p,t);
| |
| − | plt[2]['annotations'].push(annot);
| |
| − | var yexptext = "The flow trough your turbidostat will be " + p + " ml/h.";
| |
| − | $("#yexperiment").html(yexptext);
| |
| − | waste = plot();
| |
| − | }
| |
| − | function calcvt(){
| |
| − | var vl = Number(document.getElementById('id_vl').value);
| |
| − | var nl = Number(document.getElementById('id_nl').value);
| |
| − | var pl = Number(document.getElementById('id_pl').value);
| |
| − | vt(vl, nl, pl, '');
| |
| − | }
| |
| − | function vt(vl, nl, pl, info){
| |
| − | var vt = 1.5 * vl * nl * pl;
| |
| − |
| |
| − | var t = Number(document.getElementById('id_t').value);
| |
| − | var p = Number(document.getElementById('id_p').value);
| |
| − | var mttext = "The required turbidostat Volume is " + vt + " mL.";
| |
| − | if(info == ''){
| |
| − | var name = 'Calculation for ' + nl + ' Lagoons <br> with ' + (Math.round(vl)) + 'mL at ' + (Math.round(pl)) + ' Volumes/h';
| |
| − | }
| |
| − | else{
| |
| − | var name = info;
| |
| − | }
| |
| − | var type = 'turbo';
| |
| − | var td = Number(document.getElementById('id_td').value);
| |
| − | $("#mturbidostat").html(mttext);
| |
| − | calcspecifications(t, p, name, type, vt, td);
| |
| − |
| |
| − | //TODO: Somehow print vt
| |
| − | }
| |
| − |
| |
| − | function calcvl(){
| |
| − | //"Induced MP6 results in an average of 6.2e-6 substitutions per bp per generation" (Development of potent in vivo mutagenesis plasmids with broad mutational spectra, Badran & Liu)
| |
| − | //"The basal mutation rate of replicating filamentous phage (5.3x10–7 substitutions/bp)34 is sufficient to generate all possible single but not double mutants of a given library member in a 100 mL lagoon. For a target gene 1,000 base-pairs in length, a basal mutation rate of 5x10^-7 yields 2.5x10^7 base substitutions spread over 5x10^10 copies of the gene in a 100 mL lagoon after one phage generation, easily covering all single point mutants but not all double mutants. Arabinose induction of the MP can increase the mutation rate to ~5x10-5, yielding ~2.5x10^9 mutations spread over 5x10^10 copies of the gene after one generation. The vast majority are single mutants which together comprise a target area of ~2.5x10^12 base pairs, suggesting that some 1.2x10^8 are double mutants, sufficient to cover all 9x10^6 possible double mutants." (Supplements, "A System for the con...", Esvelt et al.)
| |
| − | //(sl*19*(sl-1)*19+sl*19) * tc = cp * vl * (t/td) * mr * sl
| |
| − | var sl = Number(document.getElementById('id_sl').value);
| |
| − | var tc = Number(document.getElementById('id_tc').value);
| |
| − | var mr = Number(document.getElementById('id_mr').value);
| |
| − | var cp = Number(document.getElementById('id_cp').value);
| |
| − | var p = Number(document.getElementById('id_p').value);
| |
| − | var vl = Number(document.getElementById('id_vl').value);
| |
| − |
| |
| − | //real nx-mut = cp*vl*(mr*sl)^n;
| |
| − | var posdoublemut = 3*sl*3*(sl-1);
| |
| − | var vl = posdoublemut*(tc) / (cp*mr*mr*sl*sl);
| |
| − | var nl = Number(document.getElementById('id_nl').value);
| |
| − | var pl = Number(document.getElementById('id_pl').value);
| |
| − | var info = nl + ' Lagoons of ' + (Math.round(vl)) + ' mL, covers double mutants <br> of a ' + sl + ' bp sequence ' + tc + '-fold';
| |
| − | var mltext = "A lagoon volume of " + (Math.round(vl)) + " mL is required."
| |
| − | $("#mlagoon").html(mltext);
| |
| − | vt(vl, nl, pl, info);
| |
| − | //TODO: Somehow print vl
| |
| − |
| |
| − | }
| |
| − |
| |
| − | function plot(){
| |
| − | Plotly.newPlot(plt[0], plt[1], plt[2]);
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | /* Current Plotly.js version */
| |
| − | // Next section
| |
| − |
| |
| − | </script>
| |
| − | </div>
| |
| − |
| |
| − | <footer style="background-color:whitesmoke; margin-top: 30px;">
| |
| − | <div class="container-fluid">
| |
| − | <div class="row">
| |
| − | <div class="col-md-1"></div>
| |
| − | <div class="col-md-2"><h3 style="color:#393939">Contact us:</h3></div>
| |
| − | <div class="col-md-3"></div>
| |
| − | <div class="col-md-5"><h3 style="color:#393939">Special Thanks to our Sponsors:</h3></div>
| |
| − | <div class="col-md-1"></div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-md-1"></div>
| |
| − | <div class="col-md-5"><p style="color:#393939">You can reach us on <a href="https://www.facebook.com/"><img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Facebook.svg" style="padding-left: 5px; padding-right:5px" width="50px" height="auto"></a>and<a href="https://www.twitter.com/"><img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Twitter.svg" style="padding-left: 5px; padding-right:5px" width="50px" height="auto"></a></p></div>
| |
| − | <div class="col-md-5" >
| |
| − | <img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Hamilton.png" width="20%" height="auto" style="background-color: white; border-radius: 5px;">
| |
| − | <img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Qiagen.png" width="10%" height="auto" style="background-color: white; border-radius: 5px;">
| |
| − | <img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Sartorius.png" width="23%" height="auto" style="background-color: white; border-radius: 5px;">
| |
| − | </div>
| |
| − | <div class="col-md-1"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </footer>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!-- Saved in parser cache with key 2014_igem_org:pcache:idhash:224-0!1!0!!en!2!edit=0 and timestamp 20170831072851 -->
| |
| − | <div class="printfooter">
| |
| − | Retrieved from "<a href="https://2014.igem.org/WikitemplateA_home">https://2014.igem.org/WikitemplateA_home</a>"</div>
| |
| − | <div id="catlinks"><div id='catlinks' class='catlinks catlinks-allhidden'></div></div> <!-- end content -->
| |
| − | <div class="visualClear"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- PAGE FOOTER -- ITEMS FROM COLUMN ! HAVE BEEN MOVED HERE -- RDR -->
| |
| − | <div class="visualClear"></div>
| |
| − | <div id='footer-box' class='noprint'>
| |
| − | <div id="footer">
| |
| − | <div id="f-poweredbyico"><a href="http://www.mediawiki.org/"><img src="/wiki/skins/common/images/poweredby_mediawiki_88x31.png" height="31" width="88" alt="Powered by MediaWiki" /></a></div> <div id="f-copyrightico"><a href="http://creativecommons.org/licenses/by/3.0/"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Attribution 3.0 Unported" width="88" height="31" /></a></div> <ul id="f-list">
| |
| − |
| |
| − |
| |
| − | <!-- Recentchanges is not handles well DEBUG -->
| |
| − | <li id="t-recentchanges"><a href="/Special:RecentChanges"
| |
| − | title='Recent changes'>Recent changes</a></li>
| |
| − |
| |
| − | <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/WikitemplateA_home"
| |
| − | title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
| |
| − |
| |
| − | <li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/WikitemplateA_home"
| |
| − | title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <li id="t-specialpages"><a href="/Special:SpecialPages"
| |
| − | title="List of all special pages [q]" accesskey="q">Special pages</a>
| |
| − | </li>
| |
| − | <li><a href='/Special:Preferences'>My preferences</a></li>
| |
| − | </ul>
| |
| − | </div> <!-- close footer -->
| |
| − | <div id='footer'>
| |
| − | <ul id="f-list">
| |
| − |
| |
| − | <li id="t-print"><a href="/wiki/index.php?title=WikitemplateA_home&printable=yes"
| |
| − | title="Printable version of this page [p]" accesskey="p">Printable version</a>
| |
| − | </li>
| |
| − |
| |
| − | <li id="t-permalink"><a href="/wiki/index.php?title=WikitemplateA_home&oldid=145279"
| |
| − | title="Permanent link to this revision of the page">Permanent link</a>
| |
| − | </li>
| |
| − |
| |
| − |
| |
| − | <li id="privacy"><a href="/2014.igem.org:Privacy_policy" title="2014.igem.org:Privacy policy">Privacy policy</a></li>
| |
| − | <li id="disclaimer"><a href="/2014.igem.org:General_disclaimer" title="2014.igem.org:General disclaimer">Disclaimers</a></li>
| |
| − | </ul>
| |
| − | </div> <!-- close footer -->
| |
| − | </div> <!-- close footer-box -->
| |
| − |
| |
| − | <script>if (window.runOnloadHook) runOnloadHook();</script>
| |
| − | </div>
| |
| − | <!-- Served in 0.069 secs. --></body>
| |
| − |
| |
| − | </html>
| |
