Difference between revisions of "Team:Munich"

Line 1: Line 1:
−
{{Munich}}
 
 
<html>
 
<html>
 +
<head>
 +
<script src ="C:\Users\Jorge\Downloads\jquery-3.2.1.min.js"></script>
 +
  <script src = "C:\Users\Jorge\Downloadser\semantic.min.js"></script>
 +
  <link rel="stylesheet" type="text/css" href="C:\Users\Jorge\Downloads\semantic.min.css">
  
 +
<style type="text/css">
 +
.text-center{
 +
text-align: center;
 +
}
  
−
<img src="https://static.igem.org/mediawiki/2017/thumb/c/cd/Groupphoto_170504.jpeg/800px-Groupphoto_170504.jpeg">
+
h1{
−
<div class="column full_size" >
+
margin: 2.5%;
−
<h3> Welcome to our wiki! </h3>
+
color: rgb(147,149,152);
−
<p>Our wiki is under construction but you can follow us on the social media!</p>
+
}
−
<p>
+
−
<a href="https://www.facebook.com/Munich.iGEM">Facebook</a>
+
−
<a href="https://www.instagram.com/igem.munich.2017 ">Instagram</a></p>
+
  
−
<br>
 
−
<p>Please contact us per email for collaboration and more: </p>
 
−
<p><a href="mailto:igem.munich%40gmail.com">igem.munich@gmail.com</a></p>
 
−
</div>
 
  
 +
line{
 +
stroke: rgb(147,149,152);
 +
}
  
−
<div class=" single_footer" style="float: right;">
+
.skip-animation{
−
<a href="https://www.facebook.com/Munich.iGEM/" style="padding-left: 0.8cm;" title="facebook"><i class="fa fa-facebook-square fa-3x "></i></a>&#160;&#160;&#160;&#160;
+
background-color: rgb(0,144,239) !important;
−
<a href="https://www.instagram.com/igem.munich.2017/"  title="Instgram"><i class="fa fa-instagram fa-3x"></i> </a>&#160;&#160;&#160;&#160;
+
}
 +
 
 +
.button-container{
 +
padding-left: 25%;
 +
 +
}
 +
 
 +
.explanation-text{
 +
 +
}
 +
 
 +
.explanation{
 +
/*border-width: 30px;
 +
    border-radius: 10%; For when there is svg canvas in the divs */
 +
    border-radius: 10px;
 +
    padding: 5%;
 +
    background-color: rgb(0,144,239);
 +
    width:80%;
 +
    color: white;
 +
   
 +
}
 +
 
 +
.explanation-left{
 +
float: right;
 +
transform: translate(0,10px);
 +
}
 +
 
 +
.pretty-picture{
 +
width: 80%;
 +
height: 200px;
 +
}
 +
 
 +
.pretty-picture-container{
 +
text-align: center;
 +
 
 +
}
 +
 
 +
 
 +
.column{
 +
padding: 0 !important;
 +
}
 +
 
 +
#canvas-container{
 +
padding: 0;
 +
}
 +
 
 +
.invisible{
 +
opacity: 0;
 +
}
 +
 
 +
.appear{
 +
-webkit-animation: appear 1s linear;
 +
}
 +
 
 +
@keyframes appear {
 +
0%{
 +
opacity: 0;
 +
}
 +
 
 +
100%{
 +
opacity: 1;
 +
}
 +
}
 +
.white{
 +
-webkit-animation: white 1s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes white{
 +
0%{
 +
fill: rgb(255,149,152);
 +
}
 +
100%{
 +
fill: white;
 +
}
 +
}
 +
 
 +
 
 +
.colorPositive{
 +
-webkit-animation: colorPositive 2s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes colorPositive{
 +
0%{
 +
fill:white;
 +
}
 +
 
 +
100%{
 +
fill: rgb(100,255,0);
 +
}
 +
}
 +
 
 +
.visible{
 +
-webkit-animation: visible 1s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes visible{
 +
0%{
 +
opacity: 0;
 +
}
 +
100%{
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
.colorNegative{
 +
-webkit-animation: colorNegative 2s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes colorNegative{
 +
0%{
 +
fill: white;
 +
}
 +
 
 +
100%{
 +
fill: rgb(0,144,239);
 +
}
 +
} /* Because CSS is such a wonderful language, it is imperative to have the colorNegative definitions AFTER the visible one; otherwise the visible overwrites the colorNegative and the circles expand at the end, but don't change color.*/
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
</head>
 +
<div class="text-center">
 +
  <img src = "https://static.igem.org/mediawiki/2017/thumb/a/af/T--Munich--Logo_Final.svg/739px-T--Munich--Logo_Final.svg.png" alt="CascAID">
 +
  </div>
 +
  <h1 class="text-center text">
 +
     
 +
The over-prescription of antibiotics, due to the difficulty of distinguishing between viral and bacterial infections, leads to the growing problem of multi-resistent pathogens. To remedy this issue we have developed CasAID (Cas13a controlled Assay for Infections Diseases). Combining a novel RNA detection mechanism, revolving around the Cas13a CRISPR effector, with a cleverly designed paper-based microfluidis device, we created a cheap and easy-to-use diagnostic tool. In the near future we hope to optimize and customize our design, so that it can be regularly used not only in developing countries, but also in developed, to seepd up their process and some day even in houshodls   
 +
  </h1>
 +
<div class="ui grid equal width">
 +
 
 +
  <div class="column" >
 +
 
 +
  <div class="explanation explanation-left invisible" id="tip1">
 +
  <p class="explanation-text">
 +
  Step 1: Take saliva from the the patient since both pathogens of interest, bacteria and virus can occur.
 +
</p>
 +
<!--<div class="pretty-picture-container">
 +
<svg class="pretty-picture">
 +
<rect width="500" height="500" />
 +
</svg>
 +
</div>-->
 +
</div>
 +
 +
 
 +
<div class="explanation explanation-left invisible" id="tip3">
 +
  <p>
 +
  Step 3: Cas13a binds the target sequence, degrading it. After this inital digestion, the enzyme becomes activated.
 +
</p>
 +
<!--<div class="pretty-picture-container">
 +
<svg class="pretty-picture">
 +
<rect width="500" height="500" />
 +
</svg>
 +
</div>-->
 +
 
 +
</div>
 +
 +
<div class="explanation explanation-left invisible" id="tip5" style="margin: 0 0 0 0">
 +
  <p>
 +
  Step 5: A colorful, easy to interpret read-out tells whether a specific pathogen was present in the sample.
 +
</p>
 +
<!--<div class="pretty-picture-container">
 +
<svg class="pretty-picture">
 +
<rect width="500" height="500" />
 +
</svg>
 +
</div>-->
 +
 
 +
</div>
 +
 
 +
  </div>
 +
 
 +
 +
<div id="canvas-container" >
 +
<svg id="svg-canvas" height="2000" >
 +
 
 +
<circle fill="rgb(147,149,152)" id="top-circle" class="circle" />
 +
 +
 +
 +
<line class="line-vertical" id="top-line" y1="-3"/>
 +
<line class="line-vertical" id="bottom-line1" y1="-1"/>
 +
<line class="line-vertical" id="bottom-line2" y1="-1"/>
 +
<line class="line-vertical" id="bottom-line3" y1="-1"/> <!-- It is important to put the bottom lines before the rect so the latter covers any gaps appearing due to rounding erros -->
 +
 
 +
<rect fill="rgb(0,144,239)" id="device-body" fill="rgb(147,149,152)"/>
 +
 
 +
<line class="line-horizontal" id="horizontal-line1"/>
 +
<line class="line-horizontal" id="horizontal-line2"/>
 +
 
 +
<line class="line-vertical" id="bottom-line4" y1="-1"/>
 +
<line class="line-vertical" id="bottom-line5" y1="-1"/>
 +
 
 +
<circle fill="rgb(147,149,152)" id="bottom-circle1" class="circle" />
 +
<circle fill="rgb(147,149,152)" id="bottom-circle2" class="circle" />
 +
<circle fill="rgb(147,149,152)" id="bottom-circle3" class="circle" />
 +
 
 +
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle2"  />
 +
<line class="tooltip-line" id="tooltip-line2" style="stroke: rgb(147,149,152);" />
 +
 
 +
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle3"  />
 +
<line class="tooltip-line" id="tooltip-line3" style="stroke: rgb(147,149,152);" />
 +
 
 +
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle4"  />
 +
<line class="tooltip-line" id="tooltip-line4" style="stroke: rgb(147,149,152);" />
 +
 
 +
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle5"  />
 +
<line class="tooltip-line" id="tooltip-line5" style="stroke: rgb(147,149,152);" />
 +
 
 +
<circle class="pulse" fill="rgb(255,149,152)" id="pulse" />
 +
<circle class="sample" fill="rgb(255,149,152)" id="sample" />
 +
 
 +
<circle class="invisible pulse" fill="white" id="pulse2" />
 +
<circle class="invisible sample"  fill="white" id="sample2" />
 +
 
 +
<circle class="invisible pulse"  fill="white" id="pulse3" />
 +
<circle class="invisible sample"  fill="white" id="sample3" />
 +
 
 +
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle1"  />
 +
<line class="tooltip-line" id="tooltip-line1" /> <!-- The first tooltip and circle are put here so they are on top of the sample -->
 +
</svg>
 +
</div>
 +
<div class="column" >
 +
<div class="button-container">
 +
<button onclick="skipAnimation()" class="ui primary button skip-animation">
 +
  Skip Animation
 +
</button>
 +
</div>
 +
<div class="explanation explanation-right invisible" id="tip2">
 +
<p>
 +
Step 2: RNA is purified with the help of our reusable, 3D-printed microfluidic device.
 +
</p>
 +
<!--<div class="pretty-picture-container">
 +
<svg class="pretty-picture">
 +
<rect width="500" height="500" />
 +
</svg>
 +
</div>-->
 +
 
 +
</div>
 +
<div class="explanation explanation-right invisible" style="margin: 0 0 0 0" id="tip4">
 +
<p>
 +
  Step 4: Once activated, Cas13a changes into a RNAase-active conformation and degrades the read-out RNAp, producing a visible product.
 +
</p>
 +
<!--<div class="pretty-picture-container">
 +
<svg class="pretty-picture">
 +
<rect width="500" height="500" />
 +
</svg>
 +
</div>-->
 +
 
 +
</div>
 +
  </div>
 +
 
</div>
 
</div>
 +
<script type="text/javascript">
 +
//This script configures the svg-image to have a proportional size relative to the window-size
 +
var canvaswidth = screen.width*0.267;
 +
 +
 +
var devicewidth = canvaswidth*0.185; //Defining the width of the deviece-rectangle, around which the whole desing is based.
 +
 +
//$(".column").css("width",0.3665*screen.width);
 +
 +
 +
$("#svg-canvas").attr("width",canvaswidth+''); //The Width of the canvas is defined
 +
 +
var circleradius = devicewidth*0.5;
 +
$(".circle").attr("r",circleradius); //The radius of the circles are defined.
 +
$("#top-circle").attr("cx",canvaswidth*0.5+'');
 +
var cycircle = 200;
 +
$("#top-circle").attr("cy",cycircle+''); //The position of the top-circle is defined.
 +
 +
$("#sample").attr("r",circleradius);
 +
$("#sample").attr("cx",canvaswidth*0.5);
 +
$("#sample").attr("cy",cycircle); //The sample circle is defined.
 +
 +
$("#pulse").attr("r",circleradius*0.04);
 +
$("#pulse").attr("cx",canvaswidth*0.5);
 +
$("#pulse").attr("cy",cycircle); //The inital size and position of the pulse circle are defined.
 +
 +
var linewidth = devicewidth*0.08;
 +
$("line").css("stroke-width",linewidth+''); //The width of the lines is defined.
 +
var linelength = devicewidth*1.2;
 +
$(".line-vertical").attr("y2",linelength+1+''); //The length of the vertical lines is defined. +1 is needed due to roundig errors.
 +
$("#top-line").css("transform","translate("+canvaswidth*0.5+"px,"+(cycircle+circleradius)+"px)"); //The top line is correctly positioned.
 +
 +
var deviceheight = 800;
 +
$("#device-body").attr("width",devicewidth);
 +
$("#device-body").attr("height",deviceheight);
 +
$("#device-body").attr("x",(canvaswidth-devicewidth)*0.5+'');
 +
$("#device-body").attr("y",cycircle+circleradius+linelength+''); //The width and position of the device-rectangle are defined.
 +
 +
$("#sample2").attr("r",parseInt(circleradius*0.15));
 +
$("#sample2").attr("cx",canvaswidth*0.5);
 +
$("#sample2").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight));
 +
$("#pulse2").attr("r",circleradius*0.04);
 +
$("#pulse2").attr("cx",canvaswidth*0.5);
 +
$("#pulse2").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight));
 +
 +
$("#sample3").attr("r",parseInt(circleradius*0.15));
 +
$("#sample3").attr("cx",canvaswidth*0.5);
 +
$("#sample3").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight));
 +
$("#pulse3").attr("r",circleradius*0.04);
 +
$("#pulse3").attr("cx",canvaswidth*0.5);
 +
$("#pulse3").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight)); //Defining the two other circles that will show later in the animation.
 +
 +
 +
 +
$("#bottom-line1").css("transform","translate("+parseInt(canvaswidth*0.5-0.3*devicewidth)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)");
 +
 +
$("#bottom-line2").attr("y2",linelength*2); //The line of the seconds line is increased
 +
$("#bottom-line2").css("transform","translate("+(canvaswidth*0.5)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)");
 +
 +
$("#bottom-line3").css("transform","translate("+parseInt(canvaswidth*0.5+0.3*devicewidth)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)"); //The position of the three bottom lines is defined.
 +
 +
var linelengthHor = linelength;
 +
$(".line-horizontal").attr("x2",linelengthHor);
 +
$("#horizontal-line1").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+0.5*linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)");
 +
$("#horizontal-line2").css("transform","translate("+(parseInt(canvaswidth*0.5+0.3*devicewidth)-0.5*linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)"); //The two horizontal lines are defined and positioned.
 +
 +
$("#bottom-line4").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)");
 +
$("#bottom-line5").css("transform","translate("+(parseInt(canvaswidth*0.5+0.3*devicewidth)+linelengthHor-linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)"); //The two other vertical lines positioned.
 +
 +
$("#bottom-circle1").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth)+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)");
 +
$("#bottom-circle2").css("transform","translate("+canvaswidth*0.5+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)");
 +
$("#bottom-circle3").css("transform","translate("+(parseInt(canvaswidth*0.5+0.3*devicewidth)+linelengthHor-linewidth)+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)"); //The three bottom circles are positioned.
 +
 +
var tooltipradius = circleradius*0.20;
 +
$(".tooltip-circle").css("stroke-width",linewidth*0.8);
 +
$(".tooltip-circle").attr("r",tooltipradius); //The radius of the tooltip circles is defined.
 +
 +
$("#tooltip-circle1").attr("cx",canvaswidth*0.5-0.8*circleradius+3);
 +
$("#tooltip-circle1").attr("cy",cycircle); //The position of the first tooltip circle is defined.
 +
$("#tooltip-circle2").attr("cx",canvaswidth*0.5+0.8*circleradius-3);
 +
$("#tooltip-circle2").attr("cy",cycircle+circleradius+linelength+0.20*deviceheight);
 +
$("#tooltip-circle3").attr("cx",canvaswidth*0.5-0.8*circleradius+3);
 +
$("#tooltip-circle3").attr("cy",cycircle+circleradius+linelength+0.5*deviceheight);
 +
$("#tooltip-circle4").attr("cx",canvaswidth*0.5+0.8*circleradius-3);
 +
$("#tooltip-circle4").attr("cy",cycircle+circleradius+linelength+0.8*deviceheight);
 +
$("#tooltip-circle5").attr("cx",(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth-circleradius+tooltipradius+3));
 +
$("#tooltip-circle5").attr("cy",(cycircle+deviceheight+3*linelength+2*circleradius));
 +
 +
var tooltiplinelength = canvaswidth*0.5;
 +
$(".tooltip-line").css("stroke-width",linewidth);
 +
$(".tooltip-line").attr("x2",tooltiplinelength); //The width and length of the tooltip lines are defined.
 +
 +
 +
 +
 +
$("#tooltip-line1").css("transform","translate("+(canvaswidth*0.5-circleradius-tooltiplinelength+3)+"px,"+cycircle+"px)");
 +
$("#tooltip-line1").attr("x1",tooltiplinelength);
 +
 +
$("#tooltip-line2").css("transform","translate("+(canvaswidth*0.5+circleradius-3)+"px,"+(cycircle+circleradius+linelength+0.20*deviceheight)+"px)");
 +
$("#tooltip-line2").attr("x2",0);
 +
 +
$("#tooltip-line3").css("transform","translate("+(canvaswidth*0.5-circleradius-tooltiplinelength+3)+"px,"+(cycircle+circleradius+linelength+0.5 *deviceheight)+"px)");
 +
$("#tooltip-line3").attr("x1",tooltiplinelength);
 +
 +
$("#tooltip-line4").css("transform","translate("+(canvaswidth*0.5+circleradius-3)+"px,"+(cycircle+circleradius+linelength+0.80*deviceheight)+"px)");
 +
$("#tooltip-line4").attr("x2",0);
 +
$("#tooltip-line5").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth-circleradius+3-tooltiplinelength)+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)");
 +
$("#tooltip-line5").attr("x1",tooltiplinelength); //Depending whether the line point right or left, either x1 or x2 is changed to match the other value so the inial length of the lines is 0, rendering them invisible. This is later changed through the extendLine() function.
 +
 +
//Here we configure the tip boxes with javascript, because CSS sucks.
 +
 +
var heightexplanation = parseInt($(".explanation").css("height"));
 +
 +
 +
$("#tip1").css("transform","translate(0,"+(cycircle-heightexplanation*0.5)+"px)");
 +
$("#tip2").css("transform","translate(0,"+((cycircle+circleradius+linelength+0.2*deviceheight)-0.8*heightexplanation)+"px)");
 +
$("#tip3").css("transform","translate(0,"+(((cycircle+circleradius+linelength+0.5*deviceheight)-heightexplanation*0.5)-heightexplanation)+"px)");
 +
$("#tip4").css("transform","translate(0,"+(((cycircle+circleradius+linelength+0.80*deviceheight))-1.7*heightexplanation)+"px)");
 +
$("#tip5").css("transform","translate(0,"+((cycircle+deviceheight+3*linelength+2*circleradius)-2.5*heightexplanation)+"px)");
 +
 +
 +
////////////////////////////////////////////////////////////////
 +
//   //
 +
//   //
 +
// STARTING HERE, THE ANIMATIONS ARE DEFINED.   //
 +
//   //
 +
//   //
 +
////////////////////////////////////////////////////////////////
 +
 +
var animatinoCounter = 0; //This counter saves the number of animation that have already been triggered. If an animation is not triggering, check if the counter-count is done propertly.
 +
var accu = 0;
 +
 +
$(window).on("scroll",checkPosition); //Checks on every scroll whether a certain animation should be triggered or not.
 +
 +
var finalshrink = parseInt(circleradius*0.15); //This variable is here so the shrink function doesn't have to evaluate parseIn(etc) every single time.
 +
 +
var triggerleftLine = parseInt(circleradius); //This variable is responsible for timely triggering the appearence of the left tips. The reason it's circleratidus is simply due to the the way x2 from the first tooltip-line is positioned (circleradius left from canvas start).
 +
 +
var startMovement = false; //This variable is the responsible for triggering the first moveCircleY. It's declared here so it is within scoope of all functions.
 +
 +
var triggerrightLine = parseInt(canvaswidth*0.5-circleradius); //This variable is responsible for timely triggering the appearence of right tips. The reason it's canvaswidth*etc is simply due to the way the intended lenght of the line was calculated.
 +
 +
var endstep1 = parseInt(cycircle+linelength+circleradius+0.1*deviceheight); //This variable tells the first set of animations where they should end.
 +
var endstep2 = parseInt(endstep1+0.25*deviceheight);  //This variable tells the second set of animations where they should end.
 +
var endstep3 = parseInt(endstep2+0.30*deviceheight);
 +
 +
var endstep4 = parseInt(endstep3+0.25*deviceheight);
 +
 +
var endstep5 = parseInt(endstep4 +linelength +0.1*deviceheight);
 +
 +
var endstep6 = parseInt(endstep5 + linelength + circleradius);
 +
 +
function checkPosition(){
 +
var yOffSet = window.pageYOffset;
 +
if(animatinoCounter == 0 && yOffSet > 0){ //First animation-round: circle shrinks, first tip appears and circle moves to inside the device
 +
animatinoCounter = 1;
 +
var id = setInterval(function(){
 +
shrink("sample",id,finalshrink);
 +
startMovement = $("#sample").attr("r") == finalshrink; //After every call of shrink, startMovement is refreshed to check if the trigger condition is already met.
 +
},50); //The shrinking is triggered immediatly after scrolling down.
 +
 +
 +
 +
 +
var id2 = setInterval(function(){
 +
if(startMovement){
 +
moveCircleY("sample",id2,endstep1);
 +
moveCircleY("pulse",id2,endstep1);
 +
}
 +
},10); //Once the shrinking is done, both the sample and pulse start moving down.
 +
 +
var id32 = setInterval(function(){
 +
if(startMovement){
 +
accu++;
 +
pulse("pulse",accu,id32,20,$("#sample3").attr("cx") == parseInt(canvaswidth*0.5+0.3*devicewidth)); //$("#sample").attr("cy") == endstep3
 +
 +
}
 +
},50); //After the shrinkage is done, the pulsing starts. Doesn't end.
 +
 +
appear("tooltip-circle1");
 +
var id3 = setInterval(function(){
 +
extendLineLeft("tooltip-line1",(triggerleftLine-3),id3);
 +
if($("#tooltip-line1").attr("x1") == triggerleftLine){
 +
appear("tip1");
 +
 +
};
 +
},10);
 +
}
 +
 +
if(animatinoCounter == 4 && yOffSet > 100 ){ //Second round of animation: circle turns white, goes down and second tip appears
 +
animatinoCounter = 5;
 +
var id = setInterval(function(){
 +
moveCircleY("sample",id,endstep2);
 +
if($("#sample").attr("cy") >= (cycircle+circleradius+linelength+0.20*deviceheight));{
 +
clearcolor("sample");
 +
}
 +
},10);
 +
 +
var id2 = setInterval(function(){
 +
moveCircleY("pulse",id2,endstep2);
 +
if($("#pulse").attr("cy") >- (cycircle+circleradius+linelength+0.20*deviceheight));{
 +
clearcolor("pulse");
 +
}
 +
},10);
 +
 +
appear("tooltip-circle2");
 +
var id3 = setInterval(function(){
 +
extendLineRight("tooltip-line2",triggerrightLine+4,id3);
 +
if($("#tooltip-line2").attr("x2") == (triggerrightLine+4)){
 +
appear("tip2");
 +
 +
};
 +
},10);
 +
 +
}
 +
 +
if(animatinoCounter == 7 && yOffSet > 200){ //Third round of animations: Third tip appears and circle past the mid point and stips 3/4 of the device length
 +
animatinoCounter = 8;
 +
var id = setInterval(function(){
 +
var id22;
 +
moveCircleY("sample",id,endstep3);
 +
},10);
 +
 +
var id2 = setInterval(function(){
 +
moveCircleY("pulse",id2,endstep3);
 +
},10);
 +
 +
appear("tooltip-circle3");
 +
var id3 = setInterval(function(){
 +
extendLineLeft("tooltip-line3",(triggerleftLine-3),id3);
 +
if($("#tooltip-line3").attr("x1") == triggerleftLine){
 +
appear("tip3");
 +
 +
};
 +
},10);
 +
}
 +
 +
if(animatinoCounter == 10 && yOffSet > 300){ //Fourth round of animations: circle divides into three and goes down. Fourth tip appears
 +
animatinoCounter = 11;
 +
$("#sample2").removeClass("invisible");
 +
$("#sample2").addClass("visible");
 +
$("#pulse2").removeClass("invisible");
 +
 +
 +
$("#sample3").addClass("visible");
 +
$("#sample3").removeClass("invisible");
 +
$("#pulse3").removeClass("invisible");
 +
 +
 +
 +
var id = setInterval(function(){
 +
moveCircleX("sample2",id,parseInt(canvaswidth*0.5-0.3*devicewidth),false);
 +
moveCircleX("pulse2",id,parseInt(canvaswidth*0.5-0.3*devicewidth),false);
 +
moveCircleX("sample3",id,parseInt(canvaswidth*0.5+0.3*devicewidth),true);
 +
moveCircleX("pulse3",id,parseInt(canvaswidth*0.5+0.3*devicewidth),true);
 +
 +
 +
},50);
 +
 +
var hola = false
 +
var id2 = setInterval(function(){
 +
if( $("#sample3").attr("cx") == parseInt(canvaswidth*0.5+0.3*devicewidth) && (hola || (accu % 20) - 1 == 0 )  ){
 +
hola = true;
 +
moveCircleY("sample",id2,endstep4);
 +
moveCircleY("pulse",id2,endstep4);
 +
moveCircleY("sample2",id2,endstep4);
 +
moveCircleY("pulse2",id2,endstep4);
 +
moveCircleY("sample3",id2,endstep4);
 +
moveCircleY("pulse3",id2,endstep4);
 +
}
 +
},10);
 +
var adios = false;
 +
var id3= setInterval(function(){
 +
if($("#sample3").attr("cx") >= parseInt(canvaswidth*0.5+0.3*devicewidth) && (adios || (accu % 20) - 1 == 0 )){
 +
adios =true ;
 +
 +
accu++;
 +
pulse("pulse",accu,id3,20,false);
 +
pulse("pulse2",accu, id3,20,false);
 +
pulse("pulse3",accu, id3,20,false);
 +
}
 +
},50);
 +
 +
appear("tooltip-circle4");
 +
var id3 = setInterval(function(){
 +
extendLineRight("tooltip-line4",triggerrightLine+4,id3);
 +
if($("#tooltip-line4").attr("x2") == (triggerrightLine+4)){
 +
appear("tip4");
 +
 +
};
 +
},10);
 +
 +
}
 +
 +
 +
if(animatinoCounter ==17 && yOffSet > 300){ //Fifth round of animations:
 +
animatinoCounter = 22;
 +
 +
var id = setInterval(function(){
 +
moveCircleY("sample",id,endstep5);
 +
moveCircleY("pulse",id,endstep5);
 +
moveCircleY("sample2",id,endstep5);
 +
moveCircleY("pulse2",id,endstep5);
 +
moveCircleY("sample3",id,endstep5);
 +
moveCircleY("pulse3",id,endstep5);
 +
},10);
 +
}
 +
 +
if(animatinoCounter == 28 && yOffSet > 300){
 +
animatinoCounter = 29;
 +
var id = setInterval(function(){
 +
moveCircleX("sample2",id,parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth),false);
 +
moveCircleX("pulse2",id,parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth),false);
 +
moveCircleX("sample3",id,parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth),true);
 +
moveCircleX("pulse3",id,parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth),true);
 +
},10);
 +
 +
}
 +
 +
if(animatinoCounter == 33 && yOffSet >300){
 +
animatinoCounter = 34;
 +
var id = setInterval(function(){
 +
moveCircleY("sample",id,endstep6);
 +
moveCircleY("pulse",id,endstep6);
 +
moveCircleY("sample2",id,endstep6);
 +
moveCircleY("pulse2",id,endstep6);
 +
moveCircleY("sample3",id,endstep6);
 +
moveCircleY("pulse3",id,endstep6);
 +
},10);
 +
}
 +
 +
if(animatinoCounter == 40 && yOffSet > 300){
 +
animatinoCounter = 41;
 +
var id = setInterval(function(){
 +
expandNegative("sample2",id,parseInt(circleradius)+2);
 +
},50);
 +
 +
var id2 = setInterval(function(){
 +
if(animatinoCounter == 42){
 +
expandPositive("sample",id2,parseInt(circleradius)+2);
 +
}
 +
},50);
 +
 +
var id3 = setInterval(function(){
 +
if(animatinoCounter == 43){
 +
expandNegative("sample3",id3,parseInt(circleradius)+2);
 +
}
 +
},50);
 +
appear("tooltip-circle5");
 +
var id4 = setInterval(function(){
 +
extendLineLeft("tooltip-line5",parseInt(0.33*canvaswidth),id4);
 +
if($("#tooltip-line5").attr("x1") == parseInt(0.36*canvaswidth)){
 +
appear("tip5");
 +
 +
};
 +
},10);
 +
}
 +
 +
 +
} //Triggers an animation depending on the pageYOffset, meaning the distance that has been scrolled down relative to the start of the page.
 +
 +
 +
/////////////////////////////////////////////////////////
 +
//                                                    //
 +
//        This part lets the user skip the animaiton  //
 +
//        by using the button                          //
 +
/////////////////////////////////////////////////////////
 +
 +
 +
function skipAnimation(){
 +
animatinoCounter=-99; //Just to be sure
 +
appear("tooltip-circle1");
 +
var id = setInterval(function(){
 +
extendLineLeft("tooltip-line1",(triggerleftLine-3),id);
 +
if($("#tooltip-line1").attr("x1") == triggerleftLine){
 +
appear("tip1");
 +
 +
};
 +
},10);
 +
 +
appear("tooltip-circle2");
 +
var id2 = setInterval(function(){
 +
extendLineRight("tooltip-line2",triggerrightLine+4,id2);
 +
if($("#tooltip-line2").attr("x2") == (triggerrightLine+4)){
 +
appear("tip2");
 +
 +
};
 +
},10);
 +
 +
appear("tooltip-circle3");
 +
var id3 = setInterval(function(){
 +
extendLineLeft("tooltip-line3",(triggerleftLine-3),id3);
 +
if($("#tooltip-line3").attr("x1") == triggerleftLine){
 +
appear("tip3");
 +
 +
};
 +
},10);
 +
 +
appear("tooltip-circle4");
 +
var id4 = setInterval(function(){
 +
extendLineRight("tooltip-line4",triggerrightLine+4,id4);
 +
if($("#tooltip-line4").attr("x2") == (triggerrightLine+4)){
 +
appear("tip4");
 +
 +
};
 +
},10);
 +
 +
appear("tooltip-circle5");
 +
var id5 = setInterval(function(){
 +
extendLineLeft("tooltip-line5",parseInt(0.33*canvaswidth),id5);
 +
if($("#tooltip-line5").attr("x1") == parseInt(0.36*canvaswidth)){
 +
appear("tip5");
 +
 +
};
 +
},10);
 +
 +
 +
$("#sample").attr("cy",endstep6+2);
 +
$("#sample").removeClass("white");
 +
$("#sample").css("fill","rgb(100,255,0)");
 +
$("#sample").attr("r",parseInt(circleradius)+2);
 +
$("#pulse").attr("cy",endstep6+2);
 +
$("#sample").removeAttr("id");
 +
 +
$("#sample2").attr("cx",parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth));
 +
$("#sample2").attr("cy",endstep6+2);
 +
$("#sample2").attr("r",parseInt(circleradius)+2);
 +
$("#sample2").css("fill","rgb(0,144,239)");
 +
$("#pulse2").attr("cx",parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth));
 +
$("#pulse2").attr("cy",endstep6+2);
 +
$("#sample2").removeAttr("id");
 +
$("#pulse2").removeAttr("id"); //This is a patch work solution to force stop the animation when it's cancelled while the cirlces are moving horizontally. Change if needed.
 +
 +
 +
$("#sample3").attr("cx",parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth));
 +
$("#sample3").attr("cy",endstep6+2);
 +
$("#sample3").attr("r",parseInt(circleradius)+2)
 +
$("#sample3").css("fill","rgb(0,144,239)");
 +
$("#pulse3").attr("cx",parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth));
 +
$("#pulse3").attr("cy",endstep6+2);
 +
$("#pulse3").removeAttr("id");
 +
$("#sample3").removeAttr("id"); //This is a patch work solution to force stop the animation when it's cancelled while the cirlces are moving horizontally. Change if needed.
 +
$(".sample").css("opacity","1");
 +
}
 +
 +
 +
 +
function moveCircleY(circle, id, cyfinal){
 +
var cy = parseInt($("#"+circle).attr("cy"));
 +
if( cy <= cyfinal){
 +
 +
$("#"+circle).attr("cy", cy+1);
 +
 +
} else{
 +
 +
clearInterval(id);
 +
animatinoCounter++;
 +
}
 +
} //This function thas a svg-circle and moves it vertically only towards the cyfinal position. Must be used in conjuction with setInteval().
 +
 +
function moveCircleX(circle, id, cxfinal,plus){
 +
var cx = parseInt($("#"+circle).attr("cx"));
 +
if( cx != cxfinal){
 +
if(plus == true){
 +
$("#"+circle).attr("cx",cx+1);
 +
} else {
 +
$("#"+circle).attr("cx",cx-1);
 +
}
 +
 +
} else{
 +
clearInterval(id);
 +
animatinoCounter++;
 +
}
 +
}
 +
 +
function pulse(circle,accu,id,maxr,endcondition){
 +
if(endcondition && (accu % maxr) - 1 == 0){
 +
clearInterval(id);
 +
 +
} else{
 +
$("#"+circle).css("opacity",(1-((accu % maxr)/100)+''));
 +
$("#"+circle).attr("r",(2 + (accu % maxr))+'');
 +
}
 +
 +
 +
 +
 +
 +
} //This function takes a circle and changes periodically its opacity and radius. An accumualtor is needed for it to work propertly.
 +
 +
function shrink(circle, id, rfinal){
 +
var r = parseInt($("#"+circle).attr("r"));
 +
if(r != rfinal){
 +
$("#"+circle).attr("r",r-1);
 +
} else {
 +
clearInterval(id);
 +
animatinoCounter++;
 +
}
 +
} //This function shrinks a circle to a final radius.
 +
 +
 +
function appear(elementId){
 +
$("#"+elementId).addClass("appear");
 +
$("#"+elementId).removeClass("invisible");
 +
} //this function makes an element gradually change its opacity to 1 by adding the appear class in css and removing the invisible class. See style for class descriptions.
 +
 +
function extendLineRight(line,finalvalue,id){
 +
var value = parseInt($("#"+line).attr("x2"));
 +
if(value != finalvalue){
 +
$("#"+line).attr("x2",value+1);
 +
} else {
 +
clearInterval(id);
 +
}
 +
} //This function extends a line by increasing the x2 value until the final value is reached. To be used in conjuction with setInterval.
 +
 +
function extendLineLeft(line,finalvalue,id){
 +
var value = parseInt($("#"+line).attr("x1"));
 +
if(value != finalvalue){
 +
$("#"+line).attr("x1",value-1);
 +
} else {
 +
clearInterval(id);
 +
 +
}
 +
} //This function extends a line by decreasing the x1 value until the final value is reached. To be used in conjuction with setInterval.
 +
 +
function clearcolor(circle){
 +
$("#"+circle).addClass("white");
 +
} //This function changes the color of an Element to white using css transitions. See white class for class definition.
 +
 +
function animation(){
 +
expand("sample");
 +
}
 +
 +
function expandNegative(circle,id,rfinal){
 +
$("#"+circle).addClass("colorNegative");
 +
var r = parseInt($("#"+circle).attr("r"));
 +
if(r != rfinal + 1 ){
 +
 +
$("#"+circle).attr("r",r+1);
 +
} else {
 +
clearInterval(id);
 +
animatinoCounter++;
 +
}
 +
}
  
 +
function expandPositive(circle,id,rfinal){
 +
$("#"+circle).addClass("colorPositive");
 +
var r = parseInt($("#"+circle).attr("r"));
 +
if(r != rfinal + 1 ){
 +
 +
$("#"+circle).attr("r",r+1);
 +
 +
} else {
 +
clearInterval(id);
 +
animatinoCounter++;
  
 +
}
 +
}
 +
</script>
 
</html>
 
</html>

Revision as of 16:38, 29 June 2017

CascAID

The over-prescription of antibiotics, due to the difficulty of distinguishing between viral and bacterial infections, leads to the growing problem of multi-resistent pathogens. To remedy this issue we have developed CasAID (Cas13a controlled Assay for Infections Diseases). Combining a novel RNA detection mechanism, revolving around the Cas13a CRISPR effector, with a cleverly designed paper-based microfluidis device, we created a cheap and easy-to-use diagnostic tool. In the near future we hope to optimize and customize our design, so that it can be regularly used not only in developing countries, but also in developed, to seepd up their process and some day even in houshodls