Team:TU Delft/Modeling/MFA/Pathways
From 2010.igem.org
(Difference between revisions)
(43 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<style> | <style> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#pathwayinput_box { | #pathwayinput_box { | ||
display: block; | display: block; | ||
Line 23: | Line 7: | ||
margin: 5px; | margin: 5px; | ||
float: left; | float: left; | ||
+ | margin-top: 20px; | ||
} | } | ||
Line 35: | Line 20: | ||
display: block; | display: block; | ||
float: left; | float: left; | ||
+ | margin-top: 40px; | ||
} | } | ||
Line 42: | Line 28: | ||
} | } | ||
+ | #pathway_form { | ||
+ | position: absolute; | ||
+ | z-index:99; | ||
+ | } | ||
</style> | </style> | ||
<form id="pathway_form"> | <form id="pathway_form"> | ||
<div id="pathwayinput_box"> | <div id="pathwayinput_box"> | ||
- | |||
- | |||
<label for="gluc"><input id="gluc" type="radio" name="pwinput" value="gluc">Glucose</label> | <label for="gluc"><input id="gluc" type="radio" name="pwinput" value="gluc">Glucose</label> | ||
+ | <label for="even"><input id="even" type="radio" name="pwinput" value="even" checked="checked">C12-alkane</label> | ||
+ | <label for="odd"><input id="odd" type="radio" name="pwinput" value="odd">C13-alkane</label> | ||
</div> | </div> | ||
<img id="arrow" src="https://static.igem.org/mediawiki/2010/2/2f/Arrow_tud2010.png" /> | <img id="arrow" src="https://static.igem.org/mediawiki/2010/2/2f/Arrow_tud2010.png" /> | ||
<div id="pathwayoutput_box"> | <div id="pathwayoutput_box"> | ||
<label for="growth"><input id="growth" type="radio" name="pwout" value="growth" checked="checked">Biomass growth</label> | <label for="growth"><input id="growth" type="radio" name="pwout" value="growth" checked="checked">Biomass growth</label> | ||
- | <label for="NOx"><input id="NOx" type="radio" name="pwout" value="NOx"> | + | <label for="NOx"><input id="NOx" type="radio" name="pwout" value="NOx">NO3 electron acceptor</label> |
<label for="PHB"><input id="PHB" type="radio" name="pwout" value="PHB">PHB</label> | <label for="PHB"><input id="PHB" type="radio" name="pwout" value="PHB">PHB</label> | ||
<label for="isoprene"><input id="isoprene" type="radio" name="pwout" value="isoprene">Isoprene</label> | <label for="isoprene"><input id="isoprene" type="radio" name="pwout" value="isoprene">Isoprene</label> | ||
Line 60: | Line 50: | ||
</form> | </form> | ||
- | <img id="pathwaybackground" src=" | + | <div id="imgcontainer"> |
+ | <img style="position:absolute;z-index:1;filter:alpha(opacity=25);-moz-opacity:0.25;-khtml-opacity: 0.25;opacity: 0.25;" id="pathwaybackground" src="https://static.igem.org/mediawiki/2010/7/70/Team_TUDelft_All_fluxes.png" width="900"> | ||
+ | <img style="display:none" id="pathwayimg" width="900" /> | ||
+ | </div> | ||
+ | <div style="width:1px;height:1px;overflow:hidden;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/7/70/Team_TUDelft_All_fluxes.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/1/12/Team_TUDelft_even_growth.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/e/e0/Team_TUDelft_even_H2.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/f/f5/Team_TUDelft_even_isoprene.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/5/5d/Team_TUDelft_even_NOx.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/a/a4/Team_TUDelft_even_PHB.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/1/1f/Team_TUDelft_gluc_growth.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/c/c0/Team_TUDelft_gluc_H2.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/6/62/Team_TUDelft_gluc_isoprene.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/9/9e/Team_TUDelft_gluc_NOx.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/2/2b/Team_TUDelft_gluc_PHB.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/5/52/Team_TUDelft_odd_growth.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/8/84/Team_TUDelft_odd_H2.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/2/2c/Team_TUDelft_odd_isoprene.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/d/dd/Team_TUDelft_odd_NOx.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2010/9/91/Team_TUDelft_odd_PHB.png"> | ||
+ | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | |||
+ | var currentInput = 'even'; | ||
+ | var currentOutput = 'growth'; | ||
+ | var currentMid = '1/12'; | ||
+ | |||
+ | function updatepathway() { | ||
+ | if (currentInput == "odd") { | ||
+ | currentMid = '9/91'; | ||
+ | if (currentOutput == "growth") { | ||
+ | currentMid = '5/52'; | ||
+ | } | ||
+ | if (currentOutput == "H2") { | ||
+ | currentMid = '8/84'; | ||
+ | } | ||
+ | if (currentOutput == "isoprene") { | ||
+ | currentMid = '2/2c'; | ||
+ | } | ||
+ | if (currentOutput == "NOx") { | ||
+ | currentMid = 'd/dd'; | ||
+ | } | ||
+ | } | ||
+ | if (currentInput == "even") { | ||
+ | currentMid = 'a/a4'; | ||
+ | if (currentOutput == "growth") { | ||
+ | currentMid = '1/12'; | ||
+ | } | ||
+ | if (currentOutput == "H2") { | ||
+ | currentMid = 'e/e0'; | ||
+ | } | ||
+ | if (currentOutput == "isoprene") { | ||
+ | currentMid = 'f/f5'; | ||
+ | } | ||
+ | if (currentOutput == "NOx") { | ||
+ | currentMid = '5/5d'; | ||
+ | } | ||
+ | } | ||
+ | if (currentInput == "gluc") { | ||
+ | currentMid = '2/2b'; | ||
+ | if (currentOutput == "growth") { | ||
+ | currentMid = '1/1f'; | ||
+ | } | ||
+ | if (currentOutput == "H2") { | ||
+ | currentMid = 'c/c0'; | ||
+ | } | ||
+ | if (currentOutput == "isoprene") { | ||
+ | currentMid = '6/62'; | ||
+ | } | ||
+ | if (currentOutput == "NOx") { | ||
+ | currentMid = '9/9e'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var url = "https://static.igem.org/mediawiki/2010/" + currentMid + "/Team_TUDelft_" + currentInput + "_" + currentOutput + ".png"; | ||
+ | $("#pathwayimg").attr ('src', url).show(); | ||
+ | } | ||
$(function() { | $(function() { | ||
- | $("input[ | + | $("input[name='pwinput']").click(function() { |
- | + | currentInput = $(this).val(); | |
+ | updatepathway(); | ||
}); | }); | ||
+ | $("input[name='pwout']").click(function() { | ||
+ | currentOutput = $(this).val(); | ||
+ | updatepathway(); | ||
+ | }); | ||
+ | |||
+ | updatepathway(); | ||
}); | }); | ||
</script> | </script> | ||
- | |||
</html> | </html> |
Latest revision as of 15:07, 27 October 2010