Difference between revisions of "Team:Fudan-CHINA/Software"

Line 2: Line 2:
 
<html>
 
<html>
  
 +
 +
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
  
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<div id="firstDiv">
 +
<img src="https://static.igem.org/mediawiki/2018/d/d2/T--Fudan-CHINA--sfbgImg.jpg" />
 +
<div class="fiName">Software</div>
 +
<div class="pSentence">
 +
"There are 10 kinds of persons, one knows binary and the other does not know."
 +
</div>
 +
</div>
  
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<div class="mainWords" style="margin:15vw 15vw 5vw 15vw;">
 +
 +
<div class="mainTitle1">
 +
<a class="theAnchor" id="mainTitle1"></a>
 +
Overview
 +
</div>
  
−
<div class="column full_size">
+
<div class="mainContents">
−
<h1>Software</h1>
+
Our software consists of several parts. <br>
−
</div>
+
For the model, we developed a website Graphical User Interface named VisualSTEP that allows the user to adjust the parameters autonomously and it can display the simulation results of the model in real time. This can help others understand our model in depth and freely explore how our STEP system works. <br>
−
<div class="column two_thirds_size">
+
For general biological experiments, we developed a user-friendly biological parameter calculator, which can be applied in several kinds of biology reactions, to minimize the burden of life science researchers calculating parameters before carrying out experiments. These calculators have been used in our wet lab and some experiments done by some third-party users for a while, and have gained a good reputation.<br>
−
<h3>Best Software Tool Special Prize</h3>
+
</div>
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.
+
 +
 +
<div class="mainContents">
 +
 +
</div>
  
  
−
<br><br>
+
<div class="mainTitle1">
−
To compete for the <a href="https://2018.igem.org/Judging/Awards">Best Software Tool prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>.
+
<a class="theAnchor" id="mainTitle2"></a>
−
<br><br>
+
VisualSTEP
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
</div>
−
</p>
+
 +
<div class="mainContents">
 +
We obtained several conclusions which are closely related to the results of wet lab and can provide guidance for future experiments from our model, in which the effect of protease cleavage ability on dynamic range may be the most difficult part to understand. Hence, we develop the software VisualSTEP, now begin your own exploration!
 +
You can adjust the parameters p1, p2 ,d1, d2 in our birth-death process model to find the effect of them on dynamic range. In general, p1>p2>0, d1>d2>0. Hence, the dynamic range is negatively correlated with protease cleavage ability.
 +
</div>
 +
 +
<link href="https://2018.igem.org/Template:Fudan-CHINA/jqueryUiCss?action=raw&amp;ctype=text/css" rel="stylesheet"/>
 +
<script src="https://2018.igem.org/Template:Fudan-CHINA/sf1?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="https://2017.igem.org/Template:Fudan_fp/Javascript?action=raw&amp;ctype=text/javascript"></script>
 +
 +
<script src="https://2018.igem.org/Template:Fudan-CHINA/sf2?action=raw&amp;ctype=text/javascript"></script>
 +
  
  
 +
 +
 +
 +
<div id="Fplot1" class="FplotContainer">
 +
<div id="adjust1" class="adjust">
 +
<div>
 +
<div style="height:20px;float: left;">p1:&nbsp;</div>
 +
<div id="concPCp1text"></div>
 +
<div id="concPCp1" style="width:300px;"></div>
 +
<div style="height:20px;float: left;">p2:&nbsp;</div>
 +
<div id="concPCp2text"></div>
 +
<div id="concPCp2" style="width:300px;"></div>
 +
<div style="height:20px;float: left;">d1:&nbsp;</div>
 +
<div id="bindd1text"></div>
 +
<div id="bindd1" style="width:300px;"></div>
 +
<div style="height:20px;float: left;">d2:&nbsp;</div>
 +
<div id="bindd2text"></div>
 +
<div id="bindd2" style="width:300px;"></div>
 +
</div>
 +
</div>
 +
<div class="FplotImg FplotImg1">
 +
<img class = "tuli1" src="https://static.igem.org/mediawiki/2018/0/02/T--Fudan-CHINA--Tuli1.png">
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
<style>
 +
.FplotContainer{
 +
margin-top: -3vw;
 +
text-align: center;
 +
}
 +
.adjust{
 +
transform: translateX(-50%);
 +
position: relative;
 +
left:50%;
 +
display: block;
 +
width: 17vw;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
.FplotImg{
 +
transform: translateX(-50%);
 +
position: relative;
 +
left:50%;
 +
width: 520px;
 +
display: block;
 +
z-index: 10;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
.tuli1{
 +
position: absolute;
 +
z-index: 20;
 +
top:25px;
 +
right:8px;
 +
width: 380px;
 +
}
 +
 +
</style>
 +
 +
 +
 +
 +
<script>
 +
var P10,P11,P12;
 +
var concPCp1=6.9;
 +
var concPCp2=1.6;
 +
var bindd1=21;
 +
var bindd2=0.21;
 +
paramUpdateO();
 +
FplotO('Fplot1',[P10,P11,P12]);
 +
function FplotO(id,fn) {
 +
    var plotData=[];
 +
    var color=['rgba(143,177,49,1)','rgba(94,129,181,1)','rgba(225,156,36,1)'];
 +
    for(var i=0;i<fn.length;i++){
 +
        plotData[i]={
 +
            fn: fn[i],
 +
            sampler: 'builtIn',
 +
            graphType: 'polyline',
 +
            color: color[i],
 +
            attr: {'stroke-width': 3}
 +
        };
 +
    }
 +
    functionPlot({
 +
        disableZoom: true,
 +
        grid: true,
 +
        xAxis: {
 +
            label: 'Protease cleavage ability',
 +
            domain: [0, 30]
 +
        },
 +
        yAxis: {
 +
            domain: [0, 16]
 +
        },
 +
        target: '#'+id+' .FplotImg',
 +
        data: plotData
 +
    });
 +
}
 +
var Otextl1=$('#concPCp1text');
 +
$('#concPCp1').slider({
 +
    min:0.1,
 +
    max:30,
 +
    step:0.01,
 +
    value:6.9,
 +
    create: function() {
 +
        Otextl1.text( $( this ).slider( "value" ) );
 +
    },
 +
    slide: function(event,ui) {
 +
        concPCp1=ui.value;
 +
        Otextl1.text( ui.value );
 +
        paramUpdateO();
 +
        FplotO('Fplot1',[P10,P11,P12]);
 +
    }
 +
});
 +
var Otextl2=$('#concPCp2text');
 +
$('#concPCp2').slider({
 +
    min:0.1,
 +
    max:16,
 +
    step:0.01,
 +
    value:1.6,
 +
    create: function() {
 +
        Otextl2.text( $( this ).slider( "value" ) );
 +
    },
 +
    slide: function(event,ui) {
 +
        concPCp2=ui.value;
 +
        Otextl2.text( ui.value );
 +
        paramUpdateO();
 +
        FplotO('Fplot1',[P10,P11,P12]);
 +
    }
 +
});
 +
var Otextt1=$('#bindd1text');
 +
$('#bindd1').slider({
 +
    min:20,
 +
    max:80,
 +
    step:0.01,
 +
    value:21,
 +
    create: function() {
 +
        Otextt1.text( $( this ).slider( "value" ) );
 +
    },
 +
    slide: function(event,ui) {
 +
        bindd1=ui.value;
 +
        Otextt1.text( ui.value );
 +
        paramUpdateO();
 +
        FplotO('Fplot1',[P10,P11,P12]);
 +
    }
 +
});
 +
var Otextt2=$('#bindd2text');
 +
$('#bindd2').slider({
 +
    min:0.1,
 +
    max:5,
 +
    step:0.01,
 +
    value:0.21,
 +
    create: function() {
 +
        Otextt2.text( $( this ).slider( "value" ) );
 +
    },
 +
    slide: function(event,ui) {
 +
        bindd2=ui.value;
 +
        Otextt2.text( ui.value );
 +
        paramUpdateO();
 +
        FplotO('Fplot1',[P10,P11,P12]);
 +
    }
 +
});
 +
function paramUpdateO() {
 +
    P10='(5*('+concPCp2+')/('+concPCp1+'))*(x+('+concPCp1+')+('+bindd1+'))/(x+('+concPCp2+')+('+bindd2+'))';
 +
    P11='('+concPCp1+')*x/(x+('+concPCp1+')+('+bindd1+'))';
 +
    P12='5*('+concPCp2+')*x/(x+('+concPCp2+')+('+bindd2+'))';
 +
}
 +
</script>
 +
 +
 +
 +
<div class="mainTitle1">
 +
Biological Parameter Calculator
 +
</div>
 +
<div class="mainContents">
 +
we developed a user-friendly biological parameter calculator, which can be applied in several kinds of biology reactions, to minimize the burden of life science researchers calculating parameters before carrying out experiments. These calculators have been used in our wet lab and some experiments done by some third-party users for a while, and have gained a good reputation.
 +
Input the
 
</div>
 
</div>
  
−
<div class="column third_size">
+
<div class="moleCal" style="padding-bottom: 3vw;margin-bottom:0; ">
−
<div class="highlight decoration_A_full">
+
<div class="moleCalTitle">Mole Ratio Calculator</div>
−
<h3> Inspiration </h3>
+
−
<p>
+
<div style="text-align: center;padding: 0px 20px 20px;">
−
Here are a few examples from previous teams:
+
<span style="font-family:'Times New Roman';font-size:30px;color:lightyellow;">Mode: </span>
−
</p>
+
<form style="display: inline-block;font-size: 20px;color: aliceblue;">
−
<ul>
+
<input type="radio" onclick="chanUn1(this)" name="mode" style="width: 30px;height: 18px;" value="mass" checked>Mass
−
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
+
<input type="radio" onclick="chanUn2(this)" name="mode" style="width: 30px;height: 18px;" value="volume">Volume
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
<input type="text" name="modeCon" onkeyup="clearNoNum(this)" style="margin-left: 20px;">
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
+
<div class="totUni totUni1" style="font-family: Cambria;font-size: 25px;display: inline-block;width: 10px;overflow:visible;"> ng</div>
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
+
<div class="totUni totUni2" style="font-family: Cambria;font-size: 25px;display: inline-block;width: 10px;overflow:visible;"> &mu;L</div>
−
</ul>
+
</form>
 +
</div>
 +
<div style="text-align: center;">
 +
<div class="DNASubmit">Submit</div>
 +
</div>
 +
<div style="margin: 20px 0px 10px;text-align: center;">
 +
<div class="moleChan molePlu"><i class="fa fa-plus"></i></div>
 +
<div class="moleChan moleDed"><i class="fa fa-minus"></i></div>
 +
</div>
 +
 +
<form class="DNAinfo">
 +
<div class="DNAdata DNA1">
 +
<input type="text" name="DNA1" value="DNA1" style="margin-right: 34px;width: 170px;">
 +
<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" type="text" name="DNA1bp"><span style="margin-right: 34px;"> bp</span>
 +
<input type="text" name="DNA1den" onkeyup="clearNoNum(this)"><span style="margin-right: 34px;"> ng/&mu;L</span>
 +
<input type="text" name="DNA1ratio"  onkeyup="clearNoNum(this)" value="input ratio" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){ this.style.color='#C9C9C9';value=defaultValue;}" style="color:#C9C9C9;margin-right:34px; " >
 +
<span>Result:</span>
 +
<span class="moleRatioXValue" style="color:#e6ee6c"> </span><span> &mu;L</span>
 +
</div>
 +
 +
<div class="DNAdata DNA2">
 +
<input type="text" name="DNA2" value="DNA2" style="margin-right: 34px;width: 170px;">
 +
<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" type="text" name="DNA2bp"><span style="margin-right: 34px;"> bp</span>
 +
<input type="text" name="DNA2den" onkeyup="clearNoNum(this)"><span style="margin-right:34px;"> ng/&mu;L</span>
 +
<input type="text" name="DNA2ratio"  onkeyup="clearNoNum(this)" value="input ratio" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){ this.style.color='#C9C9C9';value=defaultValue;}" style="color:#C9C9C9;margin-right:34px; " >
 +
<span>Result:</span>
 +
<span class="moleRatioXValue" style="color:#e6ee6c"> </span><span> &mu;L</span>
 +
</div>
 +
</form>
 +
<div style="text-align: center;">
 +
<div class="DNASubmit">Submit</div>
 +
</div>
 
</div>
 
</div>
 +
 +
<style>
 +
.moleCal{
 +
background-color: #21D4FD;
 +
        background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
 +
}
 +
.moleCal input{
 +
    color: #262f4e;
 +
}
 +
.moleCalTitle{
 +
text-align: center;
 +
font-size: 34px;
 +
padding: 34px;
 +
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 +
color:ghostwhite;
 +
}
 +
.moleChan{
 +
display: inline-block;
 +
width:30px;
 +
height: 30px;
 +
font-size: 17px;
 +
line-height: 30px;
 +
text-align: center;
 +
cursor:pointer;
 +
color: #5c8efe;
 +
background:white;
 +
transition: all .3s ease;
 +
border-radius: 8px;
 +
margin: 0 10px;
 +
}
 +
.moleChan:hover{
 +
background-color:rgba(235,235,235,1.00);
 +
}
 +
.DNASubmit,.DNASave{
 +
transition: all .3s ease;
 +
-webkit-transition:all .3s ease;
 +
width: 50px;
 +
}
 +
.DNASubmit{
 +
display: inline-block;
 +
padding: 10px 30px;
 +
cursor:pointer;
 +
border-radius: 5px;
 +
background: rgba(255,150,50,1);
 +
color: white;
 +
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
 +
font-size: 17px;
 +
}
 +
.DNASubmit:hover{
 +
background: rgba(40,96,144,1);
 +
}
 +
.DNAdata{
 +
margin: 10px 0;
 +
padding: 10px;
 +
text-align: center;
 +
}
 +
.DNAinfo span{
 +
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
 +
font-size: 23px;
 +
color: aliceblue;
 +
}
 +
.moleCal input[type="text"]{
 +
border:1px solid rgba(204,208,215,1);
 +
border-radius: 5px;
 +
width: 120px;
 +
height: 35px;
 +
}
 +
.moleCal input[type="text"]{
 +
text-align: center;
 +
font-size: 20px;
 +
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
 +
}
 +
.moleCal input[type="text"]:hover{
 +
border-color: rgba(0,161,214,1);
 +
box-shadow: 0px 0px 5px rgba(34,34,34,1);
 +
}
 +
.moleCal input[type="text"]:focus{
 +
border:1px solid rgba(0,161,214,1);
 +
outline: none;
 +
box-shadow: 0px 0px 5px rgba(34,34,34,1);
 +
}
 +
</style>
 +
 +
<script>
 +
var moleCalDNAnum=2;
 +
$(".molePlu").click(function(){
 +
if(moleCalDNAnum>8){
 +
alert("The total number is too large!")
 +
return;
 +
}
 +
$(".DNA"+moleCalDNAnum).after($(".DNA"+moleCalDNAnum).clone(true));
 +
moleCalDNAnum+=1;
 +
var cloneDNA=$(".DNAinfo").children("div").eq(moleCalDNAnum-1);
 +
cloneDNA.attr("class","DNA"+moleCalDNAnum);
 +
cloneDNA.children("input").eq(0).attr("name","DNA"+moleCalDNAnum);
 +
cloneDNA.children("input").eq(0).attr("value","DNA"+moleCalDNAnum);
 +
cloneDNA.children("input").eq(1).attr("name","DNA"+moleCalDNAnum+"bp");
 +
cloneDNA.children("input").eq(2).attr("name","DNA"+moleCalDNAnum+"den");
 +
cloneDNA.children("input").eq(3).attr("name","DNA"+moleCalDNAnum+"ratio");
 +
cloneDNA.addClass("DNAdata");
 +
});
 +
$(".moleDed").click(function(){
 +
if(moleCalDNAnum<3){
 +
alert("The total number is too small!")
 +
return;
 +
}
 +
$(".DNAinfo").children(":last").remove();
 +
moleCalDNAnum-=1;
 +
});
 +
 +
 +
function clearNoNum(obj){
 +
    obj.value = obj.value.replace(/[^\d.]/g,"");
 +
    obj.value = obj.value.replace(/\.{2,}/g,".");
 +
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
 +
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
 +
    if(obj.value.indexOf(".")< 0 && obj.value !=""){
 +
        obj.value= parseFloat(obj.value);
 +
    }
 +
}
 +
 +
$(".DNASubmit").click(function(){
 +
var modeSe=$("input[name='mode']:checked").val();
 +
var modeContent=$("input[name='modeCon']").val();
 +
var totalRa=0;
 +
var DNAresult=new Array(moleCalDNAnum);
 +
var DNAratio=new Array(moleCalDNAnum);
 +
var DNAbp=new Array(moleCalDNAnum);
 +
var DNAdensity=new Array(moleCalDNAnum);
 +
if(modeSe=="mass"){
 +
for(var i=0;i<moleCalDNAnum;i++){
 +
DNAratio[i]=$("input[name='DNA"+(i+1)+"ratio']").val();
 +
DNAbp[i]=$("input[name='DNA"+(i+1)+"bp']").val();
 +
DNAdensity[i]=$("input[name='DNA"+(i+1)+"den']").val();
 +
totalRa=totalRa+DNAratio[i]*DNAbp[i];
 +
}
 +
}
 +
else{
 +
for(var i=0;i<moleCalDNAnum;i++){
 +
DNAratio[i]=$("input[name='DNA"+(i+1)+"ratio']").val();
 +
DNAbp[i]=$("input[name='DNA"+(i+1)+"bp']").val();
 +
DNAdensity[i]=$("input[name='DNA"+(i+1)+"den']").val();
 +
totalRa=totalRa+DNAratio[i]*DNAbp[i]/DNAdensity[i];
 +
}
 +
}
 +
for(var i=0;i<moleCalDNAnum;i++){
 +
DNAresult[i]=modeContent*DNAratio[i]*DNAbp[i]/totalRa/DNAdensity[i];
 +
DNAresult[i]=Math.round(DNAresult[i] * 100) / 100;
 +
$(".moleRatioXValue").eq(i).text(""+DNAresult[i]);
 +
}
 +
});
 +
$(".totUni2").hide();
 +
function chanUn1(obj){
 +
$(".totUni1").show();
 +
$(".totUni2").hide();
 +
}
 +
function chanUn2(obj){
 +
$(".totUni2").show();
 +
$(".totUni1").hide();
 +
}
 +
</script>
 +
 +
 +
 +
 +
 +
 
</div>
 
</div>
 +
 +
 +
 +
<!--end--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 +
<!--TEMPLATE:contact-->
 +
 +
<div id="contactUs">
 +
<img width="8%">
 +
<div class="cuCol" id="cuCol1" style="width: 17%;">
 +
<h1 class="cuH1"><i class="fa fa-link"></i>&#160;&#160;Useful Links</h1>
 +
<hr width="50%">
 +
<br/>
 +
        <div class="cuContent">
 +
<a target="_blank" href="https://2018.igem.org/Main_Page"><i class="fa fa-caret-right"></i>&#160;iGEM Main Page</a>
 +
<br/>
 +
<a target="_blank" href="https://2018.igem.org/Main_Page"><i class="fa fa-caret-right"></i>&#160;iGEM Special Pages</a>
 +
</div>
 +
</div>
 +
<img width="5%">
 +
<div class="cuCol" id="cuCol2" style="width: 17%;">
 +
<h1 class="cuH1"><i class="fa fa-envelope-o"></i>&#160;&#160;Email</h1>
 +
<hr width="50%">
 +
<br/>
 +
<div  class="cuContent">
 +
<a href="mailto:igem@fudan.edu.cn"><i class="fa fa-caret-right"></i>&#160;igem@fudan.edu.cn</a>
 +
<br/>
 +
<a href="mailto:kfjin16@fudan.edu.cn"><i class="fa fa-caret-right"></i>&#160;kfjin16@fudan.edu.cn</a>
 +
 +
<br/>
 +
</div>
 +
</div>
 +
<img width="5%">
 +
<div class="cuCol" id="cuCol3" style="width: 30%;">
 +
<h1 class="cuH1"><i class="fa fa-paper-plane"></i>&#160;&#160;Address</h1>
 +
<hr width="50%">
 +
<br/>
 +
<div  class="cuContent">
 +
G604, School of Life Sciences, Fudan University<br/>
 +
2005 Songhu Road, Yangpu, Shanghai, China
 +
</div>
 +
</div>
 +
<img id="cuTeamImg" src="https://static.igem.org/mediawiki/2018/f/fc/T--Fudan-CHINA--teamBadgeWhite.png"/>
 +
</div>
 +
 +
<style>
 +
#contactUs{
 +
width: 100%;
 +
background: rgba(25,25,25,1);
 +
overflow: hidden;
 +
margin: 0;
 +
padding:1.5% 0 3% 0;
 +
text-align: left;
 +
position: relative;
 +
z-index: 100;
 +
}
 +
.cuCol{
 +
      display: inline-block;
 +
position: relative;
 +
left:20px;
 +
opacity: 0;
 +
color: rgba(168,168,168,1.00);
 +
text-align: left;
 +
vertical-align: top;
 +
}
 +
h1.cuH1{
 +
color: white;
 +
font-size: 1.4vw;
 +
font-style: normal;
 +
}
 +
.cuContent{
 +
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
 +
font-size: 1.25vw;
 +
line-height: 1.6vw;
 +
}
 +
#contactUs a{
 +
color: rgba(168,168,168,1.00);
 +
text-decoration: none;
 +
}
 +
#contactUs a:hover{
 +
text-decoration: none;
 +
color:rgba(0,189,234,1);
 +
}
 +
#contactUs a:visited{
 +
text-decoration: none;
 +
}
 +
#contactUs a:active{
 +
text-decoration: none;
 +
}
 +
#contactUs br{
 +
line-height: 1vw;
 +
}
 +
#cuTeamImg{
 +
position: absolute;
 +
top:1vw;
 +
right:4vw;
 +
width: 10vw;
 +
opacity: 0.2;
 +
}
 +
</style>
 +
<script>
 +
slideInLeft($("#cuCol1"),$("#contactUs"),0);
 +
slideInLeft($("#cuCol2"),$("#contactUs"),150);
 +
slideInLeft($("#cuCol3"),$("#contactUs"),300);
 +
$(window).scroll(function(){
 +
slideInLeft($("#cuCol1"),$("#contactUs"),0);
 +
slideInLeft($("#cuCol2"),$("#contactUs"),150);
 +
slideInLeft($("#cuCol3"),$("#contactUs"),300);
 +
});
 +
</script>
 +
 +
<style>
 +
.leftNav{
 +
position: absolute;
 +
top:30vw;
 +
left: 2vw;
 +
list-style: none;
 +
z-index: 3;
 +
}
 +
.leftNav .leftNavA2{
 +
position: relative;
 +
}
 +
.leftNav .leftNavA2:before {
 +
    content: "";
 +
  display: inline-block;
 +
width: 5px;
 +
height: 5px;
 +
  background-color: rgba(55,55,62,0.7);
 +
    border-radius: 50%;
 +
position: absolute;
 +
left: 0.3vw;
 +
top:50%;
 +
margin: 0;
 +
padding: 0;
 +
transform: translateY(-50%);
 +
}
 +
.leftNavUl2{
 +
list-style: none;
 +
}
 +
.leftNavA{
 +
display: block;
 +
font-size: 1.3vw;
 +
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 +
padding: 0.5vw 1.5vw;
 +
color: #ffa400;
 +
text-decoration: none;
 +
}
 +
.leftNavLi2{
 +
width: 16vw;
 +
margin:0.5vw  0;
 +
line-height: 17px;
 +
}
 +
.leftNavA:visited{
 +
text-decoration: none;
 +
color: #ffa400;
 +
}
 +
.leftNavA:focus{
 +
text-decoration: none;
 +
color: #ffa400;
 +
}
 +
.leftNavA:hover,.leftNavA:active{
 +
text-decoration: none;
 +
color: #734a00;
 +
}
 +
 +
.leftNavA2{
 +
display: block;
 +
font-size: 1.1vw;
 +
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
 +
padding: 0.1vw 1.5vw;
 +
color:rgba(168,168,168,1);
 +
text-decoration: none;
 +
}
 +
.leftNavA2:visited{
 +
text-decoration: none;
 +
color:rgba(168,168,168,1);
 +
}
 +
.leftNavA2:focus{
 +
text-decoration: none;
 +
color:rgba(168,168,168,1);
 +
}
 +
.leftNavA2:hover,.leftNavA2:active{
 +
text-decoration: none;
 +
color: rgba(35,35,35,1);
 +
}
 +
.menu-active,.menu-active:focus{
 +
text-decoration: none;
 +
color: rgba(35,35,35,1);
 +
text-decoration: none;
 +
}
 +
</style>
 +
<script>
 +
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
$(".leftNav").css({"position":"absolute","top":0.3*winWidth});
 +
$(window).resize(function(){
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var leftNavFromTop=0.3*winWidth-$(window).scrollTop();
 +
if (leftNavFromTop<0.1*winWidth){
 +
$(".leftNav").css({"position":"fixed","top":0.1*winWidth});
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":0.3*winWidth});
 +
}
 +
});
 +
 +
$(window).scroll(function(){
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var leftNavFromTop=0.3*winWidth-$(window).scrollTop();
 +
if (leftNavFromTop<0.1*winWidth){
 +
$(".leftNav").css({"position":"fixed","top":0.1*winWidth});
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":0.3*winWidth});
 +
}
 +
});
 +
$(".leftNav a").click(function () {
 +
$('html, body').animate({
 +
scrollTop: $($.attr(this, 'href')).offset().top
 +
}, 500);
 +
return false;
 +
});
 +
 +
 +
    $(window).scroll(function(){
 +
var currentScroll=$(this).scrollTop();
 +
var $currentSection;
 +
var firstHeight=$("#firstDiv").height();
 +
$('.leftNavA2').each(function(){
 +
var hePoint=$($(this).attr("href"));
 +
var divPosition=hePoint.offset().top;
 +
if (divPosition-1<currentScroll){
 +
$currentSection=$(this);
 +
}
 +
if (currentScroll>firstHeight){
 +
                $('.leftNavA2').removeClass('menu-active');
 +
                $currentSection.addClass('menu-active');
 +
}
 +
})
 +
});
 +
 +
</script>
 +
 +
 +
<style>
 +
#firstDiv{
 +
width: 100%;
 +
height: 22vw;
 +
overflow: hidden;
 +
position: relative;
 +
z-index: 5;
 +
}
 +
#firstDiv img{
 +
filter: brightness(0.6);
 +
position: relative;
 +
width: 101%;
 +
top:50%;
 +
left:50%;
 +
transform: translateX(-50%) translateY(-53%);
 +
}
 +
    .fiName{
 +
color: white;
 +
font-family:Allura,_Allura;
 +
font-size: 5vw;
 +
font-weight: 600;
 +
position: absolute;
 +
top:15vw;
 +
right: 12vw;
 +
}
 +
.pSentence{
 +
color: white;
 +
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
 +
font-size: 1.2vw;
 +
font-weight: 400;
 +
position: absolute;
 +
top:18vw;
 +
right: 12vw;
 +
text-align: right;
 +
}
 +
</style>
 +
 +
 +
<style>
 +
.theAnchor{
 +
position: absolute;
 +
top:-25vh;
 +
}
 +
.mainWords{
 +
margin-left: 26vw;
 +
margin-top: 136px;
 +
margin-bottom: 85px;
 +
margin-right: 9vw;
 +
background-color: white;
 +
}
 +
a.contentLink,.contentLink:hover,.contentLink:focus,.contentLink:active,.contentLink:visited{
 +
text-decoration: none;
 +
}
 +
a.contentLink{
 +
font-weight: 900;
 +
font-family: "Quicksand Medium",_Quicksand;
 +
color:rgba(130,166,245,1);
 +
}
 +
a.contentLink:hover{
 +
color:royalblue;
 +
}
 +
 +
.mainTitle1{
 +
margin:100px 0;
 +
font-family:"Verlag Book",_VerlagBook,Arial,Helvetica;
 +
font-size: 40px;
 +
text-transform:uppercase;
 +
color:rgba(29,176,186,1);
 +
position: relative;
 +
}
 +
.mainTitle1:before{
 +
content: "";
 +
width: 340px;
 +
height: 3.4px;
 +
background:rgba(29,176,186,1);
 +
display: inline-block;
 +
position: absolute;
 +
top:54px;
 +
}
 +
.mainTitle2{
 +
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
 +
font-size: 34px;
 +
color: rgba(73,90,128,1);
 +
margin: 10px 0 25px 0;
 +
position: relative;
 +
}
 +
.mainTitle3{
 +
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 +
font-size: 25px;
 +
color: black;
 +
margin-bottom: -15px;
 +
margin-top: 70px;
 +
}
 +
.mainContents{
 +
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
 +
font-size: 21px;
 +
line-height: 28px;
 +
color: rgba(1,5,15,1.00);
 +
text-align:justify;
 +
margin-bottom: 85px;
 +
}
 +
.centerImg{
 +
width:50%;
 +
transform: translateX(-50%);
 +
position: relative;
 +
left:50%;
 +
}
 +
.mainContents span.bf{
 +
font-weight: 900;
 +
}
 +
.imgState{
 +
text-align: center;
 +
margin: 2vw 0;
 +
}
 +
.imgState>img{
 +
width: 40%;
 +
margin: 0 30px;
 +
}
 +
.figureNum{
 +
font-weight: 600;
 +
}
 +
.imgState>div{
 +
color: grey;
 +
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
 +
font-size: 17px;
 +
margin: 20px 0;
 +
}
 +
.duanjian{
 +
margin: 5px 0;
 +
display: inline-block;
 +
}
 +
</style>
 +
  
 
</html>
 
</html>

Revision as of 01:37, 18 October 2018

Software
"There are 10 kinds of persons, one knows binary and the other does not know."
Overview
Our software consists of several parts.
For the model, we developed a website Graphical User Interface named VisualSTEP that allows the user to adjust the parameters autonomously and it can display the simulation results of the model in real time. This can help others understand our model in depth and freely explore how our STEP system works.
For general biological experiments, we developed a user-friendly biological parameter calculator, which can be applied in several kinds of biology reactions, to minimize the burden of life science researchers calculating parameters before carrying out experiments. These calculators have been used in our wet lab and some experiments done by some third-party users for a while, and have gained a good reputation.
VisualSTEP
We obtained several conclusions which are closely related to the results of wet lab and can provide guidance for future experiments from our model, in which the effect of protease cleavage ability on dynamic range may be the most difficult part to understand. Hence, we develop the software VisualSTEP, now begin your own exploration! You can adjust the parameters p1, p2 ,d1, d2 in our birth-death process model to find the effect of them on dynamic range. In general, p1>p2>0, d1>d2>0. Hence, the dynamic range is negatively correlated with protease cleavage ability.
p1: 
p2: 
d1: 
d2: 
Biological Parameter Calculator
we developed a user-friendly biological parameter calculator, which can be applied in several kinds of biology reactions, to minimize the burden of life science researchers calculating parameters before carrying out experiments. These calculators have been used in our wet lab and some experiments done by some third-party users for a while, and have gained a good reputation. Input the
Mole Ratio Calculator
Mode:
Mass Volume
ng
μL
Submit
bp ng/μL Result: μL
bp ng/μL Result: μL
Submit

  Address


G604, School of Life Sciences, Fudan University
2005 Songhu Road, Yangpu, Shanghai, China